44 データバインドされたダイアグラム・コンポーネントの作成

この章では、ADFビジネス・コンポーネントでモデル化されたデータから、ダイアグラムを作成する方法について説明します。このダイアグラムの作成には、Fusion WebアプリケーションのADFデータ・コントロールとADF Facesコンポーネントを使用します。具体的には、ADFデータ視覚化diagramコンポーネントを使用して、ビジネス・データを視覚的に表現するダイアグラムの作成方法について説明します。ここでは、ADFデータ・コントロールを使用して、これらのコンポーネントをデータ優先開発で作成する方法について説明します。

簡単なUI優先開発を使用してページを設計する場合は、ダイアグラムをページに追加してから、データ・バインディングを構成してください。ダイアグラム・コンポーネントのデータ要件、タグ構造、および外観と動作をカスタマイズするためのオプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のマップ・コンポーネントの使用方法に関する項を参照してください。

この章の内容は次のとおりです。

• ADFデータ視覚化ダイアグラム・コンポーネントについて

• データバインドされたダイアグラム・コンポーネントの作成

ADFデータ視覚化ダイアグラム・コンポーネントについて

DVT diagramコンポーネントは、(データを表すノードおよびノード間の関係を表すリンクと呼ばれる)図形を使用して、情報のモデル化、表現および視覚化に使用できる対話型コンポーネントを生成する多機能ツールです。データ・オブジェクト、およびそれらの間の関係をハイライトする場合は、ダイアグラムを使用します。

ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。

図44-1は、ダイアグラム・コンポーネントの4つのランタイム・イメージ(サンキー・フロー・ダイアグラム、データベース表設計、従業員組織図およびスケジュール・ダイアグラム)を示しています。これらの例では、プロセス、データベース・オブジェクト、従業員およびスケジュールされたストップがノードになっています。これらのリンクは、サンキー・フロー・ダイアグラムの各プロセス、組織図における従業員およびスケジュール・ダイアグラムのストップの順序の間の関係を示しています。

図44-1 ダイアグラム・コンポーネントの例

接頭辞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つのページで、次の操作を実行できます。

1. ダイアグラムのクライアント・レイアウトを構成します。

   デフォルトのクライアントforceDirectedLayout機能を選択することも、独自のレイアウトを指定することもできますが、レイアウトを選択しなくてもかまいません。

2. 次を含む、ノードおよびリンクのデータを指定します。

   • ノードおよびリンクのデータに使用するコレクション

   • ノードの一意の識別子(id)を指定する属性

   • 親ノードにより含められた子ノードを識別するコンテナIDを含むノード・コレクション内の属性(オプション)

   • リンクの開始ノードIDと終了ノードIDを指定するリンク・コレクション内の属性

3. オプションで、ノードのラベルおよびマーカーの表示特性を構成します。

   ダイアグラムのノードは、dvt:markerコンポーネントを使用して、ノードの表示特性の多く(色、パターン、図形、境界線のスタイル、色を含む)を構成します。

4. オプションで、指定した属性に従ってノードを色、図形、パターン、不透明度、スケールXまたはスケールYでグループ分けするための属性グループを構成します。

5. オプションで、リンクのラベル、スタイル、色、幅、開始コネクタおよび終了コネクタの表示特性を構成します。

図44-2は、デフォルト・クライアント・レイアウトを使用するように構成されたダイアグラムを示しています。この例では、ダイアグラムは、属性グループを使用してノードのNodeGroup属性とNodeType属性の値によりノードをグループ分けするように構成されています。

図44-2 属性グループを使用するダイアグラムの例

ダイアグラムの作成ウィザードの完了後、ダイアグラムがページに追加されたら、「プロパティ」ウィンドウを使用してダイアグラムをさらにカスタマイズできます。詳細は、『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は、オブジェクト・ビューアでのリンク・コレクションのデータの一部を示しています。

  図44-4 ダイアグラム・サンプル・リンク・データ

  
  「図44-4 ダイアグラム・サンプル・リンク・データ」の説明

• 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。

データバインドされたダイアグラムを作成するには:

1. 「データ・コントロール」パネルから、ダイアグラムに使用するノードを表すデータ・コレクションを選択します。

   たとえば、この項に示されたデータ・コレクションを使用するには、「NodesView1」を選択します。

