Advanced
     Dojo GFX
 Eugene Lazutkin, DojoToolkit.org
SVG Open 2009, Mountain View, CA




                1
Dojo Toolkit: short intro
•   Consists of four parts:

    •   Dojo Base – the most important part. It is included as soon...
Dojo Toolkit: short intro
•   DojoX – eXtended Dojo, a repository for less frequently needed
    functionality.

    •   O...
Dojo Toolkit: short intro

•   Both DojoX GFX and DojoX Charting are housed in DojoX.

•   Both are battle-tested, and wer...
Dojo Toolkit: code

•   Dojo defines just three top-level objects: dojo, dijit, and dojox.
    Everything else is in them.
...
Dojo Toolkit: code
•   Module names follow a simple convention:

    •   Examples: dojox.gfx is in dojox/gfx.js, dijit.lay...
Dojo Toolkit: docs & help

•   Presently docs are hosted at Dojo Campus:

    •   http://docs.dojocampus.org/

•   Usually...
Dojo Toolkit: docs & help
•   More “interactive” help:

    •   Mailing lists are very helpful.

        •   Syndicated by...
Dojo Toolkit: docs & help
•   Do not overlook “reading code”!

    •   In most cases Dojo code is very readable and thorou...
Dojo Toolkit: docs & help


•   Dojo’s Trac is at http://bugs.dojotoolkit.org/

    •   Register your name at dojotoolkit....
Dojo Toolkit: docs & help
•   Trac hints:

    •   Search Trac to search for a problem before opening a ticket.

    •   A...
Dojo GFX
 The crash course




        12
Dojo GFX: major players
•   The package: dojox.gfx

    •   The proper renderer will be automatically selected.

    •   Y...
Dojo GFX: shapes & groups
•   Shapes: Rect (with rounded corners), Circle, Ellipse, Line, Polyline,
    Path, Image, Text,...
Dojo GFX: stroke & fill & font
•   Stroke defines how to outline a shape.

    •   You can specify: color, thickness, style ...
Dojo GFX: color

•   dojo.Color is used to specify all colors.

    •   Any valid CSS3 colors are supported.

    •   CSS ...
Dojo GFX: transformations
•   dojox.gfx.Matrix2D is used to transform shapes.

    •   Linear 2D transformations are suppo...
Dojo GFX: more details
•   All shapes are organized using an indirect Z-index.

    •   You can “move to front” and “move ...
Dojo GFX: move & fx
•   dojox.gfx.move simplifies grab-drag-drop operations.

•   dojox.gfx.fx provides animation primitive...
Dojo GFX: selecting renderers
•   Selecting specific renderers is easy: just use gfxRenderer parameter
    of dojo.config:

...
Image Viewer
  Hacking session




        21
Simple image viewer
•   Let’s base it on public pictures available on Flickr.

    •   We can look up how to get images in...
Dojo Charting
   The crash course




          23
Charting: major players

•   The package: dojox.charting.

•   Built on dojox.gfx, which makes it virtually browser-indepe...
Charting: plot
•   dojox.charting.plot2d namespace hosts Plot objects:

    •   Areas, Lines, Default (same as Lines), Sta...
Charting: axis
•   dojox.charting.axis2d namespace hosts Axis objects:

    •   Default: linear axis with 3-level ticks, a...
Charting: data series

•   An array of numbers can be used with most plots.

    •   Bubble, Candlesticks, OHLC cannot use...
Charting: actions

•   Actions are used to process events on visual objects representing
    data points.

•   Supported e...
Chart Events
  Hacking session




        29
Simple interactive chart

•   Let’s overlap two different plots on the same chart.

•   They will share the X axis, and ha...
Upcoming SlideShare
Loading in …5
×

Dojo GFX workshop slides

5,131 views
4,970 views

Published on

Short intro in Dojo, Dojo GFX, and Charting. Presented at SVG Open 2009.

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

