Dojo GFX workshop slides
Download as KEY, PDF2 likes1,736 views
The document provides an overview of the Dojo Toolkit and its components for graphics and charting. It discusses the major objects in Dojo GFX for creating and manipulating shapes, as well as transformations and rendering. It also covers the major players in Dojo Charting, including plots, axes, data series, and actions for processing events. The document concludes with suggestions for building a simple image viewer and interactive chart as examples.
More Related Content
Similar to Dojo GFX workshop slides (20)
More from Eugene Lazutkin (12)
Recently uploaded (20)
Dojo GFX workshop slides
- 1. Advanced Dojo GFX Eugene Lazutkin, DojoToolkit.org SVG Open 2009, Mountain View, CA 1
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Dojo GFX The crash course 12
- 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. 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. 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. 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. 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. 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. 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. 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. Image Viewer Hacking session 21
- 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. Dojo Charting The crash course 23
- 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. 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. 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. 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. 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. Chart Events Hacking session 29
- 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