hGridの作成
注意: この手順では、このトピックの最後に記述されているインライン・データがUIXファイルに挿入されているものとして説明しています。treeDataという名前のインライン・データでは、ルート'Primary Colors'で始まるオブジェクト階層列が生成されます。列スタンプのデータもこのデータから提供され、これによって色コードが3列生成されます。demoTableDataという名前のインライン・データからはcolumnHeaderStampのデータが提供されます。
hGridコンポーネントを作成するには、次のようにします。
- 目的のファイルの設計構造ウィンドウで、hGridコンポーネントを挿入するノードを探します。
- コンポーネント・パレットのドロップダウン・リストから「Table Components」を選択し、hGridコンポーネントを、選択した親ノードにドラッグ・アンド・ドロップします。
「hGrid」ノードが、展開された親ノードに挿入され、強調表示されます。デフォルトでは、UIXビジュアル・エディタ内の空のhGridに「No items are found」という文字列が表示されます。
- プロパティ・インスペクタで、hGridコンポーネントに対して次の属性を設定します。
- alternateText: 必要に応じて、空のhGridのデフォルト・テキストを変更します。
- formSubmitted: hGridプロキシにより生成されたリンクでフォームの送信を使用するかどうかを、trueまたはfalseを選択して指定します。
- summary: ビジュアル環境ではないユーザー・クライアントで使用する表の簡単な説明を入力します。
- childBlockSize: 指定ノードで1回に表示できる子ノードの最大レコード数の値を入力します。childBlockSizeの数より多くの子がノードに含まれている場合は、スクロール・リンク付きの特殊なナビゲーション行がそのノードの上か下にレンダリングされます。詳細は、「childBlockSizeについて」を参照してください。
- columnFormats: 各列の書式設定情報用にバインドすべきデータソースを入力します。右の列で、
アイコンをクリックしてEL構文のデータ・バインディングの式を入力するか、「データにバインド」ダイアログを使用してデータソースを選択します。
- columnHeaderData: 子であるcolumnHeaderStamp用にバインドすべきデータソースを入力します。右の列で、
アイコンをクリックしてEL構文のデータ・バインディングの式(${uix.data.demoTableData.demoColHeaderData}など)を入力するか、「データにバインド」ダイアログを使用してデータソースを選択します。
- columnHeaderFormats: 各列のヘッダーの書式設定情報用にバインドすべきデータソースを入力します。右の列で、
アイコンをクリックしてEL構文のデータ・バインディングの式を入力するか、「データにバインド」ダイアログを使用してデータソースを選択します。
- destination: このhGridによって生成されるすべてのリンクのベース・リンク先を入力します。
- inlineStyle: このコンポーネントのインラインCSSスタイルを入力します。右の列で
アイコンをクリックしてダイアログを開き、「新規」をクリックしてCSSプロパティの値を入力します。このproperty要素から、名前と値のペアが1つ定義されます。名前はname属性、値はその要素のテキスト・コンテンツにより定義されます。たとえば、名前にはcolor、値にはredと入力します。「詳細」タブを使用してEL構文データ・バインディングの式を入力するか、「データにバインド」ダイアログを使用してこの複合属性に対するデータソースを選択します。
- partialRenderMode: 部分ページ・レンダリング(PPR)動作モードを選択します。次の値を指定できます。
- multiple: 複数の部分ターゲット・ノードを使用したPPRが有効になります。partialTargets属性も設定する必要があります。
- none: デフォルトです。ページの全体レンダリングが使用されます。
- self: 1つのターゲット・ノード、つまりhGridコンポーネントのIDのみを使用したPPRが有効になります。
- partialTargets: レンダリングする部分ターゲット・ノードのIDを入力します。hGridコンポーネントのIDは、部分ターゲット・ノードに自動的に組み込まれるため、リストしないでください。
- proxy: hGridプロキシ用にバインドすべきデータソースを入力します。右の列で、
アイコンをクリックしてEL構文のデータ・バインディングの式(${uix.eventResult.hGridProxy}など)を入力するか、「データにバインド」ダイアログを使用してデータソースを選択します。
- tableFormat: 表全体の書式設定情報を入力します。右の列で、
アイコンをクリックして表の書式プロパティ値を入力するか、バインドすべきデータソースを入力します。EL構文のデータ・バインディングの式を使用するか「データにバインド」ダイアログを使用して、データソースを選択することもできます。サポートされている表の書式の値は、次のとおりです。
- bandingInterval: 各バンド・グループの行数または列数です。
- tableBanding: 表でのバンドの使用方法です。サポートされる値は次のとおりです。
- noBanding: デフォルトです。表では、バンドは使用されません。
- columnBanding: 列に交互にバンドが付けられます。
- rowBanding: 行に交互にバンドが付けられます。
- treeData: hGridのデータを入力します。右の列で、
アイコンをクリックしてEL構文のデータ・バインディングの式(${uix.data.treeData.nodes}など)を入力するか、「データにバインド」ダイアログを使用してデータソースを選択します。
- unvalidated: hGridプロキシにより生成されるフォームの送信の前に検証を行うかどうかを、trueまたはfalseを選択して指定します。デフォルトでは、検証は実行されません。この属性は、hGridをformSubmittedモードで使用している場合にのみ使用できます。
- width: hGridの幅をピクセル単位または親コンポーネントに対するパーセントで入力します。
- treeData属性を指定した場合には、オブジェクト階層列のコンテンツは自動的に定義されます。treeData属性を指定しなかった場合は次の操作を実行し、名前付きの子nodeStampを使用してオブジェクト階層列をカスタマイズするスタンプを定義します。次のようにすると、オブジェクト階層列のデフォルト・ヘッダーも変更できます。
- 設計構造ウィンドウで、「hGrid」ノードを展開して、名前付きの子「nodeStamp」ノードを探します。「nodeStamp」を右クリックして、「nodeStampの中に挿入」->「column」を選択します。
「column」ノードが、展開された「nodeStamp」ノードに挿入され、強調表示されます。
- 新しい「column」ノードを展開して、名前付きの子「columnHeader」を探します。次に、「columnHeader」を右クリックし、「columnHeaderの中に挿入」->「styledText」を選択します。
「styledText」ノードが、展開された親ノードに挿入され、強調表示されます。
- プロパティ・インスペクタで、styledTextのtext属性を、選択した値(colorなど)に変更します。選択しなかった場合は、nameがオブジェクト階層列のデフォルトのヘッダーになります。
- オブジェクト階層列のコンテンツをカスタマイズするには、ステップ4aで作成した「column」ノードを右クリックして目的のコンポーネントを挿入します。ここでは、用意した例を使用して「columnの中に挿入」->「styledText」を選択し、プロパティ・インスペクタでstyledTextのtext属性を、${uix.current.text}という値に変更します。
- hGridの索引付けされた子として他の列を追加するには、次のようにします。
- 設計構造ウィンドウで、「hGrid」ノードを右クリックして、「中に挿入」->「hGrid」->「column」を選択します。
- ステップ5aを繰り返し、任意の数の列を追加します。この例では、さらに2列を追加する必要があります。
- 列ヘッダーのスタンプを定義するには、「hGrid」ノードの直下で、名前付きの子「columnHeaderStamp」を探します。次に「columnHeaderStamp」を右クリックし、目的のコンポーネントを挿入します。ここでは、用意した例を使用して、「columnHeaderStampの中に挿入」->「styledText」を選択し、プロパティ・インスペクタでstyledTextのtext属性を、${uix.current.textKey}という値に変更します。
- 列のスタンプを定義するには、ステップ5aと5bで作成したそれぞれの列で、「column」ノードを右クリックして目的のコンポーネントを挿入します。ここでもう一度、用意した例を使用して、「中に挿入」->「column」->「styledText」を選択し、プロパティ・インスペクタで3つの列のtext属性をそれぞれ${uix.current.r}、${uix.current.g}、${uix.current.g}という値に変更します。
- singleSelectionまたはmultipleSelectionをhGridに追加する場合には、「singleSelectionまたはmultipleSelection(tableSelection)の使用」を参照してください。
- 行の選択に依存しないhGridでアクションを実行するためのコンポーネントを追加する場合は、「tableActionsの使用」を参照してください。
- 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.