关闭

根我一步一步学Qooxdoo(二)

标签: JSRIAqooxdoojavascript入门
499人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:40257次
    • 积分:586
    • 等级:
    • 排名:千里之外
    • 原创:11篇
    • 转载:6篇
    • 译文:8篇
    • 评论:2条
    最新评论