startを使用したsideBarの作成

sideBarを作成するには、次のようにします。

  1. 目的のファイルの設計構造ウィンドウで、「pageLayout」ノードを展開して、「start」ノードを探します。

    「pageLayout」ノードが表示されない場合は、「page」->「content」->「dataScope」->「document」->「body」->「form」と開きます。「start」ノードは、「pageLayout」「pageLayout-名前付きの子」の下にあります。

  2. コンポーネント・パレットで、ドロップダウン・リストから「Navigation Components」を選択し、次にリストからsideBarコンポーネントを「start」ノードにドラッグ・アンド・ドロップします。

    sidebarノードが、「start」ノードの下に挿入されます。

  3. 設計構造ウィンドウで、「sideBar」ノードを右クリックして、「sideBarの中に挿入」->「styledList」を選択します。

    「styledList」ノードが、「sideBar」の下に挿入されます。

  4. 設計構造ウィンドウで、「styledList」ノードを右クリックして、「styledListの中に挿入」->「styledItem」を選択します。

    新規の「styledItem」ノードが、「styledList」の下に挿入されます。

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

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

  6. プロパティ・インスペクタで、新規linkコンポーネントに対して次の属性を設定します。
  7. ステップ4から6を繰り返して、追加項目をサイド・バーに追加します。

    項目は水平方向に並んで表示されます。最初の項目の番号は0、2番目の項目の番号は1というように続きます。

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

ヒント: sideBarリンクは、動的にデータ・バインドされます。データ・バインディングに関する情報とchildDataをリンクに追加する方法については、「ADF UIX開発者ガイド」を参照してください。

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

例(UIX XML)


...
<pageLayout>

  <!-- Level 3 Navigation -->

  <start>
    <sideBar>
      <contents>
        <styledList selectedIndex="1">
          <contents>
            <styledItem>
              <contents>
                <link text="Beverages" destination="http://www.oracle.com" />
              </contents>
            </styledItem>
            <styledItem>
              <contents>
                <link text="Canned Goods" destination="http://www.oracle.com" />
              </contents>
            </styledItem>
            <styledItem>
              <contents>
                <link text="Meat and Poultry" destination="http://www.oracle.com" />
              </contents>
            </styledItem>
          </contents>
        </styledList>
      </contents>
    </sideBar>
  </start>

  <!-- REST OF PAGE LAYOUT-->

</pageLayout>
...    

tabBar、globalHeader、sideBar、subTabBarについて
globalButtonについて

sideBarの項目スタイルの設定
sideBarでの項目間への垂直スペースの挿入
styledListとstyledItemを使用したリストの作成
tabBarの作成
globalHeaderの作成
subTabBarの作成
ナビゲーション・コンポーネントの使用
レイアウト・コンポーネントの使用

 

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