本篇將利用範例的方式, 一步一步展示如何快速撰寫一個 Windows / Linux / MacOS 上的桌面應用程式, 您會發現利用 XULRunner (Gecko) 寫 Application 是那麼的容易. 這也是前二篇阿土伯專案中選用 XULRunner 而暫時排處 JavaFX 的原因.

基本上和設計 FireFox Extensions 差不多, 但本篇著重在撰寫 standalone application.



XULRunner 安裝:

XULRunner 的官方網址在 http://developer.mozilla.org/en/docs/XULRunner[�b�s�����}��] , 而各個 build 好的

binary 可在此 FTP 下載 http://releases.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.1.3/contrib/[�b�s�����}��]

在這邊我們下載 xulrunner-1.8.1.3.en-US.win32-20080128.zip , 然後 解壓到 C:\



下載 GREUtils 範例:

請到 http://code.google.com/p/greutils/[�b�s�����}��] , 下載 helloworld 範例 http://greutils.googlecode.com/files/greutil-helloworld.zip[�b�s�����}��]

然後一樣解壓到 C:\



執行 GREUtils 範例:

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




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






執行畫面:

OK~ 您應該可以看到如下的畫面. Linux / MacOS 執行方式及結果應該亦是相同.

應為跨平台亦是 Gecko 的特色之一, 且由於使用 XUL/XHTML/CSS 所以各平台執行結果及承現是一致的.

blur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp3.blogger.com/_CYDba-CpZ2k/R8OAtSXZsII/AAAAAAAAAI8/o4T3VtcANIc/s1600-h/main.png" rel="nofollow ugc noreferrer noopener">



開發環境:

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("





Debug:

程式執行起來, 會為您 Popup Error Console 供您 Debug, 當然, 您也可以在 AppController.js

中拿掉它... 您更可以自行安裝 FireBug 為您的 Debuger.


arrow
arrow
    全站熱搜

    狼翔月影 發表在 痞客邦 留言(0) 人氣()