Understanding the Screen Designer

The Screen Designer allows you to customize screens that have been added to the visual design. It contains two main sections: Device Screen and Assigned Commands, which will be discussed here.

Device Screen

The device screen simulates how the screen will appear on a real device. All elements, items, and resources (components) appear in the order in which they are listed in the Inspector view. Components can be dragged to new locations in the Inspector to change display order.

Hovering over a component highlights it with a dashed line. Clicking the component selects and highlights it with a solid line. Clicking editable areas within a selected component (as shown with a moving dashed line) allows inline editing of the selected area. Noneditable sections of components cannot be modified inline but usually can still be selected. As always, properties of the selected object appear in the property sheet.

New components can be dragged and dropped directly to the desired location of the device screen. Only components that are valid for the screen type are added. Appropriate elements and items can be added to existing components (for example, Choice Element objects can be added to existing Choice Group objects). Trying to add a component not supported by the screen/object shows a standard Not Allowed icon.

Assigned Commands

This portion of the Screen Designer shows all transition sources attached to the screen by the user. The box may be selected to see the transaction source's properties in the Properties dialog box. Additionally, you can open the transaction target in the Screen Designer by clicking its name in each of these command boxes.

This list has a subsection for item commands as well. These commands appear only when you are editing a list screen; one Item Command box is displayed for each list element. They function in the same way as normal Assigned Commands boxes.

Toolbar

The Screen Design toolbar has a combo box containing all screens added to the visual design. Selecting a screen from this drop-down menu displays the screen in the Screen Designer.

Also in the toolbar is a Zoom icon. This simply increases the viewable size of all components in the screen within the IDE.