Successfully reported this slideshow.

A Study of SVG-based Application Development @ OSDC 2010

1,493 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

A Study of SVG-based Application Development @ OSDC 2010

  1. 1. A study of SVG-based Application Development Thinker Li Rex Tsai 黃昭龍 1
  2. 2. Traditional UI framework = The widget toolkits Java Swing, Microsoft Foundation Classes (MFC), QT, GTK+, wxWidgets, Cocoa, Abstract Window Toolkit (AWT), Standard Widget Toolkit (SWT) 2
  3. 3. Patterns, conversions in differnet kind of toolkit with A lot of widgets for PARC User Interface 3
  4. 4. PARC User Interface windows, menus, radio buttons, check boxes and icons. The only user interface for computer with a keyboard and mouse for the last 30 years. 4 Image Source: http://en.wikipedia.org/wiki/History_of_the_graphical_user_interface
  5. 5. Emerging Products Touch Screen only device, like Tablet PC for home automation pad 5
  6. 6. Emerging Products 10-foot user interface Top Box, PVR 6 Source: http://en.wikipedia.org/wiki/10-foot_user_interface http://en.wikipedia.org/wiki/XBMC
  7. 7. Targeting for non-PC products windows, menus, radio buttons, check boxes and icons. No more mouseover, No more click, but tap or press 7
  8. 8. Simple but rich user interface Runtime for web widgets (applet) Reading contents, TV listing, Youtube videos, Flickr, Twitter, Plruk, Doc Reader, etc.. 8
  9. 9. Scalable Vector Graphics 視覺或使用者介面設計熟悉的向量格式 可以用 JavaScript 操作圖形反應 (DOM API)-- ? jQuery 與 XBL. 9
  10. 10. 寫 C 是真男人 ? 10
  11. 11. Features of JavaScript Functions as firortranst class objects... Dynamic objects with prototypal inheritance ... ... 喔,你們昨天聽過了 ... 11
  12. 12. 寫 JavaScript 明明也快又屌。 12
  13. 13. The software stack ● Dbus for IPC ● Network connection with connman ● Gecko ● Rendering SVG, HTML and XML. ● SpiderMonkey for javascript engine ● XPCom ● Component management ● File abstraction ● Object message passing ● Memory management 13
  14. 14. APIs ● HTML5 ● Local storage, (indexed) database ● <canvas>, <svg> ● Web workers (threads) ● Web Socket ● Geolocation ● XPCOM ● Provides a lot of API binding 14
  15. 15. XPCOM ● development environment that provides the following features ● Component management ● File abstraction ● Object message passing ● Memory management 15
  16. 16. XULRunner Or Firefox Prism (Web Runner) 16
  17. 17. XUL Runner ● XPCOM ● Networking ● Gecko rendering engine ● DOM editing and transaction support (no UI) ● XBL (XBL2 planned) ● XUL ● SVG ● XSLT ● XML Extras (XMLHttpRequest, DOMParser, etc. ● Accessibility support ● Storage/sqlite interfaces (not yet turned on by default) https://developer.mozilla.org/en/XULRunner/What_XULRunner_Provides 17
  18. 18. Demo and code explain By Thinker 18
  19. 19. 現狀 ● Gecko 支援 SVG 中文直書 https://nutsfactory.dontexist.net/issues/5 ● Multi-touch for Touchscreen UI ● 考慮移到 Webkit 平台 ● 速度 , 平台移植性 19
  20. 20. References ● Demo of Bubblurk ● http://0rz.tw/UqOuf ● https://bitbucket.org/thinker/bubblurk ● SVG 加 Gecko 完全攻略 http://0rz.tw/Pqarx 20
  21. 21. 廣告 ● COSCUP 2010, The beauty of HTML5 ● http://coscup.org/2010 ● Tossug HTML5 讀書會 ● http://www.tossug.org/html5club 21

×