| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.2.1.1.0) E77397-02 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.2.1.1.0) E77397-02 |
|
|
前 |
次 |
nBoxを使用して、ビジネス・データを視覚的に表現する方法について説明します。ここでは、ADFデータ・コントロールを使用して、データ優先開発でNBoxを作成する方法について説明します。
簡単なUI優先開発を使用してページを設計する場合は、NBoxをページに追加してから、データ・バインディングを構成してください。nBoxコンポーネントのデータ要件、タグ構造および外観と動作のカスタマイズ・オプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のNBoxコンポーネントの使用方法に関する項を参照してください。
この章の内容は次のとおりです。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
ADFのnBoxコンポーネントは、行と列で視覚的に表される2次元のグリッドに沿ってデータを視覚化および比較するために使用できる対話型コンポーネンを生成します。nBoxコンポーネントは、データを表すノード、およびそのノードが配置されるセルが含まれるグリッドの2つの部分から構成されます。ノードの数がセルに割り当てられた領域よりも大きい場合、NBoxでは、ユーザーがクリックして追加のノードにアクセスできるインジケータが表示されます。
たとえば、従業員のポテンシャルとパフォーマンスのデータの比較にnBoxコンポーネントを使用できます(行は従業員のポテンシャルを表し、列は従業員のパフォーマンスを表しています)。従業員を表すノードは、適切なセル内にスタンプされています。
図39-1 従業員のポテンシャルとパフォーマンスを比較する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データ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
ADFのNBoxコンポーネントでは、データがグリッド・レイアウトで表示され、2次元で表したり、データの大きさを表すように使用する行および列の数を構成可能です。ノードは実際のデータを表し、そのノードの値が、各セルに設定された範囲または大きさのいずれに相当するかに応じて、グリッドのセルの内部にスタンプされます。
図39-2は、3つの行と4つの列からなるグリッドが表示されるように構成したNBoxの例を示しています。各行は、Low、MediumまたはHighというラベルの付いた人口データ範囲を表しています。各列は、Lower、Lo-Mid、Hi-MidまたはUpperというラベルの付いた収入データ範囲を表しています。ノードは州を表しており、州の人口と収入レベルの値に基づいてセルに挿入されます。また、NBoxの例では、オプション属性グループを使用して、Divisionの値によって各ノードを色分けし、Regionの値によってノードのアイコン・マーカーの図形を変えています。
図39-2 米国の州、収入および人口を示すNBox
NBoxの作成ウィザードでは、NBoxを作成してデータにバインドするための宣言的サポートが提供されます。ウィザードページでは、次の操作を行うことができます。
次を含む、NBoxの初期レイアウトを指定します。
行および列の数(必須)
NBoxの各行および列の値(必須)
NBoxの行および列のタイトル
NBoxの各行および列のラベル
次を含む、NBoxのノードを構成します。
ノードの行と列の配置を決定するためにデータ・コレクションから使用する属性(必須)
プライマリ・ノードおよびセカンダリ・ノードのラベル
指定した属性に応じて色別または図形別にノードを分けるための属性グループ
ノードのアイコンまたはインジケータに使用するイメージ
NBoxウィザードの完了後、NBoxがページに追加されたら、「プロパティ」ウィンドウを使用してNBoxをさらにカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の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つに挿入されます。
図39-3 米国の収入と人口を示すNBoxのデータ・コントロール
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を作成するには、次の手順を実行します。
たとえば、この項に示したデータ・コントロールを使用するには、Row1に行の値としてlowを入力し、Column 1の値としてlowerを入力します。
オプションで、各セル内にテキスト・ラベルを表示するには、「テキスト・リソースの選択」を選択して、ラベルにテキスト・リソースを関連付けます。オブジェクトに格納されているデータにアクセスする場合や、EL式を使用してメソッドを参照および呼び出す場合は、「式ビルダー」を選択して「式ビルダー」ダイアログを開きます。
「次の行」または「次の列」をクリックすると、NBox内の次の行または列に移動できます。あるいは、NBox動的サンプル内の目的のセルをクリックすると、そのセルの行フィールドと列フィールドを表示できます。値の入力が完了したら、「次へ」をクリックして次のダイアログに移動します。
図39-4は、この項に示したNBoxの設定済のダイアログを示しています。
図39-4 米国の人口と収入を示すNBoxのNBoxダイアログの作成
属性グループを構成するには、次の値を入力します。
値でグループ化: ドロップダウン・リストから、属性グループをグループ化するためのデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
この項のサンプル・アプリケーションは、Divisionによってノードを、Regionによってアイコンをグループ分けするための属性グループを定義しています。たとえば、CensusView1コレクションの「値でグループ化」として「Division」を選択すると、NBoxのノードに表示される色は色に応じて変わります。
「ノード」、「アイコン」または「インジケータ」: ドロップダウン・リストから、表示のためのグループ分けに使用するオプションを選択します。
NBoxノードの場合、ノードを色でグループ分けするには「色」を選択し、属性グループを色で区別し、色をインジケータとして表示するには「インジケータの色」を選択します。属性グループを色とインジケータ色の両方で区別するには、「複数の属性の選択」を選択し、「色」と「インジケータの色」の両方を選択します。「OK」をクリックします。
NBoxのアイコンおよびインジケータの場合、「色」、「図形」または「パターン」を選択して、アイコンまたはインジケータを色、図形またはパターンでグループ分けします。属性グループを複数の属性で区別するには、「複数の属性の選択」を選択し、ダイアログから「色」、「図形」または「パターン」を選択します。「OK」をクリックします。
凡例ラベル: ドロップダウン・リストから、NBoxの凡例に表示するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
セクション・ラベル: ラベルにテキスト・リソースを使用するには、「テキスト・リソースの選択」を選択して、ラベルにテキスト・リソースを関連付けます。オブジェクトに格納されているデータにアクセスする場合や、EL式を使用してメソッドを参照および呼び出す場合は、「式ビルダー」を選択して「式ビルダー」ダイアログを開きます。
注意:
セクション・ラベルは、凡例のサブセクションの凡例内容を記したもので、凡例領域にレンダリングされます。たとえば、図39-2では、DivisionとRegionがセクション・ラベルです。
図39-5は、ノードを構成するための設定済の「NBoxの作成」ダイアログを示しています。
図39-5 ノード構成のための「NBoxの作成」ダイアログ
オプションで、「値固有のルール」をクリックして属性グループ・ダイアログを拡張し、一致ルールまたは例外ルールを指定します。一致ルールは、単純なtrueまたはfalse条件に対して色またはパターンを指定するか、特定の値に一致させたい場合に使用します。グループ化値が特定の条件を満たしたときの色またはパターンを指定する場合は、例外ルールを使用します。
一致ルールを指定するには、「一致ルール」セクションで「新規」をクリックして、次の値を入力します。
グループ値: 一致に対するカテゴリ値を入力します。カテゴリを表す文字列を入力するか、trueまたはfalseに設定できます。この値をtrueまたはfalseに設定する場合、「値でグループ化」フィールドには、次の例に示すように、trueまたはfalseに評価されるEL式(#{row.AmountInStock gt row.ReorderPoint}など)を指定する必要があります。
プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を、ノードのインジケータ領域の背景を色で区別する場合は「インジケータの色」を選択します。
プロパティ値: ドロップダウン・リストから、ノードの値が「グループ値」に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。
例外ルールを指定するには、「例外ルール」セクションで「新規」をクリックして、次の値を入力します。
条件: trueまたはfalseに評価されるJSF EL式を入力します。「条件」フィールドに式を直接入力するか、「式ビルダー」を選択してJSF EL式を入力できます。
プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を選択します。ノードのインジケータ領域をインジケータの色で区別する場合は、「インジケータの色」を選択します。
プロパティ値: ドロップダウン・リストから、ノードの値が「条件」フィールドで指定した条件に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。
凡例ラベル: 凡例ラベルにテキスト・リソースを使用するには、ドロップダウン・リストから「テキスト・リソースの選択」を選択します。このフィールドにテキストを入力するか、「式ビルダー」を選択してJSF EL式を入力することもできます。
「NBoxの作成」ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用してNBox属性の設定を指定することも、NBoxタグに関連付けられた子タグを使用してNBoxをさらにカスタマイズすることもできます。NBoxのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造および特殊機能の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のNBoxコンポーネントの使用方法に関する項を参照してください。
NBoxを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
JSFページのページ定義ファイル(pageNamePageDef.xml)内にNBoxのバインディングが作成されます
dvt:nBoxコンポーネントのJSFページに必要なタグが追加されます。
次のコード・サンプルは、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の作成」ダイアログで指定していない属性は、バインディングに含められません。データ・コレクションの別の属性を参照する必要がある場合は、バインディングに手動で追加する必要があります。たとえば、この項のサンプルでは、ユーザーがノードにカーソルを置いたときに州の収入と人口を示すツールチップを表示しています。
図39-6 NBoxのツールチップ
ツールチップが適切に評価されるためには、Population2006 and Income2005属性をNBoxのバインディング定義に追加する必要があります。バインディングを追加するには、「構造」ウィンドウでdvt:nBoxコンポーネントを右クリックし、「バインディングに移動」を選択します。「バインディング」セクションで「編集」を選択して、Population2006属性とIncome 2005属性を追加します。
図39-7は、表示属性にPopulation2006およびIncome2005が追加された設定済の「ツリー・バインディングの編集」を示しています。
図39-7 NBoxサンプルの「ツリー・バインディングの編集」ダイアログ
「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ページで生成されたコードを示しています。
<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のコードを直接編集するか、「プロパティ」ウィンドウで値を設定して、レイアウトをカスタマイズすることもできます。
たとえば、図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コンポーネントの使用方法に関する項を参照してください。
