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.
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>
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 } );
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; } } );
(under construction)
(under construction)