GRE 開發三: Step by Step 桌面程式快速開發

XULRunner + jQuery + GREUtils = Quick Application Platform.

本篇將利用範例的方式, 一步一步展示如何快速撰寫一個 Windows / Linux / MacOS 上的桌面應用程式, 您會發現利用 XULRunner (Gecko) 寫 Application 是那麼的容易. 這也是前二篇阿土伯專案中選用 XULRunner 而暫時排處 JavaFX 的原因.
基本上和設計 FireFox Extensions 差不多, 但本篇著重在撰寫 standalone application.
##CONTINUE##
XULRunner 安裝:
XULRunner 的官方網址在 http://developer.mozilla.org/en/docs/XULRunner , 而各個 build 好的
binary 可在此 FTP 下載 http://releases.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.1.3/contrib/
在這邊我們下載 xulrunner-1.8.1.3.en-US.win32-20080128.zip , 然後 解壓到 C:\

下載 GREUtils 範例:
請到 http://code.google.com/p/greutils/ , 下載 helloworld 範例 http://greutils.googlecode.com/files/greutil-helloworld.zip
然後一樣解壓到 C:\

執行 GREUtils 範例:
請開啟 Command Prompt (執行->cmd.exe), 然後鍵入

c:\xulrunner\xulrunner.exe c:\greutil-helloworld\application.ini 

執行畫面:
OK~ 您應該可以看到如下的畫面. Linux / MacOS 執行方式及結果應該亦是相同.
應為跨平台亦是 Gecko 的特色之一, 且由於使用 XUL/XHTML/CSS 所以各平台執行結果及承現是一致的.


開發環境:
XULRunner + jQuery + GREUtils 為此範例的主要環境.
XULRunner 開發細節在此不多作解釋, 請見官網文件. 您可以把它想像成 JavaRuntime 之類的環境, Firefox / ThunderBird 便是架構在 XULRunner 之上.

jQuery 我們的老朋友嘍, 所有 javascript 和 XUL/XHTML 的互動, 都是利用它來實現, 也就是您原來在 Web 中所使用的技巧(Ajax/DOM/XHR), 都可以搬到 Application 來用嘍.
這樣您有沒有信心大增, 即使您熟悉的是 Web Programming, 現在不用學 Java / VB / VC .... VX 就可以寫一些(簡單?)的應用程式嘍.

GREUtils 它是阿土伯封裝的一個簡易框架, 讓您可以容易的開發 XULRunner 應用程式.


application.js:
application.js 負責配製 Preferences , Initialize , 期望您在此僅撰寫這二件事, 相關的程式, 請將它寫到 Controller 中.
以下為 initialize 片斷

    // init controller
    GREUtils.include_once('appController.js', window);
    GREUtils.include_once('mainController.js', window);
    GREUtils.include_once('charsetController.js', window);
    GREUtils.ControllerHelper.appendController(AppController, this);
    GREUtils.ControllerHelper.appendController(MainController, this);
    GREUtils.ControllerHelper.appendController(CharsetController, this);

xxxController.js:
Controller 提供相關的 action 實作. 由於 GREUtils 封裝了 CommandDispatcher , 所以您只要擴展
GREUtils.ControllerAdapter , 您可以僅實作您的 action commands , 它會自動處理 supportsCommand / isCommandEnabled / doCommand / onEvent 等相關細節.
其中 init 為 Controller initialize function , 它會傳入 Application, 讓您可以在您的 Controller 中處理 Preferences 以及 Application wide function.

jQuery:
您可以在 Controller , 利用 jQuery 處理畫面上的任何元素, 所以相當容易直覺, 就如同您在設計 Web.

  charsetCmdConvert1: function() {
    jQuery("#charsetList1").each(function(i) {
        var cs = this.selectedItem.label;
        var input_text = jQuery("#utf8MsgBoxInput").val();
        var out = GREUtils.Charset.convertCharset(input_text, 'UTF-8', cs);
        jQuery("#utf8MsgBoxoutput").val(out);
    });
  }

Append DOM Object:
如果您發現您直接利用 jQuery.append 等相關的 DOM 操作, 和您想的不一樣, 別感到驚訝.
因為在 XULRunner 中, XUL 和 HTML 的 Namespace 是不同的.
所以您可以利用 GREUtils.domXULString / GREUtils.domHTMLString 來處理.
如 明確的指定您要加入一個 XUL 的 Label Object:

jQuery("#testContainer").append( GREUtils.domXULString("<label value='test'/>" ));

Debug:
程式執行起來, 會為您 Popup Error Console 供您 Debug, 當然, 您也可以在 AppController.js
中拿掉它... 您更可以自行安裝 FireBug 為您的 Debuger.

其它..:
有關利用 3rd extensions 和提供您的 application add-ons 在下次有機會阿土伯再行解說.
歡迎大家來信/留言討論, 一同成長.