使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用

最新推荐文章于 2020-07-23 16:52:45 发布
最新推荐文章于 2020-07-23 16:52:45 发布
阅读量1.5k 收藏
点赞数
文章标签： dojo web html5 javascript blackberry jquery

日期：2012-8-14 来源：GBin1.com

使用最新版本Dojo1.7的dojox/mobile开发移动设备web应用

在线演示 本地下载

随着科技的进步，越来越多的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>
 
传智播客收集整理，关注java培训，提供java入门教程、java程序设计教程、java视频教程下载。
goitcast
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
提高基于Dojo的Web2.0应用程序的性能
03-02
本文内容包括：Web2.0与Dojo介绍解决Dojo性能问题的常见技巧检测性能瓶颈的工具小结参考资料Web2.0应用程序最注重的一个方面就是用户体验，用户希望使用的是一个快速稳定的Web2.0应用。而基于Dojo的Web2.0应用经常...
使用Sahi测试Dojo应用
03-02
在开始介绍Sahi之前，我们一起来看看在开发Web自动化测试（特指Web2.0应用）时常面临的两大技术问题。根据个人经验，以下几点会给页面元素的识别带来障碍1.页面DOM树随着产品版本升级频繁发生变化。2.页面元素没有id...
Dojo mobile TweetView 系列教程之一 —— dojox.mobile入门
Dojo中文博客
04-13 1万+
Web技术飞速更新，而现在Web的趋势也是逐渐向移动设备上迁移。如同其他Web存在的问题一样，Dojo Toolkit已经为你提供了解决方案——dojox.mobile。dojox.mobile是一个由controllers、基于CSS3的主题以及一些外观与你的移动设备契合的wi
Dojo mobile TweetView 系列教程之五 —— TweetView: Android，打包，回顾
Dojo中文博客
06-20 4738
作者：David Walsh翻译：Siqi （siqi.zhong@gmail.com）原文：TweetView: Android, Packaging, and Review 在前两篇教程Dojo mobile TweetView 系列教程之三 —— Tweets和Mentions视图 与 Dojo mobile TweetView 系列教程之四 —— 创建
Dojo Mobile：iPhone/Android的Web应用开发利器
热门推荐
Dojo中文博客
08-03 1万+
Dojo Mobile框架是一套移动终端的Web应用开发框架，是最新发布的dojo1.5 中的一个子项目。Dojo Mobile主要面向手持设备上的Web富客服端应用开发，提供了iPhone和android两套主题，使得基于iPhone或者Android的Web应用具有手机本地应用的外观和效果，而同时也给了开发者更多的主导权
dojo 移动应用_编写定制的Dojo应用程序
cuyi7076的博客
06-26 467
我们最近完成了Web 2.0 Dojo原型的开发。 该原型非常广泛，为信息管理提供了新功能。 我们与用户体验团队合作，以确保应用程序可用。 屏幕是由图形Web设计人员设计的，具有专业的外观。 本文记录了我们对该原型的Web 2.0开发的经验。 因为Web 2.0是相对较新的，所以在需要时可能很难入门或不知道如何进行自定义。 我们的Dojo应用程序没有提供开箱即用的外观。 我们需要一个与我们...
在ApacheTuscany上开发基于SCA的Web2.0应用
03-02
如今在企业级应用中，Ajax、Widget、RSS/Atom等Web2.0技术正在得到越来越广泛的使用，这些技术不但产生了良好的用户体验，同时也来越来越多地影响着许多前端系统的编程模式和系统架构。许多传统的JavaEE产品和框架也...
Dojo Mobile开发学习篇
messageloop3的专栏
06-10 3352
Dojo Mobile开发 App技术开发QQ群：347072638 技术咨询，APP定制开发联系邮箱：messageloop@qq.com 时代在演变，技术在革新，不管你接受不接受。初识Dojo Mobile，感觉和JQuery Mobile、PhoneGap等一系列移动应用WebApp框架相似，主要是基干HTML5+CSS3+JS的一个实现，针对不同平台(iPhone/i
Dojo mobile TweetView 系列教程之四 —— 创建Setting视图
Dojo中文博客
06-10 4701
作者：David Walsh翻译：Siqi （siqi.zhong@gmail.com）原文：TweetView: Creating the Settings View 在上一篇教程Dojo mobile TweetView 系列教程之三——Tweets和Mentions视图 中，我们夯实了TweetView应用程序的文件结构，回顾了创建TweetView的目标并通过编写tweetview._Vi
Grails 中文参考手册
05-14
1. 简介 2. 起步 2.1 下载并安装Grails 2.2 创建一个Grails应用 2.3 Hello World示例 2.4 使用IDE 2.5 规约配置 2.6 运行Grails应用 2.7 测试Grails应用 2.8 部署Grails应用 2.9 所支持的Java EE容器 2.10 创建工件 2.11 生成Grails应用 3. 配置 3.1 基本配置 3.1.1 内置选项 3.1.2 日志 3.2 环境 3.3 数据源 3.3.1 数据源和环境 3.3.2 JNDI数据源 3.3.3 自动数据库移植 3.4 外部配置 3.5 定义版本 4. 命令行 4.1 创建Gant脚本 4.2 可复用的Grails脚本 4.3 脚本中的事件 4.4 Ant和Maven 5. 对象关系映射(GORM) 5.1 快速指南 5.1.1 基本的CRUD 5.2 在GORM中进行领域建模 5.2.1 GORM中的关联 5.2.1.1 一对一 5.2.1.2 一对多 5.2.1.3 多对多 5.2.2 GORM的组合 5.2.3 GORM的继承 5.2.4 集合、列表和映射 5.3 持久化基础 5.3.1 保存和更新 5.3.2 删除对象 5.3.3 级联更新和删除 5.3.4 立即加载和延迟加载 5.3.4 悲观锁和乐观锁 5.4 GORM查询 5.4.1 动态查找器 5.4.2 条件查询 5.4.3 Hibernate查询语言 5.5 高级GORM特性 5.5.1 事件和自动实现时间戳 5.5.2 自定义ORM映射 5.5.2.1 表名和列名 5.5.2.2 缓存策略 5.5.2.3 继承策略 5.5.2.4 自定义数据库标识符 5.5.2.5 复合主键 5.5.2.6 数据库索引 5.5.2.7 乐观锁和版本定义 5.5.2.8 立即加载和延迟加载 5.6 事务编程 5.7 GORM和约束 6. Web层 6.1 控制器 6.1.1 理解控制器和操作 6.1.2 控制器和作用域 6.1.3 模型和视图 6.1.4 重定向和链 6.1.5 控制器拦截器 6.1.6 数据绑定 6.1.7 XML和JSON响应 6.1.8 上传文件 6.1.9 命令对象 6.2 Groovy Server Pages 6.2.1 GSP基础 6.2.1.1 变量和作用域 6.2.1.2 逻辑和迭代 6.2.1.3 页面指令 6.2.1.4 表达式 6.2.2 GSP标签 6.2.2.1 变量和作用域 6.2.2.2 逻辑和迭代 6.2.2.3 搜索和过滤 6.2.2.4 链接和资源 6.2.2.5 表单和字段 6.2.2.6 标签作为方法调用 6.2.3 视图和模板 6.2.4 使用Sitemesh布局 6.3 标签库 6.3.1 简单标签 6.3.2 逻辑标签 6.3.3 迭代标签 6.3.4 标签命名空间 6.4 URL映射 6.4.1 映射到控制器和操作 6.4.2 嵌入式变量 6.4.3 映射到视图 6.4.4 映射到响应代码 6.4.5 映射到HTTP方法 6.4.6 映射通配符 6.4.7 自动重写链接 6.4.8 应用约束 6.5 Web Flow 6.5.1 开始和结束状态 6.5.2 操作状态和视图状态 6.5.3 流执行事件 6.5.4 流的作用域 6.5.5 数据绑定和验证 6.5.6 子流程和会话 6.6 过滤器 6.6.1 应用过滤器 6.6.2 过滤器的类型 6.6.3 过滤器的功能 6.7 Ajax 6.7.1 用Prototype实现Ajax 6.7.1.1 异步链接 6.7.1.2 更新内容 6.7.1.3 异步表单提交 6.7.1.4 Ajax事件 6.7.2 用Dojo实现Ajax 6.7.3 用GWT实现Ajax 6.7.4 服务端的Ajax 6.8 内容协商 7. 验证 7.1 声明约束 7.2 验证约束 7.3 客户端验证 7.4 验证和国际化 8. 服务层 8.1 声明式事务 8.2 服务的作用域 8.3 依赖注入和服务 8.4 使用Java的服务 9. 测试 9.1 单元测试 9.2 集成测试 9.3 功能测试 10. 国际化 10.1 理解信息绑定 10.2 改变Locales 10.3 读取信息 11. 安全 11.1 预防攻击 11.2 字符串的编码和解码 11.3 身份验证 11.4 关于安全的插件 11.4.1 Acegi 11.4.2 JSecurity 12 插件 12.1 创建和安装插件 12.2 理解插件的结构 12.3 提供基础的工件 12.4 评估规约 12.5 参与构建事件 12.6 参与运行时配置 12.7 运行时添加动态方法 12.8 参与自动重载 12.9 理解插件加载的顺序 13. Web服务 13.1 REST 13.2 SOAP 13.3 RSS和Atom 14. Grails和Spring 14.1 Grails的支柱 14.2 配置其他Bean 14.3 通过Beans DSL运行Spring 14.4 配置属性占位 14.5 配置属性重载 15. Grails和Hibernate 15.1 通过Hibernate注释进行映射 15.2 深入了解 16. 脚手架
Grails实战教程-整合版
06-13
现如今，基于Java的网站开发明显过于复杂，远超实际工作需要。在Java领域中，大部分的网站开发框架也没有严格的遵循“可重用”原则。 动态框架如Rails，Django和TurboGears等的出现，为Java网站开发提供了新思路，Grails就是基于这种新思路构建而成的。Grails大大降低了Java领域中网站开发的复杂度，它建立在已有技术如Spring和Hibernate之上。简单理解，Grails是一个框架，特点是整合先进技术，本质是专注抱大腿。哈哈，开个小玩笑，Grails可不是只有那么简单。 Grails通过其核心技术及扩展插件使网站开发中的很多难题都得以解决，如果非要列一个清单的话，主要应包括： 一个基于Hibernate且易于使用的对象关系映射（ORM）层 一个被称作GSP的页面展示技术 一个基于Spring MVC的控制器层 一个基于Gradle的交互式命令行环境 一个内嵌的且已配置为热部署的Tomcat服务器 Spring的依赖注入技术 使用Spring的MessageSource实现国际化（i18n） 一个基于Spring事务抽象的事务层 借助功能强大的Groovy
grails-用户手册
09-26
全面讲述了关于GRAILS的用法、以及能够实现的强大功能
01-08
不管对于初学者，还是高级编程人员，这个文件都是一个非常好的助手，本人也是在学习的过程中发现的，而且从中学到了很多东西，希望对大家有帮助。Grails是一个full-stack框架，它借助于核心技术与相关的插件（plug-in）来解决Web开发中方方面面的问题
dojo mobile_使用Dojo Mobile构建图形KPI仪表板应用程序
cuxiong8996的博客
06-29 114
存档日期：2019年5月14日 | 首次发布：2015年4月20日 Dojo Mobile可以极大地减少您的移动开发时间，同时创建直观，丰富的视觉效果，可以在更流行的移动设备上很好地缩放。 在本教程中，学习如何使用Dojo Mobile的图表和计量库通过移动KPI应用程序将组织的关键绩效指标传递给业务用户和经理。 此内容不再被更新或维护。 全文以PDF格式“按原样”提供。 随着技术的飞...
dojo mobile 学习1
一路追寻的专栏
09-02 104
近来学习dojo mobile，贴些学习资料。 Dojo Mobile功能结构介绍 以功能性来说，Dojo Mobile开发框架包含以下内容： 一个非常轻量级的控件解释器，仅针对mobile控件. 在以WebKit为内核的浏览器上，大量使用CSS3实现与iPhone和Android本地程序类似的特效;同时也支持非WebKit内核的手机浏览器，使用dojo自带的dojo.animate...
Dojo Mobile 1.7入门
weixin_33716557的博客
07-09 143
最新版的移动 Web 开发框架 Dojo Mobile 1.7，是 Dojo Toolkit 的一个扩展。本文将使您了解如何从主干网址下载 Dojo 1.7，以及如何在您的应用程序中使用 Dojo Mobile。您还将探索它提供的各种小部件和组件，学习如何使用 PhoneGap 将 Web 应用程序包装在原生应用程序中。 简介移动 Web 使用量正呈指数型增长。随着更多的人习...
DOJO中tab套tab自适应高度
zhousheng193的专栏
01-24 148
在项目中遇到TabContainer(tab1)中再嵌套一个TabContainer(tab2)，问题来了，tab1不能自适应tab2的高度 如下图所示：  其实修改&lt;div id="plainTabContainer" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='doLayout:false, style:"...
grails框架结构和前辈总结的经验
qq690452074的专栏
07-23 538
grails-app- Groovy源文件的顶级目录 conf- 配置文件目录 controllers- 控制器目录（MVC模型中的C） domain- 领域模型目录（MVC模型中的M） i18n- 国际化目录，用来支持i18n services- 服务目录 taglib- 标签库目录 views- 视图GSP目录（MVC中的V） scripts- Gant脚本目录src- 源文件目录 groovy- 其他的Groovy源文件目录 java- 其他的Java源文件...
dojo Datagrid 实现数据清空功能
最新发布
05-31
"dojox/grid/DataGrid", "dojo/domReady!"], function(lang, declare, ItemFileWriteStore, DataGrid){ var data = { identifier: "id", items: [ { id: 1, name: "John Doe", age: 32 }, { id: 2, name: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值