根我一步一步学Qooxdoo

Qooxdoo入门

 

qooxdoo(发音['kuksdu:])和EasyUI,ExtJS 相似，是一种基于浏览器建立用户友好，界面表现丰富RIA应用系统的通用JavaScript框架。Qooxdoo的核心是完全基于类,并充分利用了JavaScript面向对象的功能。它的命名空间功能使用户很方便的管理和组织自己的代码，且很容易与其他JS类库进行集成。Qooxdoo支持大多数现代浏览器(如Firefox, IE, Opera, Safari, Chrome)。它本身集成的工具链不仅可以象Javadoc那样自动生成API文档，还允许快速完整的应用系统进行自动构建、优化、压缩、链接和部署。它的核心功能还包括了国际化和本地化功能，可以自动生成不同国家和语言的应用程序。qooxdoo是开放源代码的，基于LGPL和EPL双协议，也就是说它可以免费使用，无论您是个人使用还是商业应用。

以上对qooxdoo做了一个简单的介绍，下面我们就一步一步的进行学习。

一、Qooxdoo开发环境设置

由于qooxdoo自带工具使用Python脚本语言，因此环境设置的第一步是下载ActivePython脚本语言程序交并安装，打开下载网址：http://www.activestate.com/activepython/downloads

 

Qooxdoo使用的版本为2.7，因此我们点击下载2.7.10版本。下载完成后运行安装程序，并按默认设置进行安装。安装成功后在cmd窗口运行命令python，如出现下面内容表明安装成功。如提示找不到python命令，请设置python环境变量（http://jingyan.baidu.com/article/48206aeafdcf2a216ad6b316.html）。

第二步需要下载qooxdoo的框架源码。打开下载地址：http://qooxdoo.org/downloads

 

由于我们开发是的RIA程序，所以请下载Desktop版，当前最新版为5.0.1，下载完成后将qooxdoo-5.0.1-sdk.zip压缩文件解压到你的WEB服务器目录下（其它目录下也可以，这里为了讲解决方法请使用c:\web_app\webroot\qx）。这时在D:\WebRoot目录下应有一个Qooxdoo-5.0.1目录，结构如下：

 

到这里qooxdoo的开发及运行环境就设置完成了。

二、第一个qooxdoo程序。

使用qooxdoo系统自带的工具生成第一个qooxdoo程序框架。进行d:\webroot\qooxdoo5.0.1目录执行create-application.py命令。

此时在c:\web_app\webroot\qx目录以会自动生成子目录qxtest。

参数说明:-n 应用名称  -t 应用类型 -o 程序输出目录

使用cmd窗口进行这个目录。使用generate.py命令对系统进行代码编译。

现在你可以打开一个浏览器，输入地址:http://127.0.0.1/qx/qxtest/source查看框架的效果。

浏览器出现上面的按钮表示我们的第一个qooxdoo程序顺利完成。

三、第一个qooxdoo窗口

下面利用我开发的qooxdoo可视化窗口设计器设计开发第一个qooxdoo窗口。请到百度网盘下载qooxdoo可视化开发工具（地址：http://download.csdn.net/detail/qhdcsj/9235547）QXDesigner.exe，运行它会打开应用程序界面如下图：

 

点击新建按钮，创建一个新的窗口（具体IDE操作可以参考Delphi的IDE操作）。

设置窗口的名称为qxtest_WinMain（格式为qooxdoo的命名空间加下划线加窗口名称）。

 

通过Caption属性设置窗口标题，通过Icon属性设置窗口的标题栏使用的图标（如不设置窗口只显示标题）

 

点击工具栏中按钮选择qooxdoo的js文件及图标所保存的目录并进行代码自动生成。

 

这时系统会自动弹出对话框显示所生成的代码。

 

并且在你所选择的目录下生成WinMain.js文件以及WinMain目录。

将WinMain.js文件拷贝到C:\WEB_APP\webroot\qx\qxtest\source\class\qxtest目录下。将WinMain目录整个拷贝到C:\WEB_APP\webroot\qx\qxtest\source\resource\qxtest目录下。使用文本编辑工具编辑文件C:\WEB_APP\webroot\qx\qxtest\source\class\qxtest\Application.js文件。 

将button1的单击事件代码修改为如上图所示内容。

执行generate.py source命令重新编译代码。再次使用浏览器打开我们的qooxdoo应用并点击按钮，程序就会打开刚刚设计的qooxdoo窗口。如下图所示：

 

当打缺口个窗口时发现它每次都出现在浏览器的左上角，我们在Application.js文件中加入下面的代码将窗口打开时居中显示。

当然，上面的例子只是一个空窗体，它还没有任何功能。

注：这一节中使用的窗口设计器中的Form窗体可以使用属性有：

Caption：窗口标题

BorderIcons：窗口右上角三个按钮是否显示。

Name：窗口的名称。这个名称必须是应用的命名空间+下划线+窗口名称的格式。

Width：窗口宽

Height:窗口高

Icon:窗口标题栏图标

Font：窗口字体

四：TextField,Button组件。

这一节我们使用TextField,Button组件来完成一个简单的应用，即点击按钮时将输入框1中输入的内容显示到输入框2中。我们使用窗体设计器设计界面如下图：

选择按钮的Events标签，双击OnClick定义按钮单击事件。

生成WinMain.js文件

将WinMain.js文件拷贝到C:\WEB_APP\webroot\qx\qxtest\source\class\qxtest目录下覆盖原来的文件。使用文本编辑器打开这个文件。在QxButton1的单击事件中录入下面的代码

使用执行generate.py source命令重新编译代码。再次使用浏览器打开我们的qooxdoo应用并点击按钮打开qooxdoo窗口。此时单击QxButton1按钮,QxTextField1内容就会显示到QxTextField2中。

注：本节中QxTextField控件可以使用的属性有：

Value,Name,Height,Width,Left,Top,Font

QxButton控件可以使用的属性有：

Caption,Name,Layout,Glyph,Height,Width,Left,Top,Font

事件:OnClick