1. qooxdoo官方地址
www.qooxdoo.org
有很多文档，查看即可.
UI的几块：widget . style . theme . animation . i18n . event .
2. 入门Step By Step
--1-- 官方下载sdk
http://downloads.sourceforge.net/qooxdoo/qooxdoo-1.5-sdk.zip
--2-- unzip 解压
--3-- 两种使用方法
(1)使用官方工具链生成应用
-0-导出工具链路径
export PATH=$PATH:/home/ylwang/work/misc/qooxdoo/source/qooxdoo-1.5-sdk/tool/bin
-1-任意工作目录创建名为test的应用
create-application.py -n test
!!!注意：create-application.py调用最好使用相对路径，即相对当前路径的路径，这样能在任意路径下床架应用了.
-2-进入生成的test目录
-3-生成调试用应用js，此js比较大，调试使用
./generate.py source
-4-测试
google-chrome source/index.html
-5-生成最终应用js，此js经过优化，且只有一个js文件，包好了所有qx库和应用代码以及资源
./generate.py build
-6-测试
google-chrome build/index.html
(2)手动生成qx.js库，类似jquery.js那样使用
-0-进入源码下的framework目录
-1-打开config.json文件下的build-all行前的//注释
"export":[ "api", "api-data", "build-all", "clean",
...
-2-生成qx.js
./generate.py build-all
-3-生成的build文件夹接下来会使用到
-4-测试用index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sample Page</title> <!-- Use settings to configure application --> <script type="text/javascript" src="script/_app_env.js"></script> <!-- Include compiled qooxdoo --> <script type="text/javascript" src="script/qx.js"></script> <!-- Add standalone app define here --> <script type="text/javascript" src="script/app.js"></script> </head> </html>
--- _app_env.js内容
window.qx ={ $$environment: { "qx.application" : "_final_app" }};
指定了要启动的应用是_final_app这个类
--- qx.js是刚刚生成的
--- app.js内容
// global app instancevar g_app = null;// global app root widgetvar g_app_root_widget = null;// _final_app defineqx.Class.define("_final_app", { extend : qx.application.Standalone, members : { main: function() { this.base(arguments); var wd = new qx.ui.window.Window("----"); wd.open(); g_app = this; }, _createRootWidget: function() { g_app_root_widget = new qx.ui.root.Application(document); //g_app_root_widget.setBackgroundColor("#FFFF00"); var desktop_decorator = new qx.ui.decoration.Background(); desktop_decorator.setBackgroundImage("resource/_final_app/tdma_mode.png"); g_app_root_widget.set({"decorator":desktop_decorator}); return g_app_root_widget; }}});
-5- 测试
google-chrome index.html
3. 动态创建其他窗口
如果我们使用官方工具链的生成方式，要彻底弄明白内部的关系，才能动态的加载一个js文件，里边任意新建window，很难实现类似单独应用的需要.采用单独包含的qx.js方式，我们可以实现动态的加载一个js，当作一个应用窗口.方法如下：
-1-方法类似上边2提到的，这里写出index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sample Page</title> <!-- Use settings to configure application --> <script type="text/javascript" src="script/_app_env.js"></script> <!-- 设置环境 -> <!-- Include compiled qooxdoo --> <script type="text/javascript" src="script/qx.js"></script> <!-- 包含qx库 --> <!-- Add standalone app define here --> <script type="text/javascript" src="script/app.js"></script> <!-- 默认app代码，只实现类即可 -->
<!-- 此处我们动态加载一个js，注意不能直接使用var w = new qx.ui.window.Window();的方式，会发生错误getRoot()为null的错误，这里使用qx.io.ScriptLoader类 -->
<script type="text/javascript">
(new qx.io.ScriptLoader()).load("script/calculator.js");
</script> </head> </html>
-2- script/calculator.js内容，load之后，主窗口会被直接显示出来
var w = new qx.ui.window.Window("calculator app");
w.open();
4. 修改widget背景 （几乎所有的控件元素都是widget）
-1- 声明一个背景图decoration
var desktop_decorator = new qx.ui.decoration.Background();
-2- 设置图片 desktop_decorator.setBackgroundImage("resource/_final_app/tdma_mode.png");
-3- set方法设置widget的property中的decorator的值w.set({"decorator":desktop_decorator});
5. widget事件响应
使用addListener接口，如Button:
addListener("click", function()
{
alert("clicked....");
});
6. 为widget添加右键菜单
var b = new qx.ui.menu.Button("mb"); var m = new qx.ui.menu.Menu("Menu..."); m.setWidth(100); m.setHeight(100); m.add(b); g_app_root_widget.setContextMenu(m);
7.设置背景颜色
icon.setBackgroundColor("#FFFF00");
8. 移动窗口
w.moveTo(400, 100);
9. 打开窗口
w.open();
10. 设置widget宽和高
w.setWidth(640);
w.setHeight(480);
11. 右键popup菜单
dsk1.addListener("contextmenu", function(e) { var text = new qx.ui.form.TextArea(); var popup = new qx.ui.popup.Popup(new qx.ui.layout.Canvas()).set({width: 100, height: 100}); popup.add(text, {left: 5, top: 5, right: 5, bottom: 5}); popup.show(); popup.placeToMouse(e); this.debug("popup is " + popup); });
12. window抖动特效
__effect = new qx.fx.effect.combination.Shake(g_shake.getContainerElement().getDomElement()); __effect.start();
//g_shake表示window
13. 替换application默认的rootwidget
//接管_createRootWidget接口即可
_createRootWidget: function() { g_app_root_widget = new qx.ui.root.Application(document); //g_app_root_widget.setBackgroundColor("#FFFF00"); return g_app_root_widget; },
14. 如何实现多桌面
-1- 使用tabview加到rootwidget上
-2- 使用desktop加到tabview的page上
-3-window加到desktop上
这样实现了多桌面.
15. 直接获取application 和 root widget
qx.core.Init.getApplication()
qx.core.Init.getApplication().getRoot()
16. 判断事件目标
e.getTarget()
17. 动态加载qx.js框架库
jquery中的方法是：
$.getScript("frontend/_setup_env.js", function() {
$.getScript("frontend/qx.js", function() {
$.getScript("frontend/desktop.js", function()
{
qx.core.Init.ready();
});
});
});
18. 改变默认资源和script访问路径
"build-script" : { "compile-options" : { "code" : { "format" : false }, "uris" : { "script" : "static/script", //脚本路径 "resource" : "static/resource", //资源路径 "translation" : "static/translation" //翻译路径 } } }
比如：http://www.xxx.com/是网站根，原来不改变路径情况下，需要把生成的index.html放在根下，resource和script放在根下.
如上改变后，可以随意的增加路径层次，如上例的static/，可以把resource和script放在www.xxx.com/static下了
19 . Parts加载方法 1.在自己生成的application目录下会发现config.json文件2.在"jobs":定义中，增加自定义key，加完后如下: { "name" :"littlebabyDesktop", "include": [ { "path":"${QOOXDOO_PATH}/tool/data/config/application.json" } ], "export": [ "api", "api-data", "build", "clean", "distclean", "fix", "info", "inspector", "lint", "migration", "pretty", "profiling", "source", "source-all", "source-hybrid", "simulation-build", "simulation-run", "test", "test-source", "translation" ], "default-job":"source", "let": { "APPLICATION" :"littlebabydesktop", "QOOXDOO_PATH":"http://www.cnblogs.com/http://www.cnblogs.com/qooxdoo/source/qooxdoo-1.5-sdk", "QXTHEME" :"littlebabydesktop.theme.Theme", "API_EXCLUDE" :["qx.test.*","${APPLICATION}.theme.*","${APPLICATION}.test.*","${APPLICATION}.simulation.*"], "LOCALES" :["en"], "CACHE" :"${TMPDIR}/qx${QOOXDOO_VERSION}/cache", "ROOT" :"." }, // You only need to edit the remainder of this file, if you want to customize // specific jobs, or add own job definitions. "jobs": { // Uncomment the following entry to add a contrib or library to your // project; make sure to adapt the path to the Manifest.json; if you are // using a contrib: library, it will be downloaded into the path specified // by the 'cache/downloads' config key "parts-config"://自己增加 { "packages": { "parts": { "boot"://初始part { "include":["${QXTHEME}","littlebabydesktop.Application"] }, "window"://名字为window的part { "include":["littlebabydesktop.Window"] } } } }, "source"://自己增加 { "extend":["parts-config"] }, "build": //自己增加 { "extend":["parts-config"] } /* "libraries" : { "library" : [ { "manifest" : "contrib://SkeletonApplication/trunk/Manifest.json" } ] } */ // If you want to tweak a job setting, see the following sample where // the "format" feature of the "build-script" job is overridden. // To see a list of available jobs, invoke 'generate.py x'. /* ,"build-script" : { "compile-options" : { "code" : { "format" : false } } } */ }} 3.代码中使用方法，boot part中引用window part内容: qx.io.PartLoader.require(["window"],function(){ var w =new littlebabydesktop.Window(); w.open(); },this);转载于:https://www.cnblogs.com/linucos/archive/2011/09/05/2167538.html
相关资源：qooxdoo：qooxdoo-通用JavaScript框架-源码