Containers enable you to group model elements to define which view elements are visible to users at specific times in the application, and also to enable you to change the visible view elements according to user actions in the application. For example, you can use a wizard container to display view elements in numbered and layered boxes, as sequential steps to navigate between layers. You can also use a popup container to display view elements in a modal popup window. Depending on the container type, transition lines may be required to define the navigation between containers or container layers.
You add containers to your model by dragging them from the Compose task panel to the Design board. You can then drag views and other elements into the containers (either on the Design board or the Layout board).
You can use multiple container types in a model, and you can also nest containers of the same or different types within each other. For example, you may want to:
Add a Tabstrip container with a nested Popup container that opens when you click a button in a tab
Add a Tabstrip container within a wizard page
Nest two panels within a Panel container so that you can define a different layout for each nested panel
The following table lists the containers that are available when building your composite view component:
Name |
Icon |
Description |
---|---|---|
Panel |
(Panel) |
A generic container used to create complex layouts. You can use Panel containers to assign different properties to content that is grouped in each panel. For example, you may want to arrange one set of view elements using a vertical flow, and another set of view elements using a horizontal flow. In this case, you could place each set of elements in a separate Panel container. |
Tabstrip |
(Tabstrip) |
A set of labeled tabs that enables navigation between content layers. Tabstrip containers enable you to group model elements into different tabs. The runtime user displays each content group by selecting the relevant tab. |
Wizard |
(Wizard) |
A container that uses sequential labeled steps to represent different content layers. The runtime user navigates between content layers using toolbar buttons or by clicking the step labels at the top of the Wizard container. |
View Switch |
(View Switch) |
A simple container that displays one content layer at a time, with no navigation selector. The View Switch container enables the runtime user to "flip" between views - similar to tabs - but by means of buttons that specify the navigation. The UI elements in one View Switch layer are displayed when the button in another View Switch layer is clicked. |
Popup |
(Popup) |
A container that displays its content in a popup window. For more information, see Defining Popups. |