编写一个定制的Dojo应用程序 - 面向对象网,web开发,dojo,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Dojo > 正文

编写一个定制的Dojo应用程序

来源: www.bianceng.cn 阅读:

本文配套源码

简介

我们最近刚刚完成了一个Web 2.0 Dojo原型的开发。这个原型十分宽泛,为信息管理提 供了一个新的功能。我们还与用户体验团队协作以确保此应用程序可用。屏幕由一名图形Web设计人员设 计,以使它们看上去更专业一些。

本文记录了我们进行此原型的Web 2.0开发的实际体验。由于Web 2.0相对来说是个比较新的技术,所以在需要时,开始使用和进行定制可能会较为困难。我们并没有为我们的 Dojo应用程序使用开箱即用的 外观。因为我们需要的是一致的图形设计以符合我们产品线的品牌效应。因此,我们必须使用Dojo进行 定制。定制是绝大多数开发人员耗费时间最多的一项工作,对于那些不知道如何解决此问题的开发人员 ,更是如此。

由于本文的重点在于 Dojo应用程序的定制,所以这里我们不对示例中出现的每个小部件属性做详细 的描述。本文假设您对Dojo和CSS有一定的了解。本文中的示例所基于的是 Dojo1.1.0。

创建一个Dojo应用程序

设计方法

有经验的软件工程师在开发时大都习惯使用面向对象(Object Oriented,OO)技术 。我们希望我们的Web 2.0 应用程序开发也能沿袭我们用了很多年的 Java™ 编程原理。我们发现 在很大程度上我们可以通过使用 Dojo小部件和模板模式以及 JavaScript/Dojo对象来做到这一点。

Dojo小部件和模板模式的使用

我们编写了一些定制小部件,它们由 JavaScript 类组成 ,并包括 HTML 模板以便用来进行呈现。这让我们可以把更多的 OO 方法应用于我们的应用程序,而不 仅仅是编写一些使用全局 JavaScript 函数的 HTML 文件。通过这些定制的小部件,我们获得了多种特 性:可借助良好定义的小部件实现的对象隔离;在需要时可供那些使用 HTML 的小部件更新 DOM 的动态 内容;同一个 HTML 模板可有多个实例(通过使用定制小部件生成不同的 HTML ID)。我们还能扩展我 们自已编写的这些定制小部件,从而制做出更多的个性化版本。

清单 1 所示的是定制小部件 JavaScript 文件的一部分,该文件在 dijit._Widget 和 dijit._Templated 基础之上构建。

清 单 1. 定制小部件 JavaScript 文件

Dojo.provide ("mywidgets.MyWidget");
 // put any other requires the widget needs here
Dojo.declare(
 'mywidgets.MyWidget',
 [dijit._Widget, dijit._Templated],
 {
 widgetsInTemplate: true,
templatePath: Dojo.moduleUrl( "mywidgets",
  "../templates/mywidgets/templateMyWidget.html");
 // put any other variables and methods for this widget here
 // can also override methods from the base classes here
 });

widgetsInTemplate 属性告知 Dojo它需要解析这个模板 文件,因它含有 Dojo小部件,而不只是 HTML 标记。templatePath 属性告知 Dojo这个小部件将使用这 个特定的 HTML 模板来进行呈现。当小部件被实例化时,比如使用 new mywidgets.MyWidget() 实例, 此模板的 HTML 在此对象在 DOM 的插入处被呈现。

清单 2 所示的是这个小部件的 HTML 模板文 件。

清单 2. HTML 模板

<div class="templateMyWidget">
 <!-- Other Widgets and HTML can be included here -->
 <button dojoType="dijit.form.Button" id="myButton_${id}"
label="My Button" dojoAttachPoint="myButton"></button>
  </div>

在本例中,为了防止代码通过其 ID 访问此按钮,用变量替换了此 ID。 ${id} 被这个 ID 属性的值替换,这个属性继承自 dijit._Widget 类。此 ID 是惟一的;因而,将其用 作模板内的多个 ID 中的一个就能实现在实例化几个小部件的时候,每个小部件都具有一个惟一的 ID。 我们还包括了 dojoAttachPoint 属性。这就在小部件内创建了一个指向此 DOM 节点的属性。所以如果 已经访问了这个小部件(比如,myWidgetObj),就可以使用 myWidgetObj.myButton 访问到此 DOM 节 点。而无需知道此 ID 并且可以省去该属性,让系统创建该元素的惟一 ID。并且可以通过使用 myWidgetObj.myButton.id 检索这个由系统生成的 ID。

如果您下载了这些 Dojo 源代码,可能会注意到 Dojo 也是如此编写的。每个 Dojo 小部件都有一个 JavaScript 文件和与之相关的一个 HTML 文件(通常二者具有相同的名字)。这些模板可以在与小部件的 JavaScript 文件同级的 templates 的目录内找到。比如,此 Button 小部件的 JavaScript 文件是 <dojo_root>\dijit\form\Button.js,而其模板文件是 <dojo_root>\dijit\form\templates\Button.html,其中 <dojo_root> 是包含所下载的 Dojo 代码的那个目录。

JavaScript 和 Dojo对象的使用

在我们开始开发此原 型时,我们并不具备 JavaScript 的太多经验,但是,它的确可以让习惯于使用 OO 原理的人使用 JavaScript Object 进行开发。Dojo提供了使用 Dojo.declare 结构定义自己的类的更好方法。我们建 议您参阅 developerWorks 文章“针对 Java 开发人员的 Dojo概念”(参见 参考资料 小节 )。与任何原型一样,我们的要求不仅限于初始设计,所以代码变得越来越复杂和混乱。所以最好是采 用足够多的设计模式。有关设计模式的文章很多,其中包含了 JavaScript 和 Dojo的示例。我们推荐其 中的一个称为 “MVC with JavaScript” 的示例(参见 参考资料)。

Tags:
相关文章列表: