44 データバインドされたダイアグラム・コンポーネントの作成
diagram
コンポーネントを使用して、ビジネス・データを視覚的に表現するダイアグラムの作成方法について説明します。ここでは、ADFデータ・コントロールを使用して、これらのコンポーネントをデータ優先開発で作成する方法について説明します。簡単なUI優先開発を使用してページを設計する場合は、ダイアグラムをページに追加してから、データ・バインディングを構成してください。ダイアグラム・コンポーネントのデータ要件、タグ構造、および外観と動作をカスタマイズするためのオプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のマップ・コンポーネントの使用方法に関する項を参照してください。
この章の内容は次のとおりです。
ADFデータ視覚化ダイアグラム・コンポーネントについて
DVT diagram
コンポーネントは、(データを表すノードおよびノード間の関係を表すリンクと呼ばれる)図形を使用して、情報のモデル化、表現および視覚化に使用できる対話型コンポーネントを生成する多機能ツールです。データ・オブジェクト、およびそれらの間の関係をハイライトする場合は、ダイアグラムを使用します。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
図44-1は、ダイアグラム・コンポーネントの4つのランタイム・イメージ(サンキー・フロー・ダイアグラム、データベース表設計、従業員組織図およびスケジュール・ダイアグラム)を示しています。これらの例では、プロセス、データベース・オブジェクト、従業員およびスケジュールされたストップがノードになっています。これらのリンクは、サンキー・フロー・ダイアグラムの各プロセス、組織図における従業員およびスケジュール・ダイアグラムのストップの順序の間の関係を示しています。
図44-1 ダイアグラム・コンポーネントの例
![この図の詳細は、周辺の説明を参照してください。 この図の詳細は、周辺の説明を参照してください。](img/dvt_diagram_samples.png)
接頭辞dvt:
は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
エンド・ユーザー機能およびプレゼンテーション機能
魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。DVTダイアグラム・コンポーネントのエンド・ユーザー機能とプレゼンテーション機能の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のエンド・ユーザー機能およびプレゼンテーション機能に関する項を参照してください。
データ視覚化コンポーネントのユースケースと例
ダイアグラム・コンポーネントのユースケースと例の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のダイアグラムのユースケースと例に関する項を参照してください。
データ視覚化コンポーネントの追加機能
データ視覚化コンポーネントをデータ・バインドする前に、その他の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データ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
データバインドされたダイアグラム・コンポーネントの作成
データバインドされたDVTダイアグラム・コンポーネントでは、データを表すノード・オブジェクトのコレクションが必要であり、オプションでノード間の関係を表すリンク・オブジェクトのコレクションを含めます。
Listインタフェース(java.util.ArrayList
オブジェクトなど)やコレクション・モデル(org.apache.myfaces.trinidad.model.CollectionModel
など)を実装するオブジェクトを使用できます。
また、データバインドされたダイアグラムでは、機能としてアプリケーションに追加するJavaScriptメソッド内でクライアント・レイアウト構成が定義されている必要もあります。クライアント・レイアウトにより、ページ上のノードおよびリンクの配置方法を指定します。ダイアグラム・コンポーネントには、必要に応じて使用および変更できるデフォルト・レイアウトが含まれています。デフォルトのforceDirectedLayout
では、すべてのリンクがほぼ同じ長さとなり、可能なかぎり交差リンクが少なくなるようにダイアグラム・ノードが配置されます。
ノート:
また、アプリケーション機能として追加するJavaScriptオブジェクト内で独自のクライアント・レイアウト構成を設定することもできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のダイアグラム・レイアウト・フレームワークの使用に関する項を参照してください。
ダイアグラムの作成ウィザードでは、ダイアグラムを作成してデータにバインドするための宣言的サポートが提供されます。ウィザードの5つのページで、次の操作を実行できます。
-
ダイアグラムのクライアント・レイアウトを構成します。
デフォルトのクライアント
forceDirectedLayout
機能を選択することも、独自のレイアウトを指定することもできますが、レイアウトを選択しなくてもかまいません。 -
次を含む、ノードおよびリンクのデータを指定します。
-
ノードおよびリンクのデータに使用するコレクション
-
ノードの一意の識別子(id)を指定する属性
-
親ノードにより含められた子ノードを識別するコンテナIDを含むノード・コレクション内の属性(オプション)
-
リンクの開始ノードIDと終了ノードIDを指定するリンク・コレクション内の属性
-
-
オプションで、ノードのラベルおよびマーカーの表示特性を構成します。
ダイアグラムのノードは、
dvt:marker
コンポーネントを使用して、ノードの表示特性の多く(色、パターン、図形、境界線のスタイル、色を含む)を構成します。 -
オプションで、指定した属性に従ってノードを色、図形、パターン、不透明度、スケールXまたはスケールYでグループ分けするための属性グループを構成します。
-
オプションで、リンクのラベル、スタイル、色、幅、開始コネクタおよび終了コネクタの表示特性を構成します。
図44-2は、デフォルト・クライアント・レイアウトを使用するように構成されたダイアグラムを示しています。この例では、ダイアグラムは、属性グループを使用してノードのNodeGroup
属性とNodeType
属性の値によりノードをグループ分けするように構成されています。
図44-2 属性グループを使用するダイアグラムの例
![この図の詳細は、周辺の説明を参照してください。 この図の詳細は、周辺の説明を参照してください。](img/dvt_diagram_att_groups.png)
ダイアグラムの作成ウィザードの完了後、ダイアグラムがページに追加されたら、「プロパティ」ウィンドウを使用してダイアグラムをさらにカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のダイアグラム・コンポーネントの使用に関する項を参照してください。
ノート:
ADFデータ視覚化ツール(DVT)コンポーネント・コレクションには、組織図やタイム・ラインなどをモデル化するために使用できる他のコンポーネントが含まれています。
たとえば、DVT階層ビューア・コンポーネントを使用して、従業員データにバインドされた組織図を表示することもできます。階層ビューアもノードおよびリンクを使用してデータを表示しますが、コンポーネントはノードのデータ・コレクション内の値に基づいてリンクを自動的に作成するため、リンクに個別のデータ・コレクションを提供する必要はありません。
他のDVTコンポーネントおよび一般的なユースケースの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のデータ視覚化コンポーネントの概要に関する項を参照してください。
ADFデータ・コントロールを使用したダイアグラムの作成方法
データ・コントロールを使用してDVTダイアグラムを作成するには、dvt:diagram
コンポーネントを、ノード・データを含むコレクションと、ノード間の関係を表すリンクを含むコレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
ヒント:
また、「コンポーネント」ウィンドウからダイアグラムをドラッグして、ダイアグラムを作成することもできます。
始める前に:
データバインドされたダイアグラムについて理解しておくと役立ちます。詳細は、「ADFデータ視覚化ダイアグラム・コンポーネントについて」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
-
「アプリケーション・モジュールの作成と変更」の説明に従って、ダイアグラムのデータ・モデルで必要な、ビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
図44-3は、図44-2に示されているダイアグラムのデータ・コントロールを示しています。この例では、
NodesView1
にダイアグラム・ノードのデータ・コレクションが含まれ、LinksView1
にダイアグラム・リンクのデータ・コレクションが含まれています。図44-3 ダイアグラム・ノードとダイアグラム・リンクのデータ・コレクションの例
LinksView1
データ・コレクション内のStartnode
属性とEndnode
属性には、NodesView1
データ・コレクション内のNodeid
属性への参照が含まれています。図44-4は、オブジェクト・ビューアでのリンク・コレクションのデータの一部を示しています。 -
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。
データバインドされたダイアグラムを作成するには:
データバインドされたダイアグラムを作成すると行われる処理
ダイアグラムを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
-
JSFページのページ定義ファイル(pageName
PageDef.xml
)内にダイアグラムのバインディングが作成されます。 -
dvt:diagram
コンポーネントのJSFページに必要なタグが追加されます。 -
作成中にデフォルト・クライアント・レイアウトを選択した場合は、そのレイアウトがADF Faces実行時環境に登録されます。
ダイアグラム・コンポーネントのバインディング
次のコード・サンプルは、JDeveloperで図44-3のデータ・コレクションを使用してdvt:diagram
コンポーネントに生成されたバインディングを示しています。
<executables> <variableIterator id="variables"/> <iterator Binds="NodesView1" RangeSize="-1" DataControl="AppModuleDataControl" id="NodesView1Iterator"/> <iterator Binds="LinksView1" RangeSize="-1" DataControl="AppModuleDataControl" id="LinksView1Iterator"/> </executables> <bindings> <tree IterBinding="NodesView1Iterator" id="NodesView1"> <nodeDefinition DefName="model.NodesView" Name="NodesView10"> <AttrNames> <Item Value="NodeGroup"/> <Item Value="NodeType"/> <Item Value="Nodeid"/> </AttrNames> </nodeDefinition> </tree> <tree IterBinding="LinksView1Iterator" id="LinksView1"> <nodeDefinition DefName="model.LinksView" Name="LinksView10"> <AttrNames> <Item Value="Endnode"/> <Item Value="Startnode"/> </AttrNames> </nodeDefinition> </tree> </bindings>
ダイアグラムにデータを移入するためのルールは、ノード定義として定義されます。各ノード定義はノードを参照し、「ダイアグラムの作成」ダイアログで指定されたビュー・オブジェクトと属性をリンクします。pageNamePageDef.xml
ファイルの詳細は、「pageNamePageDef.xml」を参照してください。
ダイアグラム・コンポーネントのJSFページのコード
次の例は、図44-2に示されたダイアグラムに対してJSFページで生成されたコードを示しています。
<dvt:diagram id="dg1" layout="DiagramSampleDiagramLayout"> <dvt:diagramNodes var="node" id="dnodes1" value="#{bindings.NodesView1.collectionModel}"> <dvt:diagramNode label="#{node.Nodeid}" id="dn1" nodeId="#{node.Nodeid}"> <f:facet name="zoom100"> <dvt:marker width="20" id="m1" height="30"> <dvt:attributeGroups id="ag1" label="#{node.NodeGroup}" type="color" value="#{node.NodeGroup}"/> <dvt:attributeGroups id="ag2" label="#{node.NodeType}" type="shape" value="#{node.NodeType}"/> </dvt:marker> </f:facet> </dvt:diagramNode> </dvt:diagramNodes> <dvt:diagramLinks var="link" value="#{bindings.LinksView1.collectionModel}" id="dl1"> <dvt:diagramLink startNode="#{link.Startnode}" id="dl2" endNode="#{link.Endnode}"/> </dvt:diagramLinks> <dvt:clientLayout method="DiagramSampleDiagramLayout.forceDirectedLayout" featureName="DiagramSampleDiagramLayout" name="DiagramSampleDiagramLayout"> <f:attribute name="optimalLinkLength" value="75"/> </dvt:clientLayout> <dvt:legend id="l1"> <dvt:legendSection label="#{viewcontrollerBundle.GROUP}" source="dnodes1:ag1" id="ls1"/> <dvt:legendSection label="#{viewcontrollerBundle.TYPE}" source="dnodes1:ag2" id="ls2"/> </dvt:legend> </dvt:diagram>
デフォルト・クライアント・レイアウトのファイルおよび場所
デフォルト・クライアント・レイアウトを使用してダイアグラムを作成すると、JDeveloperによってADFランタイム環境に力指向レイアウトがJavaScript (JS)機能として登録されます。作成プロセスで、次の命名規則で自動的にJSファイルがViewController/src/js/layout
ディレクトリに追加されます。
ApplicationNameDiagramLayout.js
たとえば、アプリケーションがDiagramSample
という名前ならば、JSファイルはDiagramSampleDiagramLayout.js
という名前になります。ファイルの内容にはforceDirectedLayout
メソッドが含まれており、ファイルはJDeveloperで開くことができます。また、「プロパティ」ウィンドウで「コンポーネント定義の編集」をクリックして、「ダイアグラムの編集 - クライアント・レイアウトの構成」ダイアログを表示し、「検索」をクリックしてメソッド・ポップアップを表示することもできます。
また、JDeveloperによって、adf-js-features.xml
ファイル(まだ存在しない場合)が作成され、機能名としてApplicationName
DiagramLayout
、機能クラスとしてJSファイルのパスが追加されます。次の例は、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:diagram
コンポーネントの「プロパティ」ウィンドウで「編集」アイコンを使用します。また、ダイアグラムのプロパティは、ビジュアル・エディタで直接カスタマイズすることも、「プロパティ」ウィンドウで値を設定することによってカスタマイズすることもできます。
たとえば、図44-2に示したツールチップをダイアグラムに追加するには、「プロパティ」ウィンドウまたはコード・エディタで、ダイアグラム・ノードのshortDesc
属性の値を入力できます。
<dvt:diagramNode label="#{node.Nodeid}" id="dn1" nodeId="#{node.Nodeid}"shortDesc="Group: #{node.NodeGroup} Type: #{node.NodeType}"
> <f:facet name="zoom100">... contents omitted
</f:facet> </dvt:diagramNode>
ダイアグラムのカスタマイズの詳細および例は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のダイアグラム・コンポーネントの使用に関する項を参照してください。