【翻译】Part 2 - Developing a Dojo Mobile Application: FlickrView
程序员文章站
2022-05-30 09:58:37
...
英文原链接:http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part2/
这个系列的第一篇文章,开始使用Dojo Mobile详细讲解了Dojo Toolkit's dojo/mobile库的基本概念和使用方式。在接下来的文章里,我们将着手创建一个全功能的Dojo移动web应用:FlickrView。这篇文章主要让你熟悉FlickrView是什么,怎么实现,和开始构建该移动应用的HTML和CSS布局。
FlickrView是什么?
FlickrView是我们将要创建的应用的名称,将会用到Dojo Mobile和一些自定义的Dojo资源,FlickrView不是Dojo Mobile的小练习项目,FlickrView是一个有用的,全功能的移动web应用,我们的目标是:
由于带宽的限制,在你开始进行编码之前,花时间对应用设计和架构进行头脑风暴是很重要的。
应用设计和需求
我们将从下面的草图创建FlickrView:
首先显示的页面(默认view,中间图)是Feed view,显示了符合查询条件的照片列表。头部左边的按钮用于显示Settings view,右边的按钮用于更新当前页面的内容。选择列表项目时,将触发转换到照片详尽描述的Details view。
设置页面的选项可以从 Flickr public feed JSON query parameters导出:
发布时间,作者和照片描述都从JSON请求取得,我们一会了解下这些细节。
移动开发指南
淡定!在我们冒然进入FlickrView编码之前,要记住几件关于Dojo Mobile和移动应用开发的事件:
我们不会在FlickrView中将所有最佳实践都抛弃掉,但我们会找到节约空间和严格Dojo最佳实践之间的平衡。
组织你的项目
应用的HTML在要目录,JavaScript,images和stylesheets分开在专门的目录下。
我们将应用的HTML命名为flikrview.html,将CSS资源放在css/flickrview.css,我们还在后面增加images和javascript资源。
移动设备和缓存
大多数移动设备严重依赖于缓存来缓解数据传输的负担,但我们在开发初级阶段,缓存会给我们的应用测试带来很大麻烦。我们加几个防止缓存的元标签到我们要开发的设备视页面上:
这些标签在开发期是很有用的,但正式发布后,要记得去掉。
FlickrView HTML架构
在Part1中,Dojo Mobile提供了一个坚实的移动应用程序模板所需的主题样式表和脚本标记。
下面是我们定义三个界面(SettingsView,FeedView和DetailsView)之前的HTML页面模板:
有了这个模板,我们把注意力都放在三个界面上:
Feed View
Settings View
Details View
注意到这些内容都是静态了,我们在下一次再讲从Flickr动态获取内容。
一样不要忘记在HTML中require小部件:
完成了布局的应用!
View Demo
FlickrView已经成型!
创建基本布局的FlickrView很简单:添加ScrollingView和ToolBar小部件。我们已经用到的dojox/miblie组件有:Headings,ToolBars,TextBox...这些都能很快部署!
现在我们通过扩展ScrollableView来实现我们的views:
扩展ScrollableView
首先我们创建两个文件来定义我们的classes:js/FeedView.js和js/SettingsView.jsp
我们现在更新HTML属性data-dojo-type为新类:
与此同时,我们必须require新加的类确保分析器能加载他们。
很好!我们的原型应用已经在feed和settings两个view使用专用的classes了.
本篇介绍了用Dojo Mobile构建的移动应用程序:FlickrView.从应用设计和需求开始,我们构建了通用布局模板,并搭建成静态原型应用。我们说了下最佳实践的事,扩展了ScrollableView,接下来就可以实现FlickrView让它正常工作了!
在下一篇文章,我们将实现FeedView的动态功能:
下载源代码
Download Part 2 - Developing a Dojo Mobile Application: FlickrView.
============================================
Part 2 END
next Part 3 - FlickrView: Implementing FeedView
这个系列的第一篇文章,开始使用Dojo Mobile详细讲解了Dojo Toolkit's dojo/mobile库的基本概念和使用方式。在接下来的文章里,我们将着手创建一个全功能的Dojo移动web应用:FlickrView。这篇文章主要让你熟悉FlickrView是什么,怎么实现,和开始构建该移动应用的HTML和CSS布局。
FlickrView是什么?
FlickrView是我们将要创建的应用的名称,将会用到Dojo Mobile和一些自定义的Dojo资源,FlickrView不是Dojo Mobile的小练习项目,FlickrView是一个有用的,全功能的移动web应用,我们的目标是:
- 利用Dojo Mobile小部件创建跨设备兼容的移动应用。
- 在web应用中,加入自定义的元素,控件和功能。
- 连接到Flickr Open API,使用JSONP检索符合查询条件的公众照片。
由于带宽的限制,在你开始进行编码之前,花时间对应用设计和架构进行头脑风暴是很重要的。
应用设计和需求
我们将从下面的草图创建FlickrView:
首先显示的页面(默认view,中间图)是Feed view,显示了符合查询条件的照片列表。头部左边的按钮用于显示Settings view,右边的按钮用于更新当前页面的内容。选择列表项目时,将触发转换到照片详尽描述的Details view。
设置页面的选项可以从 Flickr public feed JSON query parameters导出:
- tags 定义标签查询参数
- selection 定义标签模式(tagmode)查询参数
- feed language 定义语言查询参数。该语言列表要符合Flickr accepted languages values.
发布时间,作者和照片描述都从JSON请求取得,我们一会了解下这些细节。
移动开发指南
淡定!在我们冒然进入FlickrView编码之前,要记住几件关于Dojo Mobile和移动应用开发的事件:
- 网站尺寸问题 创建移动应用是按每一个字节计算的,你增加的每一个依赖(基于Dojo类的或者其他)都会增加用户的下载时间。
- 最好的实践:移动 != Web JavaScript和JavaScript工具集都规定的一些最好的实践,一些例子包括:not extending natives,不使用全局变量,创建灵活/通用的类。这些最好的实践将会花费你大量的额外代码,所以你必须放弃你的规则从面创建高效的移动app。
- 保持简洁 创建包括上百万自定义风格、小部件和布局的超复杂移动应用会让你很快陷入困境。创建一个简单的布局,然后添加进入,这是最佳的移动web应用编码方式。
我们不会在FlickrView中将所有最佳实践都抛弃掉,但我们会找到节约空间和严格Dojo最佳实践之间的平衡。
组织你的项目
应用的HTML在要目录,JavaScript,images和stylesheets分开在专门的目录下。
我们将应用的HTML命名为flikrview.html,将CSS资源放在css/flickrview.css,我们还在后面增加images和javascript资源。
移动设备和缓存
大多数移动设备严重依赖于缓存来缓解数据传输的负担,但我们在开发初级阶段,缓存会给我们的应用测试带来很大麻烦。我们加几个防止缓存的元标签到我们要开发的设备视页面上:
<!-- prevent cache --> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache">
这些标签在开发期是很有用的,但正式发布后,要记得去掉。
FlickrView HTML架构
在Part1中,Dojo Mobile提供了一个坚实的移动应用程序模板所需的主题样式表和脚本标记。
下面是我们定义三个界面(SettingsView,FeedView和DetailsView)之前的HTML页面模板:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <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"/> <!-- prevent cache --> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <title>Dojo Mobile tutorial | Flickrview | Part II | HTML Structure</title> <!-- application stylesheet --> <link rel="stylesheet" type="text/css" href="css/flickrview.css"> <!-- dynamically apply native visual theme according to the browser user agent --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojox/mobile/deviceTheme.js"></script> <!-- dojo configuration options --> <script type="text/javascript"> dojoConfig = { async: true, baseUrl: './', parseOnLoad: false, mblHideAddressBar: true, packages: [{ name: "flickrview", location: "js" }] }; </script> <!-- dojo bootstrap --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script> <!-- dojo application code --> <script> // Load the widget parser and mobile base require([ "dojox/mobile/parser", "dojox/mobile/compat", "dojo/domReady!" ], function (parser) { // Parse the page for widgets parser.parse(); }); </script> </head> <body style="visibility:hidden;"> application will go here </body> </html>
有了这个模板,我们把注意力都放在三个界面上:
Feed View
<!-- Feed view --> <div id="feed" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected: true"> <div id="feedHeading" data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed: 'top', label: 'Feeds'"> <span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="icon: 'images/settings.png', moveTo:'settings', transitionDir:'-1', transition:'none'" style="float:left;"></span> <span id="refreshButton" data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="icon: 'images/refresh.png'" style="float:right;"></span> </div> <div id="feedList" data-dojo-type="dojox/mobile/EdgeToEdgeList"> <div data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo:'details', transition:'slide'" class="photoListItem"> <img src="images/mockup/photo1.png" width="80px" height="80px" alt="Title" style="float:left;"/> <div class="photoSummary"> <div class="photoTitle">Photo title here</div> <div class="publishedTime" data-dojo-time="2013-12-13">published date here</div> <div class="author">author here</div> </div> <div class="summaryClear"></div> </div> <div data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo:'details', transition:'slide'" class="photoListItem"> <img src="images/mockup/photo2.png" width="80px" height="80px" alt="Title" style="float:left;"/> <div class="photoSummary"> <div class="photoTitle">Another photo title here</div> <div class="publishedTime" data-dojo-time="2013-12-13">published date here</div> <div class="author">author here</div> </div> <div class="summaryClear"></div> </div> </div> </div>
Settings View
<!-- Settings view --> <div id="settings" data-dojo-type="dojox/mobile/ScrollableView"> <div data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed: 'top', label: 'Settings'"> <span id="doneButton" data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="label:'Done', moveTo:'feed', transition:'none'" style="float:right;"></span> </div> <div data-dojo-type="dojox/mobile/RoundRect"> <div data-dojo-type="dojox/mobile/FormLayout" data-dojo-props="columns:'two'"> <div> <label for="tags">Tags</label> <fieldset> <input type="text" id="tags" data-dojo-type="dojox/mobile/TextBox" data-dojo-props="value:''"> </fieldset> </div> <div> <label for="select">Selection</label> <fieldset> <input type="checkbox" id="select" data-dojo-type="dojox/mobile/Switch" value="on" leftLabel="All" rightLabel="Any"> </fieldset> </div> <div> <label>Feed language</label> <fieldset> <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 /> <input id="fr-fr" data-dojo-type="dojox/mobile/RadioButton" type="radio" name="feedLanguage" value="fr-fr"><label for="fr-fr">French</label><br /> <input id="de-de" data-dojo-type="dojox/mobile/RadioButton" type="radio" name="feedLanguage" value="de-de"><label for="de-de">German</label><br /> <input id="it-it" data-dojo-type="dojox/mobile/RadioButton" type="radio" name="feedLanguage" value="it-it"><label for="it-it">Italian</label><br /> <input id="ko-kr" data-dojo-type="dojox/mobile/RadioButton" type="radio" name="feedLanguage" value="ko-kr"><label for="ko-kr">Korean</label><br /> <input id="pt-br" data-dojo-type="dojox/mobile/RadioButton" type="radio" name="feedLanguage" value="pt-br"><label for="pt-br">Portuguese (Br)</label><br /> <input id="es-us" data-dojo-type="dojox/mobile/RadioButton" type="radio" name="feedLanguage" value="es-us"><label for="es-us">Spanish</label><br /> <input id="zh-hk" data-dojo-type="dojox/mobile/RadioButton" type="radio" name="feedLanguage" value="zh-hk"><label for="zh-hk">Traditional Chinese (HK)</label><br /> </fieldset> </div> </div> </div> </div>
Details View
<!-- Details view --> <div id="details" data-dojo-type="dojox/mobile/ScrollableView"> <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> <div id="detailsContainer" data-dojo-type="dojox/mobile/RoundRect"> Photo description from Flicker here </div> </div>
注意到这些内容都是静态了,我们在下一次再讲从Flickr动态获取内容。
- 我们用dojox/mobile/ScrollableView替代dojox/mobile/View,ScrollableView允许头部肯定,内容可滚动。它很适配小屏幕设备或者视图内项目不确定的情况。
- 头部用dojox/mobile/Heading渲染, 我们也加上dojox/mobile/ToolBarButton小部件:
- ,刷新Feed view
- ,切换到Settings view
- ,切换到Feed view
- ,切换回Feed view
- 注意ToolBarButton的属性data-dojo-props:刷新和设置按钮是用我们在images目录下的图片渲染的,同时要有icon属性中声明。
- 也注意下data-dojo-props声明了怎么切换。moveTo定义目标,transition定义切换类型,transitionDir定义切换的方向。参见dojox/mobile/heading(http://dojotoolkit.org/reference-guide/dojox/mobile/Heading.html)了解更多。
- 我们在静态的Feed view上声明两个dojox/mobile/ListItem,我们最终会通过JSONP请求结果动态生成ListItems.
- 自定义CSS只用来格式化ListItem,其他风格都由Dojo Mobile主题提供。
一样不要忘记在HTML中require小部件:
require([ //... "dojox/mobile/ScrollableView", "dojox/mobile/ListItem", "dojox/mobile/FormLayout", "dojox/mobile/TextBox", "dojox/mobile/RadioButton", "dojox/mobile/Heading", "dojox/mobile/EdgeToEdgeList", "dojox/mobile/RoundRect", "dojox/mobile/Switch" ], function (parser) { //... });
完成了布局的应用!
View Demo
FlickrView已经成型!
创建基本布局的FlickrView很简单:添加ScrollingView和ToolBar小部件。我们已经用到的dojox/miblie组件有:Headings,ToolBars,TextBox...这些都能很快部署!
现在我们通过扩展ScrollableView来实现我们的views:
- 设置界面显示当前设置和更新flickrview.根据用户输入的查询。
- Feed view负责从Flickr获取数据和显示结果。
扩展ScrollableView
首先我们创建两个文件来定义我们的classes:js/FeedView.js和js/SettingsView.jsp
define([ "dojo/_base/declare", "dojox/mobile/ScrollableView" ], function(declare, ScrollableView){ return declare([ScrollableView], { }); });
我们现在更新HTML属性data-dojo-type为新类:
<!-- Feed view --> <div id="feed" data-dojo-type="flickrview/FeedView" <!-- Settings view --> <div id="settings" data-dojo-type="flickrview/SettingsView">
与此同时,我们必须require新加的类确保分析器能加载他们。
require([ //... "flickrview/FeedView", "flickrview/SettingsView" ], function (parser) { //... });
很好!我们的原型应用已经在feed和settings两个view使用专用的classes了.
本篇介绍了用Dojo Mobile构建的移动应用程序:FlickrView.从应用设计和需求开始,我们构建了通用布局模板,并搭建成静态原型应用。我们说了下最佳实践的事,扩展了ScrollableView,接下来就可以实现FlickrView让它正常工作了!
在下一篇文章,我们将实现FeedView的动态功能:
- 通过dojo/request/script从Flickr取得feeds.
- 构建一个dojox/mobile/ListItem自定义列表。
下载源代码
Download Part 2 - Developing a Dojo Mobile Application: FlickrView.
============================================
Part 2 END
next Part 3 - FlickrView: Implementing FeedView