| Oracle® Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発 12c (12.2.1.1.0) E77398-02 |
|
 前 |
 次 |
diagramコンポーネントを使用し、簡単なUI優先開発を使用してダイアグラムでデータを表示する方法について説明します。データ要件、タグ構造、およびコンポーネントの概観と動作をカスタマイズするためのオプションの定義についても説明します。
アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してダイアグラムを作成することもできます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたダイアグラムの作成に関する項を参照してください。
この章の内容は次のとおりです。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
ダイアグラムを使用し、データを表すノードと呼ばれる図形、およびノード間の関連を表すリンクを使用して情報をモデル化し、表現し、視覚化します。ダイアグラムは、柔軟で高度に構成可能なコンポーネントで、シンプルな図形やラベル付きのイメージを使用して幅広いデータ・アイテムを表示でき、また、ズーム・レベルやデータ・セット内の一意のグループに対する色などのスタイルに関する属性値を使用してより複雑なデータを表示できます。
ダイアグラムのリンクおよびノードのレイアウトは、フレームワークを介して、複数のカスタムJavaScriptファイルを使用して構成されます。フレームワークでは、SVGおよびJava2Dを含め、複数のプラットフォームでのレンダリングがサポートされます。
たとえば、ダイアグラムでは、データベース・スキーマを表、ビューおよびストアド・プロシージャなどの論理的なグループ・オブジェクトにモデル化したり、各従業員の複合的な情報セットとともに異なるズーム・レベルで従業員ツリーを表現したり、またはサンバースト・レイアウトを使用して米国の州間の人口移動の総数を視覚化したりできます。
ダイアグラムでは、ノードに図形が使用され、ノード間の関連を表すリンクに線が使用されます。図33-1に、円およびそれらの関連を表す直線からなる、円形のレイアウト・パターンで構成されたシンプルなダイアグラムを示します。この例には、ダイアグラムのズームのためのデフォルトのコントロール・パネルが含まれています。
図33-1 コントロール・パネルでのノードとリンクのシンプルなダイアグラム
ダイアグラムはまた、マスター/ディテール・リレーションシップで階層データを視覚的に表示するように構成できます。図33-2に、コントロール・パネル、多数のノードおよびノードを接続するリンクを含む実行時の従業員ツリー・ダイアグラムを示します。また図では、異なるズーム・レベルでデータの複数のセットを表示するaf:showDetailItem要素を使用したノード・パネル・カードも示されています。
図33-2 コントロール・パネルでの従業員ツリー・ダイアグラム
ダイアグラム・コンポーネントは、グラフを1次元レイアウトで視覚化するグラフ表示である、アーク・ダイアグラムを表示するように構成することもできます。エッジまたはノード間の接続が円弧で表現され、ノードは単一の軸に沿って表示されます。図33-3は、ヴィクトル・ユーゴーの小説「レ・ミゼラブル」の登場人物を使用した、この書物の同じ章に同時に登場する人物ペア間の同時出現を表示するアーク・ダイアグラムを示しています。
図33-3 登場人物の同時出現を表示するアーク・ダイアグラム
ダイアグラムは、データベース・スキーマを表示するように構成できます。図33-4は、コンテキストおよびナビゲーションのオプションをユーザーに提供するダイアグラムの簡略ビューであるサマリー・ウィンドウを持つ、データベース・スキーマのレイアウト・ダイアグラムを示しています。
図33-4 サマリーを持つデータベース・スキーマのレイアウト・ダイアグラム
ダイアグラムはサンバースト・レイアウトで構成することもでき、定量的な階層データをサイズと色で視覚的に表現し、2つの次元にまたがり表示します。図33-5に、総量を表示する属性グループを使用した、米国の各州の人口移動を表示するダイアグラムを示します。
図33-5 各州の人口移動データの総量を表示するダイアグラム
ADFデータ視覚化diagramコンポーネントは、ズーム、グループ化およびパンなど、エンド・ユーザー向けの幅広い機能を提供します。これらはまた、凡例の表示、およびカスタマイズ可能な色やラベル・スタイルなど、幅広いプレゼンテーション機能を提供します。
ダイアグラム・コンポーネントの使用やカスタマイズには、次の機能やコンポーネントの理解が役立ちます。
コントロール・パネル: ユーザーが実行時にダイアグラム・コンポーネントの位置および外観を操作するためのツールがあります。デフォルトでは、ダイアグラムの左上隅に隠れた状態で表示されます。ユーザーは、コントロール・パネルの非表示/表示ボタンをクリックして、コントロール・パネルを非表示にするか、展開します。
図33-6に、ズーム・コントロールおよびズームして合せるオプションが表示されている展開されたコントロール・パネルを示します。
図33-6 ダイアグラムのコントロール・パネル
ズーム: デフォルトで有効になっており、ユーザーはダイアグラムの表示を拡大または縮小表示に変更できます。ズームの最大スケールと最小スケールは、そのダイアグラム用に構成できます。
パン: デフォルトで有効になっており、ユーザーは任意のオープン・エリアでダイアグラムを選択し、ダイアグラム全体を上下左右に移動し、再配置できます。
ポップアップのサポート: ダイアグラム・コンポーネントは、ユーザーがノード上をマウスでクリックしたりホバーしたときに、情報を提供するポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。図33-7に、ユーザーがノードにマウス・オーバーしたときのノードのポップアップ・ウィンドウを示します。
図33-7 ダイアグラム・ノードのポップアップ
凡例のサポート: ダイアグラムには凡例が表示され、図形や色で表現されて、データのタイプが視覚的にわかりやすくなります。コンポーネントが属性グループを使用し、条件に基づき色を指定する場合、凡例は使用される色を表示し、各色がどの値を表現しているかを示すこともできます。
サマリー・ウィンドウ: コンテキストおよびナビゲーションのオプションをユーザーに提供するダイアグラムの簡略ビューを表示します。サマリー・ウィンドウのビューポートは、ドラッグしてダイアグラムをパンできます。ユーザーは、サマリー・ウィンドウの非表示/表示ボタンをクリックして、ウィンドウを非表示にするか、展開します。図33-8に、展開され、パンされてデータベース・スキーマ・レイアウトの一部を表示するサマリー・ウィンドウを示します。
図33-8 サマリー・ウィンドウ
コンテキスト・メニュー: ダイアグラムでは、コンテキスト・メニューを表示して、選択されたノードについての追加情報を提供する機能がサポートされています。
属性グループ: ダイアグラム・ノードでは、データ・セット内での一意なグループの色などのスタイル属性値を生成するため、dvt:attributeGroupsタグの使用がサポートされています。
選択のサポート: ダイアグラムでは、1つまたは複数のノードに対するユーザーのクリックに応答し、選択された要素に関する情報を表示する機能がサポートされています。
ツールチップのサポート: ダイアグラムでは、ユーザーが要素上でマウスを動かすとノードまたはリンクの追加情報を表示する機能がサポートされています。図33-9に、ノードおよびリンクのツールチップを示します。
図33-9 ノードおよびリンクのツールチップ
ドリルのサポート: ダイアグラム・コンポーネントではドリルがサポートされ、階層をナビゲートしてノードについてのより詳細な情報を表示できます。
ハイライト表示のサポート: ダイアグラムでは、ユーザーがダイアグラム中の要素の上にマウスをホバーしたときに、ノードおよびリンクのビューをハイライト表示するように設定できます。ハイライト表示は、次の値を指定できます: none、node、nodeAndIncomingLinks、nodeAndOutgoingLinksおよびnodeAndLinks。図33-10に、nodeAndLinksの値が指定されているときの、ダイアグラム内をホバーしてハイライト表示されたノードのビューを示します。
図33-10 ノードのハイライト表示の構成
図33-11に、nodeAndLinksの値が指定されているときの、ダイアグラム内をホバーしてハイライト表示されたリンクのビューを示します。
図33-11 リンクのハイライト表示の構成
スタック: ノードをグループ化でき、それらのノードを積上げて表示できます。図33-12に、ノードのスタックを示します。デフォルトでは、スタック内のノードの数が表示されます。
図33-12 スタックとして表示されるグループ・ノード
コンテナ・ノード: ノードは、1つ以上のコンテナ・ノードを使用して階層的な関係を表すことができます。図33-13に、データベース・スキーマ内のコンテナ・ノードのセットを示します。
図33-13 データベース・スキーマ内のコンテナ・ノードのダイアグラム
ノードのコントロール: デフォルトで、コントロールを説明するツールチップが表示されます。
表33-1 ダイアグラム・ノードのコントロール
| コントロール | 名前 | 説明 |
|---|---|---|
 |
