MadButterfly Programming Model

1,516 views
1,338 views

Published on

介紹 MadButterfly 的 programming Model

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,516
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×