| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1(11.1.1.9.0) B52029-12 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1(11.1.1.9.0) B52029-12 |
|
前 |
次 |
この章では、ADFデータ視覚化NBoxコンポーネントを使用し、簡単なUI優先開発を使用してNBoxでデータを表示する方法について説明します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。
アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してNBoxを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたNBoxコンポーネントの作成に関する項を参照してください。
この章の内容は次のとおりです。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
ADFのNBoxはインタラクティブなデータ可視化ツールで、ユーザーは、各次元でデータの範囲を表した2次元のグリッドとして表示されるデータを見ることができます。データ・アイテムを表すカスタマイズ可能なノードは、2つの次元の交差によって形成されるセル内に表示されます。
nBoxコンポーネントは、データを表すノード、およびそのノードが配置されるセルが含まれるグリッドの2つの部分から構成されます。ノードの数がセルに割り当てられた領域よりも大きい場合、NBoxでは、ユーザーがクリックして追加のノードにアクセスできるインジケータが表示されます。
たとえば、図26-1に示すように、従業員のポテンシャルとパフォーマンスのデータの比較にnBoxコンポーネントを使用できます(行は従業員のポテンシャルを表し、列は従業員のパフォーマンスを表しています)。従業員を表すノードは、適切なセル内にスタンプされています。
NBoxノードはまた、属性グループを使用するデータ・セットで、それぞれが一意の値またはグループを表す色、マーカーおよびインジケータでスタイル設定できます。図26-2に、部門、役割および経験によってスタイル設定された従業員ノードのNBoxを示します。
属性グループを表すNBoxノードは、サイズと数で表示するように構成することもでき、図26-3に示すように、各グリッド・セル内、または図26-4に示すように、すべてのセルに渡って表示できます。
ADFデータ視覚化nBoxコンポーネントでは、選択やツールチップなど、エンド・ユーザー向けの幅広い機能が提供されています。また、凡例の表示、カスタマイズ可能なノード形状や色など、幅広いプレゼンテーション機能も提供されます。
NBoxコンポーネントの使用やカスタマイズには、次の機能やコンポーネントの理解が役立ちます。
ポップアップのサポート: NBoxコンポーネントは、ユーザーがノード上をマウスでクリックしたりホバーしたときに、情報を提供したり、入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。
コンテキスト・メニュー: NBoxでは、コンテキスト・メニューを表示して、選択されたノードについての追加情報を提供する機能がサポートされています。
属性グループ: NBoxでは、データ・セット内での一意なグループの色、マーカー、イメージ、インジケータなどのスタイル属性値を生成するため、dvt:attributeGroupsタグの使用がサポートされています。
凡例のサポート: NBoxは、凡例を表示し、イメージと色をコントロールしているデータのタイプを視覚的にわかりやすくします。コンポーネントがパフォーマンスのレベルなどの条件に基づき色を指定するのに属性グループを使用する場合、凡例は使用される色を表示し、各色がどの値を表現しているかを示すこともできます。
ノード選択のサポート: NBoxでは、1つまたは複数のノードに対するユーザーのクリックに応答し、選択されたノード(複数可)に関する情報を表示する機能がサポートされています。
ツールチップのサポート: NBoxでは、ユーザーがノード上でマウスを動かすと、ノードの追加情報が表示される機能がサポートされています。
グループ化: 属性グループに基づいて複数のNBoxをまとめてノード・グループを構成し、各セル内または複数セルに渡ってグループを表示できます。
その他のノードのサポート: NBoxコンポーネントには、大きなコントリビュータとの比較において、ユーザーのデータ・モデルが多数の小さいコントリビュータを含む場合、データを集計する機能があります。
行または列の最大化: NBoxの行または列は、NBox内の指定した行や列、または指定した行と列の交点のセルを拡大するように構成できます。
nBoxコンポーネントを使用するには、データを定義し、NBoxをページに追加し、JDeveloperで追加の構成を完了します。
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の表示や動作をカスタマイズするために追加したり修正することのできる構成可能な属性や子コンポーネントを持ちます。接頭辞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: たとえば、背景色やラベルなど、個別のセルの属性を構成するために使用します。
NBoxノード(nBoxNode): NBoxノードのプロパティを定義するために使用します。コンポーネントは、次のようなf:facet要素の使用をサポートしています。
icon: 従業員の写真や人の形など、このノードの主要なグラフィカル要素として使用されるdvt:markerを指定します。
indicator: カラー・バーなど、このノードの副次的なグラフィカル要素として使用されるdvt:markerを指定します。
属性グループ(attributeGroups): このオプションのNBoxノードの子要素の子タグ(通常はdvt:markerコンポーネント)は、データ・セット内のそれぞれ一意の値、またはグループのスタイルの値を生成するために使用します。
属性グループは、NBoxの表示用の情報を提供するために必要であり、推奨されます。
凡例(legend): マーカーとラベルのペアの複数セクションを表示するために使用します。凡例は、NBoxコンポーネントの子として定義します。
簡単なUI優先開発を使用してページを設計している場合は、コンポーネント・パレットを使用してNBoxをJSFページに追加します。nBoxコンポーネントをページにドラッグ・アンド・ドロップすると、NBoxがページに追加され、プロパティ・インスペクタを使用してデータの値の指定、および追加の表示属性の構成ができます。
プロパティ・インスペクタで、プロパティ・フィールドの上にマウスを置くと表示されるアイコンをクリックして、プロパティの説明を表示またはオプションを編集することができます。図26-5に、NBoxのvalue属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してNBoxを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたNBoxコンポーネントの作成に関する項を参照してください。 |
始める前に:
NBoxの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、26.2.2項「NBoxの構成」を参照してください。
次のタスクを実行する必要があります。
2.2項「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
2.4項「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
NBoxをページに追加するには:
コンポーネント・パレットで、「ADFデータ視覚化」ページの「共通」パネルから、NBoxをページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタでNBoxの属性を表示します。ヘルプ・ボタンを使用して、nBoxコンポーネントのタグの完全なドキュメントを表示します。
「外観」の項を開き、次の属性の値を入力します。
ColumnsTitle: NBoxグリッドの横軸に沿う、下から上への列の順序付けられたリストのラベルのテキストを入力します。または、属性のドロップダウン・メニューから「テキスト・リソースの選択」あるいは「式ビルダー」を選び、テキスト・リソースまたはEL式を選択します。
RowsTitle: NBoxグリッドの縦軸に沿う、開始から終了への行の順序付けられたリストのラベルのテキストを入力します。または、属性のドロップダウン・メニューから「テキスト・リソースの選択」あるいは「式ビルダー」を選び、テキスト・リソースまたはEL式を選択します。
Summary: NBoxの目的およびスクリーン・リーダーをサポートするための構造の概要を入力します。
「構造」ウィンドウでdvt:nBox要素を展開し、NBoxの「ファセット」要素を展開し、「NBoxの中に挿入」→「ファセット列」を選択します。
構造ウィンドウでf:facet - columns要素を右クリックし、「ファセット列の中に挿入」→「グループ」を選択します。
構造ウィンドウでGroup要素を右クリックし、NBoxに追加する各列で「グループの中に挿入」→「ADFデータ視覚化」→「NBox列」を選択します。
NBox列の挿入ダイアログで、NBoxの列ディメンション内のデータの定義されている範囲を表す値を入力します。たとえば、3列に渡る範囲で米国の人口を表示するNBoxでは、low、mediumおよびhighを入力します。
構造ウィンドウでdvt:nBox要素を右クリックし、「NBoxの中に挿入」→「ファセット行」を選択します。
構造ウィンドウでf:facet - row要素を右クリックし、「ファセット行の中に挿入」→「グループ」を選択します。
構造ウィンドウでGroup要素を右クリックし、NBoxに追加する各行で「グループの中に挿入」→「ADFデータ視覚化」→「NBox行」を選択します。
NBox行の挿入ダイアログで、NBoxの行ディメンション内のデータの定義されている範囲を表す値を入力します。たとえば、3行に渡る範囲で所得水準を表示するNBoxでは、lower、mediumおよびupperを入力します。
コンポーネント・パレットからNBoxをJSFページにドラッグ・アンド・ドロップし、生成中にデータ・バインドを選択しなかった場合、Developerにより、タグの最小セットのみが生成されます。次のコードが生成されます。
<dvt:nBox id="exampleNBox"/>
NBoxの作成時にデータとデータ・コントロールのバインドを選択した場合、JDeveloperにより、データ・モデルに基づいたコードが生成されます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたNBoxコンポーネントの作成に関する項を参照してください。
