Tags标签 网战地图
当前位置: 主页 > 网页设计 > JavaScript >

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

2014-06-09 21:56 [JavaScript] 来源于:
导读:本文配套源码 简介 我们最近刚刚完成了一个Web 2.0 Dojo原型的开发。这个原型十分宽泛,为信息管理提 供了一个新的功能。我们还与用户体验团队协作以确保此应用

简介

我们最近刚刚完成了一个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 模板

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

在本例中,为了防止代码通过其 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” 的示例(参见 参考资料)。

(编辑:)

本文标签:
网友评论

栏目列表

推荐文章