Composing the Composite View

You define the logic of a model by adding model elements to the Design board and then defining the information flow between the elements. You add elements to a model by dragging them from the Compose task panel to the Design board. You can also add model elements by dragging out from ports of data services and other model elements that you previously added to the Design board. Additionally, you can use the standard Cut, Copy, and Paste menu options to copy part or all of the contents of one model, and paste them as a copy into the same model or as new elements into another model. After you add elements to the Design board, you define the element logic and flow, and the input and output data for each element.

Note Note

You can use the settings in the Options pane ( Tools Options ) to define certain aspects of Storyboard behavior that affect the way you compose a composite view. For example, you can choose whether to prevent overlapping shapes on the Design board and whether to snap model elements to the grid. For more information, see Options Pane in the Visual Composer Reference Guide.

End of the note.

After you have composed the composite view, you configure the composite view properties. For more information, see Configuring the Composite View.

Note Note

The information in this section regarding connector and operator elements in the Compose task panel is applicable also when you create service components.

End of the note.

Prerequisites

You have created a new model ( Model New ) or opened an existing model ( Model Open ) in Storyboard. For more information, see Creating a Model and Development Component or Opening a Model.

Procedure

From the Design board, click the Compose button in the task-panel toolbar. The elements available for composing the model are displayed in the Compose task panel.
Drag the element(s) you require from the task panel to the Design board. For a description of each of the elements, see Introducing the Compose Task Panel.

Note

If you are creating input to or output from data services that you have already added to the Design board, you can drag out from a port, and from the context menu choose an element. This is the recommended method for adding elements, since it automatically maps the data fields.

End of the note.
If you are using container elements that support multiple layers (for example Tabstrip, Wizard, and View Switch), add layers by clicking the (Add Step) icon in the relevant container. For example, you may want to add tabs to a Tabstrip container or add steps to a Wizard container. For more information, see Containers.
Connect the items as needed, by dragging from the relevant in or out ports to other elements, to create the logic and flow of the application. You can define input to data services, output from data services, and views that are connected through data binding (meaning that the same data is displayed in both elements). For more information about different connection types, see Connecting Model Elements.

Note

If you drag out from an element that includes a large number of fields, the Define Data dialog box is displayed, enabling you to choose the fields for the element, and their default values. For more information, see Defining Data.

End of the note.
If you are using nested views, open the nested view component and add Signal In and Signal Out connectors so that you can transfer input and output parameters to the nested view. For more information, see Reusing Components.
Map the data fields from the elements used as input to the fields of a data service. For more information, see Mapping Data.

Result

Your basic model is created, displaying the application logic. Now you are ready to configure each of the elements, as described in Configuring the Composite View.

Example

Your model may contain data services, views, containers, operators and other model elements, as shown in the following example:

Wizard1 (Wizard1)