a study of svg-based application development @ osdc 2010
TRANSCRIPT
1
A study ofSVG-based Application Development
Thinker LiRex Tsai黃昭龍
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)
3
Patterns, conversions in differnet kind of toolkit
with
A lot of widgets for PARC User Interface
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.
Image Source: http://en.wikipedia.org/wiki/History_of_the_graphical_user_interface
5
Emerging Products
Touch Screen only device,like Tablet PC for home automation pad
6
Emerging Products
10-foot user interfaceTop Box, PVR
Source: http://en.wikipedia.org/wiki/10-foot_user_interfacehttp://en.wikipedia.org/wiki/XBMC
7
Targeting for non-PC products
windows, menus, radio buttons, check boxes and icons.
No more mouseover, No more click, but tap or press
8
Simple but rich user interface
Runtime for web widgets (applet)Reading contents, TV listing, Youtube videos, Flickr, Twitter, Plruk, Doc Reader, etc..
9
Scalable Vector Graphics
視覺或使用者介面設計熟悉的向量格式可以用 JavaScript 操作圖形反應
(DOM API)-- ? jQuery 與 XBL.
10
寫 C 是真男人 ?
11
Features of JavaScript
Functions as firortranst class objects...Dynamic objects with prototypal inheritance ...
... 喔,你們昨天聽過了 ...
12
寫 JavaScript 明明也快又屌。
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
14
APIs
● HTML5● Local storage, (indexed) database● <canvas>, <svg>● Web workers (threads)● Web Socket● Geolocation
● XPCOM● Provides a lot of API binding
15
XPCOM
● development environment that provides the following features● Component management● File abstraction● Object message passing● Memory management
16
XULRunner
Or
Firefox Prism (Web Runner)
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
18
Demo and code explain
By Thinker
19
現狀
● Gecko 支援 SVG 中文直書
https://nutsfactory.dontexist.net/issues/5 ● Multi-touch for Touchscreen UI● 考慮移到 Webkit 平台
● 速度 , 平台移植性
20
References
● Demo of Bubblurk● http://0rz.tw/UqOuf ● https://bitbucket.org/thinker/bubblurk
● SVG 加 Gecko 完全攻略 http://0rz.tw/Pqarx
21
廣告
● COSCUP 2010, The beauty of HTML5● http://coscup.org/2010
● Tossug HTML5 讀書會● http://www.tossug.org/html5club