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