More Related Content
Similar to dojox.gfx : the foundation for your crossbrowser advanced visualization. (20)
dojox.gfx : the foundation for your crossbrowser advanced visualization.
- 2. Dojox.gfx: the foundation for your cross-browser advanced visualization
Agenda
Dojox.gfx overview
Working with the gfx api
Gfx under the hood
Leverage gfx for advanced visualization
Q&A
2 © 2011 IBM Corporation
- 3. Dojox.gfx: the fundation for your cross-browser advanced visualization
Overview 1/2
Gfx is the Dojo 2D Vector Graphics API
Provides a high-level structured 2D JavaScript API
One unified api, several implementations for each rendering technologies.
The underlying technology is automatically selected depending on the browser:
• SVG : Firefox, Chrome, Opera, IE9, Safari, Android Browser (3+)
• VML : IE 6,7,8
• Silverlight : wherever Silverlight is available
• Canvas : mainly used for mobile web browsers with no SVG support (Android 2.x)
• SVGWeb : to render SVG via Flash plug-in
Public dojox.gfx API
SVG impl. Canvas impl. VML impl. Other impl.
3 © 2011 IBM Corporation
- 4. Dojox.gfx: the foundation for your cross-browser advanced visualization
Overview 2/2
GFX operated similarly to SVG as a 'retained' mode graphics system, you build a tree of
visual 'live' shapes.
Default supported shapes are :
– Rectangle, Image, Circle, Ellipse, Line, Polyline, Polygon, Path, Text, Text on Path
– Group (shape container) for composite shapes.
Mouse event support on shapes
shape.connect('onmousedown', new function() {
// shape was clicked
});
2D transformations on shapes (ex: zoom, rotation, translation)
2-ways Serialization (Json)
4 © 2011 IBM Corporation
- 5. Dojox.gfx: the foundation for your cross-browser advanced visualization
Working with the gfx API: What you need
the gfx module:
require([“dojox/gfx”, …], function(gfx){
}
A drawing surface holder
<div id=“gfx_holder” style=“width:500px;height:500px;”></div>
A gfx surface
require(["dojox/gfx", "dojo/ready"],
function(gfx, ready) {
var surface = gfx.createSurface("gfx_holder",500,500);
Shapes !
– dojox.gfx.shape.Creator.createXXX methods
• createCircle, createEllipse, createGroup, createImage, createLine, createPath,
createPolyline, createRect, createText, createTextPath
– A mixin shared between Surface and Group classes
– Ex: surface.createPath("M204.33 139.83 C196.33 133.33 206.68
132.82 206.58 132.58 z");
– create = instantiate + add to scene
5 © 2011 IBM Corporation
- 6. Dojox.gfx: the foundation for your cross-browser advanced visualization
Working with the gfx API: What you can do
Change the appearance
– setStroke
• width, color, style, cap, join
– setFill
• Solid
• Linear Gradient
• Radial Gradient
• Pattern
– setFont (Text)
Change the geometry
– setShape: sets the new geometry definition.
– Support “partial” definition:
• setShape({width:200}) ~ mixin ({width:200}, current geometry)
Listen to input events
– Shape.connect(eventName, scope, method)
– Get the targeted shape: evt.gfxTarget (new in 1.7)
6 © 2011 IBM Corporation
- 7. Dojox.gfx: the foundation for your cross-browser advanced visualization
Working with the gfx API: transforms
Apply a transform: scale, translate, rotate
– setTransform: cancel the current transform and set a new one
– applyLeftTransform: adds a new transform to the current one, current first.
– applyRightTransform: adds a new transform to the current one, new first.
The right coordinates:
– Get a coord in the parent coordinate system: apply shape.getTransform() to coord
var bbox = shape.getBoundingBox();
matrix.multiplyRectangle(shape.getTransform(), bbox); //bbox can be null!
– coord in surface coordinate: shape.getTransformedBoundingBox()
For more complex operation: gfx.matrix API coord +
7 © 2011 IBM Corporation
- 8. Dojox.gfx: the foundation for your cross-browser advanced visualization
GFX Under the Hood 1/2
One API, several (level of) implementations
– dojox.gfx.shape.* : the namespace for the gfx API (shape.js)
• Deals with the gfx API logic only
• abstract level (no DOM -or whatever- concept)
– dojox.gfx.(svg|canvas|...).* : renderer-specific implementation.
• Implements the gfx api for the given rendering technology
dojox.gfx.Group.add dojox.gfx.svg.Group.add
children=[]; add: function(shape){
add: function(shape){ if(this != shape.getParent()){
var oldParent = shape.getParent(); if(this.fragment){
if(oldParent){ this.fragment.appendChild(shape.rawNode);
oldParent.remove(shape, true); }else{
} this.rawNode.appendChild(shape.rawNode);
this.children.push(shape); }
return shape._setParent(this, C.add.apply(this, arguments);
this._getRealMatrix()); shape.setClip(shape.clip);
}, }
return this;
},
8 © 2011 IBM Corporation
- 9. Dojox.gfx: the foundation for your cross-browser advanced visualization
GFX Under the Hood 2/2 : Startup sequence
require([“dojox/gfx”]):
– Starts the available rendering technologies detection process (renderer.js)
• check whether the requested renderers are supported
dojoConfig.gfxRenderer or “svg,vml,canvas,silverlight” (default)
• Uses feature detection (not browser detection)
– Loads the rendering implementation
– Maps the graphic api to the implementation
• gfx.switchTo()
Configuration options:
– Force a renderer: dojoConfig.forceGfxRenderer (String)
• skips detection process
• e.g. forceGfxRenderer:‟svg‟
– Specify a list of possible renderers: dojoConfig.gfxRenderers (String, comma-
separated)
• e.g. gfxRenderers:‟svg, silverlight, vml‟
– Lightweight canvas (i.e. no input events handling): dojoConfig.canvasEvents
• Must be explicitly set to „false‟
9 © 2011 IBM Corporation
- 10. Dojox.gfx: the foundation for your cross-browser advanced visualization
GFX Under the Hood 3/3 : Composite Shapes
dojox.gfx.Group
Manages a list of children shape (nested Group included)
add/remove/clear and createXXX()
Propagates transforms to the children hierarchy
Things to know:
– Group.getBoundingBox() is incomplete in <= 1.7
– Fixed in 1.8,
– Manual backport: See http://bugs.dojotoolkit.org/changeset/27449/dojo
Custom composite class: possible, but painfull in vml
– Inherit from gfx.shape.Group
– Sets the nodeType property to Group.nodeType
MyShape.nodeType = gfx.Group.nodeType;
– For VML:
• Add a Creator.createMyShape, copy the code from createGroup()…
• + this._overrideSize(node);
10 © 2011 IBM Corporation
- 11. Dojox.gfx: the foundation for your cross-browser advanced visualization
Leverage gfx for advanced visualization
dojox.gfx initial goal: provide a small, generic, efficient 2D graphic api.
– =>compromises in the set of supported features
– =>May lacks of high-level features needed for advanced use cases.
Use case: a diagramming component
– displays a graphical representation of a static or dynamic data model.
– Supports user interaction
Rich graphical representation of dynamic data:
– Built from multiple shapes : composite shape with layout logic
– representation with logic/behavior
– Support multiple representations
11 © 2011 IBM Corporation
- 12. Dojox.gfx: the foundation for your cross-browser advanced visualization
Leverage gfx for advanced visualization: Layout for gfx
A mechanism to automatically arrange shapes (position and size) in a container according to
a set of constraints
Dynamic => bbox changes trigger a new layout
Transparent to the user
2 General purpose layout algorithms: Stack and Grid
Size and Position set by constraints:
– H/V alignment: left, center, right, stretch
– Layout specific: column/row span, padding, gap
12 © 2011 IBM Corporation
- 13. Dojox.gfx: the foundation for your cross-browser advanced visualization
Leverage gfx for advanced visualization: Layout for gfx
Grid
– Arranges children of a container as grid elements.
– Properties: padding, margins, h/v alignments
– Row/column span
Stack
– Arranges children of a container in a horizontal or a vertical stack.
– Properties: padding, gap, margins, h/v alignments
13 © 2011 IBM Corporation
- 14. Dojox.gfx: the foundation for your cross-browser advanced visualization
Leverage gfx for advanced visualization: Layout for gfx
New API :
– Layout Algorithm class hierarchy
– Shape preferred size vs explicit size
– Invalidate state (default: push invalidate up in the hierarchy, container: request a layout)
– Layout Engine to handle layout requests
Gfx extensions:
– Text:
• Multiline text
• Metrics
• Auto-wrapping
– BBox Changed notification
– BBox caching
Candidate for OSS
14 © 2011 IBM Corporation
- 15. Dojox.gfx: the foundation for your cross-browser advanced visualization
Leverage gfx for advanced visualization: Template
Allows to separate the symbol logic/behavior from the graphical representation
Based on gfx serialization
+ dojoAttachPoint : contract between the logic and the graphic
{children:[
{
dojoAttachPoint:„background‟;
shape: { type:‟rect‟}
}, ...
]}
+ extended attribute
15 © 2011 IBM Corporation