Dojoconf 2011:Advanced Symbology with gfx


Published on

Slides of my Dojoconf 2011 Presentation: Advanced Symbology with gfx

The purpose of this presentation is to illustrate how the dojo graphic API (gfx) can be leveraged to build advanced features needed by rich graphical application. In particular, we will demontrate how to build gfx extensions enabling advanced symbology : a layout mechanism to arrange shapes automatically and dynamically, a simple templating engine and gfx data binding. These extensions will be demonstrated in action taking as an example a diagramming web application.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dojoconf 2011:Advanced Symbology with gfx

  1. 1. Patrick Ruzand, IBM<br />September 16th, 2011<br />Advanced Symbology with GFX<br />
  2. 2. 2<br />Advanced Symbology with Gfx<br />Agenda<br />Use Case<br />Layout Managers for Gfx<br />Templating<br />Data Binding<br />Conclusion<br />
  3. 3. 3<br />Advanced Symbology with Gfx<br />Use Case<br />Create a data- aware, interactive Diagram visualization component <br />displays a graphical representation of a static or dynamic data model.<br />enables the user to interact with the graphical representation and the underlying data model <br />“visualization component” : dijit with rich graphic rendering<br />Example: Visualize an Org Chart, Network monitoring, etc.<br />Symbol = the graphical representation of a data item.<br />a composite shape (complex representation made of multiple shapes)<br />dynamic (dynamic data)<br />logic/behavior<br />May have multiple representations<br />
  4. 4. 4<br />Advanced Symbology with Gfx<br />What we have in gfx, what we need<br />A cross-browser 2D Graphic API<br />Input events support<br />Persistence<br />Composite shapes<br />Layout<br />Template<br />Data Binding<br />
  5. 5. 5<br />Advanced Symbology with Gfx<br />Layout for gfx : overview<br />A mechanism to automatically arrange shapes (position and size) in a container according to a set of constraints<br />Dynamic => bbox changes trigger a new layout<br />Transparent to the user<br />2 General purpose layout algorithms: Stack and Grid<br />Size and Position set by constraints:<br />H/V alignment: left, center, right, stretch<br />Layout specific: column/row span, padding, gap<br />
  6. 6. 6<br />Advanced Symbology with Gfx<br />Layout for gfx : Layouts<br />Grid<br />Arranges children of a container as grid elements.<br />Properties: padding, margins, h/v alignments<br />Row/column span<br />Stack<br />Arranges children of a container in a horizontal or a vertical stack. <br />Properties: padding, gap, margins, h/v alignments<br />
  7. 7. 7<br />Advanced Symbology with Gfx<br />Layout for gfx : new API + gfx extensions<br />New API :<br />Layout Algorithm class hierarchy<br />Shape preferred size vs explicit size<br />Invalidate state (default: push invalidate up in the hierarchy, container: request a layout)<br />Layout Engine to handle layout requests<br />Gfx extensions:<br />Text:<br />Multiline text<br />Metrics<br />Auto-wrapping<br />BBox Changed notification<br />BBox caching<br />
  8. 8. 8<br />Advanced Symbology with Gfx<br />Layout for gfx : How it works<br />A Layout Engine<br />Receives the layout requests from containers<br />Layout requests are put in a queue<br />“When available”, processes the pending layout requests<br />Layout process in 2 phases:<br />Compute the children size according to their preferred size and the layout algo. and constraints (bottom to top)<br />layout the children in the available space<br />Demo: gfxpad<br />foo<br />Layout Engine<br />text.setShape({text:’Longer Text’});<br />text.invalidate()<br />cont.invalidate()<br />Engine.postInvalidate(cont)<br />queue.add(cont)<br />requestUpdate()<br />layoutQueue()<br />cont.layoutMgr.computeSize()<br />text.computePreferredSize()<br />rect.computePreferredSize()<br />cont.layoutMgr.doLayout()<br />text.applyLayout(newBBox)<br />rect.applyLayout(newBBox)<br />Longer Text<br />
  9. 9. 9<br />Advanced Symbology with Gfx<br />Template in gfx<br />Allows to separate the symbol logic/behavior from the graphical representation<br />Based on gfx serialization <br />+ dojoAttachPoint : contract between the logic and the graphic<br />{children:[<br /> {<br />dojoAttachPoint:‘background’;<br /> shape: { type:’rect’}<br /> }, ...<br />]}<br />+ extended attribute<br />Demo<br />container.background.connect(…)<br />
  10. 10. 10<br />Advanced Symbology with Gfx<br />Data Binding<br />The ability to bind a gfx shape property to an object attribute<br />Supports, and generic object (+ bindable properties)<br />A 2-ways binding<br />Based on DTL engine + extensions for gfx<br />defaultNodeTemplate = [{<br />shape:{<br /> width:80, height:40, r: "5”,type:'rect'<br /> },<br />fill: '{{backgroundColor}}',<br /> stroke: {'color': '{{borderColor}}', 'width': 2 },<br />},{<br />shape:{<br /> type:’text‘, text:'{{data.label}}', align:'middle'<br /> }<br />}];<br />Demo: gfxpad<br />
  11. 11. 11<br />Advanced Symbology with Gfx<br />Questions<br />Q&A<br />Contact:<br />