Before creating an interface for AB Suite Client Framework applications, the IGraphicalInterface node must be added to an ispec, an event, an insertable, a copyispec, a copyevent, or a class. These elements are exposed as a set of corresponding DataModels that can then be used by various popular client development tools to create desktop, web, mobile, and service based applications.
Note: The IGraphicalInterface node is added automatically when you add an ispec, an event, an insertable, a copyispec, or a copyevent. However, the IGraphicalInterface node is not added automatically when you add a class. You must add the IGraphicalInterface node to the class manually. Refer to Adding IGraphicalInterface for Client Framework Applications for more information.
When the IGraphicalInterface interface node is added to the ispec or the class, the PresentationType property of the ispec or class is set to Graphical and is read-only. You can add attributes or drag attributes from an ispec definition to the ispec or class with the IGraphicalInterface interface node. The DataViewModel definitions and an empty XAML View appears for each ispec or class, which has an IGraphicalInterface interface node, when you generate the necessary Access Layer projects from the Build menu. For WP/XAML client type, the Data Sources project is also generated. You can now design the XAML View for the ispec or class that has the IGraphicalInterface interface node.
Note: The Data Sources are created in the <ApplicationName.TechnologyFolderName>.Views project.
You can now design the user interface by using the Microsoft WPF Designer in Visual Studio. To design the user interface open the Solution Explorer window, and then double-click the <IspecName or ClassName>.xaml file in the Stereotyped or Classes folder.
Note: You can design the user interface by using Microsoft WPF Designer in Visual Studio if you have set the Client Technology option to WPF.
This opens the View in the WPF Designer window along with the Common WPF Controls Toolbox and the All WPF Controls Toolbox.
You can now add attributes to the View from the corresponding Data Source or add controls from the Toolbox to design Views for a specified client technology. To access the Data Sources window, on the Views menu, point to Other Windows, and then click Data Sources.
Note: Always ensure that the View matches the corresponding Data Source from where you add the attributes.
Visit the Unisys Product Support website at www.support.unisys.com for information on designing the Views for a WPF application.
Manipulating Graphical User Controls
The following points highlight the usage of WPF Designer interface and manipulation of various graphical user controls:
The default view of WPF Designer interface contains a user control, a top-level grid control, and a canvas control. The WPF Designer shows a split view with the design view at the top and the XAML window at the bottom. The XAML window can be collapsed if required. The canvas control is the container for all other controls placed on the view. To increase the size of the design surface, you must adjust the size of the user control. You can select the user control from the Document Outline tab, and then drag the handles on the sides or the corner of the control to the desired size. Alternatively, you can set the Height and Width properties of the user control in the XAML. You can search any control by using the Document Outline tab. The Document Outline tab displays a hierarchy of all the user controls for a selected <IspecName or ClassName>.xaml.
The WPF graphical user controls that are added to the View from a Data Source appears in a composite grid control containing a label and a user control, which is automatically bound to an attribute in ViewModel. If you do not need the label automatically created, you can drag the user control outside the grid and then delete the grid containing the label. You can change the position of a control, or multiple controls, incrementally by pushing the selected object with the Up, Down, Left, or Right arrow keys. Select one or more controls and press the appropriate arrow key.
To associate a control with a grid, select the control and drag it onto the grid. A blue highlighted text, “Press Alt to place inside [Grid]” appears on the interface. Now, you can press the Alt key and the control is associated with the new grid.
You can make one or more graphical controls invisible on a view at runtime. To do this, set the Visibility property of a user control to Hidden or Collapsed.
The Properties Editor in the WPF Designer can be used to configure the properties of a user control. In some instances, you might need to access the advanced options for a specific property such as, DataBinding. These advanced properties can be identified by a small square towards the right of the property. You can click this square to select the required option from the context menu.
An image control can be optionally dynamic and a Convertor is required to resolve the location and type of the image control for dynamic controls.
The user controls that are grouped together to represent one attribute are called Group User Controls. The graphical user controls, such as button, checkbox, and radio button are called Group User Controls. All buttons in a group user control can be associated with an attribute. For example, check boxes can be used for selecting answers to multiple choice questions.
Combo box and list box controls can be bound to a ListModel that is generated from a List attribute in System Modeler. The ListModel is created when the Access Layer is generated and is available as a ViewModel in the ViewModels project. You can then bind the ItemsSource property of the combo box or list box to the ListModel. At runtime, the list sent from the AB Suite system is displayed in the combo box or list box.
All Copy.From fields are generated as a CopyFromItems collection that can be bound to a DataGrid control type, so you do not need to place each copied field separately on the View.