subTabLayoutを使用したsubTabBarの挿入

このトピックでは、上と下にサブタブを(索引付けされた子を間に挟んで)レンダリングするサブタブを作成する手順について説明します。このサブタブは、subTabLayoutとsubTabsコンポーネントを使用して作成します。

注意: 1回のみ(上部に)レンダリングされるsubtabsは、一連のlinkコンポーネントによりsubTabBarの索引付けされた子として作成されます。方法の説明は、「SubTabBarの作成」を参照してください。

subTabLayoutを使用してサブタブを挿入するには、次のようにします。

  1. 目的のファイルの設計構造ウィンドウで、サブタブ・レイアウトを作成する親ノードを探します。
  2. コンポーネント・パレットのドロップダウン・リストから「Layout Components」を選択し、subTabLayoutコンポーネントを、選択した親ノードにドラッグ・アンド・ドロップします。

    「subTabLayout」ノードが、展開された親ノードに挿入され、強調表示されます。

  3. 設計構造ウィンドウで、「subTabLayout」ノードを展開し、次に「subTabLayout-名前付きの子」ノードを展開します。
  4. 「subTabLayout-名前付きの子」ノードの下の「subTabs」ノードを右クリックし、「subTabsの中に挿入」->「subTabBar」を選択します。

    「subTabBar」ノードが、「subTabs」ノードに挿入され、強調表示されます。

  5. 「subTabBar」ノードを右クリックして「subTabBarの中に挿入」->「link」を選択します。

    構造ウィンドウで、新規の「link」ノードが挿入され、強調表示されます。プロパティ・インスペクタで、新規コンポーネントのプロパティが表示されます。

  6. プロパティ・インスペクタで、リンクに対して次の属性を設定します。
  7. ステップ5と6を繰り返し、サブタブを追加します。

    サブタブはページのメイン・コンテンツ領域に配置され、一連の索引付けされた子の前後にレンダリングされます。サブタブは水平方向に並んで表示されます。最初のサブタブの番号は0、2番目のサブタブの番号は1、というように続きます。

  8. 選択されたサブタブを設定するには、次のようにします。
    1. 設計構造ウィンドウで、「subTabBar」ノードを選択します。
    2. プロパティ・インスペクタで、ページがブラウザで最初に表示されるときに選択済にしておきたいサブタブの値に「selectedIndex」属性を設定します。次のいずれかの値を使用します。
      • 0: 最初のサブタブを選択済にする。
      • 1: 2番目のサブタブを選択済にする。
      • 2: 3番目のサブタブを選択済にする(その後も同様)。
  9. サブタブのバーの位置を設定するには、次のようにします。
    1. 設計構造ウィンドウで、「subTabBar」ノードを選択します。
    2. プロパティ・インスペクタで、orientation属性値をdefault、topまたはbottomに設定します。

注意: データ・バインディングの使用は、「コンポーネント属性のデータ・バインディング」を参照してください。

例(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>
...    

subTabLayoutとその名前付きの子について

subTabLayoutへの索引付けされた子の挿入
subTabLayoutの部分ページ・レンダリングの有効化
レイアウト・コンポーネントの使用

 

Copyright © 1997, 2004, Oracle. All rights reserved.