Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Build desktop app_by_xulrunner
Ähnlich wie Build desktop app_by_xulrunner (20)
Build desktop app_by_xulrunner
- 1. XULRunner + JS 開發跨平台且 具擴充性應⽤用程式 Rack Lin 阿土伯 @JSDCTW2013
- 2. about:me • ViViPOS Co., Ltd 技術總監 – 利用 JavaScript 寫 〞收銀機〞（傳統產業，全新感受） • CoCo 都可、50嵐、歇腳亭、Yamaha 、星聚點KTV…… • PHP / JavaScript / Java Programmer (目前移情於 Scala ) • racklin@gmail.com • hRps://twiRer.com/racklin • hRp://www.plurk.com/racklin • hRps://www.facebook.com/racklin1002 • hRp://racklin.blogspot.tw/ (生小孩後就變癈墟）
- 5. 跨平台定義 • 下忍時以為跨平台程式就是： 跨 Windows 95 / Windows 98 / Windows NT Windows XP …………
- 6. 跨平台定義 • 中忍時跨平台程式是： 跨 Windows / Linux / Mac OSX
- 7. 跨平台定義 • 上忍時跨平台程式是： 跨 Windows / Linux / Mac OSX Mobile Android / iOS / Firefox OS
- 8. 跨平台定義 • 只有火影能： 跨 Windows 8 / Windows 8 RT
- 9. 跨平台的挑戰 • GUI ToolKits • Binding Languages • … • … • … • 因為 JSDC + 時間關係 – 總之選定 XULRunner + JS
- 10. 在開始談 XULRunner 前 你聽過 Rich Client Pla`orm 嗎？
- 11. Rich Client Platform (wiki) • A standard bundling framework • User interface management • User settings management • Storage management • Window management • Update manager - Eclipse RCP - Netbeans Platform - Spring Framework RCP
- 12. Netbeans Pla`orm • Empty app1 (30MB)
- 13. WHY RCP • 寫完一支程式很容易，完成一個產品是很 困難的。 – 經常 Branch / Code Generator Customer A Customer B Customer C
- 14. 是做產品還是代工？ • 你希望再代工多少個， 讓我們數到十。
- 15. WHY RCP • Upstream Core Components • Customizadon – Customer A ( Core + A1 + B1 + C1 ….) – Customer B ( Core + A1 + C1 + D1 …) – Customer C ( Core + A1 + E1 + F1 …) XULRunner / Applicadon Launcher Core (Main UI / API)
- 16. 將專案拆成小模組 • 這裡的模組化，並不是程式中的套件或模組， 而是彼此獨立的應用程式。 • 小模組易於開發及測試 • 小模組昇級容易且快速 • 小模組各思其職 • 想想 eclipse / netbeans IDE . • 想想 firefox / google chrome
- 17. 一堆小模組
- 18. 產品
- 19. Javascript 界的 RCP XULRunner
- 20. Firefox • Firefox 是基於 XULRunner 下開發。 – 在 URL 中輸入 – chrome://browser/content/
- 21. Incepdon?
- 22. XULApp StarterKit • hRps://github.com/racklin/xulapp-‐starterkit • Build Scripts (MacOSX / Linux / Windows) • Skeleton UI Sehngs – Window / Menubar / Statusbar • Javascript Libraries – jQuery – GREUdls – Lodash • Embedded Develop Tools – SQLite Manager – DOM Inspector – JSConsole
- 23. XULApp StarterKit • MacOSX DMG (34MB)
- 24. XULRunner 基本特色 • Cross-‐Pla`orm • I18n / l10n • Gecko rendering engine – HTML5 * – CSS3 – JavaScript – XML (XSLT, XMLHRpRequest, DOMParser)
- 25. 當成 PhoneGap 用 XULApp StarterKit Demo
- 26. HTML5 / CSS3 / JS hRps://github.com/racklin/xulapp-‐starterkit-‐app-‐webapp-‐wrapper hRps://github.com/racklin/xulapp-‐starterkit-‐app-‐todomvc
- 27. 萌典 Windows/Linux/MacOSX Preferences System
- 28. 萌典 Windows/Linux/MacOSX Preferences System
- 29. XULRunner 神兵 • XUL – XUL – XUL Overlays • Preferences System • XPCOM(Cross-‐Pla`orm Component Object Model) – C++ / Python / Java / Javascript – Low Level API • Ex. File Systems / Databases / Thread
- 30. XULRunner 利器 • Installadon and upgrade mechanism – XPInstall • Extension Manager • XBL – reusable components
- 31. XULRunner + JS 開發跨平台且 具擴充性應⽤用程式
- 32. XUL • XML User Interface Language。 – 啥？ – 它提供了⼀一套跨平台的widget定義。 • BuRon / List / Tree / Tab / Menubar. – Why ?? 我們已經有 HTML5 了？ • 如同 Java 中的 Swing / SWT • XUL 使用的是 Nadve Pla`orm UI. HTML 則是由 CSS 中定義，各平台一致。
- 33. Mac OSX XUL DEMO
- 34. Linux XUL DEMO
- 35. 大家看出差異了嗎？
- 36. 沒有是正常的！ Linux 裝了 mac4lin － Mac OS/X 主題
- 37. XUL Overlays • 由 chrome.manifest 中以 URI 定義 – overlay chrome://a/content/a.xul chrome://b/ content/b.xul • UI overlays – Like: $(‘#id’).arer(<html>) , $(‘#id’).before(<html>) – 發生在 DOMContentLoaded Event Trigger 之前 • Scripts Hook – Javascript Script tag 也能 overlay , 所以我們可以於 Extensions 插入 js 至現有程式中。
- 38. XUL Overlays • 還有一個兄弟 override – 用另一個 URI 內容 取代原 URI 內容。 – overide chrome://a/content/a.xul chrome://b/ content/b.xul
- 39. Live Coding Demo XUL Overlays / Override
- 40. XUL Overlays / override • 它解決了程式設計師在實作 Plugin 的困苦 – 在即有程式中，感知擴充程式的存在並溝通 – 在即有畫面中，提供擴充程式描繪 UI / 佈局 • Override 它解決了 – Live Patch bugs – Template / Reports
- 41. Preferences System • about:config 看到的東西 • App or Extensions 目錄下的 defaults preferences*.js as system preferences. • Profile 目錄下的 prefs.js as user preferences. • Merge system and user preferences when startup .
- 42. Preferences System • Key-‐Value Databases ( JSON) • User Preferences • Registry System • Inter-‐Process-‐Communicadon (別這麼用)
- 43. XPCOM • 提供 Driver / Adaptor – DBUS / OSD / VKB / ZeroMQ • 利用 C++ 實作高效能 • mozIJSSubScriptLoader – 強大邪惡的存在 – Extend DSL -‐> JS – Encode JS – Trial Expire Date
- 44. Ready for Producdon ? 工程師都怕將來被釘在牆上
- 45. XULRunner Hall of Fame • Firefox • Komodo Edit • Flickr Uploader • VIVIPOS – 全球超過 6000 台收銀機日以繼夜的當白老鼠
- 47. HDM9 • 在眾設計師面前， VIVIPOS 太醜。 向業界可 敬的對手 CASIO POS 山寨 致敬
- 48. 剩下十秒鐘了
- 49. 買房子最重要的三件事： LOCATION LOCATION LOCATION 寫軟體最重要的三件事： EXTENSION EXTENSION EXTENSION
- 50. 工商服務 歡迎提案合作
- 51. Resources • Slide: hRp://goo.gl/w1WIh • XULApp StarterKit: hRps://github.com/racklin/xulapp-‐starterkit • XULRunner – MDN hRps://developer.mozilla.org/en-‐US/docs/ XULRunner