|
qooxdoo是一個開源的綜合性Ajax框架，是遵守LGPL、或EPL（Eclipse Public License）許可的，可以用于商業(yè)項目，利于它可以建立面向?qū)ο蟮膉s類，也可以開發(fā)富客戶端的界面，甚至在網(wǎng)頁上開發(fā)出單機程序那樣的界面，是一個不錯的Ajax框架。 存在的一個問題是，網(wǎng)絡(luò)上關(guān)于qoodxoo的資料并不多，中文資料更是少之又少，能夠看到也就qooxdoo網(wǎng)站上的一些資料，如操作手冊（http:///documentation/0.8）等。本人經(jīng)過一些摸索，對于如何搭建qooxdoo的程序有了一些了解，與大家共享。
從 http:///download 下載qooxdoo-0.8.2-sdk，本文的介紹都是針對qooxdoo 0.8.2來說的。對下載后的zip文件解壓縮到E:\temp（此處是你自己的解壓目錄）。下面以$qooxdoo_home$來代替E:\temp\qooxdoo-0.8.2-sdk，即qooxdoo的安裝目錄。
此時還不能開始學習qooxdoo，因為qooxdoo是一種編譯型的框架，需要用Python來編譯js代碼，但我們并不需要具有Python的知識。在 http://www./activepython/ 下載ActivePython-2.6.2.2-win32-x86.msi，然后安裝。之所以使用ActivePython，是因為它安裝后就可以直接用，不需要額外的配置，安裝Python 2.x的程序也是可以的。
在$qooxdoo_home$下面有4個文件夾：
如果要看到demo程序的效果，需要用generate.py生成一下代碼才可以。如我們想看到demobrowser這個demo的效果，需要用以下命令：
E:\temp\qooxdoo-0.8.2-sdk\application\demobrowser>generate.py source-all
就會看到在E:\temp\qooxdoo-0.8.2-sdk\application\demobrowser\source下多了一個script文件夾，是由class文件夾下的代碼生成的，在程序運行的時候，是執(zhí)行的script文件夾下的js代碼。這樣程序就可以運行了。
在部署程序時，可以使用以下命令生成編譯后的代碼：
E:\temp\qooxdoo-0.8.2-sdk\application\demobrowser>generate.py build
在E:\temp\qooxdoo-0.8.2-sdk\application\demobrowser下就會產(chǎn)生一個build文件夾，里面是經(jīng)過編譯優(yōu)化后的代碼，已經(jīng)不依賴于qooxdoo框架，因為build時把程序需要的qooxdoo框架中的類編譯到目標代碼中去了，編譯后的js代碼體積更小，理論上運行更快。
如果要建立自己的應(yīng)用程序，應(yīng)該如何做呢？有兩種方法，下面依次介紹：
用以下命令生成代碼骨架：
E:\temp\qooxdoo-0.8.2-sdk\tool\bin>create-application.py --name=demo --out=E:\temp
其中name是應(yīng)用程序的名稱，out是程序所在的路徑。
但用generate.py生成的代碼是把class下的代碼都放在一個js文件了，build后會把所有的js類生成在一個js文件中。如果像demobrowser那樣把不同的類生成到不同的js中，就需要熟悉config.json的編寫方法，用不同的Python任務(wù)去產(chǎn)生不同的js文件。
第二種方法：把qooxdoo源代碼編譯成一個js文件，嵌入到自己的應(yīng)用中，就像其他Ajax框架一樣。這種方法不需要編譯。
首先要把qooxdoo源代碼編譯打包成一個文件，使用以下命令：
E:\temp\qooxdoo-0.8.2-sdk\framework>generate.py build
在E:\temp\qooxdoo-0.8.2-sdk\framework\build\script下就得到一個qx.js文件，在自己的程序里加入E:\temp\qooxdoo-0.8.2-sdk\framework\build下的內(nèi)容就可以了。
使用這種方法開發(fā)程序時，與常見的其他Ajax框架就沒什么區(qū)別了。下面給出一個簡單的例子：
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="js/qx/script/qx.js"></script> <script type="text/javascript" > qx.Class.define("demo.Test", { extend : qx.application.Inline, members : { main : function() { var cmd = document.getElementById("ok"); qx.event.Registration.addListener(cmd, "click", this._clickOk, this); var cmd2 = new qx.event.Command("Ctrl-L"); cmd2.addListener("execute", function() { alert("您鍵入了Ctrl-L"); }, this); var div1 = new qx.ui.root.Inline(document.getElementById("div1"), false, false).set({backgroundColor:"#FFFFFF"}); var button1 = new qx.ui.form.Button("登錄"); div1.add(button1, {left: 100, top: 10}); qx.event.Registration.addListener(button1, "click", this._clickOk, this); }, _clickOk : function() { var userName = document.getElementById("userName").value; alert("您輸入的用戶名是：" + userName); } } }); //程序執(zhí)行的入口類 qx.core.Setting.define("qx.application", "demo.Test"); </script> </head> <body> <center> 用戶名：<input type="text" id="userName"/><br> <input type="button" id="ok" value="確定"/> </center> <br/> <div id="div1" style=""></div> </body> </html> |
|
|
