39 データバインドされたNBoxコンポーネントの作成
nBox
を使用して、ビジネス・データを視覚的に表現する方法について説明します。ここでは、ADFデータ・コントロールを使用して、データ優先開発でNBoxを作成する方法について説明します。簡単なUI優先開発を使用してページを設計する場合は、NBoxをページに追加してから、データ・バインディングを構成してください。nBox
コンポーネントのデータ要件、タグ構造、および外観と動作をカスタマイズするためのオプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のNBoxコンポーネントの使用方法に関する項を参照してください。
この章の内容は次のとおりです。
ADFデータ視覚化NBoxコンポーネントについて
NBoxコンポーネントはデータ分類を視覚化する表現の1つで、2つの範囲のデータを使用してセルのグリッドを作成します。各セルにはカスタマイズしたノードが含まれ、それが個々のデータ・アイテムを表します。NBoxコンポーネントは、従業員のポテンシャルとパフォーマンスなど、考慮する要因が複数あるデータをグループ化するときに便利です。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
ADFのnBox
コンポーネントは、行と列で視覚的に表される2次元のグリッドに沿ってデータを視覚化および比較するために使用できる対話型コンポーネンを生成します。nBox
コンポーネントは、データを表すノード、およびそのノードが配置されるセルが含まれるグリッドの2つの部分から構成されます。ノードの数がセルに割り当てられた領域よりも大きい場合、NBoxでは、ユーザーがクリックして追加のノードにアクセスできるインジケータが表示されます。
たとえば、従業員のポテンシャルとパフォーマンスのデータの比較にnBox
コンポーネントを使用できます(行は従業員のポテンシャルを表し、列は従業員のパフォーマンスを表しています)。従業員を表すノードは、適切なセル内にスタンプされています。
接頭辞dvt:
は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
エンド・ユーザー機能およびプレゼンテーション機能
魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。NBoxコンポーネントのエンド・ユーザー機能とプレゼンテーション機能の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のエンド・ユーザー機能とプレゼンテーション機能に関する項を参照してください。
データ視覚化コンポーネントのユースケースと例
各データ視覚化のユースケースと例の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のNBoxのユースケースと例に関する項を参照してください。
データ視覚化コンポーネントの追加機能
データ視覚化コンポーネントをデータ・バインドする前に、その他のOracle ADF機能について理解しておいてください。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。
-
部分ページ・レンダリング: データ視覚化コンポーネントをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の部分ページ・コンテンツの再レンダリングに関する項 を参照してください。
-
パーソナライズ: ユーザーは実行時にデータ視覚化コンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページでのユーザー・カスタマイズの許可に関する項を参照してください。
-
アクセシビリティ: データ視覚化コンポーネントをアクセス可能にできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のアクセス可能なADF Facesページの開発に関する項を参照してください。
-
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(
styleClass
またはinlineStyle
)を使用してCSSスタイル・プロパティを直接適用することで、データ視覚化コンポーネントの外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のスタイルおよびスキンを使用した外観のカスタマイズに関する項を参照してください。 -
プレースホルダ・データ・コントロール: 最終的にページのデータ視覚化コンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
データバインドされたNBoxコンポーネントの作成
DVT NBoxコンポーネントを作成し、データ優先開発アプローチでデータ・コレクションにバインドできます。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
ADFのNBoxコンポーネントでは、データがグリッド・レイアウトで表示され、2次元で表したり、データの大きさを表すように使用する行および列の数を構成可能です。ノードは実際のデータを表し、そのノードの値が、各セルに設定された範囲または大きさのいずれに相当するかに応じて、グリッドのセルの内部にスタンプされます。
図39-2は、3つの行と4つの列からなるグリッドが表示されるように構成したNBoxの例を示しています。各行は、Low、MediumまたはHighというラベルの付いた人口データ範囲を表しています。各列は、Lower、Lo-Mid、Hi-MidまたはUpperというラベルの付いた収入データ範囲を表しています。ノードは州を表しており、州の人口と収入レベルの値に基づいてセルに挿入されます。また、NBoxの例では、オプション属性グループを使用して、Divisionの値によって各ノードを色分けし、Regionの値によってノードのアイコン・マーカーの図形を変えています。
図39-2 米国の州、収入および人口を示すNBox
![この図の詳細は、周辺の説明を参照してください。 この図の詳細は、周辺の説明を参照してください。](img/dvt_nbox_pop_income.png)
NBoxの作成ウィザードでは、NBoxを作成してデータにバインドするための宣言的サポートが提供されます。ウィザードページでは、次の操作を行うことができます。
-
次を含む、NBoxの初期レイアウトを指定します。
-
行および列の数(必須)
-
NBoxの各行および列の値(必須)
-
NBoxの行および列のタイトル
-
NBoxの各行および列のラベル
-
-
次を含む、NBoxのノードを構成します。
-
ノードの行と列の配置を決定するためにデータ・コレクションから使用する属性(必須)
-
プライマリ・ノードおよびセカンダリ・ノードのラベル
-
指定した属性に応じて色別または図形別にノードを分けるための属性グループ
-
ノードのアイコンまたはインジケータに使用するイメージ
-
NBoxウィザードの完了後、NBoxがページに追加されたら、「プロパティ」ウィンドウを使用してNBoxをさらにカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のNBoxコンポーネントの使用方法に関する項を参照してください。
ADFデータ・コントロールを使用したNBoxコンポーネントの作成方法
データ・コントロールを使用してDVT NBoxを作成するには、dvt:nBox
コンポーネントをコレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
ヒント:
また、「コンポーネント」ウィンドウからNBoxをドラッグして、NBoxを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、NBoxのユーザー・インタフェースを設計できます。
始める前に:
データバインドされたNBoxについて理解しておくと役立ちます。詳細は、「ADFデータ視覚化NBoxコンポーネントについて」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、NBoxのデータ・モデルで必要な、ビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
図39-3は、図39-2に示されているNBoxのデータ・コントロールを示しています。この例では、
CensusView1
にNBoxのデータ・コレクションが含まれています。NBoxのノードは、州の名前で識別された長方形の枠として視覚的に表されます。各ノードは、ノードのPopulation2006Level
属性およびIncome2005Class
属性の値に応じて、NBoxのセルの1つに挿入されます。Population2006Level
属性とIncome2005Class
属性は一時属性として定義され、その値はデータ・コレクション内のPopulation2006
属性とIncome2005
属性から導出されます。この例では、行が範囲として定義され、最も低い範囲がNBoxの一番下の行に表示されます。たとえば、Population2006
の値が1,000,000以下のノードは、low
のPopulation2006Level
に割り当てられます。また、列も範囲として定義され、最も低い範囲が、左から右へ記述するロケールでは一番左の列に表示され、右から左へ記述するロケールでは一番右の列に表示されます。package model import oracle.jbo.script.annotation.TransientValueExpression; @TransientValueExpression(attributeName="Population2006Level") def Population2006Level_ExpressionScript_Expression() {
Population2006 <= 1000000 ? 'low'
: (Population2006 <= 5000000 ? 'medium' : 'high') } @TransientValueExpression(attributeName="Income2005Class") def Income2005Class_ExpressionScript_Expression() { Income2005 <= 40000.0 ? 'lower' : (Income2005 <= 45000.0 ? 'lo-mid' : (Income2005 <= 50000.0 ? 'hi-mid' : 'upper')) }ビュー・オブジェクトへの一時属性の詳細は、「ビュー・オブジェクトへの計算属性および一時属性の追加」を参照してください。
-
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
データバインドされたNBoxを作成するには:
「NBoxの作成」ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用してNBox属性の設定を指定することも、NBoxタグに関連付けられた子タグを使用してNBoxをさらにカスタマイズすることもできます。NBoxのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造および特殊機能の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のNBoxコンポーネントの使用方法に関する項を参照してください。
データバインドされたNBoxを作成すると行われる処理
NBoxを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
-
JSFページのページ定義ファイル(pageName
PageDef.xml
)内にNBoxのバインディングが作成されます -
dvt:nBox
コンポーネントのJSFページに必要なタグが追加されます。
NBoxコンポーネントのバインディング
次のコード・サンプルは、JDeveloperで図39-3のデータ・コレクションを使用してdvt:nBox
コンポーネントに生成されたバインディングを示しています。
<executables> <variableIterator id="variables"/> <iterator Binds="CensusView1" RangeSize="-1" DataControl="AppModuleDataControl" id="CensusView1Iterator"/> </executables> <bindings> <tree IterBinding="CensusView1Iterator" id="CensusView1"> <nodeDefinition DefName="model.CensusView" Name="CensusView10"> <AttrNames> <Item Value="Population2006Level"/> <Item Value="Income2005Class"/> <Item Value="State"/> <Item Value="Division"/> <Item Value="Region"/> </AttrNames> </nodeDefinition> </tree> </bindings>
NBoxのノードにデータを移入するためのルールは、ノード定義として定義されます。各ノード定義は、ビュー・オブジェクト1つと「NBoxの作成」ダイアログで指定された属性を参照しています。pageNamePageDef.xml
ファイルの詳細は、「pageNamePageDef.xml」を参照してください。
NBoxバインディングの編集
作成中に「NBoxの作成」ダイアログで指定していない属性は、バインディングに含められません。データ・コレクションの別の属性を参照する必要がある場合は、バインディングに手動で追加する必要があります。たとえば、この項のサンプルでは、ユーザーがノードにカーソルを置いたときに州の収入と人口を示すツールチップを表示しています。
ツールチップが適切に評価されるためには、Population2006 and Income2005
属性をNBoxのバインディング定義に追加する必要があります。バインディングを追加するには、「構造」ウィンドウでdvt:nBoxコンポーネントを右クリックし、「バインディングに移動」を選択します。「バインディング」セクションで「編集」を選択して、Population2006
属性とIncome 2005
属性を追加します。
図39-7は、表示属性にPopulation2006
およびIncome2005
が追加された設定済の「ツリー・バインディングの編集」を示しています。
「OK」をクリックすると、バインディングが追加した属性で更新されます。次のコード・サンプルは、CensusView10
ノード定義の改訂済バインディングを示しています。
<nodeDefinition DefName="model.CensusView" Name="CensusView10"> <AttrNames> <Item Value="Population2006Level"/> <Item Value="Income2005Class"/> <Item Value="State"/> <Item Value="Division"/> <Item Value="Region"/><Item Value="Population2006"/>
<Item Value="Income2005"/>
</AttrNames> </nodeDefinition>
NBoxコンポーネントのJSFページのコード
次の例は、NBoxのJSFページで生成されたコードを示しています。
<dvt:nBox id="nb1" var="ent" rowsTitle="#{viewcontrollerBundle.POPULATION}" value="#{bindings.CensusView1.collectionModel}" columnsTitle="#{viewcontrollerBundle.INCOME}"> <f:facet name="rows"> <af:group id="g1"> <dvt:nBoxRow label="#{viewcontrollerBundle.LOW}" id="nbr1" value="low"/> <dvt:nBoxRow label="#{viewcontrollerBundle.MEDIUM}" id="nbr2" value="medium"/> <dvt:nBoxRow label="#{viewcontrollerBundle.HIGH}" id="nbr3" value="high"/> </af:group> </f:facet> <f:facet name="columns"> <af:group id="g2"> <dvt:nBoxColumn label="#{viewcontrollerBundle.LOWER}" id="nbc1" value="lower"/> <dvt:nBoxColumn label="#{viewcontrollerBundle.LO_MID}" id="nbc2" value="lo-mid"/> <dvt:nBoxColumn label="#{viewcontrollerBundle.HI_MID}" id="nbc3" value="hi-mid"/> <dvt:nBoxColumn label="#{viewcontrollerBundle.UPPER}" id="nbc4" value="upper"/> </af:group> </f:facet> <dvt:nBoxNode column="#{ent.Income2005Class}" row="#{ent.Population2006Level}" label="#{ent.State}" id="nbn1"> <dvt:attributeGroups value="#{ent.Division}" type="color" label="#{ent.Division}" sectionLabel="#{viewcontrollerBundle.DIVISION}" id="ag1"/> <f:facet name="icon"> <dvt:marker id="m1"> <dvt:attributeGroups value="#{ent.Region}" type="shape" label="#{ent.Region}" sectionLabel="#{viewcontrollerBundle.REGION}" id="ag2"/> </dvt:marker> </f:facet> </dvt:nBoxNode> </dvt:nBox>
NBoxのプロパティとレイアウトの変更
NBoxを作成した後は、「NBoxの作成」ダイアログを使用して、コンポーネントのレイアウトを変更したり、ラベルなどの要素を追加したりできます。このダイアログを開くには、nBox
コンポーネントの「プロパティ」ウィンドウで、「編集」アイコンをクリックします。また、ビジュアル・エディタでNboxのコードを直接編集するか、「プロパティ」ウィンドウで値を設定して、レイアウトをカスタマイズすることもできます。
たとえば、図39-6に示したツールチップをNBoxに追加するには、「プロパティ」ウィンドウまたはコード・エディタで、NBoxノードのshortDesc
属性の値を入力できます。
<dvt:nBoxNode column="#{ent.Income2005Class}" row="#{ent.Population2006Level}" label="#{ent.State}" id="nbn1"shortDesc="Population: #{ent.Population2006}<br/>Income: #{ent.Income2005}">
... contents omitted
</dvt:nBoxNode>
NBoxのカスタマイズの詳細および例は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のNBoxコンポーネントの使用方法に関する項を参照してください。