Customizing the User Interface in DevExpress ExpressApp Framework (XAF): Main Blocks

The DevExpress ExpressApp Framework (XAF) is a powerful platform for building business applications with a rich and intuitive user interface. XAF provides a wide range of tools and techniques for customizing the UI of XAF applications, allowing developers to create applications that meet the specific needs of their users. In this article, we will explore the main blocks of UI customization in XAF.

Main Blocks: (In no specific order)

Views. XAF provides a range of built-in views, such as DetailView and ListView, which can be customized to meet specific needs of the application. Developers can also create custom views by inheriting from existing views and overriding their methods and properties. The most widely used (at least in our Team) for UI Customizations is the DashboardView.

ViewItems. Used to represent individual pieces of data or functionality within a larger user interface. XAF provides a range of built-in ViewItems, such as PropertyEditors and LabelViewItems.

Actions. Used to execute commands within XAF views, such as saving or deleting data.

Property Editors. Used to display and edit data within XAF views.
List Editors. Used to display collections of data within XAF views.

Templates. Templates are used to define the layout and appearance of XAF views.

Themes. Used to define the overall look and feel of XAF applications.

XAF provides a range of built-in Views, ViewItems, Actions, Property Editors and Themes which can all be customized or extended to meet specific needs of the application.

By combining these blocks, developers can create powerful and intuitive user interfaces for XAF applications. In the following sections, we will explore each block in more detail.

We will skip Views, Actions and Themes as they are widely understood by the XAF community and are modified less frequently.

Now, what exactly is a ViewItem?

A ViewItem is a UI control that is used to display and edit a specific property of an object within a view. (DetailView and DashboardView)

ViewItems are a key component of XAF’s data management system and are used extensively throughout XAF applications.

ViewItems can be used to display and edit data in a variety of ways, including text boxes, combo boxes, date pickers, check boxes, and more. They are highly customizable and can be configured to provide a wide range of features, including data validation, formatting, and more.

Here are a few examples of ViewItems Types in XAF:

Developers can also create custom ViewItems to meet specific needs of their XAF applications. Custom ViewItems can be created by inheriting from the ViewItem class and overriding its methods and properties.

What is a Property Editor?

A Property Editor is a UI control that is used to edit a specific property of an object. Property Editors are used in XAF to generate UI controls for data input and display in XAF applications.

In XAF, each Property Editor is associated with a specific data type, and it is responsible for presenting and editing data of that type. For example, the XAF framework provides built-in Property Editors for Boolean, String, Integer, Decimal, Date, and other common data types.

Property Editors in XAF are highly customizable and can be configured to present data in a way that is appropriate for the specific needs of the application. For example, Property Editors can be configured to provide drop-down lists, spin editors, calendars, and other types of UI controls to make data input and display more intuitive for users.

To customize a Property Editor you can create a custom Property Editor class that inherits from the built-in Property Editor and override its virtual methods to customize its behavior.

What is a List Editor?

A ListEditor is a UI control that is used to display and edit a list of objects. ListEditors are a key component of XAF’s data management system and are used extensively throughout XAF applications.

ListEditors can be used to display and edit lists of objects of any type, including business objects, collections, and other types of data. ListEditors in XAF are highly customizable and can be configured to provide a wide range of features, including sorting, filtering, grouping, searching, and more.

The XAF framework provides several built-in ListEditors, including GridListEditor, SchedulerListEditor, TreeListEditor, and PivotGridListEditor, each of which is optimized for displaying and editing specific types of data. For example, GridListEditor is used to display and edit tabular data, while TreeListEditor is used to display hierarchical data.

ListEditors in XAF are designed to work seamlessly with other components of the framework, such as Property Editors and Actions, to provide a comprehensive data management solution for XAF applications.

To customize a List Editor you can create a custom List Editor class that inherits from the built-in List Editor and override its virtual methods to customize its behavior.

What is a DashboardView?

Dashboard Views support multiple View Items types, meaning we can have several views in the same Window. In addition to XAF Views, the dashboard can display text blocks, images, and Action Containers. For example: StaticText, StaticImage, ActionContainerViewItem, View Items and more.

A Dashboard View maintains a collection of DashboardViewItem objects. This feature enables us to design intricate user interfaces and showcase multiple views concurrently.

What is a Template?

A Template is a reusable UI layout that can be applied to multiple views and/or components in an XAF application. Templates are a powerful feature of XAF that enable developers to create consistent, professional-looking UIs across the application.

Templates in XAF can be used to define the layout and appearance of various UI components, including views, pop-up dialogs, and navigation controls. A template can include one or more controls and can be customized with specific properties, styles, and behaviors.

XAF developers can also create custom templates to meet the specific needs of their applications.

Ok, Let’s recap:

Here are some of the ways in which the UI of XAF applications can be customized:

Custom Views: Developers can create custom views by inheriting from existing XAF views, such as DetailView or ListView, and overriding their methods and properties. Custom views can be tailored to meet specific needs of XAF applications, such as displaying custom data visualizations or integrating with third-party controls. (Not frequently used)

Custom ViewItems: Developers can create custom ViewItems by inheriting from the ViewItem class and overriding its methods and properties. Custom ViewItems can be used to display and edit custom data types or provide custom functionality within XAF views. (Frequently used)

Custom Actions: Developers can create custom Actions by inheriting from the ActionBase class and overriding its methods and properties. Custom Actions can be used to execute custom commands within XAF views or add custom buttons to the XAF UI. (Not frequently used)

Custom Property Editors: Developers can create custom Property Editors by inheriting from the PropertyEditor class and overriding its methods and properties. Custom Property Editors can be used to display and edit custom data types within XAF views. (Heavily Used)

Custom List Editors: Developers can create custom List Editors by inheriting from the built-in List Editor and override its virtual methods to customize its behavior. Custom List Editors can be used to display and edit a list of objects. (Heavily Used)

Custom Templates: Developers can create custom templates for XAF views using XAF’s Template Customization feature. Custom templates can be used to change the layout and appearance of XAF views, Popups, Navigation and Login Screen. (Frequently used)

Custom Themes: Developers can create custom themes for XAF applications using XAF’s Theme Customization feature. Custom themes can be used to change the overall look and feel of XAF applications, such as changing the color scheme or font used throughout the application. (Not frequently used)

Overall, XAF provides a wide range of tools and techniques for customizing the UI of XAF applications, allowing developers to create rich and intuitive user interfaces that meet the specific needs of their applications.

Want to see XAF UI Customizations in action?

Check this old article: https://xafmarin.com/xaf-myth-1-ui-is-not-customizable/

We definitely have to repeat the UI challenge and ask the community for new screenshots.

Until next time, XAF out!

#When you get the same questions 3 times you should write an article #NotesToSelf