翻译 - 【Dojo Tutorials】Developing a Dojo Mobile Application: FlickrView

原文:Developing a Dojo Mobile Application: FlickrView

本系列的第一篇文章Getting Started with Dojo Mobile,详细的讲述了Dojo工具集中dojox/mobile包的基本概念与使用方法。在接下来的文章中,我们将创建一个功能齐全的Dojo Mobile web应用,叫做FlickrView。本文主要让你熟悉什么是FlickrView,我们想做什么,然后会构建这个应用的HTML与CSS布局。

FlickrView是什么?

FlickrView是我们将要使用Dojo Mobile与我们自定义的一些资源来创建的应用的名字。FlickrView不是Dojo Mobile的一个小练习;FlickrView是一个有用的,功能齐全的移动web应用。关于FlickrView我们的目标如下:

  • 利用Dojo Mobile的挂件创建一个设备兼容的移动应用
  • 添加我们自定义的挂件,控制器和功能到web应用
  • 使用JSONP连接Flickr开放API来后去匹配的公开照片

应用设计与需求

FlickrView的设计草图如下:

中间是Feed视图,用于展示与搜索相匹配的图片列表。顶部有两个按钮,左边的跳转到第一个Setting视图,右边的刷新搜索结果。点击图片列表中任意项,跳转到对应的第三个Details视图。

设置视图可以设置API请求参数:

  • tags
  • selection
  • feed language

发布事件,作者,图片详情都将会在请求返回的JSON结果中,具体情况稍后做详细讲解。

移动开发指南

较多麻袋!在我们为FlickrView编码之前,关于Dojo Mobile与移动web应用开发的一些事情需要交代 :

  • 大小问题

  当创建移动应用时每一字节都应计算清楚,所有有些捷径在标准应用中可行但在移动应用用不一定可行。记得每个依赖都会zengjia用户的下载时间。

  • 最佳实践 mobile!=web

  javascript的最佳实践与javascript工具集的最佳实践。一些例子没有包含原生扩展,不使用全局变量,创建灵活而通用的类。追求最佳实践将需要写更多的代码,所以为了创建高效的移动应用需要适当放宽一些规则限制。

  • 保持简单

  创建一个复杂的应用带有一大堆自定义的样式,挂件与布局,应用会运行的很慢。所有创建简单的布局,然后添加它是有效的优化方案。

我们不会就此抛弃最佳实践,我们会在高效与最佳实践之间寻找一个平衡点。

组织你的项目

应用的HTML文件在项目的根目录,javascript,图片,样式都会有各自的子目录。

我们给HTML文件取名为flickrview.html,然后把样式放在css文件css/flickrview.css中。稍后我们会添加图片与javascript。

移动设备与缓存

很多移动设备对数据传输都有严重的缓存依赖。本身对于线上产品是很多好的,但是对于开发调试则就成了噩梦。在开发设置页面之前,让我们添加一些防止缓存的META标签在HTML页面中:

 

1 <!-- prevent cache -->
2 <meta http-equiv="cache-control" content="no-cache"/>
3 <meta http-equiv="pragma" content="no-cache"/>

 

 

 

这些META标签在开发的时候是很有用的,但是发布的时候记得要删除掉。

FlickrView HTML结构

在第一部分,Getting Started with Dojo Mobile中提供了一个固定的模版,在开始处包含了样式表与脚本标签。

在我们定义三个视图之前HTML结构应该是这样的:

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
 5         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
 6         <meta name="apple-mobile-web-app-capable" content="yes"/>
 7         <!-- prevent cache -->
 8         <meta http-equiv="cache-control" content="no-cache"/>
 9         <meta http-equiv="pragma" content="no-cache"/>
10 
11         <link rel="stylesheet" type="text/css" href="css/flickrview.css"/>
12         <script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
13         <script type="text/javascript">
14             dojoConfig = {
15                 async: true,
16                 baseUrl: ../,
17                 parseOnload: false,
18                 mblHideAddressBar: true,
19                 packages: [{
20                     name: "flickrview",
21                     location: "js"
22                 }]
23             };
24         </script>
25         <script type="text/javascript" src="dojo/dojo.js"></script>
26         <script type="text/javascript">
27             require([
28                 "dojox/mobile/parser",
29                 "dojox/mobile/compat",
30                 "dojo/domReady!"
31             ], function(parser) {
32                 parser.parse();
33             });
34         </script>
35     </head>
36     <body style="visibility:hidden;">
37         application will go here
38     </body>
39 </html>

 

 

 

