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