qooxdoo's namespace and inheritance

最新推荐文章于 2016-05-13 11:56:36 发布

最新推荐文章于 2016-05-13 11:56:36 发布 · 99 阅读

文章标签：

#OO #UI #JavaScript #IDEA #ViewUI

qooxdoo 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用qooxdoo框架创建自定义组件。通过示例演示如何定义新的命名空间及组件，并实现一个弹出式的日期选择窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，偶们很容易就能够组合出更易用的用户界面了。