Upgrade to Pro — share decks privately, control downloads, hide ads and more …

XULRunner + JS 開發跨平台且具擴充性應用程式

XULRunner + JS 開發跨平台且具擴充性應用程式

Rack Lin (阿土伯)

May 17, 2013
Tweet

More Decks by Rack Lin (阿土伯)

Other Decks in Programming

Transcript

  1. about:me •  ViViPOS  Co.,  Ltd    技術總監   –  利用

    JavaScript  寫 〞收銀機〞(傳統產業,全新感受)   •  CoCo  都可、50嵐、歇腳亭、Yamaha  、星聚點KTV……     •  PHP  /  JavaScript  /  Java  Programmer  (目前移情於 Scala  )     •  [email protected]   •  hRps://twiRer.com/racklin   •  hRp://www.plurk.com/racklin   •  hRps://www.facebook.com/racklin1002   •  hRp://racklin.blogspot.tw/      (生小孩後就變癈墟)  
  2. 跨平台定義   •  下忍時以為跨平台程式就是:     跨      

         Windows  95  /  Windows  98  /  Windows  NT              Windows  XP  …………    
  3. 跨平台定義   •  中忍時跨平台程式是:     跨      

         Windows  /  Linux  /  Mac  OSX      
  4. 跨平台定義   •  上忍時跨平台程式是:     跨      

         Windows  /  Linux  /  Mac  OSX       Mobile            Android  /  iOS  /  Firefox  OS  
  5. 跨平台定義   •  只有火影能:     跨      

         Windows  8  /  Windows  8  RT    
  6. 跨平台的挑戰   •  GUI  ToolKits     •  Binding  Languages

        •  …   •  …   •  …   •  因為  JSDC  +  時間關係   – 總之選定 XULRunner  +  JS  
  7. 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  
  8. 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)
  9. 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  
  10. XULRunner 基本特色 •  Cross-­‐Pla`orm   •  I18n  /  l10n  

      •  Gecko  rendering  engine   – HTML5  *   – CSS3   – JavaScript   – XML  (XSLT,  XMLHRpRequest,  DOMParser)    
  11. 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  
  12. XULRunner  利器 •  Installadon  and  upgrade  mechanism   – XPInstall  

    •  Extension  Manager   •  XBL   – reusable  components  
  13. XUL   •  XML  User  Interface  Language。   – 啥?  

    – 它提供了⼀一套跨平台的widget定義。   •  BuRon  /  List  /  Tree  /  Tab  /  Menubar.   – Why  ??  我們已經有 HTML5    了?   •  如同 Java  中的 Swing  /  SWT     •  XUL  使用的是 Nadve  Pla`orm  UI.     HTML  則是由 CSS  中定義,各平台一致。  
  14. 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  至現有程式中。  
  15. XUL  Overlays     •  還有一個兄弟 override   – 用另一個 URI

     內容 取代原 URI  內容。   – overide  chrome://a/content/a.xul  chrome://b/ content/b.xul  
  16. XUL  Overlays  /  override   •  它解決了程式設計師在實作 Plugin  的困苦  

    – 在即有程式中,感知擴充程式的存在並溝通   – 在即有畫面中,提供擴充程式描繪 UI  /  佈局   •  Override  它解決了   – Live  Patch  bugs   – Template  /  Reports  
  17. 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  .  
  18. Preferences  System   •  Key-­‐Value  Databases  (  JSON)   • 

    User  Preferences   •  Registry  System   •  Inter-­‐Process-­‐Communicadon  (別這麼用)  
  19. XPCOM   •  提供 Driver  /  Adaptor   – DBUS  /

     OSD  /  VKB  /  ZeroMQ   •  利用 C++  實作高效能   •  mozIJSSubScriptLoader     – 強大邪惡的存在   – Extend  DSL  -­‐>  JS   – Encode  JS   – Trial  Expire  Date    
  20. XULRunner  Hall  of  Fame   •  Firefox   •  Komodo

     Edit   •  Flickr  Uploader   •  VIVIPOS   – 全球超過 6000 台收銀機日以繼夜的當白老鼠  
  21. Main  UI  With  電子發票   電子發票  UI   Overlay  至現有

    POS  視窗   電子發票   相關功能鍵  
  22. Services  Binding   •  User  Preferences  /  Services  Registry.  

    來自電子發票 Addon     Link  Services  To  UI  
  23. 買房子最重要的三件事:   LOCATION        LOCATION      LOCATION

        寫軟體最重要的三件事:   EXTENSION  EXTENSION  EXTENSION
  24. Resources •  Slide:     hRp://goo.gl/w1WIh   •  XULApp  StarterKit:

      hRps://github.com/racklin/xulapp-­‐starterkit   •  XULRunner  –  MDN   hRps://developer.mozilla.org/en-­‐US/docs/ XULRunner