Show TOC

Procedure documentationCreating a Tabbed iView Locate this document in the navigation structure

 

You can use layers to group UI components into a tabbed set of views within the iView, as in the following (runtime) example:

Tabbed iView (Tabbed iView)

Procedure

  1. Create your model with all the required UI components.

  2. From the Design board, click the Compose button in the task-panel toolbar.

  3. From the Components group of elements, drag a Layer onto the board, under the component(s) it should contain. Then drag the components into it. (By dragging components into layers, you effectively attach them into a single unit.)

  4. Repeat the last step for each layer you want to create.

  5. Click the Configure button in the task-panel toolbar.

  6. From the Navigation control drop-down list in the Layers group of attributes, choose Tabstrip.

  7. In the table at the bottom of the control panel, name each layer in the Tab name column. You can change the order of the layers using the arrow buttons at the bottom right. Layer no. 1 is at the bottom.

  8. Click the Layout tab to organize the components in your layers. Click outside all of the components to display the list of tabs at the bottom of the Configure Element task panel.

  9. The second column – with the Visible (Visible) icon – enables you to display some or all of the layers on the Layout board (it is not a runtime indication). Press Ctrl and check all of the layers, making the components appear semi-transparent. This enables you to stack them one on top of the other, aligning them to their top-left corners. For the example at the top, the Layout might look similar to the following:

    Stacked Layers (Stacked Layers)

Result

The tabs in design time may look similar to the following:

Final Design (Final Design)

Each layer represents a different tab, which the user selects to display the contents of the tab. The results in runtime are similar to those at the beginning of this section.