分離 |
ユーザーは、単一のノードを切り離し、ダイアグラム中に分離して表示できます。 |
 |
プレビュー・スタック |
ユーザーは、グループ内のすべてのノードを表示できます。 |
 |
スタック解除 |
ユーザーは、すべてのノードが表示されるように、グループ化されたノードのセットを表示できます。 |
 |
再スタック |
ユーザーは、関連するノードのセットを閉じてグループ化して表示できます。 |
 |
リストア |
パネル・カードを構成した場合は、定義した |
 |
閉じる |
ユーザーは、グループ内のすべてのノードを表示できます。 |
 |
ドリル |
ユーザーがノードの階層間を移動でき、ノードの詳細を表示できます。 |
 |
その他のリンク |
ユーザーは、選択したノードに関連付けられたリンクおよびノードを表示できます。 |
パレット: ダイアグラムでは、レイアウト構成にドラッグ・アンド・ドロップするために使用できる、ノードおよびリンク・アイテムのパネルがサポートされています。ユーザーは、パレットの非表示/表示ボタンをクリックして、ウィンドウを非表示にするか、展開します。図33-14に、ダイアグラムの作成に使用可能なノードおよびリンクのパレットを示します。
図33-14 ダイアグラムのノードおよびリンクのパレット
印刷可能または電子メール対応ページ表示: ADF Facesでは、印刷または電子メール用の簡略化されたモードで、ADF Faces WebアプリケーションからJSFページを出力できます。たとえば、ユーザーがページ(またはページの一部)を印刷できるようにし、一方でWebブラウザでレンダリングされているとおりにページを印刷するのではなく、スクロールバーやボタンなど、印刷ページに必要ないアイテムを削除することが望ましい場合があります。ページが電子メールで送信される場合は、電子メール・クライアントが正しく表示できるようにページを簡略化する必要があります。このような出力用に簡略化されたページを作成する場合の詳細は、「様々な出力モードの使用」を参照してください。
ダイアグラム・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんダイアグラム・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。
ダイアグラム・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、ダイアグラムでノードをリフレッシュできます。詳細は、「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: 有効な場合、ユーザーは実行時にダイアグラムの表示方法を変更できますが、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: デフォルトでは、ダイアグラム・コンポーネントはアクセス可能です。ダイアグラム・コンポーネントのあるアプリケーション・ページを、スクリーン・リーダーのユーザーがアクセスできるように構成できます。詳細は、「アクセス可能なADF Facesページの開発」を参照してください。
タッチ装置: ADF Facesアプリケーションがタッチ装置で動作することがわかれば、その装置に固有のページを作成する作業がベスト・プラクティスになります。詳細は、「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することにより、ダイアグラム・コンポーネントの外観をカスタマイズできます。詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
コンテンツ配信: contentDelivery属性を使用してダイアグラムを構成することにより、コンポーネントのレンダリング直後に、またはコンポーネントがレンダリングされた後の別のリクエストで、データ・ソースからデータをフェッチするようにできます。詳細は、「コンテンツの配信」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされたダイアグラムを作成できます。JDeveloperには、データ・バインディングとダイアグラムの構成用のウィザードがあります。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされたダイアグラム・コンポーネントの作成」の章を参照してください。
注意:
最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「プレースホルダ・データ・コントロールを使用したページの設計」の章を参照してください。
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、イメージ形式、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、「データ視覚化コンポーネントの共通機能」を参照してください。
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メソッドの登録に使用します。詳細は、「ダイアグラムのレイアウト・フレームワークの使用」を参照してください。
ダイアグラム・ノード(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でそのファイルを表示するか、または「デフォルト・クライアント・レイアウトのコード・サンプル」を参照してください。
デフォルト・クライアント・レイアウトを使用してダイアグラムを作成すると、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ファイル・タイプをソース・パスから出力ディレクトリにコピーするように開発環境を構成します。
ダイアグラム用にカスタムのクライアント・レイアウトを設計して使用する場合は、これらのアクションを手動で完了する必要があります。詳細は、「カスタム・レイアウトの登録方法」を参照してください。
簡単なUI優先開発を使用してページを設計する場合は、「コンポーネント」ウィンドウを使用してダイアグラムをJSFに追加してください。ダイアグラム・コンポーネントをページにドラッグ・アンド・ドロップすると、「ダイアグラムの作成」ウィザードが表示されます。
ユーザーが「終了」をクリックすると、ダイアグラムがページに追加され、「プロパティ」ウィンドウを使用してデータの値の指定、および追加の表示属性の構成ができます。または、作成の間にデータのバインドを選択でき、ダイアグラムの構成ウィザードの「ノードおよびリンク・データ」ページを使用して、関連するノードおよびリンク・データの構成ができます。
「プロパティ」ウィンドウで、プロパティ・フィールドにマウス・カーソルを合わせると表示されるアイコンをクリックすることで、プロパティの説明や編集オプションを表示できます。図33-15に、ダイアログのLayout属性のドロップダウン・メニューを示します。
図33-15 ダイアグラムのLayout属性のドロップダウン・メニュー
注意:
アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してダイアグラムを作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたダイアグラム・コンポーネントの作成に関する項を参照してください。
始める前に:
ダイアグラムの属性やダイアグラムの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「ダイアグラムの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ダイアグラム・コンポーネントの追加機能」を参照してください。
次のタスクを実行する必要があります。
「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
ダイアグラムをページに追加するには:
「コンポーネント」ウィンドウからダイアグラムをJSFページにドラッグ・アンド・ドロップし、生成中にデータ・バインドを選択しなかった場合は、JDeveloperはタグのセットを生成します。
次のコードが生成されます。
<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 Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたダイアグラム・コンポーネントの作成に関する項を参照してください。
DVTダイアグラムのレイアウト・フレームワークは、ダイアグラムのビジネス・ニーズを満たすものならばどのような構成でも、ダイアグラム・ノードおよびリンクの表示をサポートします。JavaScriptで書かれ、HTML5に基づくフレームワークでは、SVGおよびJava2Dを含め、複数のプラットフォームでのレンダリングがサポートされます。
ダイアグラムでは、機能としてアプリケーションに追加するJavaScriptのメソッドで定義されたクライアント・レイアウトの構成を必要とします。クライアント・レイアウトにより、ページ上のノードおよびリンクの配置方法を指定します。ダイアグラムは、親ノードと子ノードの場合のように、複数のレイアウトで動作するように構成できますが、少なくとも1つのレイアウトをアプリケーションに登録する必要があります。すべてのノードおよびリンクの表示のレンダリングはダイアグラム・コンポーネントによって指定され、すべてのレイアウト・ロジックはレイアウトのJavaScriptファイルに含まれます。
ダイアグラム・コンポーネントには力指向グラフ描画アルゴリズムに基づくデフォルトのレイアウトが含まれており、必要に応じて変更して使用できます。デフォルトのforceDirectedLayoutでは、すべてのリンクがほぼ同じ長さとなり、可能なかぎり交差リンクが少なくなるようにダイアグラム・ノードが配置されます。
また、DVTダイアグラムAPIを使用してアプリケーションの機能として追加するJavaScriptオブジェクト内で独自のクライアント・レイアウト構成を指定することもできます。
ダイアグラムのレイアウトの基本的な処理は、ノードの配列およびリンクの配列をループし、それぞれの位置情報を設定することです。
カスタム・ダイアグラム・レイアウトのコードでは、表33-2に定義されるDVTダイアグラムのベース・クラスが使用されます。
表33-2 DVTダイアグラムのベース・クラス
| ベース・クラス | 説明/メソッド(部分) |
|---|---|
|
レイアウト呼出しのコンテキストを定義します。 レイアウト: nodes: links: ヘルパー: |
|
レイアウト呼出しのリンク・コンテキストを定義します。 最上位レベル: 開始/終了ノード: レベル: |
|
レイアウト呼出しのノード・コンテキストを定義します。 最上位レベル: state: レベル: |
|
関数のパラメータおよび戻り値に使用される点のクラスです( |
|
関数のパラメータおよび戻り値に使用される長方形やディメンションのクラスです( |
ここで、DVTダイアグラム用のJavaScript APIの全体を表示できます。
DVTのdiagramの子コンポーネントのclientLayoutは、layout属性内で、ダイアグラムで参照される別名を使用してノードおよびリンクのレイアウトを実行するために必要なJavaScriptを識別します。DVT clientLayoutコンポーネントですべてのダイアグラム・ノードおよびリンクのレイアウトが行われます。
DVTダイアグラムのコンポーネントは、独自の柔軟性を持つため、ユーザーはカスタム・レイアウトをビルドできます。事前作成済レイアウトが含まれないため、ユーザーはJavaScript関数を使用してレイアウトおよびアピアランスを管理します。ダイアグラムは複数のクライアント・レイアウトを使用することができ、たとえば、親コンテナ・ノードおよび子ノードがある場合は、少なくとも1つのレイアウトをアプリケーションに登録する必要があります。クライアント・レイアウトを実装する場合、ノードとリンクの相互作用、ズームの動作およびロケール(BiDiローカルを含む)などの要素を考慮することが重要です。
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ファイル・タイプをソース・パスから出力ディレクトリにコピーするように開発環境を構成します。
始める前に:
ダイアグラムの属性やダイアグラムの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「ダイアグラムの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ダイアグラム・コンポーネントの追加機能」を参照してください。
次のタスクを実行する必要があります。
「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
カスタム・レイアウトを登録するには:
.jsファイル・タイプを追加します。完成したダイアログを次に示します:
クライアント・レイアウトは、ダイアグラム内のノードおよびリンクのレイアウトを指定します。
たとえば、図33-16に、シンプルな垂直パターンでのダイアグラム・ノードのレイアウトを示します。
図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に、ダイアグラム・ノードを接続するリンクを指定したクライアント・レイアウトを示します。
図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に、親ノードおよび子ノードのあるコンテナ・ノードのクライアント・レイアウトを示します。
図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コンポーネント・デモ・アプリケーションに関する追加のレイアウト例を表示およびダウンロードできます。詳細は、「ADF Facesコンポーネント・デモ・アプリケーションのダウンロードおよびインストール」を参照してください。
