使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用
日期:2012-8-14 来源:GBin1.com
在线演示 本地下载
随着科技的进步,越来越多的javascript类库开发出了面对移动设备的类库,例如,jQuery Mobile,Secha touch等, 随着Dojo最新版本1.7的发布,同样的也带来了Dojo版本的移动开发框架Dojox/mobile。这套框架使用基于controller和CSS3主题的架构,帮助你快速的开发智能,灵活并且跨平台的移动设备web应用。在今天我们这篇文章,将介绍如何使用Dojox/mobile来开发一个简单的移动网站应用。记得前段时间我们发布的使用jQuery创建iphone风格的导航吧, 这里我们使用dojox/mobile也实现一个类似的效果。
关于dojox/mobile相关特性:
轻量级,依赖性非常小提供了iOS,Andriod和Blackberry的主题可供你选择使用基于CSS3的动画来展示提供了iOS,Andriod和Blackberry不同风格的组件如果不支持CSS3的话,会使用javascript作为fallback 支持横竖屏幕切换完整的组件支持,无须其它新加入Dojo1.7中,最棒的地方在于能够自动侦测客户端并且显示正确的主题,当然你可以关闭这个功能新加入Dojo1.7中一些组件,提示条,悬浮窗口,组合框,可扩展textarea,分页,滑动块等,完整信息请查看:http://livedocs.dojotoolkit.org/releasenotes/1.7#mobile主要页面结构和一般web应用类似,dojox/mobile也精心设计了相关结构。包括:
DOCTYPEMETA标签Body元素代码结构如下:
<!DOCTYPE html> <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>dojox/mobile Demo</title> <!-- dojo javascript code and CSS code --> </head> <body> <!-- mobile应用内容 --> </body> </html> ?
接下来我们添加dojo js,如下:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true"></script><script type="text/javascript">require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!"], function(parser) {parser.parse();});</script>
以上代码中,我们引用了dojo类库,并且使用AMD方法,加载了dojox/mobile和相关其它类库。
其中dojox/mobile/parser和dojox/mobile是必须包含的。 其次加载了dojox/mobile/deviceTheme,用来生成不同主题。最后我们加载dojox/mobile/compact,使用它来保证如果不支持css3动画,将使用javascript来替代,这个不是必须要的,但是为了不同设备的兼容性,我们还是需要添加。
视图和组件处理如下:
View是类似页面的定义Scrolling view是可滚动的页面Button:按钮Listitem:列表内容Switch:开关组件更多请查看文档下面代码我们创建了一个简单view:
<div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true"><h1 data-dojo-type="dojox.mobile.Heading">Dojo/Mobile GBin1.com</h1><ul data-dojo-type="dojox.mobile.RoundRectList"><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'article'">最新文章</li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'tutorial'">专题教程</li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'technology'">技术开发</li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'icon'">设计素材</li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg'">阅读配置<div class="mblItemSwitch" data-dojo-type="dojox.mobile.Switch"></div></li></ul></div>
这里定义了dojo-type,dojo-props,大家可以看到和jQuery mobile类似,使用data属性定义不同内容。
完整代码如下:
<!DOCTYPE html><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" /><meta name="article" id="articlelink" content="/technology/jquerymobile/20120814-dojo-mobile/" /><title>dojox/mobile Demo</title><script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true"></script><script type="text/javascript">require(["dojox/mobile/parser", "dojox/mobile", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojo/domReady!"], function(parser) {parser.parse();});</script></head><body><div id="home" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true"><h1 data-dojo-type="dojox.mobile.Heading">Dojo/Mobile GBin1.com</h1><ul data-dojo-type="dojox.mobile.RoundRectList"><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'article'">最新文章</li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'tutorial'">专题教程</li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'technology'">技术开发</li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg', rightText:'查看', moveTo: 'icon'">设计素材</li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="icon:'img/icon.jpg'">阅读配置<div class="mblItemSwitch" data-dojo-type="dojox.mobile.Switch"></div></li></ul></div><div id="tutorial" data-dojo-type="dojox.mobile.View"><h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页', moveTo:'home'">专题教程</h1><ul data-dojo-type="dojox.mobile.RoundRectList"><li data-dojo-type="dojox.mobile.ListItem"><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-introduction">GBin1专题之HTML5教程 - 第一篇:HTML5介绍</a></li><li data-dojo-type="dojox.mobile.ListItem"><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-new-elements">GBin1专题之HTML5教程 - 第二篇:HTML5元素</a></li><li data-dojo-type="dojox.mobile.ListItem"><a href="http://www.gbin1.com/tutorials/html5-tutorial/html5-video">GBin1专题之HTML5教程 - 第三篇:HTML5 Video元素</a></li></ul></div><div id="technology" data-dojo-type="dojox.mobile.View"><h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页', moveTo:'home'">技术开发</h1><ul data-dojo-type="dojox.mobile.RoundRectList"><li data-dojo-type="dojox.mobile.ListItem" ><a href="http://www.gbin1.com/technology/html/20120521html5-tutorials-new-feature">强烈推荐:GBin1专题教程之HTML5新特性系列</a></li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: '2h 40m'"><a href="http://www.gbin1.com/technology/html/20120417html5draganddrop">分享一个HTML5的drag and drop API实现的图片拖拽分组效果</a></li></ul></div><div id="icon" data-dojo-type="dojox.mobile.View"><h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页', moveTo:'home'">设计素材</h1><ul data-dojo-type="dojox.mobile.RoundRectList"><li data-dojo-type="dojox.mobile.ListItem" ><a href="http://www.gbin1.com/tools/icon/20120706freebieuikit">免费资源下载:两套超棒的UI界面设计素材集</a></li><li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: '2h 40m'"><a href="http://www.gbin1.com/tools/icon/20120705-dark-searchbox">免费资源下载:暗色色系的超棒搜索框和下拉菜单UI欣赏</a></li></ul></div><div id="article" data-dojo-type="dojox.mobile.View"><h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="back:'首页', moveTo:'home'">文章内容</h1><ul data-dojo-type="dojox.mobile.RoundRectList"><li data-dojo-type="dojox.mobile.ListItem" > 请参考在线演示查看效果,希望大家喜欢这个简单的效果!</li></ul></div></body></html>
相对jQuery来说,Dojox/mobile还比较简单,支持的主题比较少,配置好像更简单。
如果你用不同的移动设备查看演示,你可以看到不同的主题。
希望大家喜欢dojo mobile,你如果有任何想法,请给我们留言,谢谢!
来源:使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用