Using SVG cross-browser with Ample SDK,  JavaScript GUI Framework. SVG Open 2009 2-4 October 2009, Mountain View, CA Serge...
Agenda 1) Web-browsers and markup-based Vector Graphics 2) Introduction to the Ample SDK GUI Framework 3) Scope of SVG imp...
1. Web-browsers and markup-based Vector Graphics Modern browsers claim to support SVG SVG, First WD on 11/02/1999 One of t...
VML SVG
Chrome 3.0 / Firefox 3.0 Opera 10.0 BTW, Modern browsers do have quirks
Chrome 3.0 Firefox 3.0 / Opera 10.0 Very modern browsers do have quirks too
2. Introduction to the Ample SDK 1) Goals 2) Solution 3) Programming model 4) Technologies breakdown 5) Componentization m...
2.1 Goals - equalize browsers APIs without introducing new - extend on browser UI technologies stacks - create a framework...
2.2 Solution virtualizing browser  native technologies: - pass through if available - implement if not - fix if broken Ben...
2.3 Programming model Programming model is that of web-browser: - XML for UI - CSS for Style - DOM/JavaScript for Logic
2.4 Technologies breakdown - Runtime (Core) - UI Languages (Plug-ins)
2.4 Technologies breakdown: Runtime <ul><li>- Document Object Model  </li></ul><ul><ul><li>Core L2, Events L3, Selectors A...
2.4 Technologies breakdown: UI Languages - XHTML - XUL - SVG 1.1 (selected modules) - XForms 1.1 (planned) - XHTML5 (plann...
2.5 Componentization model Web-browser DOM (shadow tree)  (HTML4, SVG/VML) Ample SDK DOM (XHTML, XUL, SVG)
3. Scope of SVG Implementation in Ample SDK 5. Document Structure Tags: svg, g, image, defs, use 6. Styling Properties: fi...
Demo time!
4. Using SVG with Ample SDK 1) Embedding SVG fragments into HTML 2) Dynamically modifying SVG fragments 3) Styling SVG fra...
4.1 Embedding SVG fragments into HTML a) Inline, using a script tag with type=&quot;application/ample+xml&quot; <body> <!-...
4.2 Dynamically modifying SVG fragments 1) Using pure DOM APIs <svg:rect if=&quot;myrect&quot; fill=&quot;red&quot; x=&quo...
4.3 Styling SVG fragments with CSS 1) Using class selectors <text class=&quot;text1&quot;><tspan>SVG In internet explorer<...
5. VML problems encountered while implementing - IE8 is 10x times slower compared to IE6 rendering VML - Certain VML attri...
6. Directions Ample SDK is set to go Open-Source on 1 st  November 2009 IRC Channels #amplesdk on irc.freenode.net #amples...
7. Questions
Ample SDK http://www.amplesdk.com Sergey Ilinsky http://www.ilinsky.com http://twitter.com/ilinsky Thank you!
Upcoming SlideShare
Loading in...5
×

Using SVG with Ample SDK cross browser

3,666

Published on

Slides from my talk at the SVG Open 2009

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

