26 NBoxコンポーネントの使用
アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してNBoxを作成できます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたNBoxコンポーネントの作成に関する項を参照してください。
この章の内容は次のとおりです。
NBoxコンポーネントについて
ADF DVT NBoxコンポーネントはデータ分類を視覚化する表現の1つで、2つの範囲のデータを使用してセルのグリッドを作成します。各セルにはカスタマイズしたノードが含まれ、それが個々のデータ・アイテムを表します。NBoxコンポーネントは、従業員のポテンシャルとパフォーマンスなど、考慮する要因が複数あるデータをグループ化するときに便利です。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
NBoxのユースケースおよび例
nBoxコンポーネントは、データを表すノード、およびそのノードが配置されるセルが含まれるグリッドの2つの部分から構成されます。ノードの数がセルに割り当てられた領域よりも大きい場合、NBoxでは、ユーザーがクリックして追加のノードにアクセスできるインジケータが表示されます。
たとえば、図26-1に示すように、従業員のポテンシャルとパフォーマンスのデータの比較にnBoxコンポーネントを使用できます(行は従業員のポテンシャルを表し、列は従業員のパフォーマンスを表しています)。従業員を表すノードは、適切なセル内にスタンプされています。
NBoxノードはまた、属性グループを使用するデータ・セットで、それぞれが一意の値またはグループを表す色、マーカーおよびインジケータでスタイル設定できます。図26-2に、部門、役割および経験によってスタイル設定された従業員ノードのNBoxを示します。
属性グループを表すNBoxノードは、サイズと数で表示するように構成することもでき、図26-3に示すように、各グリッド・セル内、または図26-4に示すように、すべてのセルに渡って表示できます。
NBoxのエンド・ユーザー機能およびプレゼンテーション機能
ADFデータ視覚化nBoxコンポーネントでは、選択やツールチップなど、エンド・ユーザー向けの幅広い機能が提供されています。また、凡例の表示、カスタマイズ可能なノード形状や色など、幅広いプレゼンテーション機能も提供されます。
NBoxコンポーネントの使用やカスタマイズには、次の機能やコンポーネントの理解が役立ちます。
-
ポップアップのサポート: NBoxコンポーネントは、ユーザーがノード上をマウスでクリックしたりホバーしたときに、情報を提供したり、入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。
-
コンテキスト・メニュー: NBoxでは、コンテキスト・メニューを表示して、選択されたノードについての追加情報を提供する機能がサポートされています。
-
属性グループ: NBoxでは、データ・セット内での一意なグループの色、マーカー、イメージ、インジケータなどのスタイル属性値を生成するため、
dvt:attributeGroupsタグの使用がサポートされています。 -
凡例のサポート: NBoxは、凡例を表示し、イメージと色をコントロールしているデータのタイプを視覚的にわかりやすくします。コンポーネントがパフォーマンスのレベルなどの条件に基づき色を指定するのに属性グループを使用する場合、凡例は使用される色を表示し、各色がどの値を表現しているかを示すこともできます。
-
ノード選択のサポート: NBoxでは、1つまたは複数のノードに対するユーザーのクリックに応答し、選択されたノード(複数可)に関する情報を表示する機能がサポートされています。
-
ツールチップのサポート: NBoxでは、ユーザーがノード上でマウスを動かすと、ノードの追加情報が表示される機能がサポートされています。
-
グループ化: 属性グループに基づいて複数のNBoxをまとめてノード・グループを構成し、各セル内または複数セルに渡ってグループを表示できます。
-
その他のノードのサポート: NBoxコンポーネントには、大きなコントリビュータとの比較において、ユーザーのデータ・モデルが多数の小さいコントリビュータを含む場合、データを集計する機能があります。
-
行または列の最大化: NBoxの行または列は、NBox内の指定した行や列、または指定した行と列の交点のセルを拡大するように構成できます。
NBoxコンポーネントの追加機能
NBoxコンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、一度NBoxコンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。
NBoxコンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
-
他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、NBoxでセルをリフレッシュできます。詳細は、「部分ページ・コンテンツの再レンダリング」を参照してください。
-
パーソナライズ: 有効な場合、ユーザーは実行時にNBoxの表示方法を変更できますが、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、「JSFページでのユーザー・カスタマイズの許可」を参照してください。
-
アクセシビリティ: コンポーネントのアクセシビリティ・ガイドラインに従っていれば、NBoxコンポーネントにアクセス可能です。「アクセス可能なADF Facesページの開発」を参照してください。
-
タッチ装置: ADF Facesアプリケーションがタッチ装置で動作することがわかれば、その装置に固有のページを作成する作業がベスト・プラクティスになります。詳細は、「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
-
スキンおよびスタイル: アプリケーションに適用するADFを使用するか、スタイル関連のプロパティ(
styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することにより、NBoxコンポーネントの外観をカスタマイズできます。詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。 -
コンテンツ配信:
contentDelivery属性を使用してNBoxを構成することにより、コンポーネントのレンダリング直後に、またはコンポーネントがレンダリングされた後の別のリクエストで、データ・ソースからデータをフェッチするようにできます。詳細は、「コンテンツの配信」を参照してください。 -
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされたNBoxを作成できます。JDeveloperには、データ・バインディングとNBoxの構成用のウィザードがあります。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされたNBoxコンポーネントの作成」の章を参照してください。
注意:
最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「プレースホルダ・データ・コントロールを使用したページの設計」の章を参照してください。
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、イメージ形式、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、「データ視覚化コンポーネントの共通機能」を参照してください。
NBoxコンポーネントの使用
ADF DVT NBoxコンポーネントを使用するには、「コンポーネント・パレット」ウィンドウを使用してページにNBoxを追加します。次に、NBoxのデータを定義し、JDeveloperの「プロパティ」ウィンドウでタグ属性を使用して、追加の構成を完了します。
NBoxのデータ要件
ADFのNBoxコンポーネントでは、データがグリッド・レイアウトで表示され、2次元で表したり、データの大きさを表すように使用する行および列の数を構成可能です。ノードは実際のデータを表し、そのノードの値が、各セルに設定された範囲または大きさのいずれに相当するかに応じて、グリッドのセルの内部にスタンプされます。
データは、Listインタフェース(java.util.ArryList)の実装、またはCollectionModel(org.apache.myfaces.trinidad.model.CollectionModel)のいずれかで用意したデータのコレクションとして提供します。データは任意の型が使用でき、通常、String、intまたはlongです。
NBoxノードのコレクションは、コレクション内の行ごとに一意のIDを表す属性が必要です。コレクションは、value属性を使用してマッピングされ、コレクションを反復処理するためのコンポーネントを使用してノードの各インスタンスをスタンプ・アウトします。子コンポーネントにスタンプ・アウトされるたびに、現在のコンポーネントのデータがEL式のデータ・レイヤー・コンポーネントによって使用されるvarプロパティにコピーされます。NBoxのレンダリングが完了すると、varプロパティは削除されるか前の値に戻ります。慣例では、varはnodeまたはlinkに設定されます。
value属性の値は、ノードまたはリンクのデータ・モデルに格納するか、またはUI優先開発を使用している場合はクラスまたはマネージドBeanに格納する必要があります。
NBoxの構成
nBoxコンポーネントは、NBoxの表示や動作をカスタマイズするために追加したり修正することのできる構成可能な属性や子コンポーネントを持ちます。接頭辞dvt:は、各NBoxコンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
NBoxの子コンポーネント、属性およびサポートされているファセットを次の部分で構成できます。
-
NBox (
dvt:nBox): NBoxノードをラップします。次の属性を構成してNBoxの表示をコントロールします。-
colunmsTitle: NBoxグリッドの横軸に沿う、下から上への列の順序付けられたリストのラベル(オプション)。 -
rowsTitle: NBoxグリッドの縦軸に沿う、開始から終了への行の順序付けられたリストのラベル(オプション)。 -
空テキスト(
emptyText):emptyText属性を使用して、NBoxノードにデータが含まれない場合に表示するテキストを指定します。 -
groupBy: スペース区切りのリストとして属性グループIDをリストし、グループ・ノードをまとめるために使用します。 -
groupBehavior: NBoxのセル内またはセル間でノードのグループの表示を指定するために使用します。 -
Animation:
af:transition子タグを使用し、triggerType属性をNBoxが最初に表示されるときにdisplayに設定し、NBoxノードの値が変化するときにdataChangeに設定することで、アニメーションを有効にします。 -
Maximize:
maximizedColumnまたはmaximizedRow属性を使用し、NBox内の特定の列または行を拡大します。両方の属性を指定すると、指定した行と列の交点にあるセルが拡大されます。 -
その他のグループ:
otherThresholdおよびotherColor属性を使用して、子のデータを「その他」のノ－ドに集計します。
NBoxコンポーネントは、次のような
f:facet要素の使用をサポートしています。-
Columns: NBoxグリッドの列の数とオプションのラベルを指定するために使用します。af:group要素は、グリッドの横軸に沿った下から上への列の順序付けられたリストを表すdvt:nBoxColumn要素をラップします。 -
Rows: NBoxグリッドの行の数とオプションのラベルを指定するために使用します。af:group要素は、グリッドの縦軸に沿った開始から終了への行の順序付けられたリストを表すdvt:nBoxRow要素をラップします。 -
cells: たとえば、背景色やラベルなど、個別のセルの属性を構成するために使用します。countLabelおよびshowCount属性を使用して、セル・ラベルの後にパーセントと数値を付けてカスタム・ノード・カウント・ラベルを指定することもできます。
-
-
NBoxノード(
nBoxNode): NBoxノードのプロパティを定義するために使用します。コンポーネントは、次のようなf:facet要素の使用をサポートしています。-
icon: 従業員の写真や人の形など、このノードの主要なグラフィカル要素として使用されるdvt:markerを指定します。 -
indicator: カラー・バーなど、このノードの副次的なグラフィカル要素として使用されるdvt:markerを指定します。
-
-
属性グループ(
attributeGroups): このオプションのNBoxノードの子要素の子タグ(通常はdvt:markerコンポーネント)は、データ・セット内のそれぞれ一意の値、またはグループのスタイルの値を生成するために使用します。属性グループは、NBoxの表示用の情報を提供するために必要であり、推奨されます。
-
凡例(
legend): マーカーとラベルのペアの複数セクションを表示するために使用します。凡例は、NBoxコンポーネントの子として定義します。
NBoxをページに追加する方法
簡単なUI優先開発を使用してページを設計しているときには、「コンポーネント」ウィンドウを使用してNBoxをJSFページに追加します。nBoxコンポーネントをページにドラッグ・アンド・ドロップすると、NBoxがページに追加され、「プロパティ」ウィンドウを使用してデータの値の指定、および追加の表示属性の構成ができます。
「プロパティ」ウィンドウで、プロパティ・フィールドにマウス・カーソルを合わせると表示されるアイコンをクリックすることで、プロパティの説明や編集オプションを表示できます。図26-5に、NBoxのvalue属性のドロップダウン・メニューを示します。
注意:
アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してNBoxを作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたNBoxコンポーネントの作成に関する項を参照してください。
始める前に:
NBoxの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「NBoxの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「NBoxコンポーネントの追加機能」を参照してください。
次のタスクを実行する必要があります。
-
「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
-
「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
NBoxをページに追加するには:
NBoxをページに追加する場合の処理
「コンポーネント」ウィンドウからNBoxをJSFページにドラッグ・アンド・ドロップし、生成中にデータ・バインドを選択しなかった場合、Developerにより、タグの最小セットのみが生成されます。
次のコードが生成されます。
<dvt:nBox id="nb1"/>
NBoxの作成時にデータとデータ・コントロールのバインドを選択した場合、JDeveloperにより、データ・モデルに基づいたコードが生成されます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたNBoxコンポーネントの作成に関する項を参照してください。