Dijit ウィジェットは、ダイアグラムのノードおよびリンク内で使用することができます。例えば、ノードにボタン・ウィジェットを組み込んで、ユーザーがそれを押すとそのノードに関連付けられた機能が実行されるようにすることができます。この機能は、Dojo Diagrammer で GfxWidget 形状を介して使用することができます。
GfxWidget 形状
GfxWidget オブジェクトは、Dojo Diagrammer ライブラリーの特殊な GFX 形状で、ダイアグラムのノードまたはリンクの上への Dijit ウィジェットの作成および配置を制御します。このオブジェクトは、ノードまたはリンク内に含まれているようにウィジェットを表示します。このオブジェクトは GFX 形状ですから、あらゆるノードまたはリンク・テンプレート内の他の形状 (長方形、テキストなど) と同様に使用できます。
GfxWidget 形状は、ibm_ilog.diagram.gfxwidget.GfxWidget クラスによってインスタンス化されます。
ノード・テンプレートでの GfxWidget の使用
以下の例は、ボタン・ウィジェットを含むノード・テンプレートを定義しています。
nodeTemplate = "[{"+ " dojoAttachPoint: 'baseShape',"+ " shape: {"+ " x: 0,"+ " y: 0,"+ " width: 90,"+ " height: 40,"+ " r: 5,"+ " type: 'rect'"+ " },"+ " fill: '{{backgroundColor}}',"+ " stroke: {"+ " 'color': '{{borderColor}}',"+ " 'width': 2"+ " },"+ " selectedStyle: {"+ " fill: '{{selectedBackgroundColor}}'"+ " }"+ "}, {"+* *" dojoAttachPoint: 'button',"+* *" shape: {"+* *" type: 'widget',"+* *" x: 8,"+* *" y: 5,"+* *" dojoType: 'dijit.form.Button',"+* *" onClick: hello,"+* *" label: 'Click me'"+* *" }"+* *"} ]";
GfxWidget 形状は、プロパティー
type: 'widget'
によってテンプレート内で識別されます。ウィジェットのタイプは、shape
オブジェクトの dojoType
プロパティーによって定義されます。x
および y
プロパティーは、ノード内のウィジェットの位置を指定します。shape オブジェクトに定義された
他のすべてのプロパティーは、attr() 呼び出しによってウィジェットに渡されます。
この例では、ボタンの onClick
属性および label
のコールバックを定義しています。dojoType
プロパティーを使用してウィジェット・タイプを指定する代わりに、以下の例のように createFunction プロパティーを指定することができます。"{"+ " dojoAttachPoint: 'button',"+ " shape: {"+ " type: 'widget',"+ " x: 8,"+ " y: 8,"+ " createWidget: createCombo"+ " }"+ "}" ... createCombo = function(shape){ var colors = { label: 'name', items: [ { name: 'red' }, { name: 'green' }, { name: 'blue' } ] }; var store = new dojo.data.ItemFileReadStore({data: colors}); var combo = new dijit.form.ComboBox({store: store}); return combo; };
この関数は、GFX 形状という単一のパラメーターを使用します。この選択により、複雑なウィジェットを作成し、そのデータ・ストアを初期化することができます。
リンク・テンプレートでの GfxWidget の使用
以下の例のように、GfxWidget 形状をリンク・テンプレートで使用できます。この例では、リンク・パス上に装飾を提供しています。
linkTemplate = "[{"+ " dojoAttachPoint: '_path',"+ " shape: {"+ " type: 'polyline',"+ " points: [{"+ " x: 0,"+ " y: 0"+ " }, {"+ " x: 100,"+ " y: 0"+ " }]"+ " },"+ " stroke: {"+ " width: {{strokeWidth}}," + " color: '{{strokeColor}}'" + " },"+ " selectedStyle: {"+ " stroke: {"+ " width: {{selectedStrokeWidth}},"+ " color: '{{selectedStrokeColor}}'"+ " }"+ " }"+ "}, {"+ " isDecoration: true,"+ " shape: {"+ " type: 'widget',"+ " dojoType: 'dijit.form.Button',"+ " label: 'X',"+ " onClick: linkClicked"+ " }"+ "}, {"+ " dojoAttachPoint: '_endArrow',"+ " shape: {"+ " type: 'polyline',"+ " points: [{"+ " x: -8,"+ " y: 4"+ " }, {"+ " x: 0,"+ " y: 0"+ " }, {"+ " x: -8,"+ " y: -4"+ " }]"+ " },"+ " fill: '{{strokeColor}}',"+ " selectedStyle: {"+ " fill: '{{selectedStrokeColor}}'"+ " }"+ "}]";
ウィジェット形状に isDecoration プロパティーを設定すると、ウィジェットがリンク・パス上に自動的に配置されます。詳しくは、Link オブジェクトの説明を参照してください。
制限
GfxWidget 形状によって作成され、管理されるウィジェットは、ダイアグラムのレンダリングに使用される GFX 面には含まれません。面に重ね合わせられます。それらのウィジェットは、ノードの位置またはリンクの形状に合うように自動的に移動されます。
以下の制約が暗黙に適用されます。
- 必ずしも Z 順序のとおりに表示されるとは限りません。例えば、ノード A がノード B の上にある場合、B に含まれるウィジェットはノード A によって隠されません。
- ウィジェットは、グラフのズーム・レベルに従ってズームされません。ズーム・レベルに基づいて表示可能な新たな位置に移動されるだけです。
- 形状がダイアグラム・ウィジェットの外側で使用される場合、GFX 面を含む HTML 要素は、
position
スタイルがabsolute
に設定されていなければなりません。現在、GFX レイアウトがノード・テンプレートで使用されている場合、GfxWidget 形状は正しく機能しません。 このため、ウィジェットは、ノードの絶対 x 座標および y 座標で明示的に配置する必要があります。