endを使用したcontentContainerの作成

このトピックでは、contentContainerコンポーネントの中に項目のスタイルが設定されたリストを作成するステップについて説明します。

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

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

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

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

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

  3. プロパティ・インスペクタで、contentContainerコンポーネントに対して次の属性を設定します。
  4. コンポーネント・パレットりドロップダウン・リストから「Layout Components」を選択し、styledListコンポーネントを、設計構造ウィンドウの「contentContainer」ノードにドラッグ・アンド・ドロップします。

    「styledList」ノードが、展開された「contentContainer」ノードに挿入されます。

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

    「styledItem」ノードが、展開された「styledList」ノードに挿入されます。

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

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

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

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

  9. コンテンツ・コンテナで項目のスタイルと選択した項目を設定するには、次のようにします。
    1. 設計構造ウィンドウで、「styledList」ノードを選択します。
    2. プロパティ・インスペクタで、styledListコンポーネントに対して次の属性を設定します。
      • listStyle: スタイルを選択します。使用可能なオプションは、disc(デフォルト)、circle、square、decimal、lowerAlpha、upperAlphaおよびnoneです。
      • selectedIndex: 値を入力します。次の値を使用してください。
        • 0: 最初の項目を選択済にする。
        • 1: 2番目の項目を選択済にする。
        • 2: 3番目の項目を選択済にする(その後も同様)。

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

例(UIX XML)


...
<pageLayout>

  <!-- Use end to insert content container -->

  <end>
    <contentContainer text="Put title here"
                      background="medium"
                      icon="images/info.gif"
                      width="25%">
      <contents>
        <styledList listStyle="circle" selectedIndex="0">
          <contents>
            <styledItem>
              <contents>
                <link text="Code Samples" destination="http://www.oracle.com"/>
              </contents>
            </styledItem>
            <styledItem>
              <contents>
                <link text="Documentation" destination="http://www.oracle.com"/>
              </contents>
            </styledItem>
          </contents>
        </styledList>
      </contents>
    </contentContainer>
  </end>

  <!-- REST OF PAGE LAYOUT -->

</pageLayout>
...    

contentContainerについて
pageLayoutおよび名前を付けられたその子について

styledListとstyledItemを使用した階層リストの作成
styledListとstyledItemを使用したリストの作成
pageLayoutとその名前付きの子の使用

 

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