qooxdoo's namespace and inheritance

Javascript语言本身并没有提供命名空间的机制,很多种Javascript Lib都有各自的模拟方法,在qooxdoo里面,命名空间是通过这个方法调用实现的:
[code]
qx.OO.defineClass("you.package.YourClassName", parentObject, initFunction);
[/code]

举一个实际的例子来说明就很容易明白这个API的用法:
qooxdoo提供了qx.ui.component.DateChooser这个日期选择的类,他的界面如下:
[img]http://readonly.iteye.com/upload/picture/pic/44/ae898a57-bd44-4e11-ac2f-74108b464d16.jpg[/img]

它本身是直接嵌入页面的,而实际需求往往是一个popup date chooser window,偶们可以用20来行代码实现:
[code]
qx.OO.defineClass("com.javaeye.qooxdoo.DateChooserWindow", qx.ui.window.Window,
function(vDate, vWindowManager)
{
qx.ui.window.Window.call(this, "Date Chooser", "icon/16/date.png", vWindowManager);

with(this){
setSpace(120, 200, 120, 140);
setModal(true);
setShowClose(true);
setShowMaximize(false);
setShowMinimize(false);
setResizeable(false);
}

var dateChooser = this._dateChooser = new qx.ui.component.DateChooser(vDate);
with(dateChooser){
setWidth("auto");
setHeight("auto");
}
this.add(dateChooser);
});
[/code]

这样就定义了一个新的namespace ("com.javaeye.qooxdoo") 下新的Widget Class ("DateChooserWindow"),并且继承了 qx.ui.window.Window 所有方法,我们只需要在代码里面这样调用:
[code]
var w = new com.javaeye.qooxdoo.DateChooserWindow;
w.open();
[/code]

就能够popup一个date chooser window了,界面如下:
[img]http://readonly.iteye.com/upload/picture/pic/45/754033c2-8532-4040-8294-50fb1584a17a.jpg[/img]

通过qooxdoo提供的namespace、继承机制和丰富的widget lib,偶们很容易就能够组合出更易用的用户界面了。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值