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.

1. Patrick Ruzand, IBM September 16th, 2011 Advanced Symbology with GFX

2. 2 Advanced Symbology with Gfx Agenda Use Case Layout Managers for Gfx Templating Data Binding Conclusion

3. 3 Advanced Symbology with Gfx Use Case Create a data- aware, interactive Diagram visualization component displays a graphical representation of a static or dynamic data model. enables the user to interact with the graphical representation and the underlying data model “visualization component” : dijit with rich graphic rendering Example: Visualize an Org Chart, Network monitoring, etc. Symbol = the graphical representation of a data item. a composite shape (complex representation made of multiple shapes) dynamic (dynamic data) logic/behavior May have multiple representations

4. 4 Advanced Symbology with Gfx What we have in gfx, what we need A cross-browser 2D Graphic API Input events support Persistence Composite shapes Layout Template Data Binding

5. 5 Advanced Symbology with Gfx Layout for gfx : overview 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

6. 6 Advanced Symbology with Gfx Layout for gfx : Layouts 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

7. 7 Advanced Symbology with Gfx Layout for gfx : new API + gfx extensions 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

8. 8 Advanced Symbology with Gfx Layout for gfx : How it works A Layout Engine Receives the layout requests from containers Layout requests are put in a queue “When available”, processes the pending layout requests Layout process in 2 phases: Compute the children size according to their preferred size and the layout algo. and constraints (bottom to top) layout the children in the available space Demo: gfxpad foo Layout Engine text.setShape({text:’Longer Text’}); text.invalidate() cont.invalidate() Engine.postInvalidate(cont) queue.add(cont) requestUpdate() layoutQueue() cont.layoutMgr.computeSize() text.computePreferredSize() rect.computePreferredSize() cont.layoutMgr.doLayout() text.applyLayout(newBBox) rect.applyLayout(newBBox) Longer Text

9. 9 Advanced Symbology with Gfx Template in gfx 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 Demo container.background.connect(…)

10. 10 Advanced Symbology with Gfx Data Binding The ability to bind a gfx shape property to an object attribute Supports dojo.data, dojo.store and generic object (+ bindable properties) A 2-ways binding Based on DTL engine + extensions for gfx defaultNodeTemplate = [{ shape:{ width:80, height:40, r: "5”,type:'rect' }, fill: '{{backgroundColor}}', stroke: {'color': '{{borderColor}}', 'width': 2 }, },{ shape:{ type:’text‘, text:'{{data.label}}', align:'middle' } }]; Demo: gfxpad

11. 11 Advanced Symbology with Gfx Questions Q&A Contact: patrick.ruzand@fr.ibm.com