グラフィカルエディタで複数の要素を持ったウィジェットを作る例

1. ウィジェットの名前とネームスペースの決定

まずはウィジェットの名前を決めます. ここではSampleNodeとしましょう. 次にこのウィジェットが所属する名前空間を決めます. 名前空間はあなたが作るアプリケーション用の名前空間でもよいし, あなたが使用するウィジェットを集めた別の名前空間を作ってもかまいません. ここではウィジェットが所属する名前空間をged.widgetとします.

Haleプラットフォームは下のようなフォルダ構造になっています. (詳細はHale開発ガイドを参照)

この構造にしたがって, あなたが作るサンプルウィジェットのスクリプトSampleNode.jsは下のように配置しましょう.

ged.widgetではない別の名前空間を使用する場合には, その名前空間で利用されるフォルダの場所に配置します.

2. 必要な宣言とdojo.require

gdc.widget.AbstractNodeを継承して作るウィジェットを宣言しましょう. またDojoの規約通りdojo.provideも記述しておきます.

dojo.provide("ged.widget.SampleNode");

dojo.require("gdc.widget.AbstractNode");

dojo.declare("ged.widget.SampleNode",
  gdc.widget.AbstractNode,
  {
    // ここに実装を書く
  }
);

dojo.require文は必要に応じて適切に追加しましょう.

もし作りたいウィジェットが他のウィジェットを包含できるコンテナであるならばgdc.widget.GfxContainerも継承します.

dojo.declare("ged.widget.SampleNode",
  [gdc.widget.AbstractNode, gdc.widget.GfxContainer],
  {
    // ここに実装を書く
  }
);

3. Shapeの実装

このウィジェットを描画するための処理を実装します. 次のfunctionを実装し作りたいウィジェットに応じてdojo.gfxのshapeを作っていきます.

function createTargetShape: function(parent) {
  // ここに実装を書く
  // parentにはトップレベルのSurfaceまたは親コンテナのgroupBoxが入っている
}

次は長方形の中に2つの正方形を持つコンテナウィジェットの例です(). コンテナウィジェットの場合は外側のコンテナの役割をするshapeを作り, その後(もしあれば)他のshapeをthis.groupBoxに対して作成します.

dojo.provide("ged.widget.SampleRect");

dojo.require("gdc.widget.AbstractNode");
dojo.require("gdc.widget.GfxContainer");
dojo.require("dojox.color");

dojo.declare("ged.widget.SampleRect",
  [gdc.widget.AbstractNode, gdc.widget.GfxContainer],
  {
  	width: 200,
  	height: 100,
  	createTargetShape: function(parent) {
		var shape = parent.createRect({width:this.width, height:this.height});
		shape.setFill(new dojo.Color("#00FF00"));

		var rect1 = this.groupBox.createRect({width:10, height:10});
		rect1.setTransform({ dx:85, dy:18 });
		rect1.setFill(new dojo.Color("#FF00000"));

		var rect2 = this.groupBox.createRect({width:10, height:10});
		rect2.setTransform({ dx:5, dy:18 });
		rect2.setFill(new dojo.Color("#00000FF"));		

		return shape;
  	}
  }
);

外側の長方形などが存在しない場合はshapeとしてgroupを作ります. そのgroupをCanvasとして内部にshapeを作っていきます. 次のコードは画像とテキストを使ったSampleWidgetの実装例です.


4. アンカーとコネクション

5. イベントハンドラ