谁有qooxdoo的中文文档，能共享下么
最近要学，用来做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"); //用按钮控件类实例化一个按钮
var doc = this.getRoot();//文档根节点
doc.add(button1, {left: 100, top: 50}); //把按钮添加到文档并指定位置
button1.addListener("execute", function(e) { //为按钮注册一个事件
alert("Hello World!");
});
}
}
});
声明类时，类的名称由命名空间和程序名构成，上例类名为：myapplication.Application
myapplication 表明了命名空间，Application是程序名，命名空间其实是该文件相对于其所属程序文件夹(本例是class下的myApplication文件夹)的路径，斜杠用 “.” 隔开，并注意大小写，如果命名空间和程序名称错误程序将不能通过编译。
类内引其他元素的方法跟原声javascript一样使用this关键词加“.”号。
qx.Class.define("myapplication.Application",
{
extend : qx.application.Standalone,
members :
{
width:100,
main : function()
{
Var theButton = this. getButton() ; //调用成员函数
this.getRoot().add(theButton);
},
getButton: function()
{ //定义成员函数
var button1 = new qx.ui.form.Button("A Button");
button1.setWidth(this.width); //调用成员
return aButton ;
}
}
});
4.创建一个界面的方法。
创建一个界面的方式大致分为下面几个步骤：创建一个容器、为这个容器指定布局方式、创建各种控件、把控件添加进容器、把容器添加进文档。可以先把一个控件添加进容器或文档中再对该控件属性进行定制或注册触发事件。
创建容器。Qooxdoo创建UI的容器类在API文档的ui/container下，分为Composite、Resizer、Srcoll、SlideBar、Stack 五种，其中Composite最常用。定义布局方式的类在ui/layout 下共12种，常用的有HBox、VBox、Basic、Canvas、Grid 。
创建一个Composite容器：
var mycomposite = new qx.ui.container.Composite() ;
创建一个布局方式并为这个容器指定布局方式为横向排列
var thelayout = new qx.ui.container.HBox();
mycomposite.setLayout(thelayout);
或者使用下面的方式创建容器时指定布局方式
var mycomposite = new qx.ui.container.Composite(new qx.ui.container.HBox()) ;
创建一个按钮控件并添加到容器中
var button1 = new qx.ui.container. Button("I am a button");
Qooxdoo中向父控件添加子元素的方发是add
mycomposite.add(button1) ;
把容器添加进文档并指定位置为浏览器左上角左移100像素，下移100像素
this.getRoot().add(mycomposite, {left:100,top:100});
如果不指定位置，新添加的控件将出项在左上角。
完成这些步骤后即可以编译运行程序。
Container控件可以嵌套添加container控件作为其子元素，复杂的界面都是由这些简单的步骤构成。
1.3 几种常用的布局方式
1.HBox ,横向排列，该布局内所有子元素将按从左向右的方式排列
layout = new qx.ui.container.HBox();
2.VBox ，从向排列，该布局内所有子元素将按从上倒下的方式排列
layout = new qx.ui.container.VBox();
3.Basic ，这是默认的布局方式，文档跟元素this.getRoot()也是这种布局方式，该方式根据相对于副元素左上角的左移和下移距离定位
var mycomposite = new qx.ui.container.Composite(new qx.ui.container.HBox()) ;
mycomposite.add(mychild,{left:100, top:100})
4.Canvas ,填充式布局。该布局方式通过定义控件边缘与副元素内则的间隔距离来定义控件位置，类似CSS的 margin ，属性值为left、top、right、bottom，但不一定要定义所有四个属性值。该布局内子控件的大小会根据副元素大小的改变而改变以维持所设置的属性值，适用于自适应大小控件的制定。
下例中mychild的位置是父元素底部，并横向填充父元素的宽度，高度是100像素。
var mycomposite = new qx.ui.container.Composite(new qx.ui.container.Canvas ()) ;
mycomposite.add(mychild,{left:0, bottom: 0,right:0})
mychild.setHeight(100);
5.Grid 栅格式布局，该布局通过纵横坐标对子元素进行定位，纵横坐标是从0开始的整数。
var mycomposite = new qx.ui.container.Composite(new qx.ui.container. Grid (2,5)) ; //子元素间隔左右2像素，上下5像素
mycomposite.add(mychild1,{row:0, column:0}) //出现在第一行第一列
mycomposite.add(mychild2,{row:1, column:1}) //出现在第二行第二列
mycomposite.add(mychild2,{row:1, column:2}) //出现在第二行第三列
1.4 几种容器介绍
1.Composite 最简单最基本的容器，类似HTML的DIV 。
2.Srcoll 该容器在无法完全容纳子元素时会出现滚动条。类似设定了overflow属性的DIV。
var scroll = new qx.ui.container.Scroll();
3.Resizer 该容器可以拖动调整大小
var resizer = new qx.ui.container.Resizer() ;
4.SlideBar() ,该容器是一个条状容器，两端有按钮可点击移动容器内的元素移动
slideBar = new qx.ui.container.SlideBar() ;
5.Stack() ,该容器将一组子元素以堆叠的方式放置，只有最上面的元素可见。
var stack = new qx.ui.container.Stack();
1.5 注册触发事件
1.addListner方法
绝大部分控件都提供该方法注册时间以监控事件发生并调用相关函数代码实现异步动作。该方法多用于监控鼠标事件和表单控件值的改变。
button1.addListener("click", function(){ /*code*/}, this)
可以注册的事件包括click,bdclick,resize,contextmenu等，兼容主流浏览器。
2.qx.bom.Event.addNativeListener
该方法需要在属性值里指定触发范围，下例中触发范围是整个文档，监控时间是键盘有按键按下。 qx.bom.Event.addNativeListener( document.documentElement,"keydown", function(e){
var ctrlPress = e.ctrlKey; //监控ctrl键按下
},this);
Qooxdoo的事件注册方式多样，以上仅是这次学习中使用到的2种，其他方式 需要进一步学习。
1.6 表单与数据处理
Qooxdoo没有HTML这样的FROM表单域可以一键提交域内表单控件的值，其处理表单的方式是先创建样式后组织数据，然后整合成字符串、XML、或者JSON的数据形式通过xmlhttprequest组件向服务器提交，类似HTML下用Javascript 函数通过document.getElementById等方式取到控件值然后提交。
在Demo提供的例子看来，Qooxdoo更倾向于组织JSON数据的形式进行提交，Qooxdoo类库里也提供了创建JSON数据对象的类。Json作为javascript的一个子集得到绝大部分ServerScript的支持，包括php的5.2版本也已经加入对Json的处理方法。
这段时间的学习，个人认为Qooxdoo表单的制作与数据处理是其学习的一个难点。
1.7 一些常用控件的制作
1.导航栏及菜单制作
var topMainToolbar = new qx.ui.toolbar.ToolBar; //实例化一个菜单栏
var languageMenu = new qx.ui.toolbar.Button("语言", "tc53/16x16/mainBarSet.PNG"); //实例化菜单栏按钮
var searchButton = new qx.ui.toolbar.Button("搜索", "tc53/16x16/mainBarSearch.PNG");
topMainToolbar.add(searchButton); //把菜单按钮添加到菜单栏
topMainToolbar.add(languageMenu);
var menuLanguage = new qx.ui.menu.Menu; //实例化一个菜单
var enLanguage = new qx.ui.menu.Button("英文"); //实例化菜单按钮
var cnSimplified = new qx.ui.menu.Button("中文");
menuLanguage.add(enLanguage); //把菜单按钮添加进菜单控件
menuLanguage.add(cnSimplified);
languageMenu.setMenu(menuLanguage); //把菜单绑定到一个菜单栏按钮上
应该注意，菜单栏按钮只能被添加进ToolBar控件，菜单按钮只能被添加进Menu控件。
另外，为菜单按钮注册鼠标事件时不要使用click应该使用execute，否则在firefox不生效。
2.table的制作
var stepSettingTableModel = new qx.ui.table.model.Simple(); //table模板
for(var i=1;i<stepSettingOptionArray[0].length;i++){ //赋值一个数组
setColumnsArray.push(stepSettingOptionArray[languageRank][i]);
}
stepSettingTableModel.setColumns(setColumnsArray); //用该数组设置表格的表头
delete setColumnsArray;
stepSettingTableModel.setData( [ [1," "," "," "] , [2," "," "," "]]);//设置表格初始值
var stepSettingTable = new qx.ui.table.Table(stepSettingTableModel); /*用该表格模板实例化表格*/
stepSettingTable.setHeight(370); //设置表格的高度
stepSettingTable.setStatusBarVisible(false); //设置该表格状态栏不可见
3.窗口的制作
var stepSettingWin = new qx.ui.window.Window("I am a window"); /*实例化一个窗口*/
stepSettingWin.setLayout(new qx.ui.layout.VBox(20)); //窗口内布局方式
stepSettingWin.setWidth(800);
stepSettingWin.setHeight(500);
stepSettingWin.setAllowClose(true); //允许使用关闭按钮
stepSettingWin.setAllowMaximize(false); //不允许最大化最小化按钮
stepSettingWin.setAllowMinimize(false);
stepSettingWin.setShowMaximize(false);//不显示最大化最小化按钮
stepSettingWin.setShowMinimize(false);
stepSettingWin.setShowStatusbar(false);//状态栏不可见
stepSettingWin.open(); //默认状态打开该窗口
[其他解释]
楼主真牛，遗憾的是用的人好像不多，
帮顶。
[其他解释]
这么强大的框架啊.得好好学习学习
[其他解释]
一年过去了，这东西在国内用的人还是不多吗
[其他解释]
看看我制作的这个qooxdoo CHM文档，看看是否有用：
http://www.heronote.com/files/qooxdoo.htm
[其他解释]
这种东西，中文的智能参考下，真正用还得用原版，IT人就得看英文文档
[其他解释]
6楼真牛！
