前面几篇文章,我们创建HTML、CSS和JavaScript代码完成FlickrView移动应用程序。本篇教程将关注于更新代码部署,利用Dojo构建系统保持应用产品化,并基本审查基于Dojo Mobile的整个应用。
Dojo Mobile和构建
为Dojo Mobile应用程序创建构建器(build)是非常重要的,因为我们要让移动应用体积尽可能的小,接下来一步步创建Dojo Mobile应用FlickrView的构建器。
Dojo的构建(build)体系
典型的构建脚本可以在Dojo Toolkit的util/buildscripts目录下找到,所以,接下来的教程需要一份Dojo的原代码,可以到这里下载 dojotoolkit.org/download.
原代码里包括util目录,复制dojo,dijit,dojox和util目录到你应用的js目录下,最后目录结构如下图。
构建(build)配置文件
我们创建一个FlickrView的构建文件,构建文件是一个配置文件,说明了构建时需要包含的内容和用到的选项。 创建构建器教程有Dojo构建体系的完整文档资料,本节只简单说明下他包含了什么。
一开始有一些选项:
- "basePath" 定义所有相对路径的起点;
- "action":"release" 这是构建器的标准动作。
- "releaseDir" 指定构建结果输出目录。
- "cssOptimize" 这对移动构建是很有用的选项,它可以将所有CSS文件的内容都合并到一个CSS文件。
var profile = { "basePath": "./", "action": "release", "releaseDir": "../release/js", "selectorEngine": "acme", "stripConsole": "normal", "copyTests": false, "cssOptimize": "comments.keepLines", "mini": true, "optimize": "closure", "layerOptimize": "closure", "localeList": "en-us",
接下来是layers的定义:
在这个课程,我们只给应用定义了一个包括所有模块的层(layer).一个layer将会生成一个js文件,在我们的例子上,我们定义一个dojo/dojo层,它只包含我用应用中用到的Dojo代码和自定义代码。
请注意,我们可以将应用分解成多个层,比如dojo代码一个层,应用代码一个层,但因为移动应用部署在一个高延时的网络,多次的请求会对应用的启动产生不好的影响,出于同样的原因,我们将本地化绑定的内容也加到同一层上。(通过includeLocales属性)。
layers: { "dojo/dojo": { customBase: true, includeLocales: ["en-us"], include: [ "dojox/mobile/parser", "dijit/registry", "dojox/mobile/compat", "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", "dojo/cldr/nls/de/gregorian", "dojo/cldr/nls/fr/gregorian", "dojo/cldr/nls/it/gregorian", "dojo/cldr/nls/ko/gregorian", "dojo/cldr/nls/pt/gregorian", "dojo/cldr/nls/es/gregorian", "dojo/cldr/nls/zh/gregorian", "dojo/cldr/nls/zh-hk/gregorian", "flickrview/FeedView", "flickrview/SettingsView" ] } },
接着我们定义一些特性:
特性是能够被按需包含或者排除(见dojo/has)的独立代码片断。
例如,我们将"ie"设置为undefinde:这样我们就不想应用运行在老的IE浏览器上(指移动浏览器),表示同意排除掉所有IE特性的代码。
staticHasFeatures: { "dom-addeventlistener": true, "dom-qsa": true, "json-stringify": true, "json-parse": true, "bug-for-in-skips-shadowed": false, "dom-matches-selector": true, "native-xhr": true, "array-extensible": true, "ie": undefined, "quirks": false, "dojo-sync-loader": false, "ie-event-behavior": 0 }, packages: [ { name: "dojo", location: "dojo" }, { name: "dijit", location: "dijit" }, { name: "dojox", location: "dojox" }, { name: "flickrview", location: "flickrview" } ] };
这个构建配置文件在包含在flickrview/js/flickrview-app.profile.js,在文章最后下载文档中可以找到。
运行构建程序
切换到命令行模块,使用上面的构建配置文件构建layers:
Unix
cd js/util/buildscripts ./build.sh profile=../../flickrview-app.profile.js
Windows
cd js\util\buildscripts .\build.bat profile=..\..\flickrview-app.profile.js
构建程序混合了JavaScript和Java(代码精简和优化)任务。默认情况下,unix下的build.sh脚本将使用node.js运行环境,没有node.js会使用Rhino(这样的顺序是基于node.js通常比Rhino快的事实)。
Windows下的build.bat脚本,使用的是Rhino,但这并不表示你不能使用node.js构建,可以用下面命令行手动执行:
.\node ..\..\dojo\dojo.js load=build --profile ../../flickrview-app.profile.js
构建完成后,到release/js/flickrview/ 目录查看结果。
实现构建
实现新创建的构建文件,更新flickrview.html
首先,更新Dojo路径,使用构建出来的dojo.js替代原始dojo.js文件。这对应配置文件中的dojo/dojo层,结果文件在release/js/dojo/dojo.js,所以我们更新Dojo脚本标签的路径。layer包括应用需要的所有模块,我们无需做其他修改。
最后,我们把dojoConfig简化为这样的代码:
构建版本的HTML文件,flickrview-build.html,包含在可下载文档中,你可以在运行构建时启动这个文件。
回顾
FlickrView已经完成!我们的简单移动应用已经模板化(HTML),样式化(CSS),代码化(JavaScript),和产品化构建!
我们回顾下创建FlickrView过程学到的:
- Dojo Mobile包含的基本小部件。
- 基于HTML的声明式代码组织dojo/mobile小部件,基于JavaScript方式的编程创建小部件。
- 如何使用dojo/request/script从Flickr获取JSON格式的数据
- 如何扩展dojox/mobile基本组件。
- 保持好的JavaScript实践同时保持紧凑的代码和最小的依赖。
- dojox/mobile应用所需的特殊构建过程。
在这系列课程,我们看到Dojo Mobile是一个出色的移动应用框架,有着匹配移动设备控制的完整主题和小部件。Dojo Mobile同时还容易掌握、可扩展和内容可动态填充。FlickrView,一个基本的三视图应用,是非常容易创建,感谢Dojo Mobile!
下载源代码
下载 Part 5 - Build FlickrView for production.
============================================
Part 5 END
next NULL
================
结语:
第一次翻译,因英文水平有限,时间也压缩地厉害,不免错漏百出,看得人估计受苦了,在此为阅读这几篇文章的同志致歉!
以后在学习其他技术知识时,可能还会尝试做些翻译,希望水平能慢慢提高。