Customize the Application UI and Behavior 自定义应用程序UI和行为

In XAF, the business model defines the database structure and UI appearance. Changes to your persistent classes affect the UI. For example, if you add a new property to a business class, a new editor is added to the list and detail forms.

You can use the auto-generated UI or customize it according to your business requirements and scenarios. This topic describes how to customize your application's appearance and behavior.

在XAF中，业务模型定义了数据库结构和UI外观。对持久类的更改会影响UI。例如，如果您向业务类添加新属性，则列表和详细表单中将添加一个新编辑器。
您可以使用自动生成的UI，也可以根据业务需求和场景对其进行自定义。本主题描述如何自定义应用程序的外观和行为。

#Customize the Application UI Metadata

自定义应用程序UI元数据

Use Attributes in Code

在代码中使用属性

Built-in attributes allow you to edit the Application Model, create controls, and customize the business model's look and behavior (the validation, visibility, formatting of fields, etc.) in the Business Model's code. With this declarative approach, you can add only one line of code without using a designer or creating a Controller.

Apply the FieldSizeAttribute to the Testimonial's Quote string property and pass Unlimited as the attribute's parameter to replace the single-line editor with a multi-line editor.

内置属性允许您在业务模型代码中编辑应用程序模型、创建控件和自定义业务模型的外观和行为(验证、可见性、字段格式等)。使用这种声明式方法，您只需添加一行代码，而无需使用设计器或创建控制器。

将FieldSizeAttribute应用于睾丸的Quote字符串属性，并传递Unlimited作为属性的参数，将单行编辑器替换为多行编辑器。

public class Testimonial
{
    // ...
    string quote;
    [FieldSize(FieldSizeAttribute.Unlimited)]
    public string Quote {
        get { return quote; }
        set { SetProperty(ref quote, value); }
    }
    // ...
}

Run the WinForms or ASP.NET application and open the Testimonial Detail View. The following image illustrates the standard and customized UI:

运行WinForms或ASP。NET应用程序，并打开证明细节视图。下图展示了标准的和定制的用户界面:

Note

The SimpleProjectManager demo projects provide more examples of how to use this approach. This demo is installed in %PUBLIC%DocumentsDevExpress Demos 19.2ComponentseXpressApp FrameworkSimpleProjectManagerCSSimpleProjectManager.ModuleBusinessObjects.

Note that this approach adds a dependency to the XAF assemblies to your data access layer (DAL).

请注意
SimpleProjectManager演示项目提供了关于如何使用此方法的更多示例。此演示程序安装在%PUBLIC%DocumentsDevExpress演示程序19.2ComponentseXpressApp FrameworkSimpleProjectManagerCSSimpleProjectManager. module BusinessObjects。
注意，此方法将对XAF程序集的依赖项添加到数据访问层(DAL)。

Use the Model Designer

If you do not want to define the application's UI structure and behavior in your business model code, edit the application metadata (XAF - Application Model). Each project stores the metadata and its customizations as XML markup in *.xafml files. These files form the Application Model's layered structure. You can open XAFML files in the Model Editor designer, text or XML editor.

Follow the steps below to change the Customer business object's image and enable images in the navigation control via the Model Editor:

1. In the Solution Explorer, right-click the SimpleProjectManager.Module project and select Open Model Editor in the context menu or double-click the file with the XAFML extension.

2. In the Model Editor, navigate to the BOModel | Customer node in the tree and set the ImageName property to BO_Customer.
   
   使用模型设计器
   
   如果不希望在业务模型代码中定义应用程序的UI结构和行为，请编辑应用程序元数据(XAF -应用程序模型)。每个项目都将元数据及其定制作为XML标记存储在*中。xafml文件。这些文件构成了应用程序模型的分层结构。您可以在模型编辑器设计器、文本或XML编辑器中打开XAFML文件。
   
   按照以下步骤更改客户业务对象的图像，并通过模型编辑器启用导航控件中的图像:
   
   1.在解决方案资源管理器中，右键单击SimpleProjectManager。在上下文菜单中选择Open Model Editor或双击扩展名为XAFML的文件。
   
   
   2.在模型编辑器中，导航到树中的BOModel |客户节点，并将ImageName属性设置为BO_Customer。

   1. 

3. Open the XAFML file for the SimpleProjectManager.Win project, navigate to the NavigationItems node and set the ShowImages property to true.

            为SimpleProjectManager打开XAFML文件。Win项目，导航到NavigationItems节点并将ShowImages属性设置为true。

1. Repeat the previous step for the SimpleProjectManager.Web project.

2. Click Save All in the Visual Studio toolbar to save your changes.

            对SimpleProjectManager重复前面的步骤。Web项目。
             单击Visual Studio工具栏中的Save All以保存更改。

The image below illustrates the result - the navigation control displays the BO_Customer icon for Customer and default icons for other navigation items and groups.

下面的图像说明了结果——导航控件显示了客户的BO_Customer图标和其他导航项和组的默认图标。

For the WinForms and ASP.NET applications, the ShowImages option's default value (false) is defined in their XAFML files. Settings from the application projects override platform-agnostic settings. In the example above, this option was changed for both applications on the application level.

