テンプレート
IBM® ILOG® Dojo Diagrammer の設計は、以下の主要な 2 つのシナリオに分けられます。
最初のシナリオでは、Diagram ウィジェットが、データ・ストアのコンテンツをダイアグラムとして表示するために使用されます。
2 つめのシナリオでは、通常、
Selection
が GFX 形状で構成されます。このGFX 形状は、UI レベルで作成され、データ・ストアにバインドされないものです。このシナリオ分割は、コピー・アンド・ペースト機能に影響します。
最初のシナリオでは、データ・ストア内のコンテンツをコピー・アンド・ペーストする場合、データ・ストア内に複写が発生し、依存性更新により、グラフィックスが変更を反映します。2 つめのシナリオでは、複写が GFX レベルで発生します。また、ユーザーは、現在表示されないユーザー・データも含めて、ユーザー・データを保管し、コピー・アンド・ペースト操作で適用しようとする場合もあります。これらの操作は、使用されるシナリオに応じて、結果が異なります。
この違いに対処するため、IBM® ILOG® Dojo Diagrammer ではカスタマイズを実装できるテンプレート操作を装備したライブラリーを提供しています。
表示
コピーされた要素の表示は、コンテキストから独立している必要があります。例えば、アクティブな GFX 面がない (
DataStore
接続がないなど) 場合でも、表示はなければなりません。表示は、この特性 (プラットフォーム/レンダラーからの独立) を持つ dojox.gfx
内のシリアライゼーション・アルゴリズムと同様です。シリアライゼーションは、レンダラーから、および面の存在から独立して、GFX オブジェクトを JSON 互換 JavaScript オブジェクト表示に変換します。同じ概念が、コピーされた形状の表示にも適用されます。シリアライゼーションおよびデシリアライゼーション
クラス Serializer は、シリアライゼーションのスケルトン・ロジック、特にコピー・アンド・ペースト操作を処理します。
コピー操作は、クリップボードにシリアライズされ、貼り付け操作はクリップボードからデシリアライズされます。
ibm_ilog.diagram.util.Serializer
クラスには、コピーされたデータのより細かい詳細を処理するユーザー・コールバックのセットがあります。これらのコールバックには、コピーされたエンティティーに関連付けられた ID を取得するための関数、およびグラフ内の各エンティティーに対するシリアライゼーション関数が含まれます。シリアライゼーション・コールバックは、関連付けられたエンティティーの表現を生成し、返します。このデータは、デシリアライゼーションのために、関連付けられたユーザー・コールバックによって使用されるため、エンティティーの再構成に必要なすべてのデータを適切なコンテキストに置く必要があります。
デシリアライゼーション・コールバックは、既存の表現に基づいて新規のエンティティーを作成します。
これらのコールバックは、ユーザー・コールバックによりシリアライズされたデータを受け取りますが、これには、デシリアライゼーション・プロセスで既に作成されたすべての新規エンティティーの ID 別辞書、および現在のコールバックにより新規エンティティーが作成されるコンテナーも含まれます。また、デシリアライゼーション・コールバックは、デシリアライゼーションによって新規に作成されたエンティティーを表すオブジェクトを返す必要もあります。この値は、プロセスでの追加コールバックの呼び出し用に辞書に保管され、エンティティーの子に対する呼び出し内のコンテナー引数として渡されます (サブグラフの場合)。
シリアライゼーションおよびデシリアライゼーション・プロセスでは、以下のコールバックが使用されます。
getId
は、シリアライゼーション/デシリアライゼーション・プロセスによりシリアライズされたグラフ要素を識別します。serializeNodeData
は、ノードのシリアライズに使用されます。 このコールバック関数を使用して、対応するデシリアライゼーション関数で後から使用されるノードの適切な表現を作成します。serializeLinkData
は、リンクのシリアライズに使用されます。 このコールバック関数を使用して、対応するデシリアライゼーション関数で後から使用されるリンクの適切な表現を作成します。serializeSubgraphData
は、サブグラフのシリアライズに使用されます。 このコールバック関数を使用して、対応するデシリアライゼーション関数で後から使用されるサブグラフの適切な表現を作成します。deserializeNodeData
は、シリアライズされたデータからノードを所定のコンテナーにデシリアライズします。deserializeLinkData
は、シリアライズされたデータからリンクを所定のコンテナーにデシリアライズします。deserializeSubgraphData
は、シリアライズされたデータからサブグラフを所定のコンテナーにデシリアライズします。
コピー・アンド・ペースト・カスタマイズの場合、
serialize(entity)
関数を呼び出し、次に deserialize(representation,container)
関数を呼び出します。
entity
引数は、シリアライズされたオブジェクトです。
representation
引数は、前の serialize
に対する呼び出しから得られた結果で、container
は deserializeSubgraph
コールバックで返されたユーザー定義オブジェクトと互換性のあるオブジェクトです。
deserialize
関数は、ユーザー・コールバックの結果を収集し、データ構造内にそれらを返します。例
以下の例では、基本のデータ・ストア・ベースのグラフ・シリアライザーの作成方法を示しています。
var serializer = new ibm_ilog.diagram.util.Serializer({ getId: function(ge) { return ge.getId(); }, serializeNodeData: function(ge){ return { transform:m.clone(ge.getTransform()) }; }, deserializeNodeData: function(s,newByOldId,container){ var node = container.graph.createNode(); node.setTransform(s.transform); return {created:node}; }, serializeSubgraphData: function(ge){ return { transform:m.clone(ge.getTransform()) }; }, deserializeSubgraphData: function(s,newByOldId,container){ var sg = container.graph.createSubgraph(); sg.setTransform(s.transform); return {created:sg,graph:sg.getGraph()}; }, serializeLinkData: function(ge){ return { startId:ge.getStartNode().getId(), endId:ge.getEndNode().getId() }; }, deserializeLinkData: function(s,newByOldId,container){ var link = container.graph.createLink(); link.setStartNode(newByOldId.item(s.startId).created); link.setEndNode(newByOldId.item(s.endId).created); return {created:link}; } });