Patrick Ruzand, IBMApril, 4th, 2012GFX, the foundation for your cross-browser advanced visualization                      ...
Dojox.gfx: the foundation for your cross-browser advanced visualizationAgenda Dojox.gfx overview Working with the gfx ap...
Dojox.gfx: the fundation for your cross-browser advanced visualizationOverview 1/2 Gfx is the Dojo 2D Vector Graphics API...
Dojox.gfx: the foundation for your cross-browser advanced visualizationOverview 2/2 GFX operated similarly to SVG as a re...
Dojox.gfx: the foundation for your cross-browser advanced visualizationWorking with the gfx API: What you need     the gf...
Dojox.gfx: the foundation for your cross-browser advanced visualizationWorking with the gfx API: What you can do     Chan...
Dojox.gfx: the foundation for your cross-browser advanced visualizationWorking with the gfx API: transforms     Apply a t...
Dojox.gfx: the foundation for your cross-browser advanced visualization GFX Under the Hood 1/2  One API, several (level o...
Dojox.gfx: the foundation for your cross-browser advanced visualizationGFX Under the Hood 2/2 : Startup sequence require(...
Dojox.gfx: the foundation for your cross-browser advanced visualizationGFX Under the Hood 3/3 : Composite Shapes dojox.gf...
Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage gfx for advanced visualization  dojox.gfx...
Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage gfx for advanced visualization: Layout for...
Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage gfx for advanced visualization: Layout for...
Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage gfx for advanced visualization: Layout for...
Dojox.gfx: the foundation for your cross-browser advanced visualizationLeverage gfx for advanced visualization: Template ...
Advanced Symbology with GfxQuestions                                 Q&AContact: patrick.ruzand@fr.ibm.com16              ...
Upcoming SlideShare
Loading in …5
×

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

2,312
-1

Published on

This presentation introduces dojox.gfx, how to work with the api, how it works under the hood and how it can be leverage for advanced visualization.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,312
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. Patrick Ruzand, IBMApril, 4th, 2012GFX, the foundation for your cross-browser advanced visualization © 2011 IBM Corporation
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  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.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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. Advanced Symbology with GfxQuestions Q&AContact: patrick.ruzand@fr.ibm.com16 © 2011 IBM Corporation
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×