Creating a TabBar

To create tabs in a tabBar:

In the Design Structure Window of the desired file, expand the pageLayout or pageHeaderLayout node to locate the tabs named child node.
The tabs node is under pageLayout Named Children in pageLayout. or pageHeaderLayout Named Children in pageHeaderLayout .
In the Component Palette, select Navigation Components from the dropdown list, and then drag and drop the tabBar component from the list to the tabs node.
The tabBar node is inserted under the expanded tabs node.
In the Design Structure Window, right-click the tabBar node and choose Insert inside tabBar | link.
The new link node is inserted and highlighted in the Structure Window. The Property Inspector displays the properties of the new component.
In the Property Inspector, set the following attributes for the new link component:
- text - Enter the text to display in the tab (e.g., Home). By default, the tab name is repeated as a text link at the bottom of the page. Thus each page will have the same tab navigation links at the top (in the tab bar) as well as in the footer section.
- destination - Enter a URL. If you prefer, you can use # as a dead placeholder link.
- disabled - Click in the right column and select true if you want to render the tab as disabled.
Repeat steps 3 and 4 to add additional tabs.
Tabs are displayed in sequence horizontally; the first tab in the sequence is numbered 0, the second tab is numbered 1, and so on. More than seven tabs on a page is undesirable because the information may be obscured from view without additional scrolling.
To set a selected tab for the page, do the following:
1. In the Design Structure Window, select the tabBar node.
2. In the Property Inspector, set the selectedIndex attribute to the value of the tab you want to be made selected when the page is first displayed in a browser. Use one of the following values:
  - 0 - make the first tab selected
  - 1 - make the second tab selected
  - 2 - make the third tab selected, and so on

Note: To use data binding, see Data Binding a Component Attribute.

Example (UIX XML)


...
<pageLayout>
  
  <!-- Level 1 Navigation -->
  
  <tabs>
    <tabBar selectedIndex="1">
      <contents>
        <link text="Home" destination="http://www.oracle.com"/>
        <link text="Shopping Cart" destination="http://www.oracle.com"/>
        <link text="Order History" disabled="true"/>
      </contents>
    </tabBar>
  </tabs>
  
  <!-- REST OF PAGE LAYOUT-->
  
</pageLayout>
...