根我一步一步学Qooxdoo(二)

原创 2015年11月20日 15:12:48

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

一步一学Linux与Windows 共享文件Samba

目录 0、架设Samba 服务器的前提; 0.1 查看文件内容和编辑文件的工具; 0.2 关于文件和目录相关; 03 用户和用户组相关; 04 进程管理; 1 Sa...

一步一学Linux与Windows 共享文件Samba (v0.2b)

目录  0.1 查看文件内容和编辑文件的工具;0.2 关于文件和目录相关;03 用户和用户组相关;04 进程管理;0、架设Samba 服务器的前提;     3.5.1 在Linux系统中...

跟我学Java反射——一步曲

反射是什么   Reflection(反射)就是Java程序在运行时可以动态得到程序内部所有类的内部信息,并能动态调用任意对象的内部属性和方法。   为什么需要反射   我们为什么要用反射,这主要是反...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)