2. コレクションをJSFページにドラッグし、メニューから「ダイアグラム」を選択します。
3. 「NBoxの作成 - クライアント・レイアウトの構成」ダイアログで、クライアント・レイアウトを選択します。

   デフォルト・クライアント・レイアウトを選択することも、独自のレイアウトを指定することもできますが、レイアウトを選択しなくてもかまいません。デフォルト・レイアウトを選択するには、図44-5に示す「デフォルト・クライアント・レイアウト」をクリックします。

   図44-5 デフォルト・クライアント・レイアウトが選択された「クライアント・レイアウトの構成」ダイアログ

   
   「図44-5 デフォルト・クライアント・レイアウトが選択された「クライアント・レイアウトの構成」ダイアログ」の説明

   別のレイアウトを指定するには、「クライアント・レイアウトの選択」をクリックし、「機能」および「メソッド」ドロップダウン・メニューから、使用する機能およびメソッドを選択します。レイアウトを選択すると、レイアウトのオプション属性がダイアログに表示され、属性に目的の値を入力できます。

   図44-6は、カスタム・サークル・レイアウト用の設定済の「NBoxの作成 - クライアント・レイアウトの構成」ダイアログを示しています。この例では、選択されている機能名はDemoCircleLayoutであり、選択されているメソッドはcircleLayoutです。オプションのレイアウト属性には、anchor、center、curvedLinks、radialLabels、radiusおよびsortAttrがあります。

   図44-6 カスタム・レイアウトが選択された「クライアント・レイアウトの構成」ダイアログ

   
   「図44-6 カスタム・レイアウトが選択された「クライアント・レイアウトの構成」ダイアログ」の説明

   選択したメソッドのコード・ソースを参照するには、「検索」をクリックして、ソース・コードを含むポップアップを表示します。図44-7は、DemoCircleLayout.circleLayoutメソッドが表示されたポップアップを示しています。

   図44-7 メソッドのソース・コードのポップアップが表示された「クライアント・レイアウトの構成」ダイアログ

   
4. 「ダイアグラムの作成 - ノードおよびリンク・データの指定」ダイアログで、データ・ソースおよびリンクの接続を指定するために次の値を入力します。

   • コレクション: ノード・コレクションに正しいデータ・コレクションが表示されていることを確認します。

     データ・コレクションを変更するには、「データソースの追加」をクリックし、リストから別のデータ・コレクションを選択します。

   • ノードID: 値を入力するか、ダイアグラム内のノードの一意の識別子を表すノードのデータ・コレクションの属性を選択します。

     または、値を返すEL式を入力するか、ドロップダウン・メニューから「式ビルダー」を選択して「式ビルダー」ダイアログを開くこともできます。「式ビルダー」ダイアログに関するヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

   • コンテナID: 入力するか、ドロップダウン・リストを使用して、ダイアグラム内の子ノードの親ノードを表すノードのデータ・コレクションの属性を選択します。

     または、値を返すEL式を入力するか、ドロップダウン・メニューから「式ビルダー」を選択して「式ビルダー」ダイアログを開くこともできます。

   • コレクション(リンク): リンクを表すデータ・コレクションを入力するか、「データソースの追加」をクリックして、リストから別のデータ・コレクションを選択します。

   • 開始ノードID: 入力するか、ドロップダウン・リストを使用して、ダイアグラム内のソース・ノードを表すリンクのデータ・コレクションの属性を選択します。

     または、値を返すEL式を入力するか、ドロップダウン・メニューから「式ビルダー」を選択して「式ビルダー」ダイアログを開くこともできます。

   • 終了ノードID: 入力するか、ドロップダウン・リストを使用して、ダイアグラム内のターゲット・ノードを表すリンクのデータ・コレクションの属性を選択します。

     または、値を返すEL式を入力するか、ドロップダウン・メニューから「式ビルダー」を選択して「式ビルダー」ダイアログを開くこともできます。

   図44-8は、NodesView1およびLinksView1データ・コレクションを使用するダイアグラムに対する設定済ダイアログを示しています。この例では、「ノードID」の値がNodeidで、リンクの「開始ノードID」および「終了ノードID」の値がLinksView1データ・コレクション内のStartnodeおよびEndnode属性に設定されています。この例では、親コンテナに子はなく、「コンテナID」フィールドは使用されていません。

   図44-8 「ノードおよびリンク・データの指定」ダイアログの例

   
   「図44-8 「ノードおよびリンク・データの指定」ダイアログの例」の説明
