Dojo入门之(2)—Widget

一、为什么要使用Widget(窗口控件)?

使用窗口控件可以:

(1)带来更好用户的体验:

·易用；

·易懂;

·操作更不容易出错；

·更加漂亮的界面；

(2)让开发更加快捷：

·不需要javascript

·必须考虑其它(如跨浏览器)

二、Widget对象

<button dojoType="Button" id="foo"> Click me </button>

这样的语句就能让你的网页上的按钮变成DOJO的Widget对象--漂亮的蓝色图形按钮！

但，这不是DOJO能为你做的一切。事实上，它已经为你准备好了在JavaScript中轻松使用的对象，就象这样操作它：

var myButton = dojo.widget.byId("foo");

三、粗览Widget的名字空间(NameSpace)

默认使用DOJO的名字空间，你也可以使用自己的名字空间来实现自定义的Widget。看这个代码片：

<img dojoType="acme:Image" />

这儿使用了acme名字空间，由你自己定义的。那么，你需要按以下方式来组织你的目录：

<root>/dojo

<root>/acme/

<root>/acme/widget/Image.js <- 定义你的acme.widget.Image 窗口控件

当然，也可以使用 dojo.registerModulePath来设定模块的使用路径，使用dojo.registerNamespace来实现Widget选择。

四、定制Widget的外观

很明显，你的程序可能不需要Widget的蓝色外观，换个色彩如何？或者：干脆换个图片？

改变DOJO的CSS 可以做到这一切。

以FloatingPanl(FloatingPane.html)为例，你可以在: root/dojo-0.4.1-ajax/src/widget/templates目录下找到这个html文件，代码如下：

<div id="${this.widgetId}" dojoAttachEvent="onMouseDown" class="dojoFloatingPane">

    <div dojoAttachPoint="titleBar" class="dojoFloatingPaneTitleBar"  style="display:none">

             <img dojoAttachPoint="titleBarIcon"  class="dojoFloatingPaneTitleBarIcon">

           <div dojoAttachPoint="closeAction" dojoAttachEvent="onClick:closeWindow"

           class="dojoFloatingPaneCloseIcon"></div>

       <div dojoAttachPoint="restoreAction" dojoAttachEvent="onClick:restoreWindow"

           class="dojoFloatingPaneRestoreIcon"></div>

       <div dojoAttachPoint="maximizeAction" dojoAttachEvent="onClick:maximizeWindow"

           class="dojoFloatingPaneMaximizeIcon"></div>

       <div dojoAttachPoint="minimizeAction" dojoAttachEvent="onClick:minimizeWindow"

           class="dojoFloatingPaneMinimizeIcon"></div>

        <div dojoAttachPoint="titleBarText" class="dojoFloatingPaneTitleText">${this.title}</div>

    </div>

 

    <div id="${this.widgetId}_container" dojoAttachPoint="containerNode" class="dojoFloatingPaneClient"></div>

 

    <div dojoAttachPoint="resizeBar" class="dojoFloatingPaneResizebar" style="display:none"></div>

</div>

在同一目录下，你可以看到对应的CSS，对着HTML更改它的内容吧，比如：

dojoFloatingPaneTitleText {
       float: left;
       padding: 2px 4px 2px 2px;
       white-space: nowrap;
       color: CaptionText;
       font: small-caption;
}

不用改变源代码的CSS方式:

如果你不想改为DOJO源代码（我承认，我也不想），那么，在你的程序中直接重载它的CSS也行(CSS本就是可重叠的，对不？)，就象这样：

body .dojoFloatingPaneTitleText {
       color: blue;
       font: 20pt;
}

嗯，更多的更改？

body .dojoFloatingPaneMinimizeIcon,
body .dojoFloatingPaneMaximizeIcon,
body .dojoFloatingPaneRestoreIcon,
body .dojoFloatingPaneCloseIcon {
       float: left;
}
body .dojoFloatingPaneMinimizeIcon {
       background-image: url(/icons/myMinimize.gif);
}
body .dojoFloatingPaneMaximizeIcon {
       background-image: url(/icons/myMaximize.gif);
}
body .dojoFloatingPaneRestoreIcon {
       background-image: url(/icons/myPaneRestore.gif);
}
.dojoFloatingPaneCloseIcon {
       background-image: url(icons/myPaneClose.gif);
}