No Downloads
Views
Total views
5,131
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
44
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Dojo GFX workshop slides

    1. 1. Advanced Dojo GFX Eugene Lazutkin, DojoToolkit.org SVG Open 2009, Mountain View, CA 1
    2. 2. Dojo Toolkit: short intro • Consists of four parts: • Dojo Base – the most important part. It is included as soon as you include <script src=”dojo.js”></script>. • Dojo Core – generic core components (e.g., DnD) and a foundation for everything else. • Dijit – core widgets (form elements, layout components) to assemble UI. 2
    3. 3. Dojo Toolkit: short intro • DojoX – eXtended Dojo, a repository for less frequently needed functionality. • Organized by packages. • Every package includes README listing maintainers, and external dependencies. • Can include production and experimental code (see README for each package). 3
    4. 4. Dojo Toolkit: short intro • Both DojoX GFX and DojoX Charting are housed in DojoX. • Both are battle-tested, and were used in serious projects. • SVG and VML renderers were declared of production quality almost 2 years ago. • Canvas render is actively used in mobile applications. 4
    5. 5. Dojo Toolkit: code • Dojo defines just three top-level objects: dojo, dijit, and dojox. Everything else is in them. • You don’t need to follow this example for simple projects. I frequently define short aliases, for example: var d = dojo, g = dojox.gfx; • Including modules are easy: dojo.require(“dojox.gfx”); 5
    6. 6. Dojo Toolkit: code • Module names follow a simple convention: • Examples: dojox.gfx is in dojox/gfx.js, dijit.layout.ContentPane is in dijit/layout/ContentPane.js, and so on. • Exception: Dojo Base attaches functions directly to “dojo”, but actual code is in dojo/_base/. • Examples: dojo.style is in dojo/_base/html.js, dojo.declare is in dojo/ _base/declare.js. 6
    7. 7. Dojo Toolkit: docs & help • Presently docs are hosted at Dojo Campus: • http://docs.dojocampus.org/ • Usually names are directly reflected in URL: • Docs for dojox.gfx are at http://docs.dojocampus.org/dojox/gfx • See the pattern? 7
    8. 8. Dojo Toolkit: docs & help • More “interactive” help: • Mailing lists are very helpful. • Syndicated by Gmane, Nabble, Google Groups. • http://stackoverflow.com/ is frequented by users and contributors. • More “immediate” help: • #dojo channel @ freenode 8
    9. 9. Dojo Toolkit: docs & help • Do not overlook “reading code”! • In most cases Dojo code is very readable and thoroughly commented. • It is a good way to learn how things work, and what API is presented. • You can spot some useful tricks from the code. • “Improving code” starts with “reading code”. If you spot a problem, open a ticket! 9
    10. 10. Dojo Toolkit: docs & help • Dojo’s Trac is at http://bugs.dojotoolkit.org/ • Register your name at dojotoolkit.org. • Use Trac if you found a bug, or have a good idea for an enhancement. 10
    11. 11. Dojo Toolkit: docs & help • Trac hints: • Search Trac to search for a problem before opening a ticket. • Attach files rather than pasting them inline. • If you want to post a snippet, use code formatting {{{code}}}. • Try to distill a problem into a minimal test program. • Attach patches. Tickets with patches are fast-tracked. 11
    12. 12. Dojo GFX The crash course 12
    13. 13. Dojo GFX: major players • The package: dojox.gfx • The proper renderer will be automatically selected. • You can change the detection order. • dojox.gfx.Surface • A rectangular container for shapes. • Usually it is anchored at <div>. 13
    14. 14. Dojo GFX: shapes & groups • Shapes: Rect (with rounded corners), Circle, Ellipse, Line, Polyline, Path, Image, Text, TextPath (experimental). • dojox.gfx.Group is a special shape, which is used to group other shapes. • Its children can be enumerated. • It can be transformed as whole. • It can contain other groups. 14
    15. 15. Dojo GFX: stroke & fill & font • Stroke defines how to outline a shape. • You can specify: color, thickness, style (e.g., solid or dash), caps, and joints. • Fill defines how shape’s interior is going to be filled. • Supported styles: solid color, tiled patterns, linear and radial gradient. • Font is used for Text and TextPath shapes. 15
    16. 16. Dojo GFX: color • dojo.Color is used to specify all colors. • Any valid CSS3 colors are supported. • CSS named colors are supported with dojo.colors module. • Opacity is supported as well. • Warning:VML doesn’t support opacity in fills. 16
    17. 17. Dojo GFX: transformations • dojox.gfx.Matrix2D is used to transform shapes. • Linear 2D transformations are supported: scaling, translation, rotation, skewing, and so on. • Practically all matrix operations are provided: multiply matrices, invert, transform points, even eigenvalue decomposition. • For convenience “at” versions are provided too, e.g., rotateAt() rotates around specified center. 17
    18. 18. Dojo GFX: more details • All shapes are organized using an indirect Z-index. • You can “move to front” and “move to back” them within a container. • You can move the whole container. • Shapes can be added, removed, and transferred between containers. • Events are supported with familiar shape.connect() and shape.disconnect(). 18
    19. 19. Dojo GFX: move & fx • dojox.gfx.move simplifies grab-drag-drop operations. • dojox.gfx.fx provides animation primitives: animateStroke, animateFill, animateFont, and, most useful, animateTransform. • It supports all matrix-producing functions of dojox.gfx.matrix. • Special operation is supported: “original”, which means the original matrix (before animation starts). • A chain of such operations can be specified. 19
    20. 20. Dojo GFX: selecting renderers • Selecting specific renderers is easy: just use gfxRenderer parameter of dojo.config: • djConfig = {gfxRenderer: “svg,vml”}. • It defines the list of renderers to try. • First renderer will be tried first. • This way you can include/exclude renderers and their priority. 20
    21. 21. Image Viewer Hacking session 21
    22. 22. Simple image viewer • Let’s base it on public pictures available on Flickr. • We can look up how to get images in dojo/tests/dnd/ flickr_viewer.html • Simple functionality: preview with thumbnails, click on an image, and it shows it big. • We may need preload big images to make our viewer snappy. • If time permits, let’s animate all actions. 22
    23. 23. Dojo Charting The crash course 23
    24. 24. Charting: major players • The package: dojox.charting. • Built on dojox.gfx, which makes it virtually browser-independent. • dojox.charting.Chart2D is the main object. • Serves as a container for plots, axis, and data series. • Uses a theme to render components, and actions to process events. 24
    25. 25. Charting: plot • dojox.charting.plot2d namespace hosts Plot objects: • Areas, Lines, Default (same as Lines), StackedAreas, StackedLines, Bubble, Candlesticks, Markers, MarkersOnly, OHLC (open-high- low-close chart), Pie, Scatter, • Bars, ClusteredBars, StackedBars • Columns, ClusteredColumns, StackedColumns • Grid 25
    26. 26. Charting: axis • dojox.charting.axis2d namespace hosts Axis objects: • Default: linear axis with 3-level ticks, and 2-level labels. • The Grid plot reuses ticks for grid lines. • It is possible to create plots without one or both axes. • Axes can be shared between plots. • Axes can be attached to all four sides. No stacking yet. 26
    27. 27. Charting: data series • An array of numbers can be used with most plots. • Bubble, Candlesticks, OHLC cannot use simple numbers. • An array of objects can be used to trigger an enhanced processing. • Presently (10/1/2009) bar- and column-based charts cannot use objects. It will be fixed soon. Hopefully in time for 1.4. 27
    28. 28. Charting: actions • Actions are used to process events on visual objects representing data points. • Supported events: onmouseover, onmouseout, onclick, onplotreset (synthetic event, used for updating a plot). • Common infrastructure, which simplifies creating actions. • Hosted by dojox.charting.action2d. 28
    29. 29. Chart Events Hacking session 29
    30. 30. Simple interactive chart • Let’s overlap two different plots on the same chart. • They will share the X axis, and have different Y axes. • We implement actions (tooltip, magnify, highlight). • If time permits, let’s add our own action on mouse click. 30

    ×