| 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データ視覚化diagramコンポーネントを使用し、簡単なUI優先開発を使用してダイアグラムでデータを表示する方法について説明します。データ要件、タグ構造、およびコンポーネントの概観と動作をカスタマイズするためのオプションの定義についても説明します。
アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してダイアグラムを作成することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたダイアグラムの作成に関する項を参照してください。
この章の内容は次のとおりです。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
ダイアグラムを使用し、データを表すノードと呼ばれる図形、およびノード間の関連を表すリンクを使用して情報をモデル化し、表現し、視覚化します。ダイアグラムは、柔軟で高度に構成可能なコンポーネントで、シンプルな図形やラベル付きのイメージを使用して幅広いデータ・アイテムを表示でき、また、ズーム・レベルやデータ・セット内の一意のグループに対する色などのスタイルに関する属性値を使用してより複雑なデータを表示できます。
ダイアグラムのリンクおよびノードのレイアウトは、フレームワークを介して、複数のカスタムJavaScriptファイルを使用して構成されます。フレームワークでは、SVGおよびJava2Dを含め、複数のプラットフォームでのレンダリングがサポートされます。
たとえば、ダイアグラムでは、データベース・スキーマを表、ビューおよびストアド・プロシージャなどの論理的なグループ・オブジェクトにモデル化したり、各従業員の複合的な情報セットとともに異なるズーム・レベルで従業員ツリーを表現したり、またはサンバースト・レイアウトを使用して米国の州間の人口移動の総数を視覚化したりできます。
ダイアグラムでは、ノードに図形が使用され、ノード間の関連を表すリンクに線が使用されます。図33-1に、円およびそれらの関連を表す直線からなる、円形のレイアウト・パターンで構成されたシンプルなダイアグラムを示します。この例には、ダイアグラムのズームのためのデフォルトのコントロール・パネルが含まれています。
ダイアグラムはまた、マスター/ディテール・リレーションシップで階層データを視覚的に表示するように構成できます。図33-2に、コントロール・パネル、多数のノードおよびノードを接続するリンクを含む実行時の従業員ツリー・ダイアグラムを示します。また図では、異なるズーム・レベルでデータの複数のセットを表示するaf:showDetailItem要素を使用したノード・パネル・カードも示されています。
ダイアグラム・コンポーネントは、グラフを1次元レイアウトで視覚化するグラフ表示である、アーク・ダイアグラムを表示するように構成することもできます。エッジまたはノード間の接続が円弧で表現され、ノードは単一の軸に沿って表示されます。図33-3は、ヴィクトル・ユーゴーの小説「レ・ミゼラブル」の登場人物を使用した、この書物の同じ章に同時に登場する人物ペア間の同時出現を表示するアーク・ダイアグラムを示しています。
ダイアグラムは、データベース・スキーマを表示するように構成できます。図33-4は、コンテキストおよびナビゲーションのオプションをユーザーに提供するダイアグラムの簡略ビューであるサマリー・ウィンドウを持つ、データベース・スキーマのレイアウト・ダイアグラムを示しています。
ダイアグラムはサンバースト・レイアウトで構成することもでき、定量的な階層データをサイズと色で視覚的に表現し、2つの次元にまたがり表示します。図33-5に、総量を表示する属性グループを使用した、米国の各州の人口移動を表示するダイアグラムを示します。
ADFデータ視覚化diagramコンポーネントは、ズーム、グループ化およびパンなど、エンド・ユーザー向けの幅広い機能を提供します。これらはまた、凡例の表示、およびカスタマイズ可能な色やラベル・スタイルなど、幅広いプレゼンテーション機能を提供します。
ダイアグラム・コンポーネントの使用やカスタマイズには、次の機能やコンポーネントの理解が役立ちます。
コントロール・パネル: ユーザーが実行時にダイアグラム・コンポーネントの位置および外観を操作するためのツールがあります。デフォルトでは、ダイアグラムの左上隅に隠れた状態で表示されます。ユーザーは、コントロール・パネルの非表示/表示ボタンをクリックして、コントロール・パネルを非表示にするか、展開します。
図33-6に、ズーム・コントロールおよびズームして合せるオプションが表示されている展開されたコントロール・パネルを示します。
ズーム: デフォルトで有効になっており、ユーザーはダイアグラムの表示を拡大または縮小表示に変更できます。ズームの最大スケールと最小スケールは、そのダイアグラム用に構成できます。
パン: デフォルトで有効になっており、ユーザーは任意のオープン・エリアでダイアグラムを選択し、ダイアグラム全体を上下左右に移動し、再配置できます。
ポップアップのサポート: ダイアグラム・コンポーネントは、ユーザーがノード上をマウスでクリックしたりホバーしたときに、情報を提供するポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。図33-7に、ユーザーがノードにマウス・オーバーしたときのノードのポップアップ・ウィンドウを示します。
凡例のサポート: ダイアグラムには凡例が表示され、図形や色で表現されて、データのタイプが視覚的にわかりやすくなります。コンポーネントが属性グループを使用し、条件に基づき色を指定する場合、凡例は使用される色を表示し、各色がどの値を表現しているかを示すこともできます。
サマリー・ウィンドウ: コンテキストおよびナビゲーションのオプションをユーザーに提供するダイアグラムの簡略ビューを表示します。サマリー・ウィンドウのビューポートは、ドラッグしてダイアグラムをパンできます。ユーザーは、サマリー・ウィンドウの非表示/表示ボタンをクリックして、ウィンドウを非表示にするか、展開します。図33-8に、展開され、パンされてデータベース・スキーマ・レイアウトの一部を表示するサマリー・ウィンドウを示します。
コンテキスト・メニュー: ダイアグラムでは、コンテキスト・メニューを表示して、選択されたノードについての追加情報を提供する機能がサポートされています。
属性グループ: ダイアグラム・ノードでは、データ・セット内での一意なグループの色などのスタイル属性値を生成するため、dvt:attributeGroupsタグの使用がサポートされています。
選択のサポート: ダイアグラムでは、1つまたは複数のノードに対するユーザーのクリックに応答し、選択された要素に関する情報を表示する機能がサポートされています。
ツールチップのサポート: ダイアグラムでは、ユーザーが要素上でマウスを動かすとノードまたはリンクの追加情報を表示する機能がサポートされています。図33-9に、ノードおよびリンクのツールチップを示します。
ドリルのサポート: ダイアグラム・コンポーネントではドリルがサポートされ、階層をナビゲートしてノードについてのより詳細な情報を表示できます。
ハイライト表示のサポート: ダイアグラムでは、ユーザーがダイアグラム中の要素の上にマウスをホバーしたときに、ノードおよびリンクのビューをハイライト表示するように設定できます。ハイライト表示は、次の値を指定できます: none、node、nodeAndIncomingLinks、nodeAndOutgoingLinksおよびnodeAndLinks。図33-10に、nodeAndLinksの値が指定されているときの、ダイアグラム内をホバーしてハイライト表示されたノードのビューを示します。
図33-11に、nodeAndLinksの値が指定されているときの、ダイアグラム内をホバーしてハイライト表示されたリンクのビューを示します。
スタック: ノードをグループ化でき、それらのノードを積上げて表示できます。図33-12に、ノードのスタックを示します。デフォルトでは、スタック内のノードの数が表示されます。
コンテナ・ノード: ノードは、1つ以上のコンテナ・ノードを使用して階層的な関係を表すことができます。図33-13に、データベース・スキーマ内のコンテナ・ノードのセットを示します。
ノードのコントロール: デフォルトで、コントロールを説明するツールチップが表示されます。図33-13に、ダイアグラム・ノードのコントロールを示します。
表33-1 ダイアグラム・ノードのコントロール
| コントロール | 名前 | 説明 |
|---|---|---|
 |
