Getting Started (under construction)
- Example of creating a complex widget used by GraphicalEditor

1. Define widget's name and its namespace

First, you need define widget's name which you want to create. In this tutorial, it's SampleNode. Second, you need define the namespace which the widget belongs to. In this document, the widget belongs to "ged.widget.samples" namespace.

Here is the structure of Hale platform. (See Hale developer's guide)

Following this structure, you should place the JavaScript file of your sample widget (SampleNode.js) onto here.

2. Add config into component definition file

Add the following description into apps/GraphicalEditor/get/conf/GraphicalComponents.xml.

<component>
  <name>ged.widget.samples.SampleNode</name>
  <description>SampleNode</description>
  <icon>../apps/GraphicalEditor/ged/resources/Palette/rect.gif</icon>
  <clickHandler>btp.widget.tool.ResizeCreationTool</clickHandler>
  <moveHandle>true</moveHandle>
  <dropTargets>connection</dropTargets>
  <attribute>
    <name>backgroundColor</name>
    <value>#F0E68C</value>
  </attribute>
  <attribute>
    <name>borderColor</name>
    <value>#BDB76B</value>
  </attribute>
  <attribute>
    <name>width</name>
    <value>117</value>
  </attribute>
  <attribute>
    <name>height</name>
    <value>38</value>
  </attribute>
</component>

3. Implement the widget

A. Declaration and dojo.require

You should declare the widget using dojo.declare() derived from gdc.widget.AbstractNode. You should also describe dojo.require() lines if you need.

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

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

dojo.declare("ged.widget.SampleNode",
  gdc.widget.AbstractNode,
  {
    // write implementation here
  }
);

If you want to create widgets which contains other widgets (container), your widget should also inherit gdc.widget.GfxContainer like this.

dojo.declare("ged.widget.SampleNode",
  [gdc.widget.AbstractNode, gdc.widget.GfxContainer],
  {
    // write implementation here
  }
);

B. Shape implementation

You should implement the following function to render the widget.

function createTargetShape: function(parent) {
  var shape = ...; // write implementation here to create shapes (dojo.gfx.Shape objects)
                   // using dojo.gfx functions
                   // parent is a surface or groupBox of the parent widget
  return shape;
}

Following code is a example container widget which has two squares in it (). If it is a container, you need to create a shape as a container, then you create the other shapes as children of this.groupBox.

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

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

dojo.declare("ged.widget.samples.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;
  	}
  }
);

If your widget has no other widgets in it (not container), you should create a group as its shape. You create the other shapes as children of the group. Following code is sample implementation of SampleWidget using images and text ().

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

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

dojo.declare("ged.widget.samples.SampleNode",
  gdc.widget.AbstractNode,
  {
    width: 117,
    height: 38,
    
    leftImage: null,
    mainImage: null,
    labelText: null,

    createTargetShape: function(parent) {
        var shape = parent.createGroup({width:this.width, height:this.height});

        var mainImage = this.mainImage = shape.createImage({width:86, height:38, src:dojo.moduleUrl("gdc", "../apps/GraphicalEditor/ged/widget/templates/images/body-green.gif")+""});
        mainImage.setTransform({dx:31});
        var leftImage = this.leftImage = shape.createImage({width:31, height:38, src:dojo.moduleUrl("gdc", "../apps/GraphicalEditor/ged/widget/templates/images/outlet-empty-green.gif")+""});
        leftImage.setTransform({dx: 0});
        
        var labelText = this.labelText = shape.createText({width: 64, height:17, text: "Sample"});
        labelText.setFill(new dojo.Color("#FFFFFF"));
        labelText.setTransform({dx: 46, dy: 26});
        labelText.setFont({size: "12pt"});
        return shape;
    }
  }
);

C. Anchors and Connections

(under construction)

D. Event handlers

(under construction)