dojox.gfx : the foundation for your crossbrowser advanced visualization.

Dojox.gfx: the foundation for your cross-browser advanced visualizationAgenda Dojox.gfx overview Working with the gfx api Gfx under the hood Leverage gfx for advanced visualization Q&A2 © 2011 IBM Corporation

Dojox.gfx: the fundation for your cross-browser advanced visualizationOverview 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

Dojox.gfx: the foundation for your cross-browser advanced visualizationOverview 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

Dojox.gfx: the foundation for your cross-browser advanced visualizationWorking 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 scene5 © 2011 IBM Corporation

Dojox.gfx: the foundation for your cross-browser advanced visualizationWorking 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

Dojox.gfx: the foundation for your cross-browser advanced visualizationWorking 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

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.addchildren=[]; 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

Dojox.gfx: the foundation for your cross-browser advanced visualizationGFX 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

Dojox.gfx: the foundation for your cross-browser advanced visualizationGFX 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

Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage 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 representations11 © 2011 IBM Corporation

Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage 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, gap12 © 2011 IBM Corporation

Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage 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 alignments13 © 2011 IBM Corporation

Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage 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 OSS14 © 2011 IBM Corporation

Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage 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 attribute15 © 2011 IBM Corporation

http://lanyrd.com	20
https://twitter.com	13
http://wp.localhost	4
http://us-w1.rockmelt.com	3

dojox.gfx : the foundation for your crossbrowser advanced visualization.

by pruzand

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 40

Statistics