Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

290 lines (274 sloc) 8.226 kB
<!--[if IE 7]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<!DOCTYPE HTML>
<html lang="en">
<head>
<![endif]>
<meta charset="utf-8" />
<title>Dojox.Gfx Receipe #1</title>
<script type="text/javascript">
var dojoConfig = {
async:1,
isDebug:true
}
</script>
<script type="text/javascript" src="./dojo/dojo.js"></script>
<script type="text/javascript">
require([
"dojo/ready",
"dojo/_base/lang",
"dojo/_base/array",
"dojo/aspect",
"dojo/dom",
"dojo/on",
"dojo/_base/declare",
"dojo/Stateful",
"dojo/string",
"dojo/json",
"dojox/gfx",
"dojox/gfx/matrix",
"dojox/gfx/Moveable",
"dojox/mvc/sync"],
function(ready, lang, array, aspect, dom, on, declare, Stateful, dstring, jsonLib, gfx, matrix, Moveable, sync){
// Symbol class definition
var Symbol = declare([gfx.Group, Stateful],{
constructor:function(){
this.moreInfo=null;
},
build:function(template){
var asObj = jsonLib.parse(template);
var root = this;
var deserialize = function(parent, object){
if(object instanceof Array){
return array.map(object, lang.hitch(null, deserialize, parent));
}
var shape = ("shape" in object) ? parent.createShape(object.shape) : parent.createGroup();
if("transform" in object){
shape.setTransform(object.transform);
}
if("stroke" in object){
shape.setStroke(object.stroke);
}
if("fill" in object){
shape.setFill(object.fill);
}
if("font" in object){
shape.setFont(object.font);
}
if("children" in object){
array.forEach(object.children, lang.hitch(null, deserialize, shape));
}
if("attachPoint" in object){
root[object["attachPoint"]] = shape;
}
return shape;
};
deserialize(this, asObj);
if(this.moreInfo){
this.moreInfo.connect("onclick", function(){window.open("http://www.dojotoolkit.org");});
}
return this;
},
_name:"",
_nameSetter: function(v){
this._name = v;
if(this._gfxName)
this._gfxName.setShape({text:this._name});
},
_phone:"",
_phoneSetter: function(v){
this._phone = v;
if(this._gfxPhone)
this._gfxPhone.setShape({text:"Phone: " + this._phone});
},
_email:"",
_emailSetter: function(v){
this._email= v;
if(this._gfxEmail)
this._gfxEmail.setShape({text:"Email: " + this._email});
},
_jobRole:"",
_jobRoleSetter: function(v){
this._jobRole = v;
if(this._gfxJob)
this._gfxJob.setShape({text:this._jobRole});
},
sync: function(data, bindings){
array.forEach(bindings, lang.hitch(this, function(b){
sync(data, b.from, this, b.to, b.opt);
}));
}
});
Symbol.nodeType = gfx.Group.nodeType;
Symbol.Creator = {
createSymbol: function(kwArgs){
return this.createObject(Symbol).build(kwArgs);
}
};
gfx.Surface.extend(Symbol.Creator);
gfx.Group.extend(Symbol.Creator);
(function(){
if(gfx.renderer == "vml"){
var fixVMLCreateObject = function(shape) {
if(shape instanceof Symbol){
// Call Creator._overrideSize
var node = shape.rawNode;
this._overrideSize(node);
// Need to do vml-specific createGroup tasks
// see dojox.gfx.vml.js/createGroup()
var r = shape.rawNode.ownerDocument.createElement("v:rect");
r.style.left = r.style.top = 0;
r.style.width = shape.rawNode.style.width;
r.style.height = shape.rawNode.style.height;
r.filled = r.stroked = "f";
shape.rawNode.appendChild(r);
shape.bgNode = r;
}
return shape;
};
aspect.after(gfx.Surface.prototype, 'createObject', fixVMLCreateObject);
aspect.after(gfx.Group.prototype, 'createObject', fixVMLCreateObject);
}
})();
function transformToContainer(shape, /*dojox/gfx/Group*/container){
// summary:
// Gets the transform from the shape coordinate system (i.e
//) taking into account the shape transform)
// to the specified container coordinate system.
// container: dojox/gfx/Group:
// the target container.
if(!container){
return null;
}
if(container === shape){
return matrix.identity;
}
var t1 = shape._getRealMatrix() || matrix.identity;
var t2 = container._getRealMatrix() || matrix.identity;
return matrix.multiply(matrix.invert(t2), t1);
}
ready(function(){
gfx.createSurface("canvas", 600,300).whenLoaded(this, function(surface){
var employee = new Stateful({
firstName: "John",
lastName: "Smith",
jobTitle: "Software Engineer",
phone: "6060-842",
email: "jsmith@mycompany.com"
});
var nameConverter = {
format: function(value){
return employee.firstName + " " + employee.lastName;
}
};
var bindings = [{
from: "jobTitle",
to : "jobRole",
opt : {bindDirection: sync.from}
}, {
from: "phone",
to : "phone",
opt : {bindDirection: sync.from}
},{
from: "email",
to : "email",
opt : {bindDirection: sync.from}
},{
from: "firstName",
to : "name",
opt: {
bindDirection: sync.from,
converter: nameConverter
}
},{
from: "lastName",
to : "name",
opt: {
bindDirection: sync.from,
converter: nameConverter
}
}
];
var template = '[' +
'{ "shape":{"type":"rect", "width":230, "height":110, "r":6},' +
' "fill":"#F5F5DC",' +
' "stroke":{"color":"#EED5B7", "width":3}' +
'},' +
'{ "attachPoint":"moreInfo", ' +
' "shape":{"type":"image","x":8,"y":8,"width":55,"height":60,"src":"male.png"}' +
'},' +
'{ "attachPoint":"_gfxName",' +
' "shape":{"type":"text","x":67, "y":25, "text":""},' +
' "fill":"black",' +
' "font": {"family":"sans-serif", "size":"13pt"}' +
'},'+
'{ "attachPoint":"_gfxJob",' +
' "shape":{"type":"text","x":67, "y":45, "text":""},' +
' "fill":"black",' +
' "font": {"family":"sans-serif", "size":"10pt"}' +
'},'+
'{ "attachPoint":"_gfxPhone",' +
' "shape":{"type":"text","x":67, "y":65, "text":""},' +
' "fill":"black",' +
' "font": {"family":"sans-serif", "size":"8pt"}' +
'},'+
'{ "attachPoint":"_gfxEmail",' +
' "shape":{"type":"text","x":67, "y":80, "text":""},' +
' "fill":"black",' +
' "font": {"family":"sans-serif", "size":"8pt"}' +
'}'+
']';
var symbol = surface.createSymbol(template);
symbol.sync(employee, bindings);
new Moveable(symbol);
var template2 = '[' +
'{ "shape":{"type":"ellipse", "cx":105, "cy":55, "rx":130, "ry":50},' +
' "fill":"rgb(160,160,220)",' +
' "stroke":{"color":"#EED5B7", "width":3}' +
'},' +
'{ "attachPoint":"_gfxName",' +
' "shape":{"type":"text","x":67, "y":45, "text":""},' +
' "fill":"black",' +
' "font": {"family":"sans-serif", "size":"13pt"}' +
'},'+
'{ "attachPoint":"_gfxJob",' +
' "shape":{"type":"text","x":60, "y":65, "text":""},' +
' "fill":"black",' +
' "font": {"family":"sans-serif", "size":"10pt"}' +
'},'+
'{ "shape":{"type":"rect", "x":75, "y":72, "width":60, "height":20},' +
' "fill":"white",' +
' "stroke":{"color":"black", "width":1}' +
'},' +
'{ "attachPoint":"moreInfo",' +
' "shape":{"type":"text","x":82, "y":85, "text":"About me"},' +
' "fill":"black",' +
' "font": {"family":"sans-serif", "size":"8pt" }' +
'}'+
']';
symbol = surface.createSymbol(template2).setTransform(matrix.translate(300,0));
symbol.sync(employee, bindings);
new Moveable(symbol);
on(dom.byId("b1"), "click", function(){
employee.set("lastName", "Doe");
});
});
});
});
</script>
</head>
<body>
<div id="canvas" style="width:600px;height:300px;border-color:black;border-width:2;border-style: solid"></div>
<button id="b1">New name</button>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.