使用Dojo Toolkit来生成动态的移动web界面

标签： dojo toolkit 来生 | 发表时间：2011-09-13 14:05 | 作者：Elaine.Ye Guan

出处：http://www.yeeyan.org

（译者注：由于yeeyan编辑器对文章中的标签做解析的原因，我在每个标签的空格，比如说，左尖括号<+script+右尖括号>，我会写成< script>，以便其能够在文章中正确显示，不便之处敬请谅解。）

使用移动设备是最流行的浏览网页方式之一，随着移动设备用户的不断增加，开发更多的移动应用和移动友好型网站的要求被提了出来。针对不同的平台（像iOS、Android和Blackberry OS等）来创建本地化移动应用存在着难度，能够在某种设备上工作的代码不一定能够运行在另一种设备上，甚至在由不同厂家生产的有着相同OS实现的设备上也是如此。

有了DOjo Toolkit（dojox.mobile），你就可以创建部件来模仿那些最流行的移动设备的界面。在本文中，你会了解到如何使用Dojo Toolkit来创建移动设备应用，以及使用请求自服务器端的数据来动态地更新应用的内容。IBM® Workload Deployer （IWD）的表征状态转移（Representational State Transfer，REST）应用编程接口（API）被用来提取应用的属性，在本文中也有所论及。

初步了解

在本文中，我会创建一个名为/WDMobile的web移动应用，该应用有一个简单的需求：列出并显示提取自服务器端的数据信息。

该应用由一个HTML文件IWDMobile.html构成，该文件是应用的核心，其用到了：

1. Dojo来创建模仿了移动用户界面的部件

2. HTTP方法来查询服务器

IBM Workload Deployer REST API

IBM Workload Deployer REST API提供REST调用来管理Workload Deployer设备，本文用到了GET /resources/applicationPatterns，这是一个REST调用，获取虚拟应用模式（virtual application patterns）的信息，虚拟应用模式拥有诸如名称、id和创建者一类的属性。

工程结构

基于本文的目的，IWDMobile.html这一文件被放在某个与 IBM Workload Deployer联网的服务器的公共文件夹下面。

Dojo 1.7

你的HTML文件可以以两种方式来访问Dojo，其可通过一个公共的内容交付网络（content delivery network，或称为CDN，比如说Google和AOL）来访问可用的Dojo，或是从你自己的网站中获取Dojo。

本文引用的是Dojo 1.7的功能，不过由于Dojo 1.7尚未发布，还不能通过公共的CDN来使用，因此从Dojo Toolkit网站上下载最新的Dojo 1.7的一个拷贝，并把它解压在目录/public下面。（参阅参考资料获取下载Dojo Toolkit的链接。）

你应该要有如下的目录结构：

1. /public/IWDMobile.html
2. /public/dojo1.7/

补充内容：WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0
WebSphere Application Server Feature Pack for Web 2.0 and Mobile包括了IBM Dojo 1.7 Toolkit、新的移动和富互联网应用（rich Internet application，RIA）构建块，以及一个基于Dojo的图表组件。与配备的Rational工具一起使用，该功能包极大地方便了富web和移动应用的创建。以一种简单的方式，先开发出用于桌面浏览器的WebSphere应用，然后就可以很容易地修改它们并把它们部署到移动设备上。

开发IWDMobile

考虑使用下面的HTML模板来开始你的web移动应用：

清单1. 应用的HTML模板示例

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
< html>
< head>
    < meta name="viewport"
          content="width=device-width,
                   initial-scale=1,
                   maximum-scale=1,
                   minimum-scale=1,
                   user-scalable=no"/>
    < meta name="apple-mobile-web-app-capable" content="yes" />
    < title>IWDMobile< /title>
    < link
         href="dojo1.7/dojox/mobile/themes/iphone/iphone.css"
         rel="stylesheet" />
    < script type="text/javascript"
            src="dojo1.7/dojo/dojo.js"
            djConfig="isDebug:true, parseOnLoad:true">
    < /script>
    < script language="JavaScript" type="text/javascript">
      dojo.require("dojox.mobile.parser");
    dojo.require("dojox.mobile");
    dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
    < /script>
< /head>
< body>
< /body>
< /html>

Dojo语句是HTML文件的头部内容的一部分，这些语句加载Dojo库和需要用来解析信息的Dojo类。CSS主题和移动设备特定的META标签也做了定义，若要了解更多关于移动设备特定的META标签方面的内容，请参阅后面的参考资料中列出的“Apple特定的移动meta标签”一项。

用户界面骨架

IWDMobile需要一个视图来列出提取自服务器端的虚拟应用模式，在本文中，用到的视图有两个：

1. 第一个视图存放虚拟应用模式的名称。

2. 第二个视图存放虚拟应用模式的属性。

当某个虚拟应用模式的名称被选中时，它的属性就应该被显示出来。

Dojo所提供的部件和方法符合IWDMobile的需求，该应用需要用到的部件包括：

1. Dojox.mobile.ScrollableView（表示移动设备屏幕的容器）
2. Dojox.mobile.Heading（表示一个导航栏)
3. Dojox.mobile.RoundRectList（项目的容器）
4. Dojox.mobile.ListItem（表示清单列表）

