Inserting a SubTabBar Using SubTabLayout

This topic describes the procedure for creating a subtab layout that renders subtabs at the top and bottom (with indexed children in between). These subtabs are created by using the subTabLayout and subTabs components.

Note: Subtabs that are rendered once only (at the top) are created by a series of link components as indexed children of subTabBar. See Creating a SubTabBar for instructions.

To insert a subtab using subTabLayout:

In the Design Structure Window of the desired file, locate the parent node in which you wish to create a subtab layout.
In the Component Palette, select the Layout Components list from the dropdown list, and then drag and drop the subTabLayout component to the parent node of your choice.
The subTabLayout node is inserted and highlighted under the expanded parent node.
In the Design Structure Window, expand the subTabLayout node, and then expand the subTabLayout Named Children node.
Right-click the subTabs node under the subTabLayout Named Children node and choose Insert inside subTabs | subTabBar.
The subTabBar node is inserted and highlighted under the subTabs node.
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 link:
- text - Enter the text to display in the subtab.
- destination - Enter the URI. 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 5 and 6 to add additional subtabs.
Subtabs are placed in the main content area of a page, and rendered before and after a series of indexed children. 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>
  
  <!-- Sub Tab Layout-->
  
    <subTabLayout>
      <subTabs> 
        <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> 
      </subTabs> 
    </subTabLayout>
  </contents>
  <!-- REST OF PAGE LAYOUT -->
</pageLayout>
...