使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用
安承教
使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用
2012-08-25 14:36 0人阅读 评论(0) 收藏 编辑 删除
日期：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也精心设计了相关结构。包括：
DOCTYPE
META标签
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> 传智播客收集整理，关注[url=http://java.itcast.cn/java/course/androidadvanced.shtml]java培训[/url]，提供[url=http://java.itcast.cn/java/video.shtml]java入门教程[/url]、[url=http://java.itcast.cn]java程序设计教程[/url]、[url=http://java.itcast.cn/java/video.shtml]java视频教程下载[/url]。
2012-08-25 14:36 0人阅读 评论(0) 收藏 编辑 删除
日期：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也精心设计了相关结构。包括：
DOCTYPE
META标签
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> 传智播客收集整理，关注[url=http://java.itcast.cn/java/course/androidadvanced.shtml]java培训[/url]，提供[url=http://java.itcast.cn/java/video.shtml]java入门教程[/url]、[url=http://java.itcast.cn]java程序设计教程[/url]、[url=http://java.itcast.cn/java/video.shtml]java视频教程下载[/url]。
类似资料：