更新文件的主体部分（body）以放入这些部件。

清单2. 示例的HTML模板的主体部分

    < body>
    < !-- Application pattern view -->
    < div id="appPatterns" dojotype="dojox.mobile.ScrollableView">
      < h1 dojotype="dojox.mobile.Heading" label="Patterns">< /h1>
    < /div>

    < !-- Application pattern info view -->
    < div id="appPatternsInfo" dojotype="dojox.mobile.ScrollableView">
      < h1 dojotype="dojox.mobile.Heading"
          label="Pattern Information"
          back="Patterns"
          moveto="appPatterns">< /h1>
      < ul id="patternInfoList" dojotype="dojox.mobile.RoundRectList">
    < /ul>
    < /div>
< /body>

JavaScript函数

需要用到两个JavaScript函数：

1. 第一个函数从服务器端获取数据

2. 第二个函数提取虚拟应用模式的属性

第一个函数getApplicationPatterns()需要向服务器端发送一个GET请求，解析服务器端的响应，创建一个列表容器，使用存放了虚拟应用模式的名称的列表项来填充列表容器，为每个列表项添加一个鼠标单击事件，并把列表容器添加到appPatterns视图中。

第二个函数getPatternInfo(virtAppPatternObject)使用一个虚拟应用模式对象作为参数，该函数需要提取该虚拟应用模式对象的属性，创建存放虚拟应用模式的属性值的列表项，并把这些列表项添加到 patternInfoList这一列表容器中。

getApplicationPatterns()

下面的代码段反映了这一函数背后的想法。

1. 第1步：GET /resources/applicationPatterns请求

清单3. 从服务器端获取数据

dojo.xhrGet({
    url :"https://iwd.server.com/resources/applicationPatterns",
    handleAs : "json",

    headers : {
            'X-Deployer-API-Version': '3.0',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
            },

    load : function(response) { },
    error : function(e) { }
});

2. 第2步：把服务器端的响应数据存放在新的变量中

清单4. 保存来自服务器端的数据

var sdata = response;

3. 第3步：创建一个存放应用名称的列表容器

dojo.mobile.RoundRectList创建了一个新的名为applicationPatternsList的列表容器。

清单5. 创建一个列表容器

var appPatternListContainer = new
dojox.mobile.RoundRectList({id:"applicationPatternsList"});

4. 第4步. 把响应中的每个元素的项目添加到步骤3的列表容器中

dojox.mobile.ListItem创建列表项目元素，每个元素都会指派一个llabel（标签）和一个moveTo属性，标签是列表项要显示的文本，在本例中是虚拟应用模式的名称。moveTo属性告诉应用，如果该项目被选中的话，其应该打开哪个视图。在本例中，其要打开的是appPatternsInfo视图。

addChild把每个列表项都添加到appPatternsListItem这一列表容器中。

for循环确保把每个列表项都添加到了列表容器中。

清单6. 把项目添加到列表容器中

for(var i in sdata){

var name = sdata[i].app_name
var appPatternListItem = new dojox.mobile.ListItem({
                    label: name,
                    moveTo: "appPatternsInfo"
                    });

appPatternListContainer.addChild(appPatternListItem);

}

5. 第5步. 为列表中的每个项目添加一个鼠标单击事件，当列表中的某个项目被点击时，事件会在appPatternsInfo视图中显示该项目的信息

dojo.connect把鼠标单击事件与列表项目连接起来。

dojo.hitch使用参数sdata[i]来执行函数getPatternInfo。

for循环确保每个列表项都被指派了一个鼠标单击事件。

清单7. 添加鼠标单击事件

for(var i in sdata){

dojo.connect(appPatternListItem,
               "onclick",
               dojo.hitch(null,
               getPatternInfo, sdata[i]));

}

6. 第6步：把列表容器添加到appPatterns视图中

dijit.byId查找appPatterns这一视图部件。

addChild把appPatterListContainer这一部件添加到视图appPatterns中。

清单8. 把清单容器添加到视图中

dijit.byId("appPatterns").addChild(appPatternListContainer);

getApplicationPatterns这一JavaScript函数的最终代码看起来就像是这个样子：

清单9. 从服务器端获取数据的最终代码

getPatternInfo(virtAppPatternObject)

下面的代码段反映了该函数背后的想法。

1. 第1步：清空列表容器

destroyDescendants销毁了指定部件的直接子部件和间接子部件，你希望确保有一个干净的开始，把DOM元素中之前存放的所有数据都删除掉。

清单10. 清除列表容器

dijit.byId("patternInfoList").destroyDescendants();

2. 第2步：创建虚拟应用模式属性的列表

清单11. 创建虚拟应用模式属性的列表

var listItemLabels= ["Application name",
                     "Application id",
                     "Application type",
                     "Content MD5",
                     "Content type",
                     "Creation time",
                     "Creator",
                     "Last modified",
                     "Last modifier",
                     "Collection"];

3. 第3步：从虚拟应用模式对象中获取属性值

