注册会员 登录
aardio官方社区 返回首页

XAuto‘s DOC http://bbs.aardio.com/?17 [收藏] [复制] [分享] [RSS] Time really is irritating things, he agreed without any arbitrary changes everything!

日志

qooxdoo一句话备忘录

热度 3已有 3971 次阅读2011-11-25 21:34 |个人分类:Qooxdoo

 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
-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="http://archive.cnblogs.com/a/2167538/script/_app_env.js" rel="nofflow"/>

        <!-- Include compiled qooxdoo --> 
        <script 
type="text/javascript" src="http://archive.cnblogs.com/a/2167538/script/qx.js" rel="nofflow"/>

        <!-- Add standalone app define here --> 
        <script 
type="text/javascript" src="http://archive.cnblogs.com/a/2167538/script/app.js" rel="nofflow"/>
   </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="http://archive.cnblogs.com/a/2167538/script/_app_env.js" rel="nofflow"/>

        <!-- Include compiled qooxdoo --> 
        <script 
type="text/javascript" src="http://archive.cnblogs.com/a/2167538/script/qx.js" rel="nofflow"/>

        <!-- Add standalone app define here --> 
        <script 
type="text/javascript" src="http://archive.cnblogs.com/a/2167538/script/app.js" rel="nofflow"/>
        <!-- 此处我们动态加载一个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()
----------------------------------------------------------------------------

1

路过

鸡蛋
1

鲜花

握手

雷人

刚表态过的朋友 (2 人)

全部作者的其他最新日志

发表评论 评论 (2 个评论)

回复 qqmmcc 2011-11-26 13:02
在快手怎么用  qooxdoo ?
回复 xauto 2011-11-26 17:47
qqmmcc: 在快手怎么用  qooxdoo ?
和其他web框架没什么两样...

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-1-20 04:58 , Processed in 0.031250 second(s), 17 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

返回顶部