No Downloads
Views
Total Views
3,666
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Using SVG with Ample SDK cross browser

  1. 1. Using SVG cross-browser with Ample SDK, JavaScript GUI Framework. SVG Open 2009 2-4 October 2009, Mountain View, CA Sergey Ilinsky
  2. 2. Agenda 1) Web-browsers and markup-based Vector Graphics 2) Introduction to the Ample SDK GUI Framework 3) Scope of SVG implementation 4) Using SVG with Ample SDK 5) VML problems encountered while implementing 6) Directions 7) Questions
  3. 3. 1. Web-browsers and markup-based Vector Graphics Modern browsers claim to support SVG SVG, First WD on 11/02/1999 One of the first usable implementations in Opera 9 (2006) Other – try hiding deep VML VML, W3C Note on 13/05/1998 First implementation shipped with Internet Explorer 5.0 (1999)
  4. 4. VML SVG
  5. 5. Chrome 3.0 / Firefox 3.0 Opera 10.0 BTW, Modern browsers do have quirks
  6. 6. Chrome 3.0 Firefox 3.0 / Opera 10.0 Very modern browsers do have quirks too
  7. 7. 2. Introduction to the Ample SDK 1) Goals 2) Solution 3) Programming model 4) Technologies breakdown 5) Componentization model
  8. 8. 2.1 Goals - equalize browsers APIs without introducing new - extend on browser UI technologies stacks - create a framework for reusable UI components - do not enforce application programming model - keep it transparent
  9. 9. 2.2 Solution virtualizing browser native technologies: - pass through if available - implement if not - fix if broken Ben Galbraith: «Ample SDK: Browser-in-a-Browser»
  10. 10. 2.3 Programming model Programming model is that of web-browser: - XML for UI - CSS for Style - DOM/JavaScript for Logic
  11. 11. 2.4 Technologies breakdown - Runtime (Core) - UI Languages (Plug-ins)
  12. 12. 2.4 Technologies breakdown: Runtime <ul><li>- Document Object Model </li></ul><ul><ul><li>Core L2, Events L3, Selectors API </li></ul></ul><ul><li>- JavaScript APIs </li></ul><ul><ul><li>DOMParser, XMLSerializer, XSLTProcessor, XMLHttpRequest, JSON </li></ul></ul><ul><li>- XML Technologies </li></ul><ul><ul><li>SMIL3.0 (selected modules) , XInclude 1.0, XML Schema 1.1 (Part 2 - Datatypes) </li></ul></ul><ul><li>- Styling technologies </li></ul><ul><ul><li>CSS2.1 (fixes), CSS3-Namespaces, CSS3-UI </li></ul></ul><ul><li>- UI Managers </li></ul><ul><ul><li>Focus, Drag&Drop, Resize, Capture, SPI History, Text selection </li></ul></ul><ul><li>- Componentization Model </li></ul>
  13. 13. 2.4 Technologies breakdown: UI Languages - XHTML - XUL - SVG 1.1 (selected modules) - XForms 1.1 (planned) - XHTML5 (planned) - Any other DS UI language
  14. 14. 2.5 Componentization model Web-browser DOM (shadow tree) (HTML4, SVG/VML) Ample SDK DOM (XHTML, XUL, SVG)
  15. 15. 3. Scope of SVG Implementation in Ample SDK 5. Document Structure Tags: svg, g, image, defs, use 6. Styling Properties: fill, fill-opacity, stroke-linecap etc. 7. Coordinate Systems, Transformations and Units Attributes: transform, viewBox 8. Paths Tags: path 9. Basic Shapes Tags: rect, circle, ellipse, line, polyline, polygon 10. Text Tags: text, tspan, textPath 11. Painting: Filling, Stroking, Colors... Tags: linearGradient, radialGradient , stop
  16. 16. Demo time!
  17. 17. 4. Using SVG with Ample SDK 1) Embedding SVG fragments into HTML 2) Dynamically modifying SVG fragments 3) Styling SVG fragments with CSS
  18. 18. 4.1 Embedding SVG fragments into HTML a) Inline, using a script tag with type=&quot;application/ample+xml&quot; <body> <!-- other HTML code --> <script type=&quot;application/ample+xml&quot;> <!-- Ample SDK inline XML markup --> </script> <!-- other HTML code --> </body> b) Referencing a resource, using a script tag with src attribute <body> <!-- other HTML code --> <script type=&quot;application/ample+xml&quot; src=&quot;ui.xml&quot;></script> <!-- other HTML code --> </body> c) Inline, using ample.open() and ample.close() <body> <!-- other HTML code --> <script type=&quot;text/javascript&quot;>ample.open()</script> <!-- Ample SDK inline XML markup --> <script type=&quot;text/javascript&quot;>ample.close()</script> <!-- other HTML code --> </body>
  19. 19. 4.2 Dynamically modifying SVG fragments 1) Using pure DOM APIs <svg:rect if=&quot;myrect&quot; fill=&quot;red&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;100&quot; height=&quot;100&quot; onclick=&quot;setOpacity(event .target )&quot;/> <script type=&quot;text/javascript&quot;> function setOpacity(oElement) { oElement.setAttribute(&quot;opacity&quot;, &quot;0.5&quot;); } </script> 2) Using SMIL <svg:rect if=&quot;myrect&quot; fill=&quot;red&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;100&quot; height=&quot;100&quot;> <smil:set begin=&quot;click&quot; attributeName=&quot;opacity&quot; to=”0.5” attributeType=&quot;XML&quot; fill=&quot;freeze&quot;/> </svg:rect> 3) Using SVG-specific DOM APIs Not available yet (planned)
  20. 20. 4.3 Styling SVG fragments with CSS 1) Using class selectors <text class=&quot;text1&quot;><tspan>SVG In internet explorer</tspan></text> .text1 { font-weigth: 600; } 2) Using element selectors <svg:rect x=&quot;100&quot; y=&quot;100&quot;/> svg|rect { fill: red; } 3) Specifying styles inline (also with attributes) <svg:circle style=&quot;stroke:none; fill:green; opacity:0.5&quot; r=&quot;100&quot; cx=&quot;100&quot; cy=&quot;100&quot;/>
  21. 21. 5. VML problems encountered while implementing - IE8 is 10x times slower compared to IE6 rendering VML - Certain VML attributes can't be set at runtime - No native transformations on groups - Stroke lines thiner than 1 unit cannot be drawn - VML radial gradient is too much sophisticated
  22. 22. 6. Directions Ample SDK is set to go Open-Source on 1 st November 2009 IRC Channels #amplesdk on irc.freenode.net #amplesdk-dev on irc.freenode.net (developers) Mailing Lists / Discussion Groups http://groups.google.com/group/amplesdk http://groups.google.com/group/amplesdk-dev (developers) Bugtracker http://www.amplesdk.com/bugtracker/ Documentation (online/offline) http://www.amplesdk.com/reference/
  23. 23. 7. Questions
  24. 24. Ample SDK http://www.amplesdk.com Sergey Ilinsky http://www.ilinsky.com http://twitter.com/ilinsky Thank you!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×