清单12. 从虚拟应用模式对象中获取属性值

var listItemInfo = [virtAppPatternObject.app_name,
            virtAppPatternObject.app_id,
            virtAppPatternObject.app_type,
            virtAppPatternObject.content_md5,
            virtAppPatternObject.content_type,
            virtAppPatternObject.create_time,
            virtAppPatternObject.creator,
             virtAppPatternObject.last_modified,
            virtAppPatternObject.last_modifier,
            virtAppPatternObject.Collection];

4. 第4步：创建列表项并把它们添加到 patternInfoList容器中

dijit.byId查找patternInfoList这一视图部件。

dojox.mobile.ListItem创建列表项元素，每个元素被指派了一个label（标签）和一个rightText属性。标签是显示在列表项的左端的文本内容，在本例中，是属性的名称。rightText是显示在列表项右端的文本内容，在本例中，是属性的值。

addChild把列表项添加到 patternInfoList视图中。

清单13. 把列表项添加到容器中

for(var j in listItemLabels){

// 使用应用属性和值来填充列表容器
var list = dijit.byId("patternInfoList");
var appPatternInfo = new dojox.mobile.ListItem({
                      label: listItemLabels[j] ,
                      rightText: listItemInfo[j]
                });
list.addChild(appPatternInfo);
}

getPatternInfo(virtAppPatternObject)这一JavaScript函数的最终代码看起来就像是这个样子：

清单14. 提取虚拟应用模式的属性的最终代码

IWDMobile.html

如前所述，WDMobile.html是应用的核心，其存放了HTML代码、Dojo语句和需要用来创建这一IWDMobile应用的JavaScript类，你可以下载 WDMobile.html的最终版本。

演示说明

通过URL来打开WDMobile.html，比如说https://iwd.server.com/IWDMobile.html。

图1展示了最初的模式视图，该视图列出虚拟应用模式的名称。单击列出的任一项内容就会重定向到模式信息视图，该视图显示被选中的项的详细信息。

图1. 模式视图

图2显示了虚拟应用模式“Blank application”的详细信息。

图2. 模式信息视图

结束语

在本文中，你已了解了如何使用Dojo Toolkit来创建模仿移动用户界面的web移动应用，你也已了解了如何使用请求自服务器端的数据来动态地更新应用的内容。做法是多种多样的，现在就取决于你如何决定应用的行为了，祝你好运！

致谢

感谢 Andy Dingsor和Yoshiroh Kamiyama在撰写本文期间所做的反馈。

下载

描述　　　　　　　　名称　　　　　　　　　大小　　　下载方法

本文的HTML文件例子　IWDMobile.zip 　　　　2KB 　 HTTP

关于下载方法的说明

参考资料

学习资料

1. 可通过阅读“Get started with Dojo Mobile 1.7”（developerWorks, August 2011）了解其他的一些背景。

2. 在developerWorks上了解更多关于Dojo和 IBM Workload Deployer 的内容。

3. 了解Apple特定的移动meta标签。

4. 在 developerWorks Web development zone上，可找到数百篇how-to文章和教程，还有下载内容和论坛，以及为web开发者提供的其他丰富的资源。

5. 关注developerWorks的技术活动和webcast，这些活动和webcast专注于各种IBM产品和IT行业主题。

6. 参加free developerWorks Live! briefing，迅速了解IBM的产品和工具以及I行业趋势的最新进展。

7. 观看developerWorks的点播演示，范围包括了为初学者提供的产品安装和设置演示，到为经验丰富的开发者提供的高级功能。

8. 关注Twitter上的developerWorks。

获得产品和技术

1. 从Dojo Toolkit网页上下载最新的Dojo 1.7。

2. IBM Workload Deployer允许你把智能SOA中间件和服务扩展成私有云。

3. WebSphere Application Server Feature Pack for Web 2.0 and Mobile包括了IBM Dojo 1.7 Toolkit、新的移动和富互联网应用（rich Internet application，RIA）构建块，以及一个基于Dojo的图表组件。与配备的Rational工具一起使用，该功能包有助于你先开发出用于桌面浏览器的WebSphere应用，然后再修改它们并把它们部署到移动设备上。请点击这里了解更多内容。

4. 以最适合你的方式来评估IBM产品：下载产品试用版，在线试用产品，在云环境中使用产品，或是花费几个小时在SOA沙盒中了解如何高效地实现面向服务的架构。

讨论

1. 参加My developerWorks community，在浏览开发者驱动的博客、论坛、新闻组和wiki时和其他developerWorks用户建立联系。

关于作者

Jose Luis Lopez是IBM的一位软件工程师，他目前的工作内容是使用 IBM Workload Deployer来帮助客户把应用快速地部署到私有云和虚拟环境中。他在以前的工作中涉及到的软件产品包括了WebSphere Application Server Proxy、DMZ Proxy、DRS、Dynacache和Dependency Injection for Java （CDI）等。他拥有凝视感知系统（Gaze-awareness System）和移动用户界面（Mobile User Interface）方面的多项专利。

（译者注：标题配图来自http://www.ibm.com/developerworks/网站）