Creating a SubTabBar

Note: Subtabs that are rendered at the top and bottom (with indexed children in between) are created by using the subTabLayout and subTabs components. See Inserting a SubTabBar Using SubTabLayout for instructions.

This topic describes the procedure for creating a subTabBar with subtabs that are rendered once only (at the top). The subtabs are created using a series of link components as indexed children of the subTabBar component.

To create subtabs in a subTabBar:

In the Design Structure Window of the desired file, locate the pageLayout node. If the pageLayout node is not visible, expand page | content | dataScope | document | body | form.
In the Component Palette, select Navigation Components from the dropdown list, and then drag and drop the subTabBar component from the list to the pageLayout node.
In the Design Structure Window, right-click the subTabBar node and choose Insert inside subTabBar | 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 subtab:
- text - Enter the text to display in the subtab.
- destination - Enter the URL. If you prefer, you can use # as a dead placeholder link.
- disabled - Click in the right column and select true to render the subtab as disabled.
Repeat steps 3 and 4 to add additional subtabs.
Subtabs are placed in the main content area of a page. The subtabs are displayed in sequence horizontally; the first subtab in the sequence is numbered 0, the second subtab is numbered 1, and so on.
To set a selected subtab, do the following:
1. In the Design Structure Window, select the subTabBar node.
2. In the Property Inspector, set the selectedIndex attribute to the value of the subtab you want to be selected when the page is first displayed in a browser. Use one of the following values:
  - 0 - make the first subtab selected
  - 1 - make the second subtab selected
  - 2 - make the third subtab selected, and so on
To set the position of the bar in the subtab, do the following:
1. In the Design Structure Window, select the subTabBar node.
2. In the Property Inspector, set the orientation attribute value to default, top, or bottom.

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

Example (UIX XML)


...
<pageLayout>
  <contents>
  <!-- Level 4 Navigation -->
  
    <subTabBar selectedIndex="1">
      <contents>
        <link text="ADF UIX Components" destination="http://www.oracle.com" />
        <link text="Documentation" destination="http://www.oracle.com"/>
        <link text="Architecture" destination="http://www.oracle.com"/>
        <link text="Release" destination="http://www.oracle.com" disabled="true"/>
      </contents>
    </subTabBar> 
  </contents>
  <!-- REST OF PAGE LAYOUT -->
  
</pageLayout>
...