介紹 MadButterfly 的 programming Model

1. MadButterfly 的架構
Thinker <thinker@branda.to>
1 of 27

2. What is?
一種開發模式
一種 GUI framework
一套開發工具
2 of 27

3. Embedded
主要目標是提供 Embedded System 一套 GUI 工具
但，我不能阻止我們
WEB
Desktop
因為
Weblize 是趨勢
3 of 27

4. WEB 化
MadButterfly 是 WEB 化的靈感
但 WEB browser 是大象，是鯨魚
4 of 27

5. 5 of 27

6. SVG
弱水三千，只取一瓢。
Scalable Vector Graphics
W3C standard
XML
Scalable
6 of 27

7. 繪圖
為何選 SVG
所有 GUI 都是一種圖形的呈現
7 of 27

8. Programming Model
8 of 27

9. 外觀
把 GUI 的外貌畫出來
9 of 27

10. 行為
透過 MadSwatter 定義 UI 的行為
行為 --> 動畫
儲存在 SVG 檔案裡的 metadata
10 of 27

11. Drop down list
11 of 27

12. Button
12 of 27

13. svg2code
將「外觀」和「行為」轉換成程式碼
13 of 27

14. Host App
link
svg2code.py 產生的 code
MadButterfly library
14 of 27

15. MadBuilder
以 Firefox 為執行環境
以 Javascript 為主
整合
Inkscape
MadSwatter
editor
build system
15 of 27

16. Inkscape
16 of 27

17. MadSwatter
動畫編輯工具
完全以 Javascript + SVG + HTML 完成的軟體
17 of 27

18. MadButterfly
base on
C
cairo
提供和 SVG 對映的 object tree
類似 DOM
容易操作/控制
18 of 27

19. 主要架構
19 of 27

20. redraw manager
Determine
Where to redraw
Who to redraw
When to redraw
20 of 27

21. 21 of 27

22. coord_t
It knows as group in SVG
collect a set of shape objects and sub-groups.
22 of 27

23. Observer Pattern
subject
observer
23 of 27

24. 24 of 27

25. Tiny
MadButterfly is an tiny/concious engine to
manage graphics,
draw graphics, and
redraw graphics
It is target to small and embedded device.
with fixed screen size.
25 of 27

26. 急
Javascript programmers
UI designer
C programmers
Documentation
26 of 27

27. 最後
http://www.assembla.com/spaces/MadButterfly
http://www.assembla.com/spaces/MadSwatter
27 of 27