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 instance
var g_app = null;
// global app root widget
var g_app_root_widget = null;
// _final_app define
qx.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({ 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下了
- 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);
