ノード外観の定義

Diagram コンポーネントは、データ・ソース内の項目を表す Node クラスのインスタンスを生成します。IBM® ILOG®Dojo Diagrammer では、ノードのグラフィック表現をカスタマイズできる組み込みのスタイリング・メカニズムを提供しています。

ノード・テンプレートの定義

ノード・テンプレートを定義するには、次のようにします。
  • Diagram オブジェクトの nodeTemplate プロパティーを使用します。
    このプロパティーは、内部コンテンツおよびノード外観を定義します。その値は JSON ストリング、またはノードを GFX 形状の階層として記述するオブジェクトです。 その形式は、GFX シリアライゼーション形式と同じです。GFX 形状は、長方形などの実際の形状を記述する shape プロパティーが設定されたオブジェクト、および fillstroketransform、および font などのオプション・プロパティーで構成されます。 GFX グループは、子形状の配列を含む children プロパティーが設定されたオブジェクトによって記述されます。
    例えば、以下のテンプレートは、基本的な長方形形状を含む配列としてノードのコンテンツを定義しています。
    [{
          shape: {
             x: 0,
             y: 0,
             width: 110,
             height: 80,
             type: 'rect'
          },
          fill: '#ff',
          stroke: {
             'width': 2
          }
    }]
    DiagramnodeTemplate では、GFX 形状のプロパティーをデータ・ストア内の対応するオブジェクトの属性値、あるいは Node インスタンスのプロパティーに設定するバインディングを定義できます。例:
    [
       {
          shape: {
             x: 0,
             y: 0,
             width: 150,
             height: 40,
             type: 'rect'
          },
          fill: '#d0d0d0',
          stroke: {
             'width': 2
          }
       }, {
          shape: {
             text: '{{data.Name}}',
             x: '10',
             y: '20',
             type: 'text'
          },
          fill: '{{textColor}}'
       }
    ]
    この例では、2 番目のテキスト形状が追加されます。{{data.Name}} バインディングにより、形状のテキストが、ノードが示すデータ・ストア・オブジェクトの Name 属性の値になることが指定されます。さらに、テキスト形状 fill プロパティーの値は、Node インスタンスの textColor プロパティーにバインドされます。
    場合によっては、データ・ストア属性の値は変換されます。事前定義関数またはカスタム関数を持つフィルターを使用して、初期バインディング値を別の値に変換できます。例えば、以下のテンプレートでは、data.Name プロパティーが小文字ストリングに変換されます。
    [...]
          shape: {
             text: '{{data.Name | lowercase}}',
             x: '10',
             y: '20',
             type: 'text'
          }
    ノード・テンプレートには、任意の数のバインディングを持つ任意の数の GFX 形状を入れることができます。 また、テンプレートには、入れ子にした GFX グループを入れることもできます。
    拡張バインディング機能について詳しくは、テンプレートおよびバインディングの使用を参照してください。

複数ノード・テンプレートの定義

ダイアグラムにさまざまなタイプのノードが含まれる場合、ノードを個別に表す複数のノード・テンプレートを定義すると便利です。
複数のノード・テンプレートを定義するには、次のようにします。
  • Diagram ウィジェットの nodeTemplateFunction プロパティーを使用します。
    例えば、以下のノード・テンプレート関数は、データ項目の type プロパティーに従って異なるテンプレートを返します。
    <script type="text/javascript">
             function getNodeTemplate(item, store, diagram) {
                switch (store.getValue(item, "type")) {
                   case "startEvent":
                      return startEventTemplate;
                   case "endEvent":
                      return endEventTemplate;
                   case "task":
                      return taskTemplate;
                }
             }
            </script>
    
            <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeTemplateFunction="getNodeTemplate" ...>
            </div>
    この例では、変数 startEventTemplatetaskTemplate、および endEventTemplate に、異なるテンプレートが含まれています。

ノード・スタイルの定義