分離 |
ユーザーは、単一のノードを切り離し、ダイアグラム中に分離して表示できます。 |
 |
プレビュー・スタック |
ユーザーは、グループ内のすべてのノードを表示できます。 |
 |
スタック解除 |
ユーザーは、すべてのノードが表示されるように、グループ化されたノードのセットを表示できます。 |
 |
再スタック |
ユーザーは、関連するノードのセットを閉じてグループ化して表示できます。 |
 |
リストア |
ユーザーは、分離ノードからダイアグラム・ビューに戻すことができます。 |
 |
閉じる |
ユーザーは、グループ内のノードのビューを閉じることができます。 |
 |
ドリル |
ユーザーは、階層配置内で親から子ノードにドリルできます。 |
 |
その他のリンク |
ユーザーは、選択したノードに関連付けられたリンクおよびノードを表示できます。 |
パレット: ダイアグラムでは、レイアウト構成にドラッグ・アンド・ドロップするために使用できる、ノードおよびリンク・アイテムのパネルがサポートされています。ユーザーは、パレットの非表示/表示ボタンをクリックして、ウィンドウを非表示にするか、展開します。図33-14に、ダイアグラムの作成に使用可能なノードおよびリンクのパレットを示します。
印刷可能または電子メール対応ページ表示: ADF Facesでは、印刷または電子メール用の簡略化されたモードで、ADF Faces WebアプリケーションからJSFページを出力できます。たとえば、ユーザーがページ(またはページの一部)を印刷できるようにし、一方でWebブラウザでレンダリングされているとおりにページを印刷するのではなく、スクロールバーやボタンなど、印刷ページに必要ないアイテムを削除することが望ましい場合があります。ページが電子メールで送信される場合は、電子メール・クライアントが正しく表示できるようにページを簡略化する必要があります。このような出力用に簡略化されたページを作成する場合の詳細は、付録P「異なる出力モードの使用方法」を参照してください。
diagramコンポーネントを使用するには、データを定義し、ダイアグラムのレイアウトを呼び出すJavaScriptのメソッドを指定し、ダイアグラムをページに追加し、JDeveloperで追加の構成を完了します。
ダイアグラムは、別々の、しかし関連付けられた2つのデータ・オブジェクトのセット(ノードのセット、およびそれらのノードと結合するリンクのセット)を表現します。データは、Listインタフェース(java.util.ArryList)の実装、またはCollectionModel(org.apache.myfaces.trinidad.model.CollectionModel)のいずれかで用意したデータの2つの別々のコレクションとして提供します。データは任意の型が使用でき、通常、String、intまたはlongです。
ダイアグラムのノードおよびリンクの両方のコレクションは、コレクション内の行ごとに一意のIDを表す属性が必要です。コレクションは、value属性を使用してマッピングされ、コレクションを反復処理するためのコンポーネントを使用してノードの各インスタンスをスタンプ・アウトします。子コンポーネントにスタンプ・アウトされるたびに、現在のコンポーネントのデータがEL式のデータ・レイヤー・コンポーネントによって使用されるvarプロパティにコピーされます。ダイアグラムのレンダリングが完了すると、varプロパティは削除されるか前の値に戻ります。慣例では、varはnodeまたはlinkに設定されます。
value属性の値は、ノードまたはリンクのデータ・モデルに格納するか、またはUI優先開発を使用している場合はクラスまたはマネージドBeanに格納する必要があります。
|
注意: CollectionModelには、ADFバインディング・レイヤーによって提供されたデータが表または階層バインディングの形で含まれており、データ・コントロールを使用するADFモデルからのデータ・バインドに使用できます。 |
diagramコンポーネントは、ツリーマップの表示や動作をカスタマイズするために追加したり修正したりすることのできる構成可能な属性や子コンポーネントを持ちます。接頭辞dvt:は、各ダイアグラム・コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
ダイアグラムの子コンポーネント、属性およびサポートされているファセットを次の部分で構成できます。
ダイアグラム(dvt:diagram): ノード(diagramNodes)およびリンク(diagramLinks)のコレクションをラップし、ダイアグラムのレイアウト(clientLayout)参照を指定します。次の属性を構成してダイアグラムの表示をコントロールします。
アニメーション: animationOnDisplay属性を使用して初期のアニメーションをコントロールします。アニメーション期間をデフォルトの500ミリ秒から変更するには、animationDuration属性を修正します。
空テキスト(emptyText): emptyText属性を使用して、表示するノードがない場合に表示するテキストを指定します。
ズーム(zooming): デフォルトで、ダイアグラムは拡張または圧縮ビューで表示できます。maxZoomおよびminZoomを使用してズームのスケールの大きさを指定します。
パン(panning): デフォルトでは、ユーザーはデバイス固有のジェスチャーによりダイアグラムを選択して上下左右に移動できます。
クライアント・レイアウト(clientLayout): ダイアグラムのレイアウトを実行するために呼び出されるJavaScriptメソッドの登録に使用します。詳細は、33.3項「ダイアグラムのレイアウト・フレームワークの使用」を参照してください。
ダイアグラム・ノード(diagramNodes): ダイアグラム・ノードのコレクションをラップします。次の属性を構成してダイアグラム・ノードのコレクションを管理します。
value: ノードのコレクションのデータ・モデルを指定します。javax.faces.CollectionModelのインスタンスを使用可能です。
var: ノードのコレクションの各要素を参照するために使用するEL変数の名前です。
varStatus: コンポーネントの状態に関するコンテキスト情報を提供するために使用します。
groupBy: スペース区切りのリストとして属性グループIDをリストし、スタック・ノードに使用します。
highlightBehavior: ユーザーがダイアグラム中のノードの上にマウスをホバーしたときのハイライト動作の指定に使用します。有効な値は、none、node、nodeAndIncomingLinks、nodeAndOutgoingLinksおよびnodeAndLinksです。
ノード(diagramNode): コレクション(diagramNodes)内のノードの各インスタンスをスタンプ・アウトするために使用します。ノードは、ダイアグラム内のデータを表示する図形です(たとえば、組織の中の従業員、またはネットワーク内のコンピュータ)。
ノード・コンポーネントは、次のようなf:facet要素の使用をサポートしています。
ズーム: 異なるズーム・レベルでコンテンツを表示する1つまたは複数のf:facet要素の使用をサポートし、より高いズーム・レベルではより詳細なコンテンツが使用可能です。
f:facet name="zoom100"
f:facet name="zoom75"
f:facet name="zoom50"
f:facet name="zoom25"
f:facet要素は、子コンポーネントとしてADFデータ視覚化のmarkerおよびpanelCardコンポーネントに加え、af:outputText、af:imageおよびaf:panelGroupLayoutなどの多数のADF Facesコンポーネントの使用をサポートします。
実行時に、ノードにはユーザーにノード間のナビゲートを可能にし、デフォルトで他のノードを表示または非表示にできるコントロールが含まれます。ノードのコンテンツの指定方法およびズーム・レベルの定義方法の詳細は、次を参照してください。
Label: レイアウトに独立して配置できるラベルを指定する機能を提供します。
Background: ノードのサイズに合せて自動的にスケールされるズーム・ファセットの背景を指定するために使用します。コンテンツは背景の上にスタンプされます。ファセットでは、af:imageおよびdvt:markerがサポートされます。
Overlay: ズーム・ファセットにオーバーレイして、1つまたは複数のマーカーを配置するために使用します。オーバーレイは、dvt:markerのdvt:pointLocation要素を使用して配置されます。複数のオーバーレイ・マーカーを指定する場合は、af:group要素を使用します。
Container: 親(コンテナ)ノードの領域をスタンプ・アウトするために提供されるテンプレートです。上下左右、および左右の領域で左から右への読取り方向を指定可能です。
属性グループ(attributeGroups): このオプションのダイアグラム・ノードの子要素の子タグ(通常はdvt:markerコンポーネント)は、データ・セット内のそれぞれ一意の値、またはグループのスタイルの値を生成するために使用します。また、たとえば、ズーム中にすべての定義済ズーム・ファセットの一貫性を維持したり、またはaf:panelGroupLayoutの背景色を設定したりするために、複数のコンポーネントに属性グループを適用できます。
属性グループは、ダイアグラムの凡例表示用の情報を提供するために必要であり、推奨されます。
リンク(diagramLinks): ダイアグラム・リンクのコレクションをラップします。次の属性を構成してダイアグラム・リンクのコレクションを管理します。
value: リンクのコレクションのデータ・モデルを指定します。javax.faces.CollectionModelのインスタンスを使用可能です。
var: リンクのコレクションの各要素を参照するために使用するEL変数の名前です。
varStatus: コンポーネントの状態に関するコンテキスト情報を提供するために使用します。
highlightBehavior: ユーザーがダイアグラム中のリンクの上にマウスをホバーしたときのハイライト動作の指定に使用します。有効な値は、noneおよびlinkです。
リンク(diagramLink): コレクション(diagramLinks)内のリンクの各インスタンスをスタンプ・アウトするために使用します。リンクは、1つのノードを別のノードと接続します。次の属性を使用してリンクの表示を構成できます。
linkColor: CSSの名前付きの色でリンクの色を指定するために使用します。
linkStyle: リンクの外観を指定するために使用します。有効な値は、solid (デフォルト)、dash、dot、dashDotです。
linkWidth: リンクの幅をピクセル単位で指定するために使用します。デフォルト値は1です。
startConnectorType: 必要な場合、開始ノードのリンク・コネクタとして使用する、利用可能なイメージの1つを指定するために使用します。有効な値は、none、arrowOpen、arrow、arrowConcave、circle、rectangleおよびrectangleRoundedです。
endConnectorType: 必要な場合、終了ノードのリンク・コネクタとして使用する、利用可能なイメージの1つを指定するために使用します。有効な値は、none、arrowOpen、arrow、arrowConcave、circle、rectangleおよびrectangleRoundedです。
label: リンクに使用するラベルを指定するために使用します。
リンク・コンポーネントは、次のようなf:facet要素の使用をサポートしています。
startConnector: 開始ノードのリンク・コネクタのカスタム・イメージの使用をサポートします。
endConnector: 終了ノードのリンク・コネクタのカスタム・イメージの使用をサポートします。
label: リンクのカスタム・ラベルの使用をサポートします。
リンクの外観をカスタマイズし、ラベルを追加する方法は、次を参照してください。
凡例(legend): マーカーとラベルのペアの複数セクションを表示するために使用します。凡例は、ダイアグラム・コンポーネントの子として定義します。
パレット(palette): ノードおよびリンクの要素(paletteItem)を作成するためのパネルを作成するために使用します。パレットにはノードおよびラベルのペアの複数のセクションを表示でき、それらのセクションの順序を越えた、カスタム・タイトル・ヘッダーおよび宣言型コントロールがサポートされています。パレットには、ノードの複数のセクション(paletteSection)およびリンクの単一のセクション(paletteLinkDefs)を含めることができます。
JDeveloperでUI優先開発を使用してダイアグラムを作成する場合、ダイアグラム作成ウィザードにより、作成するダイアグラムのレイアウトに指定するために使用または編集できる、デフォルト・クライアント・レイアウトを使用するオプションが提供されます。デフォルトのレイアウトは、力指向グラフ描画アルゴリズムに基づいています。デフォルト・レイアウトの完全なコードを見るには、JDeveloperでそのファイルを表示するか、または付録G「デフォルト・クライアント・レイアウトのコード・サンプル」を参照してください。
デフォルト・クライアント・レイアウトを使用してダイアグラムを作成すると、JDeveloperで次のアクションが実行されます。
JavaScript(JS)の機能として、ADFランタイム環境とともにレイアウトが登録されます。作成プロセスで、次の命名規則で自動的にJSファイルがViewController/src/js/layoutディレクトリに追加されます。
ApplicationNameDiagramLayout.js
たとえば、アプリケーションがDiagramSampleという名前ならば、JSファイルはDiagramSampleDiagramLayout.jsという名前になります。
まだ存在しない場合、adf-js-features.xmlファイルが作成され、機能名としてApplicationNameDiagramLayoutが、機能クラスとしてJSファイルへのパスが追加されます。このファイルは、ViewController/src/META-INFディレクトリに配置されます。
次の例は、DiagramSampleという名前のアプリケーションのadf-js-features.xmlファイルを示しています。
<?xml version="1.0" encoding="UTF-8" ?>
<features xmlns="http://xmlns.oracle.com/adf/faces/feature">
<feature>
<feature-name>DiagramSampleDiagramLayout</feature-name>
<feature-class>js/layout/DiagramSampleDiagramLayout.js</feature-class>
</feature>
</features>
ダイアグラムからは、dvt:clientLayout要素を使用してJavaScriptファイルを参照します。
次の例に、JavaScriptファイルを参照するサンプル・コードを示します。
<dvt:diagram layout="DiagramSampleDiagramLayout" id="d2"
<dvt:clientLayout method="DiagramSampleDiagramLayout.forceDirectedLayout"
featureName="DiagramSampleDiagramLayout"
name="DiagramSampleDiagramLayout"/>
...
</diagram>
メイクまたはビルド・コマンドを起動するときに、.jsファイル・タイプをソース・パスから出力ディレクトリにコピーするように開発環境を構成します。
ダイアグラム用にカスタムのクライアント・レイアウトを設計して使用する場合は、これらのアクションを手動で完了する必要があります。詳細は、33.3.3項「カスタム・レイアウトの登録方法」を参照してください。
簡単なUI優先開発を使用してページを設計している場合は、コンポーネント・パレットを使用してダイアグラムをJSFページに追加します。ダイアグラム・コンポーネントをページにドラッグ・アンド・ドロップすると、「ダイアグラムの作成」ウィザードが表示されます。
ユーザーが「終了」をクリックすると、ダイアグラムがページに追加され、プロパティ・インスペクタを使用してデータの値の指定、および追加の表示属性の構成ができます。または、作成の間にデータのバインドを選択でき、ダイアグラムの構成ウィザードの「ノードおよびリンク・データ」ページを使用して、関連するノードおよびリンク・データの構成ができます。
プロパティ・インスペクタで、プロパティ・フィールドの上にマウスを置くと表示されるアイコンをクリックして、プロパティの説明を表示またはオプションを編集することができます。図33-15に、ダイアログのLayout属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してダイアグラムを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたダイアグラム・コンポーネントの作成に関する項を参照してください。 |
始める前に:
ダイアグラムの属性やダイアグラムの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、33.2.2項「ダイアグラムの構成」を参照してください。
次のタスクを実行する必要があります。
2.2項「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
2.4項「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
ダイアグラムをページに追加するには:
コンポーネント・パレットの「ADFデータ視覚化」ページで、「共通」パネルから「ダイアグラム」をページにドラッグ・アンド・ドロップし、「ダイアグラムの作成」ウィザードを開きます。
「クライアント・レイアウト」ページで、次のオプションのいずれかを選択します。
デフォルト・クライアント・レイアウト: JDeveloperで使用可能なレイアウトを使用します。このレイアウトは、力指向グラフ描画アルゴリズムに基づいています。
カスタム・クライアント・レイアウト: カスタム設計されたクライアント・レイアウトを使用します。
レイアウトなし: ノードおよびリンクのレイアウトを指定せずにダイアグラムを作成します。
デフォルト・レイアウトを選択するか、カスタム・レイアウトを指定する場合は、JDeveloperでそのファイルを開くことができます。また、プロパティ・インスペクタで「コンポーネント定義の編集」をクリックして、「ダイアグラムの編集」 - 「クライアント・レイアウトの構成」を表示し、「検索」をクリックしてメソッドをポップアップに表示できます。
「終了」をクリックしてダイアグラムをページに追加します。
|
注意: JSPページが実行されると、この時点ではダイアグラムはデータにバインドされていないので、コントロール・パネルのみが表示されます。 |
オプションで、「次へ」をクリックしてウィザードを使用し、ダイアグラムのノードおよびリンクに表示するデータとなるADFデータ・コントロールに移動し、ダイアグラムを「ノードおよびリンク・データ」ページにバインドします。このオプションを選択すると、ダイアログのデータ・バインディングのフィールドが編集のために使用可能になります。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
プロパティ・インスペクタで、ダイアグラムの属性を表示します。ヘルプ・ボタンを使用して、diagramコンポーネントの完全なタグ・ドキュメントを表示します。
「外観」の項を開き、次の属性の値を入力します。
ControlPanelBehavior: コントロール・パネルのデフォルトの表示をinitCollapsedからinitExpandedまたはHiddenに変更するには、属性のドロップダウン・メニューを使用します。
Summary: ダイアグラムの目的およびスクリーン・リーダーで使用する場合の構造のサマリーを入力します。
コンポーネント・パレットからダイアグラムをJSFページにドラッグ・アンド・ドロップし、生成中にデータ・バインドを選択しなかった場合、Developerにより、タグのセットが生成されます。次のコードが生成されます。
<dvt:diagram layout="DiagramSampleDiagramLayout" id="d2">
<dvt:clientLayout method="DiagramSampleDiagramLayout.forceDirectedLayout"
featureName="DiagramSampleDiagramLayout"
name="DiagramSampleDiagramLayout"/>
<dvt:diagramNodes id="dn1">
<dvt:diagramNode id="dn2">
<f:facet name="zoom100">
<dvt:marker id="m1"/>
</f:facet>
</dvt:diagramNode>
</dvt:diagramNodes>
<dvt:diagramLinks id="dl1">
<dvt:diagramLink id="dl2"/>
</dvt:diagramLinks>
</dvt:diagram>
ダイアグラムの作成時にデータとデータ・コントロールのバインドを選択した場合、JDeveloperにより、データ・モデルに基づいたコードが生成されます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたダイアグラム・コンポーネントの作成に関する項を参照してください。
DVTダイアグラムのレイアウト・フレームワークは、ダイアグラムのビジネス・ニーズを満たすものならばどのような構成でも、ダイアグラム・ノードおよびリンクの表示をサポートします。JavaScriptで書かれ、HTML5に基づくフレームワークでは、SVGおよびJava2Dを含め、複数のプラットフォームでのレンダリングがサポートされます。
ダイアグラムでは、機能としてアプリケーションに追加するJavaScriptのメソッドで定義されたクライアント・レイアウトの構成を必要とします。クライアント・レイアウトにより、ページ上のノードおよびリンクの配置方法を指定します。ダイアグラムは、親ノードと子ノードの場合のように、複数のレイアウトで動作するように構成できますが、少なくとも1つのレイアウトをアプリケーションに登録する必要があります。すべてのノードおよびリンクの表示のレンダリングはダイアグラム・コンポーネントによって指定され、すべてのレイアウト・ロジックはレイアウトのJavaScriptファイルに含まれます。
ダイアグラム・コンポーネントには力指向グラフ描画アルゴリズムに基づくデフォルトのレイアウトが含まれており、必要に応じて変更して使用できます。デフォルトのforceDirectedLayoutでは、すべてのリンクがほぼ同じ長さとなり、可能なかぎり交差リンクが少なくなるようにダイアグラム・ノードが配置されます。
また、DVTダイアグラムAPIを使用してアプリケーションの機能として追加するJavaScriptオブジェクト内で独自のクライアント・レイアウト構成を指定することもできます。
ダイアグラムのレイアウトの基本的な処理は、ノードの配列およびリンクの配列をループし、それぞれの位置情報を設定することです。
カスタム・ダイアグラム・レイアウトのコードでは、表33-2に定義されるDVTダイアグラムのベース・クラスが使用されます。
表33-2 DVTダイアグラムのベース・クラス
| ベース・クラス | 説明/メソッド(部分) |
|---|---|
|
|
レイアウト呼出しのコンテキストを定義します。 レイアウト: ノード: リンク: ヘルパー: |
|
|
レイアウト呼出しのリンク・コンテキストを定義します。 最上位レベル: 開始/終了ノード: レベル: |
|
|
レイアウト呼出しのノード・コンテキストを定義します。 最上位レベル: 状態: レベル: |
|
|
関数のパラメータおよび戻り値に使用される点のクラスです( |
|
|
関数のパラメータおよび戻り値に使用される長方形やディメンションのクラスです( |
ここで、DVTダイアグラム用のJavaScript APIの全体を表示できます。
DVTのdiagramの子コンポーネントのclientLayoutは、layout属性内で、ダイアグラムで参照される別名を使用してノードおよびリンクのレイアウトを実行するために必要なJavaScriptを識別します。ダイアグラムは複数のクライアント・レイアウトを使用することができ、たとえば、親コンテナ・ノードおよび子ノードがある場合は、少なくとも1つのレイアウトをアプリケーションに登録する必要があります。
DVTのclientLayoutコンポーネントには3つの属性があります。
name: ダイアグラムのlayoutプロパティから参照されるレイアウトの別名です。
method: レイアウトを実行するJavaScript関数の名前を指定します。
featureName: method属性で指定された関数を検索して実行するために必要なJavaScriptのソース·ファイルを指定します。
ダイアグラムのカスタム・レイアウトを作成する場合、次のアクションを実行してADF Facesのランタイム環境を構成する必要があります。
JavaScript(JS)の機能として、ADFランタイム環境とともにレイアウトを登録します。
まだ存在しない場合、adf-js-features.xmlファイルを作成し、機能名としてApplicationNameDiagramLayoutを、機能クラスとしてJSファイルへのパスを追加します。
ダイアグラムからdvt:clientLayout要素を使用してJavaScriptファイルを参照します。
メイクまたはビルド・コマンドを起動するときに、.jsファイル・タイプをソース・パスから出力ディレクトリにコピーするように開発環境を構成します。
始める前に:
ダイアグラムの属性やダイアグラムの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、33.2.2項「ダイアグラムの構成」を参照してください。
次のタスクを実行する必要があります。
2.2項「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
2.4項「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
カスタム・レイアウトを登録するには:
アプリケーションのViewController/src/js/layoutディレクトリに、次の命名規則を使用してカスタムのJavaScriptファイルを追加します。
ApplicationNameDiagramLayout.js
たとえば、アプリケーションがDiagramSampleという名前ならば、JSファイルはDiagramSampleDiagramLayout.jsという名前になります。
「アプリケーション・ウィンドウ」→「プロジェクト・パネル」で、ViewController/src/META-INFフォルダを右クリックし、「新規」→「XMLファイル」を選択します。
「ファイル名」にadf-js-features.xmlと入力し、「OK」をクリックします。
XMLエディタで機能名を定義し、その名前をJavaScriptファイルに関連付けます。次に例を示します。
<?xml version="1.0" encoding="utf-8"?>
<features xmlns="http://xmlns.oracle.com/adf/faces/feature">
<feature>
<feature-name>DiagramSampleDiagramLayouts</feature-name>
<feature-class>js/layouts/DiagramSampleDiagram.js</feature-class>
</feature>
</features>
アプリケーション・ナビゲータでプロジェクトをダブルクリックし、「プロジェクト・プロパティ」ダイアログを開きます。
「コンパイラ」の設定ページ→「ファイル・タイプの出力ディレクトリへのコピー」で、セミコロン区切りのリストに.jsファイル・タイプを追加します。完成したダイアログを次に示します: 
「OK」をクリックします。
クライアント・レイアウトは、ダイアグラム内のノードおよびリンクのレイアウトを指定します。たとえば、図33-16に、シンプルな垂直パターンでのダイアグラム・ノードのレイアウトを示します。
このレイアウトでは、getNodeCount() APIを使用し、レイアウト関数に渡されるレイアウト・コンテキスト・オブジェクトにノードの数に関する情報が含まれ、getNodeByIndex() APIを使用し、各ノード・オブジェクトへのアクセスが提供されます。各ノードにアクセスするためにノードをループした後、ダイアグラム領域上にノードを配置するためにsetPosition() APIの呼出しが使用されます。その位置は、単純なx、y座標を定義するDvtDiagramPoint()オブジェクトの形式で渡されます。
ノードのシンプルな垂直レイアウトのためのJavaScriptコードを次に示します。
var DemoVerticalLayout = {
};
/**
* Main function that does the layout (Layout entry point)
* @param {DvtDiagramLayoutContext} layoutContext Object that defines a context for layout call
*/
DemoVerticalLayout.layout = function (layoutContext) {
var padding = 10; //default space between nodes, that can be overwritten by layout attributes
var currX = 0; //x coodinate for the node's center
var currY = 0; //y coordinate for the node's top edge
var nodeCount = layoutContext.getNodeCount();
for (var ni = 0;ni < nodeCount;ni++) {
var node = layoutContext.getNodeByIndex(ni);
var bounds = node.getContentBounds();
//Position the node - in order to do it find a position for the node's top left corner
//using the node bounds, currX to center the node horizontally and currY for the node's top edge
node.setPosition(new DvtDiagramPoint(currX - bounds.x - bounds.w * .5, currY));
currY += bounds.h + padding;
}
};
図33-17に、ダイアグラム・ノードを接続するリンクを指定したクライアント・レイアウトを示します。
このレイアウトでは、getLinkCount() APIを使用し、レイアウト関数に渡されるレイアウト・コンテキスト・オブジェクトにリンクの数に関する情報が含まれ、getLinkByIndex() APIを使用し、各リンク・オブジェクトへのアクセスが提供されます。各リンクにアクセスするためにリンクをループした後、ノードにリンクを配置するためにsetPosition() APIの呼出しが使用されます。その位置は、単純なx、y座標を定義するDvtDiagramPoint()オブジェクトの形式で渡されます。
リンク付きの垂直なクライアント・レイアウトのためのJavaScriptコードを次に示します。
var DemoVerticalLayoutWithLinks = {
};
/**
* Main function that does the layout (Layout entry point)
* @param {DvtDiagramLayoutContext} layoutContext Object that defines a context for layout call
*/
DemoVerticalLayoutWithLinks.layout = function (layoutContext) {
//reading optional attributes that could be defined on the page
var layoutAttrs = layoutContext.getLayoutAttributes();
var padding = (layoutAttrs && layoutAttrs["nodePadding"]) ? parseInt(layoutAttrs["nodePadding"]) : 10;
// layout/position nodes
var currX = 0;
var currY = 0;
var nodeCount = layoutContext.getNodeCount();
for (var ni = 0;ni < nodeCount;ni++) {
var node = layoutContext.getNodeByIndex(ni);
var bounds = node.getContentBounds();
DemoVerticalLayoutWithLinks.positionNode(node, currX, currY);
currY += bounds.h + padding;
}
//position links
for (var li = 0;li < layoutContext.getLinkCount();li++) {
var link = layoutContext.getLinkByIndex(li);
DemoVerticalLayoutWithLinks.positionLink(layoutContext, link);
}
};
/**
* Helper function that positions the node using x,y coordinates
* @param {DvtDiagramLayoutContextNode} node Node to position
* @param {number} x Horizontal position for the node center
* @param {number} y Vertical position for the node top edge
*/
DemoVerticalLayoutWithLinks.positionNode = function (node, x, y) {
var bounds = node.getContentBounds();
node.setPosition(new DvtDiagramPoint(x - bounds.x - bounds.w * .5, y));
};
図33-18に、親ノードおよび子ノードのあるコンテナ・ノードのクライアント・レイアウトを示します。
コンテナ・ノードのあるクライアント・レイアウトのためのJavaScriptコードを次に示します。
var DemoContainersLayout = {};
/**
* Main function that does the layout (Layout entry point)
* @param {DvtDiagramLayoutContext} layoutContext Object that defines a context for layout call
*/
DemoContainersLayout.layout = function(layoutContext) {
var nodeCount = layoutContext.getNodeCount();
var currX = 0;
// iterate through the nodes in the layer and position them horizontally
for (var ni = 0; ni < nodeCount; ni++) {
var node = layoutContext.getNodeByIndex(ni);
node.setPosition(new DvtDiagramPoint(currX, 0));
currX += node.getBounds().w + 10;
}
};
ADF Facesデモ・アプリケーションに関する追加のレイアウト例を表示およびダウンロードできます。詳細は、1.4項「ADF Facesデモ・アプリケーション」を参照してください。
