根我一步一步学Qooxdoo（二）

Qooxdoo入门

今天我以一个公文管理的实例来讲解如何使用QX来开发WEB应用。这个实例使用的环境如下：

WEB服务器：apache

MVC框架：YAF（只使用YAF中的控制器部分）

数据库连接：Medoo

数据库：PostgreSQL

使用语言：JavaScript,PHP

以下讲解按WEB文档根目录为：C:\web_app\Webroot，qooxdoo框架放置在c:\web_app\webroot\qooxdoo5.0.1目录下。

根据上节所讲内容进入qooxdoo5.0.1目录，使用QX工具生成项目目录结构及文件：

Create-application.py -n doccentre -o ..\ -t desktop

使用QX窗口设计器设计开发应用的主窗口界面如下图所示：



点击转换按钮会生成一个MainWindow.js文件以及一个包括窗口使用的图片文件的MainWindow目录。将JS文件拷贝到项目的source\class\doccentre目录下，将图片目录拷贝到source\doccentre目录下。修改source\class目录下的application.js文件使项目打开时自动打开这个主界面。

main : function()

{

// Call super class

this.base(arguments);

// Enable logging in debug variant

if (qx.core.Environment.get("qx.debug"))

{

// support native logging capabilities, e.g. Firebug for Firefox

qx.log.appender.Native;

// support additional cross-browser console. Press F7 to toggle visibility

qx.log.appender.Console;

}

/*

-------------------------------------------------------------------------

Below is your actual application code...

-------------------------------------------------------------------------

*/

// Create a button

var button1 = new qx.ui.form.Button("First Button", "qxtest/test.png");

// Document is the application root

var container = new doccentre.MainWindow();

this.getRoot().add(container);

container.open();

});

}

使用generate.py工具重新编译源代码，使用浏览器打开项目，这们会发现在刚刚设计的窗口已经自动在浏览器中打开了。但是一般项目的主界面都是充满整个浏览器窗口，如果使用窗口的形式展现不太专业，下面我们对刚刚的应用进行一此改进。首先修改MainWindow.js文件，将窗口的父类从窗口类改为qx.ui.container.Composite窗口类。去除窗口大小及按钮设置代码，最后窗口的构造函数如下：

qx.Class.define("doccentre.MainWindow",{

extend : qx.ui.container.Composite,

construct : function() { //类构造函数,类创建时自动调用此过程

this.base(arguments);

this.__InitLayout();

},

members : {.......

再次修改application.js文件，将最后三行修改为：

var container = new doccentre.MainWindow();

this.getRoot().add(container,{edge: 0});

使用generate.py重新编译，使用浏览器打开项目，这时界面将充满整个浏览器。



DFM文件及最新版可视化设计程序可以从下面的地址下载：
http://pan.baidu.com/s/15c42M