qooxdoo开发入门

原創

2020-02-21 11:24

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>