qooxdoo是一個開源的綜合性Ajax框架，是遵守LGPL、或EPL（Eclipse Public License）許可的，可以用於商業項目，利於它可以建立面向對象的js類，也可以開發富客戶端的界面，甚至在網頁上開發出單機程序那樣的界面，是一個不錯的Ajax框架。
存在的一個問題是，網絡上關於qoodxoo的資料並不多，中文資料更是少之又少，能夠看到也就qooxdoo網站上的一些資料，如操作手冊（http://qooxdoo.org/documentation/0.8）等。本人經過一些摸索，對於如何搭建qooxdoo的程序有了一些瞭解，與大家共享。
從 http://qooxdoo.org/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.activestate.com/activepython/ 下載ActivePython-2.6.2.2-win32-x86.msi，然後安裝。之所以使用ActivePython，是因爲它安裝後就可以直接用，不需要額外的配置，安裝Python 2.x的程序也是可以的。
在$qooxdoo_home$下面有4個文件夾：
- application：demo程序。
- component：框架內部使用的實用程序。
- framework：框架的源代碼和api。
- tool：框架用於編譯的工具，用Python寫的，只需要知道怎麼使用命令就可以了。
如果要看到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文件夾下的代碼生成的，在程序運行的時候，是執行的script文件夾下的js代碼。這樣程序就可以運行了。
在部署程序時，可以使用以下命令生成編譯後的代碼：
E:/temp/qooxdoo-0.8.2-sdk/application/demobrowser>generate.py build
在E:/temp/qooxdoo-0.8.2-sdk/application/demobrowser下就會產生一個build文件夾，裏面是經過編譯優化後的代碼，已經不依賴於qooxdoo框架，因爲build時把程序需要的qooxdoo框架中的類編譯到目標代碼中去了，編譯後的js代碼體積更小，理論上運行更快。
如果要建立自己的應用程序，應該如何做呢？有兩種方法，下面依次介紹：
第一種方法：使用create-application.py生成應用程序骨架，在這個基礎上開發自己的程序。這種方法需要使用generate.py編譯js代碼。
用以下命令生成代碼骨架：
E:/temp/qooxdoo-0.8.2-sdk/tool/bin>create-application.py --name=demo --out=E:/temp
其中name是應用程序的名稱，out是程序所在的路徑。
但用generate.py生成的代碼是把class下的代碼都放在一個js文件了，build後會把所有的js類生成在一個js文件中。如果像demobrowser那樣把不同的類生成到不同的js中，就需要熟悉config.json的編寫方法，用不同的Python任務去產生不同的js文件。
第二種方法：把qooxdoo源代碼編譯成一個js文件，嵌入到自己的應用中，就像其他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下的內容就可以了。
使用這種方法開發程序時，與常見的其他Ajax框架就沒什麼區別了。下面給出一個簡單的例子：
<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);
}
}
});
//程序執行的入口類
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>
<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);
}
}
});
//程序執行的入口類
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>