对于WinForms和ASP。在NET应用程序中，ShowImages选项的默认值(false)在其XAFML文件中定义。来自应用程序项目的设置覆盖与平台无关的设置。在上面的示例中，在应用程序级别上对两个应用程序都更改了此选项。

Note

Refer to the XAFML files in the %PUBLIC%DocumentsDevExpress Demos 19.2ComponentseXpressApp FrameworkSimpleProjectManager folder to see more customization examples.

请注意
请参考%PUBLIC%DocumentsDevExpress demo 19.2ComponentseXpressApp FrameworkSimpleProjectManager文件夹中的XAFML文件，以查看更多定制示例。

Define Custom Logic and UI Elements

定义自定义逻辑和UI元素

The Model Editor and built-in attributes allow you to change the options of UI element and control. Other customizations can be implemented only in code. For example, you can use the Controllers and Actions mechanism to replace the application's default UI parts or implement custom business logic.

模型编辑器和内置属性允许您更改UI元素和控件的选项。其他定制只能在代码中实现。例如，您可以使用控制器和操作机制来替换应用程序的默认UI部分或实现自定义业务逻辑。

A Controller is a component that you can use to change the application flow, customize UI elements, and implement custom end-user interaction. Controllers can also include Actions. Actions are displayed in the UI as interactive elements (buttons, menu items, etc.) and execute custom business logic.

控制器是一个组件，您可以使用它来更改应用程序流、自定义UI元素和实现自定义终端用户交互。控制器也可以包含动作。操作以交互元素(按钮、菜单项等)的形式显示在UI中，并执行自定义业务逻辑。

Follow the steps below to implement a SimpleAction that allows a user to mark the selected Project Tasks as completed and sets the EndDate property to the current date and time:

1. In the Solution Explorer, right-click the SimpleProjectManager.ModuleControllers folder and select Add | Class... in the context menu. Set the class name to ProjectTaskController.

2. Replace the created class code with the following:

   • 按照以下步骤实现SimpleAction，它允许用户将选择的项目任务标记为已完成，并将EndDate属性设置为当前日期和时间:
     在解决方案资源管理器中，右键单击SimpleProjectManager。模块控制器文件夹，并选择添加|类…在上下文菜单中。将类名设置为ProjectTaskController。
     用以下代码替换创建的类代码:

   using System;
   using DevExpress.Data.Filtering;
   using DevExpress.ExpressApp;
   using DevExpress.ExpressApp.Actions;
   using SimpleProjectManager.Module.BusinessObjects.Planning;
   
   namespace SimpleProjectManager.Module.Controllers {
       public class ProjectTaskController : ViewController {
           public ProjectTaskController() {
               TargetObjectType = typeof(ProjectTask);
               TargetViewType = ViewType.Any;
               SimpleAction markCompletedAction = new SimpleAction(
                   this, "MarkCompleted",
                   DevExpress.Persistent.Base.PredefinedCategory.RecordEdit){
                       TargetObjectsCriteria = 
                       (CriteriaOperator.Parse("Status != ?",ProjectTaskStatus.Completed)).ToString(),
                       ConfirmationMessage =
                               "Are you sure you want to mark the selected task(s) as 'Completed'?",
                       ImageName = "State_Task_Completed"
                   };
               markCompletedAction.Execute += (s, e) => {
                   foreach(ProjectTask task in e.SelectedObjects) {
                       task.EndDate = DateTime.Now;
                       task.Status = ProjectTaskStatus.Completed;
                       View.ObjectSpace.SetModified(task); 
                   }
                   View.ObjectSpace.CommitChanges();
                   View.ObjectSpace.Refresh();
               };
           }
       }
   }

Show the API description

The image below shows the MarkCompleted Action in the WinForms and ASP.NET applications.

显示API描述
下图显示了在WinForms和ASP中的MarkCompleted动作。网络应用程序。

The MarkCompleted Action iterates the selected objects and modifies their properties. After that, it commits changes to the database and refreshes the screen.

Alternatively, you can ...

• use the View Controller template from the Template Gallery to create a Controller. In this instance, you can add an Action in the designer instead of writing code. Refer to the Add a Simple Action topic for more information on this approach.
• implement the generic ObjectViewController<ViewType, ObjectType> Controller instead of the ViewController. For the ObjectViewController, you can specify the View's and object's type this Controller should be activated for in the generic ViewType and ObjectType parameters.
• use the ActionAttribute to create an action directly from a business class method. Refer to the Add a Simple Action using an Attribute topic for more information on this approach.MarkCompleted

操作迭代选择的对象并修改它们的属性。之后，它将更改提交到数

• 使用模板库中的"视图控制器"模板创建控制器。在这种情况下，您可以在设计器中添加操作，而不是编写代码。有关此方法的详细信息，请参阅添加简单操作主题。
• 实现通用的对象视图控制器 [视图类型，对象类型] 控制器，而不是视图控制器。对于 ObjectView 控制器，您可以在通用的 ViewType 和 ObjectType 参数中指定此控制器应激活的视图和对象类型。
• 使用 Action属性直接从 Business 类方法创建操作。有关此方法的详细信息，请参阅使用属性添加简单操作主题。标记已完成