UI Element Overview
- 5 minutes to read
The eXpressApp Framework automatically generates a default UI based on your business model. Generally, you can use the default UI, however if it does not meet your requirements, you can customize it. To accomplish this, you should know what elements comprise the UI, and what elements you can customize, replace or add. General information about this is available in this topic. For detailed information on each element, refer to the remaining topics in this help section.
In the eXpressApp Framework, two entities define a single UI element: an actual control displayed in a UI, and an abstract entity related to it. The following pictures demonstrate abstract UI elements and corresponding controls in WinForms, ASP.NET Web and Mobile application versions.
The following list gives you summary information on UI element.
-
Defined by the Window class. It is an abstract UI element that is visually represented by a window in a WinForms application, by a web page in a Web site or by a page in a Mobile application. A Window contains information about a View to be displayed and a collection of Controllers, that are used to customize the program flow or implement end-user interaction. Controllers can execute custom code when their owner View or Window is created, for instance. They also serve as containers for Actions - abstract UI elements that allow you to extend the UI. There are actually two types of Controllers, i.e. Controller class descendants. WindowController provides access to the owner Window, which allows you to work with its Template and a View, to change or replace it. ViewController provides access to its owner View. Additionally a Window holds a Template, which is an actual control used to represent the View and Actions defined by the Controllers. In code, you can use a window’s Window.Template, Frame.View and Frame.Controllers properties to access these objects.
-
Defined by the Frame class, a base class for Window. It is also an abstract UI element, but in contrast to a window, a frame is a part of another object that manages its life cycle. For instance, Frames are used to represent nested views (in lookup, detail property editors and so on). Other than that, Frames are used for the same purpose as Windows - to present Views and Actions from Controllers using a particular Template.
-
An actual control that visualizes Windows and Frames. It can be inherited from any control, but it must implement the IFrameTemplate or IWindowTemplate interface. The eXpressApp Framework supplies templates for all default contexts of a window (frame): main form, detail form and others. Templates contain an Action Container collection and a View site. You can implement your own template for a particular context or customize an existing one.
-
Defined by the View class. It is an abstract UI element that holds information used to display data within the UI. The View class has two descendants - DetailView and ListView. A Detail View is used to display an individual object. It holds a collection of View Items that display property data or display arbitrary controls. A List View, in turn, is used to display an object collection. It holds a List Editor object that creates the actual grid control.
-
Represents a building block for a Detail View. There are a number of ViewItem class descendants that are actually used in Detail Views. These are items that present property data (Property Editors), display static information or any control you need. You can also inherit from the ViewItem class to implement your own View Item.
For additional information, refer to the How to: Implement a View Item and Implement Custom Property Editors topics.
-
This is an abstract UI element represented by one of the ActionBase class descendants. Physically, each descendant is represented by a particular UI element. For instance, SimpleAction is represented by a toolbar button in WinForms applications or by a button in ASP.NET Web and Mobile applications. When an end-user uses an interface element, e.g. clicks a toolbar button, the corresponding Action’s Execute event is raised. Handle this event to execute the required code in response to end-user actions.
Actions are displayed using Action Containers, to which they are mapped according to their ActionBase.Category property value. This mapping can then be changed by customizing the Application Model in code or using the Model Editor. An Action Container represents actions using different controls depending on Action type. For instance, an Action can be visually represented by a menu item, toolbar item, navigation control and so on.
-
Defined by a control that implements the IActionContainer interface. This control is used to display Actions bound to it. So, it can be a toolbar item container, navigation control, buttons container, etc. To customize an Action Container, access it using a template’s IFrameTemplate.GetContainers method. You can also implement your own Action Container, and add it to a template.