styledListおよびlabelを使用した階層リストの作成

styledListと子であるlabelを使用して階層リストを作成するには、次のようにします。

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

    「styledList」ノードが設計構造ウィンドウに挿入され、強調表示されます。

  3. 内部の「styledList」ノードを展開し、次に「styledList-名前付きの子」ノードを展開します。

    「label」および「separator」という2つの名前付きの子があります。

  4. コンポーネント・パレットで、styledItemコンポーネントを「Layout Components」リストから、「label」ノードにドラッグ・アンド・ドロップします。

    「styledItem」ノードが、設計構造ウィンドウの展開された「label」ノードに挿入され、強調表示されます。

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

    「link」ノードが、展開された「styledItem」ノードに挿入され、強調表示されます。これは内側のリストの最初の索引付けされた子です。

  6. プロパティ・インスペクタで、新規のlinkコンポーネント(内側のリストの最初の索引付けされた子)に対して必要な属性を次のように設定します。
  7. 他の索引付けされた子を内側のリストに追加するには、次のようにします。
    1. 設計構造ウィンドウで、ステップ2で作成した「styledList」ノードを右クリックし、「styledListの中に挿入」->「styledItem」を選択します。
    2. 新規の「styledItem」ノードを右クリックして「styledItemの中に挿入」->「link」を選択します。
    3. プロパティ・インスペクタで、新規のlinkコンポーネントに対して属性を次のように設定します。
      • text: 項目に表示するテキストを入力します。
      • destination: 項目のURIを入力します。
    4. ステップ7aから7cを繰り返し、内側のリストに任意の数の項目を追加します。
  8. 内側のリストにスタイルを設定するには、次のようにします。
    1. 設計構造ウィンドウで、ステップ2で作成した「styledList」ノードを選択します。
    2. プロパティ・インスペクタで、内側のリストに対して次の属性を設定します。
      • listStyle: スタイルを指定します。使用可能なオプションは、disc(デフォルト)、circle、square、decimal、lowerAlpha、upperAlphaおよびnoneです。lowerAlphaとupperAlphaで使用される文字は、26文字のアルファベットであることに注意してください。
  9. 内側のリストに選択した項目を設定するには、次のようにします。
    1. 設計構造ウィンドウで、内側のリストの「styledItem」ノードを選択します。
    2. プロパティ・インスペクタで、selected属性をtrueに設定します。

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

例(UIX XML)


...
<pageLayout>

...

<!-- StyledList embedded in a StyledList -->

  <styledList selectedIndex="2">
    <contents>
      <styledItem >
        <contents>
          <link text="Link 1 Text" destination="http://www.oracle.com"/>
        </contents>
      </styledItem>
      <styledItem>
        <contents>
          <link text="Link 2 Text" destination="http://www.oracle.com"/>
        </contents>
      </styledItem>
      <styledList listStyle="decimal">

        <!-- First indexed child of inner list -->

        <label>
          <styledItem>
            <contents>
              <link text="Link 3 Text" destination="http://www.oracle.com"/>
            </contents>
          </styledItem>
        </label>

        <!-- Separator named child of inner list -->

        <separator>
          <spacer height="10"/>
        </separator>

        <!-- Other indexed children of inner list -->

        <contents>
          <styledItem>
            <contents>
              <link text="Link 3-1 Text" destination="http://www.oracle.com"/>
            </contents>
          </styledItem>
          <styledItem>
            <contents>
              <link text="Link 3-2 Text" destination="http://www.oracle.com"/>
            </contents>
          </styledItem>
        </contents>
      </styledList>
      <styledItem>
        <contents>
          <link text="Link 4 Text" destination="http://www.oracle.com"/>
        </contents>
      </styledItem>
    </contents>
  </styledList>

...

<!-- REST OF PAGE LAYOUT -->

<pageLayout>
...    

styledListとstyledItemについて
bulletedListについて

styledListおよびstyledItemを使用したリストの作成
styledListの索引付けされた子の間への垂直間隔の挿入
レイアウト・コンポーネントの使用

 

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