using svg with ample sdk cross browser
DESCRIPTION
Slides from my talk at the SVG Open 2009TRANSCRIPT
Using SVG cross-browserwith Ample SDK, JavaScript GUI Framework.
SVG Open 20092-4 October 2009, Mountain View, CA
Sergey Ilinsky
1) Web-browsers and markup-based Vector Graphics2) Introduction to the Ample SDK GUI Framework3) Scope of SVG implementation4) Using SVG with Ample SDK5) VML problems encountered while implementing6) Directions7) Questions
Agenda
1. Web-browsers and markup-based Vector Graphics
Modern browsers claim to support SVGSVG, First WD on 11/02/1999One of the first usable implementations in Opera 9 (2006)
Other – try hiding deep VMLVML, W3C Note on 13/05/1998First implementation shipped with Internet Explorer 5.0
(1999)
VML
SVG
Chrome 3.0 / Firefox 3.0 Opera 10.0
BTW, Modern browsers do have quirks
Chrome 3.0Firefox 3.0 / Opera 10.0
Very modern browsers do have quirks too
2. Introduction to the Ample SDK
1) Goals2) Solution3) Programming model4) Technologies breakdown5) Componentization model
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
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»
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
- Document Object Model – Core L2, Events L3, Selectors API
- JavaScript APIs – DOMParser, XMLSerializer, XSLTProcessor, XMLHttpRequest, JSON
- XML Technologies – SMIL3.0 (selected modules), XInclude 1.0, XML Schema 1.1 (Part 2 - Datatypes)
- Styling technologies – CSS2.1 (fixes), CSS3-Namespaces, CSS3-UI
- UI Managers– Focus, Drag&Drop, Resize, Capture, SPI History, Text selection
- Componentization Model
2.4 Technologies breakdown: UI Languages
- XHTML- XUL- SVG 1.1 (selected modules)- XForms 1.1 (planned)- XHTML5 (planned)- Any other DS UI language
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 StructureTags: svg, g, image, defs, use
6. StylingProperties: fill, fill-opacity, stroke-linecap etc.
7. Coordinate Systems, Transformations and UnitsAttributes: transform, viewBox
8. PathsTags: path
9. Basic ShapesTags: rect, circle, ellipse, line, polyline, polygon
10. TextTags: text, tspan, textPath
11. Painting: Filling, Stroking, Colors...Tags: linearGradient, radialGradient, stop
Demo time!
4. Using SVG with Ample SDK
1) Embedding SVG fragments into HTML2) Dynamically modifying SVG fragments3) Styling SVG fragments with CSS
4.1 Embedding SVG fragments into HTML
a) Inline, using a script tag with type="application/ample+xml"<body> <!-- other HTML code --> <script type="application/ample+xml"> <!-- 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="application/ample+xml" src="ui.xml"></script> <!-- other HTML code --></body>
c) Inline, using ample.open() and ample.close()<body> <!-- other HTML code --> <script type="text/javascript">ample.open()</script> <!-- Ample SDK inline XML markup --> <script type="text/javascript">ample.close()</script> <!-- other HTML code --></body>
4.2 Dynamically modifying SVG fragments
1) Using pure DOM APIs<svg:rect if="myrect" fill="red" x="0" y="0" width="100" height="100"
onclick="setOpacity(event.target)"/><script type="text/javascript">function setOpacity(oElement) {
oElement.setAttribute("opacity", "0.5");}</script>
2) Using SMIL<svg:rect if="myrect" fill="red" x="0" y="0" width="100" height="100">
<smil:set begin="click" attributeName="opacity" to=”0.5” attributeType="XML" fill="freeze"/>
</svg:rect>
3) Using SVG-specific DOM APIsNot available yet (planned)
4.3 Styling SVG fragments with CSS
1) Using class selectors
<text class="text1"><tspan>SVG In internet explorer</tspan></text>.text1 {
font-weigth: 600;}
2) Using element selectors
<svg:rect x="100" y="100"/>svg|rect {
fill: red;}
3) Specifying styles inline (also with attributes)
<svg:circle style="stroke:none; fill:green; opacity:0.5" r="100" cx="100" cy="100"/>
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
6. Directions
Ample SDK is set to go Open-Source on 1st November 2009
IRC Channels#amplesdk on irc.freenode.net#amplesdk-dev on irc.freenode.net (developers)
Mailing Lists / Discussion Groupshttp://groups.google.com/group/amplesdkhttp://groups.google.com/group/amplesdk-dev
(developers)
Bugtrackerhttp://www.amplesdk.com/bugtracker/
Documentation (online/offline)http://www.amplesdk.com/reference/
7. Questions
Ample SDKhttp://www.amplesdk.com
Sergey Ilinskyhttp://www.ilinsky.comhttp://twitter.com/ilinsky
Thank you!