Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Dojo GFX workshop slides

5 321 vues

Publié le

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

Publié dans : Technologie, Art & Photos
  • Soyez le premier à commenter

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