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

标签: dojo toolkit 来生 | 发表时间:2011-09-13 14:05 | 作者:Elaine.Ye Guan
出处:http://www.yeeyan.org

译者 Elaine.Ye

(译者注:由于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. 从服务器端获取数据的最终代码

function getApplicationPatterns(){
  // 给服务器端发送一个请求
  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) {
        // 服务器端的响应是json格式的信息
          var sdata = response;

        // 创建存放应用名称的列表容器
        var appPatternListContainer = new 
          dojox.mobile.RoundRectList({id:"applicationPatternsList"});
                       
          // 为每个元素添加新的项目到列表容器中
        for (var i in sdata){
                   
          // 创建并填充列表项(应用名称)
          var name = sdata[i].app_name
          var appPatternListItem = new dojox.mobile.ListItem({
                            label: name,
                            moveTo: "appPatternsInfo"});

          // 把新创建的项目添加到列表容器中
          appPatternListContainer.addChild(appPatternListItem);

              // 为每个列表项附加上一个“onclick”事件  
              // 当项目被点击时,事件会在一个新的视图(本例中是appPatternsInfo
              // 显示它的信息
          dojo.connect(appPatternListItem,
                           "onclick",
                           dojo.hitch(null, 
                           getPatternInfo, sdata[i]));
                       
        }
           
            // 把列表容器添加到appPatterns视图中
        dijit.byId("appPatterns").addChild(appPatternListContainer);

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

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. 提取虚拟应用模式的属性的最终代码

function getPatternInfo(virtAppPatternObject){

  // 在把信息加到列表容器中之前先清空它
  dijit.byId("patternInfoList").destroyDescendants(); 

  // 应用的信息列表
  var listItemLabels= ["Application name",
                       "Application id",
                       "Application type",
                       "Content MD5",
                       "Content type",
                       "Creation time",
                       "Creator",
                       "Last modified",
                       "Last modifier",
                       "Collection"];
       
  // 应用的值列表
  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];
               
  // 创建并填充应用的信息
  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);
  }
}

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上了解更多关于DojoIBM 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/网站

相关 [dojo toolkit 来生] 推荐:

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

- Guan - 译言-每日精品译文推荐
(译者注:由于yeeyan编辑器对文章中的标签做解析的原因,我在每个标签的空格,比如说,左尖括号<+script+右尖括号>,我会写成< script>,以便其能够在文章中正确显示,不便之处敬请谅解. 使用移动设备是最流行的浏览网页方式之一,随着移动设备用户的不断增加,开发更多的移动应用和移动友好型网站的要求被提了出来.

使用Dojo Toolkit来创建移动图表应用

- 三水 - 译言-每日精品译文推荐
来源Charting for mobile with the Dojo Toolkit. (译者注:由于yeeyan编辑器对文章中的标签做解析的原因,我在每个标签的空格,比如说,左尖括号<+script+右尖括号>,我会写成< script>,以便其能够在文章中正确显示,不便之处敬请谅解. 在本文中,我们学习如何使用Dojo Toolkit的图表框架来创建一些运行在移动设备上的很吸引人的图表应用,学习如何在Dojo移动应用的内部实例化和配置图表组件,以及如何在组件上启用触摸交互,以达成与移动设备的更好整合.

文章: 使用Sahi测试Dojo应用

- - InfoQ cn
谈及开源Web 自动化测试工具,相信很多人立刻会想到Selenium. 本文给大家介绍的是另一款 开源Web 自动化测试工具Sahi. Sahi的网站上有关于与Selenium的对比,不过这不是我们今天探讨的主题. 这篇文章的主要目的是向读者简单的介绍一下Sahi并分享一下个人使用Sahi测试Dojo应用的经验,希望对大家能有所帮助.

谷安: 微软发布 Windows Azure Toolkit for Android

- Lionheart - 谷奥聚合——谷奥主站+谷安 aggregator
微软(Microsoft)发布 Azure Toolkit for Android(用于 Android 的 Azure 工具包),该工具包提供了一个 SDK 和本地库以支持存储和授权他们基于云的 Windows Azure 开发平台. 这将带给 Android 开发一个使用 Windows Azure 服务的途径,这将会带来更多使用相同数据集跨平台的应用.

用于 Android 智能手机的 Android Network Toolkit 应用

- skymare - 谷安——谷奥Android专题站
在 Defcon 展会上,安全研究人员展示了一种新的黑客工具,它的作用是通过某种方式寻找设备漏洞,目的是为了让网络或设备漏洞得到修补. 当然,该应用也可能会被非法利用,让不法分子兴风作浪窃取和破坏存在系统漏洞的设备的数据. 这个新的应用称为 Android Network Toolkit(Android 网络工具套件),它将在不久后进入 Android Market.

巧用Percona Toolkit解决MySQL主从不同步问题

- - 极客521 | 极客521
由于各种原因,mysql主从架构经常会出现数据不一致的情况出现,大致归结为如下几类. 2:执行non-deterministic query. 3:回滚掺杂事务表和非事务表的事务. 4:binlog或者relay log数据损坏. 数据不同步给应用带来的危害是致命的,当出现主从数据不一致的情况,常见的应对方法是先把从库下线,然后找个半夜三更的时间把应用停掉,重新执行同步,如果数据库的体积十分庞大,那工作量可想而知,会让人崩溃.

使用 Dojo Mobile 为 iOS 智能终端开发 Native-like Web 应用

- jiaosq - IBM developerWorks 中国 : 文档库
随着 iOS 智能终端的流行,基于 iOS 开发 Native-like Web 应用变得越来越流行. 本文着重介绍基于 Dojo Mobile 开发 Native-like Web 应用的方法,并分享一些开发经验和技巧.

实践与共享:可“一键”轻松激活Office 2010 系列三大VOL版本的“Office 2010 Toolkit 2.2 ”

- duyao678 - 翱翔
        “Office 2010 Toolkit 2.2”是“迷你KMS”更新换代后的最新版本. 虽是单一可执行程序,但一身承担两大职能:“KMS服务器”和“客户激活端”. 可轻松激活Office Pro Plus 2010、Visio Premium 2010、Project  Pro 2010 的VOL版.

技术流:未来生活

- ♂神→双子← - 有意思吧
公元3000年,我们的生活会是怎样的. 如果科技足够发达,我想未来,生活至少应该是这个样子的……. 也许,未来的城市,生活真的应该这样设计. 这个是微软的广告,未来远景设计. 动态仿真窗户:动态仿真窗+自然空气系统,可以让地下室变成空中楼阁. 高科技神奇魔镜Cybertecture Mirror. 由RFID技术研制而成的新式卡带播放器.

使用StaGen来生成静态网站

- - Java译站
译注:StaGen是一个功能极其简单的静态站点生成器,因此它非常容易上手,同时它还是用Java 8写的,有兴趣的话可以看下它的源代码. 当然我个人还是比较喜欢 Jekyll. 在没有 StaGen之前,我一直都在用RapidWeaver来管理我的网站 WizTools.org. RapidWeaver生成的文本格式真的让人很抓狂,这个软件浪费了我太多时间.