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

根我一步一步学Qooxdoo

Qooxdoo入门   qooxdoo(发音['kuksdu:])和EasyUI,ExtJS 相似,是一种基于浏览器建立用户友好,界面表现丰富RIA应用系统的通用JavaScript框架。Qooxdo...
  • qhdcsj
  • qhdcsj
  • 2015年11月02日 16:09
  • 1838

一步一步学ROP之linux_x86篇

0x00    本文仅解释说明蒸米大神一步一步学ROP之linux_x86篇,读者应先阅读这篇文章,遇到问题再来看我这篇文章。    阅读完这两篇文章后,我们会理解ROP(返回导向编程),DEP(堆栈...
  • jltxgcy
  • jltxgcy
  • 2016年02月19日 11:16
  • 2376

一步一步学ROP之linux_x86篇

ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术可以用来绕过现代操作系统的各种通用防御(比如内存不可执行和代码签名等)。虽然现在大家都在...
  • AliMobileSecurity
  • AliMobileSecurity
  • 2016年07月06日 13:33
  • 3432

小菜一步一步学数据结构之(一)基本概念和术语

数据结构是一门研究非数值计算程序设计中的操作对象,以及这些对象之间的关系和操作的学科。基本概念和术语*数据(data)–所有能输入到计算机中去的描述客观事物的符号的总称 *数据元素(data ele...
  • IT_DS
  • IT_DS
  • 2016年01月11日 20:16
  • 1051

Linux网络编程一步一步学+基础

http://blogold.chinaunix.net/u1/48325/showart_413841.html http://blogold.chinaunix.net/u1/48325/sho...
  • bruceyang2009lzu
  • bruceyang2009lzu
  • 2013年05月28日 16:18
  • 1381

一步一步跟我学hadoop(1)----hadoop概述和安装配置

这几年云计算大数据很火,借这个东风,今天开始学习apache的分布式计算框架hadoop,希望不要太落后。 Apache Hadoop是一个在大型集群的商品硬件上运行的应用程序的框架。Hadoop框架...
  • wuyinggui10000
  • wuyinggui10000
  • 2015年07月05日 23:08
  • 2276

一步一步学ROP之Android ARM 32位篇

0x00 序 ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术,可以用来绕过现代操作系统的各种通用防御(比如内存不可执行和代码签名...
  • omnispace
  • omnispace
  • 2016年03月06日 16:32
  • 760

一步一步学ROP之gadgets和2free篇

ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术,可以用来绕过现代操作系统的各种通用防御(比如内存不可执行和代码签名等)。上次我们主要讨...
  • SmalOSnail
  • SmalOSnail
  • 2016年12月11日 14:42
  • 849

Linux网络编程一步一步学-select详解

select系统调用是用来让我们的程序监视多个文件描述符(file descriptor)的状态变化的。程序会停在select这里等待,直到被监视的文件描述符有某一个或多个发生了状态改变。 se...
  • SUKHOI27SMK
  • SUKHOI27SMK
  • 2013年10月24日 17:15
  • 620

一步一步学MySQL----2 数据库基本操作

2.1 数据库和数据库对象在MySQL中,数据库分为系统数据库和用户数据库。系统数据库是指安装完MySQL后,附带的一些数据库,如下图所示 注意:系统数据库会记录一些必须的信息,用户不能直接修改这些...
  • u013003827
  • u013003827
  • 2017年03月09日 19:52
  • 252
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:根我一步一步学Qooxdoo(二)
举报原因:
原因补充:

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