Adding Tabstrips to the UI Component

Context

In this procedure, you clean up the user interface of the running client application by introducing tabstrips to separate the display of header and item tables.

Procedure

  1. In the UI Modeler , double-click OrderCompView.
  2. Choose the Layout tab.
  3. In the view editor, from the taskbar on the left, choose Layout .

    A palette of available UI elements for the layout opens, one of which is TabStrip .

  4. Move the TabStrip control on to the view using drag and drop.
  5. In the Outline pane (by default in the bottom-left corner), in the context menu of TabStrip , choose Insert Tab to add a new tab page.
  6. In the Outline pane, select the Tab_Header [Header] node that appears below TabStrip .
  7. In the bottom-right pane, choose the Properties tab.
  8. Place the cursor in row text , column Value and enter Customers as the name of the tabstrip.

    The view editor adopts this change.

  9. On TabStrip , create another tab in the same way and set its text property to Orders .
  10. On TabStrip , create another tab in the same way and set its text property to Items .
  11. In the Outline pane, move the Table node (which represents the table of customer headers) to the Tab_Content node of the customer tab using drag and drop.

    The view editor displays the table on the Customers tab.

  12. In the Outline pane, move the Table_0 node (which represents the table of order headers) to the Tab_Content node of the orders tab using drag and drop.
  13. In the view editor, in the context menu of the Orders tab, choose Show . Check that the tab displays the order headers table.
  14. In the Outline pane, move the Table_0_1 node, which represent the table of item headers, to the Tab1_Content node of the items tabstrip using drag and drop.
  15. In the view editor, in the context menu of the Items tab, choose Show . Check that the tab displays the order items table.
  16. In the Outline pane, move the TransContainer_0 node to the Tab2_Content node of the items tab using drag and drop.

    The view editor displays the form fields as part of the Items tab.

  17. In the Outline pane, move the Save node to the Tab2_Content node of the items tab using drag and drop.

    The view editor displays the Save button as part of the items tab.

  18. Save your work.
  19. Deploy and test your changes.