hGridの作成

注意: この手順では、このトピックの最後に記述されているインライン・データがUIXファイルに挿入されているものとして説明しています。treeDataという名前のインライン・データでは、ルート'Primary Colors'で始まるオブジェクト階層列が生成されます。列スタンプのデータもこのデータから提供され、これによって色コードが3列生成されます。demoTableDataという名前のインライン・データからはcolumnHeaderStampのデータが提供されます。

hGridコンポーネントを作成するには、次のようにします。

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

    「hGrid」ノードが、展開された親ノードに挿入され、強調表示されます。デフォルトでは、UIXビジュアル・エディタ内の空のhGridに「No items are found」という文字列が表示されます。

  3. プロパティ・インスペクタで、hGridコンポーネントに対して次の属性を設定します。
  4. treeData属性を指定した場合には、オブジェクト階層列のコンテンツは自動的に定義されます。treeData属性を指定しなかった場合は次の操作を実行し、名前付きの子nodeStampを使用してオブジェクト階層列をカスタマイズするスタンプを定義します。次のようにすると、オブジェクト階層列のデフォルト・ヘッダーも変更できます。
    1. 設計構造ウィンドウで、「hGrid」ノードを展開して、名前付きの子「nodeStamp」ノードを探します。「nodeStamp」を右クリックして、「nodeStampの中に挿入」->「column」を選択します。

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

    2. 新しい「column」ノードを展開して、名前付きの子「columnHeader」を探します。次に、「columnHeader」を右クリックし、「columnHeaderの中に挿入」->「styledText」を選択します。

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

    3. プロパティ・インスペクタで、styledTextのtext属性を、選択した値(colorなど)に変更します。選択しなかった場合は、nameがオブジェクト階層列のデフォルトのヘッダーになります。
    4. オブジェクト階層列のコンテンツをカスタマイズするには、ステップ4aで作成した「column」ノードを右クリックして目的のコンポーネントを挿入します。ここでは、用意した例を使用して「columnの中に挿入」->「styledText」を選択し、プロパティ・インスペクタでstyledTextのtext属性を、${uix.current.text}という値に変更します。
  5. hGridの索引付けされた子として他の列を追加するには、次のようにします。
    1. 設計構造ウィンドウで、「hGrid」ノードを右クリックして、「中に挿入」->「hGrid」->「column」を選択します。
    2. ステップ5aを繰り返し、任意の数の列を追加します。この例では、さらに2列を追加する必要があります。
    3. 列ヘッダーのスタンプを定義するには、「hGrid」ノードの直下で、名前付きの子「columnHeaderStamp」を探します。次に「columnHeaderStamp」を右クリックし、目的のコンポーネントを挿入します。ここでは、用意した例を使用して、「columnHeaderStampの中に挿入」->「styledText」を選択し、プロパティ・インスペクタでstyledTextのtext属性を、${uix.current.textKey}という値に変更します。
    4. 列のスタンプを定義するには、ステップ5aと5bで作成したそれぞれの列で、「column」ノードを右クリックして目的のコンポーネントを挿入します。ここでもう一度、用意した例を使用して、「中に挿入」->「column」->「styledText」を選択し、プロパティ・インスペクタで3つの列のtext属性をそれぞれ${uix.current.r}、${uix.current.g}、${uix.current.g}という値に変更します。
  6. singleSelectionまたはmultipleSelectionをhGridに追加する場合には、「singleSelectionまたはmultipleSelection(tableSelection)の使用」を参照してください。
  7. 行の選択に依存しないhGridでアクションを実行するためのコンポーネントを追加する場合は、「tableActionsの使用」を参照してください。
  8. hGridを対話型にし、初期フォーカスを設定する場合は、「hGridProxyについて」を参照してください。

ヒント: データ・フォーム・コントロールのレンダリング時に名前変換が出現するかどうかを指定するには、columnコンポーネントのnameTransformed属性を使用してください。

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

例(UIX XML)


...
<provider>
  <data name="treeData">
    <inline>
      <nodes text="Primary Colors" expandable="expanded">
        <nodes text="Red" r="Any" g="00" b="00"/>
        <nodes text="Green" r="00" g="Any" b="00" expandable="expanded">
          <nodes text="Light" r="00" g="FF" b="00"/>
          <nodes text="Dark" r="00" g="88" b="00"/>
        </nodes>
        <nodes text="Blue" r="00" g="00" b="Any"/>
      </nodes>
    </inline>
  </data>
  <data name="demoTableData">
    <inline>
      <demoColHeaderData textKey="Red Code"/>
      <demoColHeaderData textKey="Green Code"/>
      <demoColHeaderData textKey="Blue Code"/>
    </inline>
  </data>
</provider>
...
<contents>
...
  <hGrid alternateText="No items were found"
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
         proxy="${uix.eventResult.hGridProxy}"
         treeData="${uix.data.treeData2.nodes}">
    <!-- nodeStamp named child customizes header of object column -->
    <nodeStamp>
      <column>
        <columnHeader>
          <styledText text="Color"/>
        </columnHeader>
      </column>
    </nodeStamp>

    <!-- indexed children define contents of other columns -->
    <contents>
      <column>
        <contents>
          <styledText text="${uix.current.r}"/>
        </contents>
      </column>
      <column>
        <contents>
          <styledText text="${uix.current.g}"/>
        </contents>
      </column>
      <column>
        <contents>
          <styledText text="${uix.current.b}"/>
        </contents>
      </column>
    </contents>

    <!-- columnHeaderStamp stamps out headers for other columns -->
    <columnHeaderStamp>
      <styledText text="${uix.current.textKey}"/>
    </columnHeaderStamp>
  </hGrid>
  ...
</contents>
...    

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

tableコンポーネントの使用

 

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