最近要学,用来做b/s客户端
727000110@qq.com
一楼好人
------最佳解决方案--------------------
帮顶~
------其他解决方案--------------------
顶了,我也好人
------其他解决方案--------------------
好人在哪?
------其他解决方案--------------------
google不到吗?
------其他解决方案--------------------
顶上,真的没有嘛?、
有用过的总结下嘛
做个入门的指引也好
------其他解决方案--------------------
哎,自己摸索的一些东西,将就发生来,描述和理解不一定准确
===============================================================
1. 开发环境的搭建
搭建开发环境按下面几个步骤:
从网站下载Qooxdoo文件包并解压。
安装ActivePython。
搭建自己的程序骨架。搭建方法是在在命令行状态下进入Qooxdoo的安装文件夹内的\tool\bin文件夹执行命令:
create-application.py --name=myApplication --out=E:\myWork\QooxdooFiles
其中name是设置所开发的程序名称,out设置文件保存目录。
命令执行结果将在E:\myWork\QooxdooFiles下生成名为myApplication的文件夹。
默认状态下,程序骨架创建后在对应程序文件夹内有source 文件夹,名为 generate.py 的编译工具和2个Json数据格式的配置文件。2个配置文件定义了程序代码的编码、类库路径、编译时resource、class等文件夹的相对路径等信息。默认配置下Qooxdoo程序代码使用utf-8编码,如果文件保存的编码与配置文件不符将不能通过编译。
程序的类文件保存在source/class文件夹下,图片和xml等资源保存在source/resource文件夹下,index.html是对script文件夹内js程序文件的引用,运行该文件即可运行程序。Script文件夹在编译后才会创建。Source/class内对应程序名称文件夹下的Application.js文件是开发项目的主程序入口,其地位相当于C++文件的main函数。Theme文件夹内是默认配置的主题类,用于定义主题风格。
Source文件夹不能脱离Qooxdoo安装文件夹独立运行,因此程序正式发布前需要编译成build文件夹。程序编译成 build文件夹将会从类库抽取使用到的类和资源在script文件夹下生成一个js文件,index.html引用该文件即可独立运行程序。
2. 程序的编译方法
程序使用python工具编译,在命令行状态下进入对应程序名称的文件夹内运行命令即可编译程序。
编译source文件夹的指令:generate.py source generate.py source-all
编译build文件夹的指令:generate.py build
什么时候需要编译程序?在程序中引入之前未曾使用过的类之后需要编译程序,在resource文件夹内新添加资源并在程序中引用后需要重新编译程序。程序编译时会把程序中使用到的类和图片等资源进行注册,注册后可以在程序内反复调用。
3. 开始编写程序
Qooxdoo提供了2中编程方式,一种是类似于JQuery的方式,把类库编译成JS文件在HTML文件中引入然后以创建控件后添加到DOM节点上的方式搭建程序,这种方式倾向于一般的web DOM底层的应用,另一种是不涉及DOM操作的便于客户端界面开发的方式,这也是Qooxdoo框架开发的本意,这次学习也是基于这种开发方式。
一些规则:
Qooxdoo大小写敏感;
控件定义高宽和间隔都以像素为单位,但在代码中只使用数字不使用单位;
每句代码以 “;” 号结束,跟原生的javascript代码一样;
使用类实例化控件时控件类别名首字母大写,例如实例化一个按钮
var button1 = new qx.ui.form.Button("First Button");
qx.ui.form.Button 其中button首字母大写;
控件的实例化支持链式操作,如创建按钮后调用其方法定义宽度为100像素
var button1 = new qx.ui.form.Button("First Button").setWidth(100);
类中各成员末尾以逗号“,”分镉,但是最后一个成员末尾不能加逗号。
类的声明。Qooxdoo的一切工作都通过类的方式创建,包括声明类,用于声明类的类是qx.Class.define。程序本身就是一个类。默认状态下创建的Application文件如下:
qx.Class.define("myapplication.Application", //类名
{
extend : qx.application.Standalone, //继承类
members : //下面开始定义类的成员
{
main : function()
{
// Call super class
this.base(arguments); //加载继承类的成员
if (qx.core.Variant.isSet("qx.debug", "on"))
{
qx.log.appender.Native; //为firefox或其他浏览器的调试工具 qx.log.appender.Console;
}
var button1 = new qx.ui.form.Button("First Button", "myapplication/test.png"); //用按钮控件类实例化一个按钮