根我一步一步学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