Dojoconf 2011:Advanced Symbology with gfx
Upcoming SlideShare
Loading in...5
×
 

Dojoconf 2011:Advanced Symbology with gfx

on

  • 920 views

Slides of my Dojoconf 2011 Presentation: Advanced Symbology with gfx...

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.

Statistics

Views

Total Views
920
Views on SlideShare
920
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Dojoconf 2011:Advanced Symbology with gfx Dojoconf 2011:Advanced Symbology with gfx Presentation Transcript

  • Patrick Ruzand, IBM
    September 16th, 2011
    Advanced Symbology with GFX
  • 2
    Advanced Symbology with Gfx
    Agenda
    Use Case
    Layout Managers for Gfx
    Templating
    Data Binding
    Conclusion
  • 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
    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
    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
    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
    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
    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
    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
    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
    Advanced Symbology with Gfx
    Questions
    Q&A
    Contact: patrick.ruzand@fr.ibm.com