5. 「ダイアグラムの作成 - ダイアグラム・ノードの構成」ダイアログで、オプションで次の値を入力して、ノードのラベルおよびマーカーの表示特性を構成します。

   • ノード・ラベル: ドロップダウン・リストから、ノードのラベルに使用するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

     オプションで、ラベルの幅、高さおよび不透明度の値を入力できます。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

     ヒント:

     ダイアグラムに適した値がわからない場合は、ダイアグラムを作成してから、作成後に値を変更できます。

   • 色: ドロップダウン・リストで、提供された色からノードの色を選択するか、「カスタム色」を選択して「カラー・ピッカー」ダイアログに入力します。デフォルトのノード色は「ブラック」です。

   • パターン: ドロップダウン・リストからノード・パターンを選択します。パターンの有効な値には、12の選択肢の事前組込みパターン(大小の格子模様、ダイヤ、三角形など)があります。ノード色を指定した場合、選択した色でパターンが表示されます。デフォルトのノード・パターンは「なし」です。

   • 図形: ドロップダウン・リストから、ノードに使用する図形を選択します。有効な値は、circle、human、diamond、square、triangleDown、triangleUpおよびplusです。デフォルトのノードの図形は「円」です。

     ノート:

     ノードの図形、色またはパターンを明示的に指定すると、ダイアグラム内の各ノードに同じ値が使用されます。なんらかのメジャーに従って色、パターンまたは図形を変える場合は、かわりにダイアグラムの作成・ウィザードの次のページで属性グループを構成します。

   • ソース: カスタム・ノード図形を使用する場合は、ノード・イメージに使用するSVGファイルの相対パスを入力するか、「検索」アイコンを使用して「SVGファイルの選択」ダイアログを開き、イメージ・ソースに移動します。

   • 境界線のスタイル: ドロップダウン・リストから、ダイアグラム内のすべてのノードの境界線のスタイルを選択します。有効な値は、「実線」、「破線」および「ドット」です。デフォルトのスタイルは実線です。

   • 枠線の色: ドロップダウン・リストから、ダイアグラム内のすべてのノードの境界線の色を選択するか、「カスタム色」を選択して「カラー・ピッカー」ダイアログに入力します。デフォルトの境界線の色は「ブラック」です。

     図44-9は、設定済の「ダイアグラムの作成 - ダイアグラム・ノードの構成」ダイアログを示しています。この例では、ノード・ラベルは相対的な幅20および相対的な高さ30で構成されています。ノードの図形は、水色の小さいクロスハッチ・パターンを持つ、頂点が上部にある三角形です。

     図44-9 「ダイアグラム・ノードの構成」ダイアログの例

     
     「図44-9 「ダイアグラム・ノードの構成」ダイアログの例」の説明

     図44-10は、作成後の3つのダイアグラム・ノードの実行時ビューを示しています。

     図44-10 オプションの表示属性を使用するダイアグラム・ノード

     
