Dojo mobile TweetView 系列教程之五 —— TweetView: Android,打包,回顾
Dojo mobile TweetView 系列教程之五 —— TweetView: Android,打包,回顾
分类:Dojo扩展 (dojox)综合Javascript 2011-06-20 12:58 2417人阅读 评论(3) 收藏 举报 dojo android mobile dependencies build webkit目录(?)[+]
作者:David Walsh
翻译:Siqi (siqi.zhong@gmail.com)
原文:TweetView: Android, Packaging, and Review
在前两篇教程Dojo mobile TweetView 系列教程之三 —— Tweets和Mentions视图与Dojo mobile TweetView 系列教程之四 —— 创建 Setting 视图中,我们创建了TweetView移动应用程序所需的HTML, CSS和JavaScript代码。本教程将重点介绍如何实现一套Android主题,并使用Dojo的打包系统来使应用程序更紧凑,之后我们将回顾一下整个基于dojox.mobile的应用程序。
版本:1.6
难度:中级
系列:TweetView
实现Android主题
在本系列教程中我们在app.html页面中硬编码了一套iPhone主题的CSS样式来美化整个应用程序。这使得我们可以更快地完成整个开发,并且在应用程序功能完备后再考虑Android主题样式。现在是时候开始为我们的应用程序设计Android风格的样式了!
制作Android风格样式的第一步是实现一段侦测客户端设备类型并相应使用Android或iPhone主题的代码(而不是写死iphone.css)。
[javascript] view plain copy- <mce:scripttype="text/javascript"><!--
- (function(){
- //创建一个新的LINK元素,并获取HEAD标签的引用,我们之后会将LINK标签插入其中
- varl=document.createElement("link"),h=document.getElementsByTagName("head")[0];
- //判断是否为Android
- varisAndroid=navigator.userAgent.indexOf("Android")>-1;
- //添加合适的样式表路径
- l.setAttribute("rel","stylesheet");
- l.setAttribute("href","js/dojox/mobile/themes/"+(isAndroid?"android/android.css":"iphone/iphone.css"));
- //插入标签
- h.insertBefore(l,h.firstChild);
- })();
- //--></mce:script>
!为了强制你的页面使用Android模式,你可以像我们之前使用iPhone主题一样写死Android主题。
现在你的应用程序可以在基于Android平台的设备上加载Android主题了;如果不是Android设备,将会使用iPhone主题。但是我们可能还需要一些针对Android定制的图片。首先,我们将djConfig中的parseOnLoad设置为false:
[javascript] view plain copy- djConfig={
- isDebug:true,
- baseUrl:'./',
- modulePaths:{
- tweetview:'js/tweetview'
- },
- parseOnLoad:false
- };
接下来,我们将添加dojo.ready代码块来改变图片路径并手动告诉Dojo开始进行页面解析。
[javascript] view plain copy- //默认使用iOS图片
- //修正android的图片路径
- dojo.ready(function(){
- //如果使用Android...
- if(isAndroid){
- varimagePath="js/tweetview/resources/images/";
- //更新底部tabbar的图片路径
- dojo.forEach(document.getElementsByClassName("tweetviewRefresh"),function(btn){
- dojo.attr(btn,"iconLoading",imagePath+"androidLoading.gif");
- });
- //为TweetView实例添加新的"iconLoading"属性
- dojo.attr(dojo.byId("tabBar"),"iconBase",imagePath+"iconStripAndroid.png");
- }
- //解析页面!
- dojox.mobile.parser.parse();
- });
!注意我们使用了document.getElementsByClassName并使用dojo.forEach对其结果进行了遍历——还记得么,我们为了缩小代码大小,要避免使用dojo.query,接下来我们还会看到此类情况。
太棒了!我们简单的应用程序可以同时应对Android和iOS设备了。
移除防缓存Meta标签
还记得我们在开发控件时为了防止缓存而使用的META标签么?
[xhtml] view plain copy- <!--防止缓存-->
- <metahttp-equiv="cache-control"content="no-cache">
- <metahttp-equiv="pragma"content="no-cache">
移除上面这些,使得我们的应用程序可以正常进行缓存。
dojox.mobile 和打包
通常我们可以在Dojo Toolkit的 util/build目录下发现打包脚本。 但是, dojox.mobile的打包脚本被放在了dojox.mobile/build目录下。在这些"build.sh"和"build.bat"脚本中,你可以看到以下注释:
[javascript] view plain copy- #Note:
- #Youmayneedtomanuallyapplythefollowingpatchtoyourbuildscript
- #inordertocompletelyremovealltheunusedmodulesfromyourbuild.
- #Thepatchdisablesfindingthedojobasemodulesbeingusedfromthe
- #dependentmoduleswithasimplepatternmatching,whichsometimes
- #unexpectedlypicksupunusedmodules.
- #Forexample,ifyouseequery.jsandNodeList.jsbakedintoyourbuild,
- #whileyouarenotusingthem,thenitisworthtryingthepatch.
- #Thefiletobepatchedisutil/buildscripts/jslib/buildUtil.js.
- #
- #---buildUtil.js-orig
- #+++buildUtil.js
- #@@-1506,7+1506,7@@
- #varaddedResources={};
- #-while((matches=buildUtil.baseMappingRegExp.exec(tempContents))){
- #+while(false&&(matches=buildUtil.baseMappingRegExp.exec(tempContents))){
- #varbaseResource=buildUtil.baseMappings[matches[1]];
- #//Makesurewedonotaddthedependencytoitssourceresource.
在创建你自己的Dojo发布包时,你须要打这个补丁。在你完成之后,记得把它改回来。
!请仔细阅读上面的注释。记得我们如何使用一个自定义方法, _ViewMixin.getElements来取代dojo.query的么?如果我们仅仅需要getElementByClassName的话,我们根本不需要添加dojo.query作为依赖项。这会缩减我们应用程序发布包的大小。
dojox.mobile打包选项
在build.sh和build.bat文件中你还可以看到一些特殊的打包参数。
[javascript] view plain copy- #!/bin/sh
- if[$#-eq0];then
- echo'Usage:buildseparate|single[webkit]'
- echo'separateCreatemobile.jsthatincludesonlydojox.mobile'
- echo'singleCreateasingledojo.jslayerthatincludesdojox.mobile'
- echo'webkitEnablewebkitMobile=trueoption(LosesPCbrowsersupport)'
- exit1
- fi
- optimize=shrinksafe
- profile=mobile
- dir=release-mobile-separate
- webkit=
- if["$1"=="single"];then
- profile=mobile-all
- fi
- if["$1"=="single"];then
- dir=release-mobile-single
- fi
- if["$2"=="webkit"];then
- webkit=webkitMobile=true
- fi
- cd../../../util/buildscripts
- ./build.shprofile=$profileaction=releasecustomDijitBase=trueoptimize=$optimizelayerOptimize=$optimizecssOptimize=commentsreleaseDir=../../$dir/$webkit
- cd../../dojox/mobile/build
我们将选择使用separate委派。但是build文件中有一些硬编码的值是我们不想要的,所以让我们复制该文件中的内容并创建一个我们自己的build-tweetview.sh文件:
[javascript] view plain copy- optimize=shrinksafe
- profile=tweetview
- dir=tweetview-release
- webkit=
- if["$2"=="webkit"];then
- webkit=webkitMobile=true
- fi
- cd../../../util/buildscripts
- ./build.shprofile=$profileaction=releasecustomDijitBase=trueoptimize=$optimizelayerOptimize=$optimizecssOptimize=commentsreleaseDir=../../$dir/$webkit
- cd../../dojox/mobile/build
我们针对tweetview的需求,更新了profile和dir的配置。
TweetView Build Profile
让我们为TweetView创建一个基于mobile-all.profile的Build Profile:
[javascript] view plain copy- dependencies={
- stripConsole:"normal",
- layers:[
- {
- name:"dojo.js",
- customBase:true,
- dependencies:[
- "dojo._base.declare",
- "dojo._base.lang",
- "dojo._base.array",
- "dojo._base.window",
- "dojo._base.event",
- "dojo._base.connect",
- "dojo._base.html",
- "dijit._WidgetBase",
- "dijit._base.manager",
- "dojox.mobile.parser",
- "dojox.mobile"
- ]
- },
- {
- name:"../dojox/mobile/compat.js",
- dependencies:[
- "dijit._base.sniff",
- "dojo._base.fx",
- "dojox.mobile.compat"
- ]
- },
- {
- name:"../tweetview/tweetview-app.js",
- dependencies:[
- "tweetview.TweetView",
- "tweetview.SettingsView",
- "dojox.mobile.TabBar"
- ]
- }
- ],
- prefixes:[
- ["dijit","../dijit"],
- ["dojox","../dojox"],
- ["tweetview","../tweetview"]
- ]
- };
Dojo Toolkit提供的mobile profile包含了我们所需的dojox.mobile.app类,所以我移除了它们。我还为该build添加了一个tweetview-app.js,它包含了TweetView,SeetingsView,和dojox.mobile.TabBar(一个默认情况下,dojox.mobile没有包含的类)。之后tweetview命名空间被添加到了prefixes数组。
执行Build
让我们切换到命令行并使用上面的build profile打包我们的widget:
[javascript] view plain copy- ./build.shsinglewebkit
在build完成之后,可以到js/tweetview-release/dojo/tweetview/directory查看结果:
打包完毕后的目录内容
使用Build
现在可以使用打包好的文件了,打开app.html,更新Dojo路径,并创建一个新的script节点来导入我们打包过的tweetview-app.js。
[javascript] view plain copy- <mce:scriptsrc="js/tweetview-release/dojo/dojo/dojo.js"mce_src="js/tweetview-release/dojo/dojo/dojo.js"></mce:script>
- <mce:scriptsrc="js/tweetview-release/dojo/tweetview/tweetview-app.js"mce_src="js/tweetview-release/dojo/tweetview/tweetview-app.js"></mce:script>
!我们可以使用dojo.require来导入tweetview所需的资源,但是有一些移动操作系统不支持同步XHR,这会导致dojo.require失效,因此在这种情况下,直接导入资源更加可靠。我们应用程序中的requires使用不会发生问题,因为我们已经将所有代码打包,所有需要的依赖项都已经加载进来了。
TweetView 回顾
TweetView完成了!我们已经为我们简单的移动应用程序创建了模板(HTML),样式表(CSS)和代码(JavaScript),并进行了打包!让我们回顾一下我们在创建TweetView中所学到的:
- dojox.mobile下的基本控件
- 如何为dojox.mobile.application定制iOS和Android风格的样式
- 如何以标签形式声明dojox.mobile.widgets和如何使用代码创建这些控件
- 如何使用dojo.io.script和dojo.DeferredList来从Twitter获取JSON格式的内容
- 如何扩展dojox.mobile基本控件
- JavaScript最佳实践背后的策略,同时保证代码紧凑,依赖项最少。
- dojox.mobile应用程序所需的独特打包流程。
我希望在完成这个项目时,你也能对dojox.mobile有同样的感受:dojox.mobile是一个出色的移动应用程序框架,它提供了与移动设备风格吻合的控件和样式主题。dojox.mobile易学、揖扩展,并可以动态加载内容。TweetView,一个基础的具有三个视图的应用程序,通过使用dojox.mobile便能很容易的创建出来!
dojox.mobile 将会变得更好!
dojox.mobile 在Dojo 开发团队的推动下正以惊人的速度成长着,它将为我们提供最佳的移动解决方案。在不久的将来,dojox.mobile会有更多、更高效的控件以及针对设备的各种新功能。希望大家可以花一些时间亲自尝试一下dojox.mobile下的内容,并与整个Dojo社区分享您的经验!
点击这里查看完整的应用程序!
更多相关文章
- 箭头函数的基础使用
- NPM 和webpack 的基础使用
- Python list sort方法的具体使用
- 【阿里云镜像】使用阿里巴巴DNS镜像源——DNS配置教程
- android命令行打包、签名+自动打包器
- Android(安卓)studio中“import org.apache.http.Header; 不可用
- Android(安卓)Lock 使用
- Android下使用Logcat打印信息
- Android(安卓)UI: LinearLayout中layout_weight 属性的使用规则