ノード・スタイルを定義するには、次のようにします。
  • Diagram コンポーネントによって提供される nodeStyle プロパティーを使用します。 このプロパティーは、ノードに適用されるグローバル・プロパティーを設定するプロパティーと値のペアの辞書として定義されます。
    例えば、以下のノード・スタイル・オブジェクトは、Diagram コンポーネントに表示されるノードの borderColor および textColor プロパティーを指定します。
    diagram.attr('nodeStyle',{ 
           borderColor:'red', 
           textColor:'blue'
       });
    ノード・テンプレートが、ノードの borderColor および textColor プロパティーに対するバインディングを定義している場合、ノード・スタイルに定義されたプロパティーが、テンプレートによって自動的に適用されます。
    これは、プロパティーに setter が存在し、その名前が Java 命名規則に従っている場合、 ノードのすべてのプロパティーに対して有効です。例えば、a_property というプロパティーの場合は、 setter setAProperty が存在していなければなりません。
    以下の表は、nodeStyle プロパティーと共に定義できる主な Node 外観プロパティーだけをリストしたものです。
    プロパティー タイプ 説明
    label ストリング
    ノード・ラベルを設定します。デフォルト・テンプレートでは、ノード・ラベルは、テキスト形状がノードの中央に位置合わせされて 表示します。
    backgroundColor ストリングまたは dojo.Color
    ノードの背景色。デフォルト・テンプレートは、ノードの基本形状の fill プロパティーにこのプロパティーをバインドします。
    selectedBackgroundColor ストリングまたは dojo.Color
    ノードが選択されている場合のノードの背景色。デフォルト・テンプレートは、ノードの基本形状の fill プロパティーにこのプロパティーをバインドします。
    borderColor ストリングまたは dojo.Color
    ノードのボーダー色。デフォルト・テンプレートは、ノードの基本形状の描線色にこのプロパティーをバインドします。
    textColor ストリングまたは dojo.Color
    ノードのテキスト色。デフォルト・テンプレートは、ノード・テキスト形状の塗りつぶす色にこのプロパティーをバインドします。
    selectedTextColor ストリングまたは dojo.Color
    ノードが選択されている場合のノードのテキスト色。デフォルト・テンプレートは、ノード・テキスト形状の塗りつぶす色にこのプロパティーをバインドします。

プログラムによるカスタム・ノードの定義

カスタム・ノードを定義するには、次のようにします。
  • このトピックで説明されているメカニズムがノードをカスタマイズするのに不十分な場合は、 Diagram ウィジェットの onNodeCreated 属性または createNodeFunction 属性を設定します。
    onNodeCreated 属性は、 ノードの作成が完了するたびに呼び出されます。これにより、必要に応じてノードをカスタマイズできます。 関数は、以下のプロトタイプに準拠している必要があります。
    function nodeCreated(node, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // node: ibm_ilog.diagram.Node: The newly created Node.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    createNodeFunction 属性により、 ノードの作成方法を変更することができます。これは、各ノードを作成するために呼び出され、 以下のプロトタイプに準拠している必要があります。
    function createNode(item, template, onGraph, diagram){
        // summary: Creates a Node for a given data store item.
        // item: The item contained in the nodesStore.
        // template: The suggested node template.
        // onGraph: The parent Graph in which the node must be created.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget.
        ...
        return node; // ibm_ilog.diagram.Node
    };
    推奨されるテンプレートは、nodeTemplate 属性または nodeTemplateFunction 属性によって指定されたテンプレートです。 createNodeFunction は、別のテンプレートを使用できます。
    カスタム・ノードを作成するには、createNodeFunction で Diagram ウィジェット の createTemplatedShape 関数を呼び出す必要があります。
    以下の例では、MyNode クラスのインスタンス を作成します。これは、ibm_ilog.diagram.Node のサブクラスでなければなりません。
    function createNode(item, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyNode, template, onGraph, diagram.nodeStyle, diagram.nodesStore, item);
    };