Show TOC

Procedure documentationUsing Standard Layers Locate this document in the navigation structure

 

You can use layers for one part of your iViews, to enable the runtime user to "flip" between views – similar to tabs – but by means of buttons that specify the navigation. Take, for example, the iView displayed in Create Layered iViews:

Runtime View (Runtime View)

In this example, the user inputs information in a form and the results are displayed in a table. When the user selects a row in the form and the results are channeled to the second data service, the data output from two ports of the data service can be layered to display only one view at a time. Here is what the model might look like in design time:

Design Time (Design Time)

The means of navigation between the two iView are the buttons in the forms – Bank Address and Bank Details – that trigger the inter-layer navigation.

Building standard layers is, like the wizard, a matter of defining layers, creating the transitions and defining the navigation buttons.

Procedure

  1. Create and connect all the components of your iView.

  2. To create the layers for the views:

    1. Click the Compose button in the task-panel toolbar.

    2. 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.)

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

  3. Configure the layers:

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

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

    3. In the table at the bottom, enter an appropriate Layer name for each layer.

  4. Create the transitions and their triggers:

    1. From the first layer, drag the green dot at the top to the edge of the layer to which it should be connected. When the line turns red, release the mouse. A transition line called evt1 is created.

    2. In the Event name field at the top of the Configure Element task panel, rename the transition to give it a logical name that will be used to relate it to a navigation button.

    3. Repeat steps a and b for each layer, creating a transition back and forth between each layer as required.

  5. Create the navigation buttons:

    In order to trigger the transition to the component of the connected layer, you need to assign an action with the transition's event name to the control that triggers the action. You should do this on the Layout board.

    1. Create a button in the component of the first layer. You can add a button to the form by selecting the form and at the bottom of the Configure Element task panel, clicking the Add (Add) button and creating a pushbutton. Alternatively, you can create a taskbar button by using the Create Toolbar option from the right-click menu (see Create a Toolbar).

    2. For the button, define a Custom action, naming it according to the name of the transition. (For pushbuttons, this is done in the Action tab of the Control Properties dialog box, accessed by right-clicking the control on the Layout board and choosing Properties from the context menu.)

  6. Lay out the iView, also on the Layout board.

    1. In each UI component, move the navigation button to a reasonable place that is fairly consistent between the different views/layers.

    2. In the table at the middle of the Configure Element task panel, press Ctrl and in the second column – with the Visible (Visible) icon – select all the rows, in order to display the contents of all the layers. This makes the components appear semi-transparent

    3. Stack the components one on top of the other, aligning them to their top-left corners.

Result

The UI components in one layer are displayed when the button in the other layer is clicked.