有了这个模版,把我们的所有视图放置在一起:FeedView,SettingsView和DetailView:

  

 

Feed视图

 

 1 <!-- Feed View -->
 2 <div id="feed" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected:true">
 3     <div id="feedHeading" data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed:‘top‘,label:‘Feeds‘">
 4         <span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="icon:‘../images/image-1.png‘,moveTo:‘settings‘,transitionDir:‘-1‘,transition:‘none‘" style="float:left;"></span>
 5         <span id="refreshButton" data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="icon:‘../images/image-1.png‘" style="float:right;"></span>
 6     </div>
 7     <div id="feedList" data-dojo-type="dojox/mobile/EdgeToEdgeList">
 8         <div data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo:‘details‘,transition:‘slide‘" class="photoListItem">
 9             <img src="../images/photo1.png" width="80px" height="80px" alt="Title" style="float:left;"/>
10             <div class="photoSummary">
11                 <div class="photoTitle">Photo title here</div>
12                 <div class="publishedTime" data-dojo-time="2014-10-10">published date here</div>
13                 <div class="author">author here</div>
14             </div>
15             <div class="summaryClear"></div>
16         </div>
17         <div data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo:‘details‘,transition:‘slide‘" class="photoListItem">
18             <img src="../images/photo1.png" width="80px" height="80px" alt="Title" style="float:left;"/>
19             <div class="photoSummary">
20                 <div class="photoTitle">Photo title here</div>
21                 <div class="publishedTime" data-dojo-time="2014-10-10">published date here</div>
22                 <div class="author">author here</div>
23             </div>
24             <div class="summaryClear"></div>
25         </div>
26     </div>
27 </div>

Settings视图

 1 <!-- Settings view -->
 2 <div id="settings" data-dojo-type="dojox/mobile/ScrollableView">
 3     <div data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed:‘top‘,label:‘Settings‘">
 4         <span id="doneButton" data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="label:‘Done‘,moveTo:‘feed‘,transition:‘none‘" style="float:right;"></span>
 5     </div>
 6     <div data-dojo-type="dojox/mobile/RoundRect">
 7         <div data-dojo-type="dojox/mobile/FormLayout" data-dojo-props="columns:‘two‘">
 8             <div>
 9                 <label for="tags">Tags</label>
10                 <fieldset>
11                     <input type="text" id="tags" data-dojo-type="dojox/mobile/TextBox" data-dojo-props="value:‘‘"/>
12                 </fieldset>
13             </div>
14             <div>
15                 <label for="select">Selection</label>
16                 <fieldset>
17                     <input type="checkbox" id="select" data-dojo-type="dojox/mobile/Switch" value="on" leftLabel="All" rightLabel="Any"/>
18                 </fieldset>
19             </div>
20             <div>
21                 <label>Feed language</label>
22                 <fieldset>
23                     <input id="en-us" data-dojo-type="dojox/mobile/RadioButton" checked type="radio" name="feedLanguage" value="en-us"/><label for="en-us">English</label><br/>
24                     <input id="fr-fr" data-dojo-type="dojox/mobile/RadioButton" checked type="radio" name="feedLanguage" value="fr-fr"/><label for="fr-fr">French</label><br/>
25                     <input id="de-de" data-dojo-type="dojox/mobile/RadioButton" checked type="radio" name="feedLanguage" value="de-de"/><label for="de-de">German</label><br/>
26                     <input id="it-it" data-dojo-type="dojox/mobile/RadioButton" checked type="radio" name="feedLanguage" value="it-it"/><label for="it-it">Italian</label><br/>
27                     <input id="ko-kr" data-dojo-type="dojox/mobile/RadioButton" checked type="radio" name="feedLanguage" value="ko-kr"/><label for="ko-kr">Korean</label><br/>
28                     <input id="pt-br" data-dojo-type="dojox/mobile/RadioButton" checked type="radio" name="feedLanguage" value="pt-br"/><label for="pt-br">Portuguese</label><br/>
29                     <input id="es-us" data-dojo-type="dojox/mobile/RadioButton" checked type="radio" name="feedLanguage" value="es-us"/><label for="es-us">Spanish</label><br/>
30                     <input id="zh-hk" data-dojo-type="dojox/mobile/RadioButton" checked type="radio" name="feedLanguage" value="zh-hk"/><label for="zh-hk">Traditional Chinese (HK)</label><br/>
31                 </fieldset>
32             </div>
33         </div>
34     </div>
35 </div>

 