6. (オプション)「ダイアグラムの作成 - 属性グループの構成」で、ダイアグラム・ノードの1つ以上の属性グループを構成するには、「グループ化ルール」セクションで「新規」をクリックし、次の値を入力します。

   • 値でグループ化: ドロップダウン・リストから、属性グループをグループ化するためのデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

   • プロパティ: ドロップダウン・リストから、表示のためのグループ分けに使用するプロパティを選択します。使用可能なオプションは、「色」、「不透明度」、「パターン」、「スケールX」、「スケールY」および「図形」です。

     属性グループを複数のプロパティで区別するには、「複数の属性の選択」を選択します。「複数の属性の選択」で、目的のプロパティを選択し、「OK」をクリックします。

   • 凡例ラベル: ドロップダウン・リストから、ダイアグラムの凡例に表示するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

   • セクション・ラベル: ラベルにテキスト・リソースを使用するには、「テキスト・リソースの選択」を選択して、ラベルにテキスト・リソースを関連付けます。オブジェクトに格納されているデータにアクセスする場合や、EL式を使用してメソッドを参照および呼び出す場合は、「式ビルダー」を選択して「式ビルダー」ダイアログを開きます。

     ノート:

     セクション・ラベルは、凡例のサブセクションの凡例内容を記したもので、凡例領域にレンダリングされます。たとえば、図44-2では、GroupとTypeがセクション・ラベルです。

   • オプションで、「値固有のルール」をクリックして属性グループ・ダイアログを拡張し、一致ルールまたは例外ルールを指定します。一致ルールは、単純なtrueまたはfalse条件に対して色またはパターンを指定するか、特定の値に一致させたい場合に使用します。グループ化値が特定の条件を満たしたときの色またはパターンを指定する場合は、例外ルールを使用します。

     一致ルールを指定するには、「一致ルール」セクションで「新規」をクリックして、次の値を入力します。

     • グループ値: 一致に対するカテゴリ値を入力します。カテゴリを表す文字列を入力するか、trueまたはfalseに設定できます。この値をtrueまたはfalseに設定する場合、「値でグループ化」フィールドには、次の例に示すように、trueまたはfalseに評価されるEL式(#{row.AmountInStock gt row.ReorderPoint}など)を指定する必要があります。

     • プロパティ: ドロップダウン・リストから、表示のためのグループ分けに使用するプロパティを選択します。使用可能なオプションは、「色」、「不透明度」、「パターン」、「スケールX」、「スケールY」および「図形」です。

     • プロパティ値: ドロップダウン・リストから、ノードの値が「グループ値」に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。

     例外ルールを指定するには、「例外ルール」セクションで「新規」をクリックして、次の値を入力します。

     • 条件: trueまたはfalseに評価されるJSF EL式を入力します。「条件」フィールドに式を直接入力するか、「式ビルダー」を選択してJSF EL式を入力できます。

     • プロパティ: ドロップダウン・リストから、表示のためのグループ分けに使用するプロパティを選択します。使用可能なオプションは、「色」、「不透明度」、「パターン」、「スケールX」、「スケールY」および「図形」です。

     • プロパティ値: ドロップダウン・リストから、ノードの値が「条件」フィールドで指定した条件に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。

     • 凡例ラベル: 凡例ラベルにテキスト・リソースを使用するには、ドロップダウン・リストから「テキスト・リソースの選択」を選択します。このフィールドにテキストを入力するか、「式ビルダー」を選択してJSF EL式を入力することもできます。

   図44-11は、図44-2のダイアグラムに対する設定済の「ダイアグラムの作成 - 属性グループの構成」ダイアログを示しています。この例では、ダイアグラムは2つの属性グループに対して構成されています。1つ目の属性グループではNodeGroup属性の値に基づいてノードの色を区別し、2つ目の属性グループはNodeType属性の値に基づいてノードの図形を区別しています。凡例には、両方のグループのセクション・ラベルが表示されます。

   図44-11 「属性グループの構成」ダイアログの例

   
   「図44-11 「属性グループの構成」ダイアログの例」の説明
7. 「ダイアグラムの作成 - ダイアグラム・リンクの構成」ダイアログで、次の値を入力して、リンク・ラベル、スタイルおよびコネクタの表示特性を構成します。

   • リンク・スタイル: ドロップダウン・リストから、ダイアグラム内のすべてのノードの境界線のスタイルを選択します。有効な値は、「実線」、「破線」、「ドット」および「1点鎖線」です。デフォルトのスタイルは実線です。

   • リンク幅: リンクの幅をピクセル単位で入力します。デフォルト値は1です。

   • リンク色: ドロップダウン・リストで、提供された色からリンクの色を選択するか、「カスタム色」を選択して「カラー・ピッカー」ダイアログに入力します。デフォルトのリンク色は「ブラック」です。

   • コネクタの開始: リンクの開始コネクタの値を入力します。有効な値は、「なし」、「arrowOpen」、「arrow」、「arrowConcave」、「circle」、「rectangle」および「rectangleRounded」です。デフォルト値はnoneです。

   • コネクタの終了: リンクの終了コネクタの値を入力します。有効な値は、「なし」、「arrowOpen」、「arrow」、「arrowConcave」、「circle」、「rectangle」および「rectangleRounded」です。デフォルト値はnoneです。

   • ラベル: ドロップダウン・リストから、リンクのラベルに使用するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

   図44-12は、設定済の「ダイアグラムの作成 - ダイアグラム・リンクの構成」ダイアログを示しています。この例では、リンクはラベルおよびデフォルトの幅とスタイルで構成されています。リンクの色はマルーンであり、コネクタの開始部に円、コネクタの終了部に矢印が表示されます。

   図44-12 「ダイアグラム・リンクの構成」ダイアログの例

   
   「図44-12 ダイアログ・リンクの構成ダイアログの例」の説明

   図44-13は、作成後の3つのダイアグラム・ノードの実行時ビューを示しています。

   図44-13 オプションの表示属性を使用するダイアグラム・リンク

   
8. ダイアグラムの作成ウィザードを完了したら、「終了」をクリックしてウィザードを終了し、ダイアグラムをページに追加します。

データバインドされたダイアグラムを作成すると行われる処理

ダイアグラムを「データ・コントロール」パネルからドロップすると、次の処理が行われます。

• JSFページのページ定義ファイル(pageNamePageDef.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ファイル(まだ存在しない場合)が作成され、機能名としてApplicationNameDiagramLayout、機能クラスとして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ユーザー・インタフェースの開発』のダイアグラム・コンポーネントの使用に関する項を参照してください。