Thats Not Flash?

1,823 views
1,744 views

Published on

An overview of DojoX GFX and DojoX Drawing, and the underlying technology that uses SVG and VML to provide vector-based graphics cross-browser without the use of Flash.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,823
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide


  • Software engineer at SitePen, and one of the founder of the DFW user group Club AJAX. I’m an AJAX expert with a lot of experience in HTML, CSS, and Flash as well as a lot of video. I’m a dojo committer and have written and maintain several dojo components including the DEFT project that integrates Flash into Dojo AJAX components












  • Mention Uploader woes
  • Mention Uploader woes


  • Thats Not Flash?

    1. 1. That’s Not Flash? Native Browser Vector Graphics Mike Wilcox mwilcox@sitepen.com Twitter: #clubajax http://clubajax.org
    2. 2. Welcome
    3. 3. Mike
    4. 4. http://www.dojotoolkit.org
    5. 5. Vector Graphics
    6. 6. Vector vs. Raster • Raster: Rectangular grid of pixels - Pre-rendered before runtime • Vector: Mathematical representation of a shape - Rendered at runtime
    7. 7. SVG Scalar Vector Graphics XML-based format for escribing lines and shapes <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"> <ellipse cx="50" cy="25" rx="50" ry="25" fill="blue" stroke="none" /> </svg>
    8. 8. SVG vs Flash • Open Source - Free, no IDE, no proprietary player • W3C standard to work with CSS, DOM and SMIL - Can be used inline with HTML - Fires events - Clear Text - View Source, SEO - XSL Transforms • Familiar Language
    9. 9. Browser Support
    10. 10. VML Vector Markup Language Microsoft’s competing XML-based vector standard Used in Internet Explorer and MS Office <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50"> <ellipse cx="50" cy="25" rx="50" ry="25" fill="blue" stroke="none" /> </svg>
    11. 11. DojoX GFX DojoX Drawing dojox.gfx Normalized API SVG VML Render Canvas Silverlight
    12. 12. A Brief History • In the beginning, there was ASCII art • <img /> • Microsoft and VML • Adobe, the W3C and SVG • Firefox and Opera get native SVG • Firefox, Opera and Safari get canvas
    13. 13. Approaches • Emulate canvas with ExplorerCanvas • Macromedia Flash • Java applets / Processing
    14. 14. dojox.gfx: procedural subset of SVG • Procedural in nature, similar to canvas commands • Based on a subset of SVG • Implements VML shims for Internet Explorer • Now includes Silverlight rendering!
    15. 15. GFX Example // add a text label var textShape0 = group.createTextPath({text: "introduction"}) .moveTo(125, 70) .lineTo(285,20) .setFont({family: "Verdana", size: "1em"}) .setFill("black"); // create a rectangle var rect= { x: 360, y: 180, width: 200, height: 100, r: 15 };
    16. 16. Demo: a Clock http://test.local/dojotoolkit/dojox/gfx/demos/clock.html
    17. 17. DojoX Drawing
    18. 18. Q&A
    19. 19. Thanks!

    ×