Details视图

1 <!-- Details View -->
2 <div id="details" data-dojo-type="dojox/mobile/ScrollableView">
3     <div id="detailsHeading" data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed:‘top‘,label:‘Details‘,back:‘Back‘,moveTo:‘feed‘,transition:‘slide‘,transitionDir:‘-1‘"></div>
4     <div id="detailsContainer" data-dojo-type="dojox/mobile/RoundRect">
5         Photo description from Flickr here
6     </div>
7 </div>

 

  •  我们使用了dojox/mobile/ScrollableView而不是dojox/mobile/View。ScrollableView允许在内容滚动的时候头部固定不动。它非常适合用于小屏设备或当内容数量不确定的时候。
  • 都不我们使用dojox/mobile/Heading,我们还添加了dojox/mobile/ToolBarButton挂件
    • 将会刷新Feed视图的内容
    • 切换到Settings视图
    • 切换到Feed视图
    • 切换回到Feed视图
  • 注意ToolBarButton的data-dojo-props属性:刷新与设置按钮都是使用图片渲染的,声明为icon属性。
  • moveTo定义目标,transition定义切换类型,transitionDir定义切换方向。更多详情请查看dojox/mobile/Heading
  • 在Feed页面我们定义了两个dojox/mobile/ListItem挂件。最终我们会利用JSONP请求的结果生成列表项的。
  • 自定义CSS仅用于列表项。其他的样式在Dojo Mobile主题中都已提供了。

同样不要忘记了把使用到的挂件都引入到HTML中:

 1 require([
 2     // ...
 3     "dojox/mobile/ScrollableView",
 4     "dojox/mobile/Heading",
 5     "dojox/mobile/ToolBarButton",
 6     "dojox/mobile/EdgeToEdgeList",
 7     "dojox/mobile/ListItem",
 8     "dojox/mobile/RoundRect",
 9     "dojox/mobile/FormLayout",
10     "dojox/mobile/TextBox",
11     "dojox/mobile/Switch",
12     "dojox/mobile/RadioButton",
13     "dojo/domReady!"
14 ], function(parser) {
15     parser.parse();
16 });

 

至此我们应用的布局已经完成了。

FlickrView已经成型!

创建基础框架是很简单的:添加在滚动试图,工具栏挂件。需要指出的是我们应用的各个部分都是包含在dojox/mobile中的:如Headings,ToolBars,TextBox等等,他们都很容实现。

现在我们要对ScrollabelView进行扩展:

  • Settings视图展示当前配置与更新flickrview。按照用户的输入去查询
  • Feed视图用于获取数据并展示结果

扩展ScrollableView

首先通过创建骨架文件js/FeedView.js与js/SettingsView.js来定义我们的类:

1 define([
2     "dojo/_base/declare",
3     "dojox/mobile/ScrollableView"
4 ], function(declare, ScrollableView) {
5     return declare([ScrollableView]);
6 });

 

现在我们更新HTML属性data-dojo-type使用新的类:

1 <!-- Feed View -->
2 <div id="feed" data-dojo-type="flickrview/FeedView">
3 
4 <!-- Settings view -->
5 <div id="settings" data-dojo-type="flickrview/SettingsView">

 

与此同时我们需要引入我们的类名以确保解析器载入了它们:

1 require([
2     // ...
3     "flickrview/FeedView",
4     "flickrview/SettingsView"
5 ], function(parser) {
6     // ...
7 });

 

恭喜!我们的模拟程序为feed与settings视图使用了我们专有的类。

本文介绍了我们使用Dojo Mobile要构建的应用:FlickrView。从应用的设计和要求开始,接着我们构建了布局模版。我们还讲了最佳实践与扩展ScrollableView以满足我们的特殊需要!

下一篇教程中我们将实现FeedView的具体细节:

  • 使用dojo/requrest/script从Flickr获取feeds
  • 构建一个自定义列表

下载源码

Download Part 2 - Developing a Dojo Mobile Application:FlickrView。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。