Dojo mobile TweetView 系列教程之一 —— dojox.mobile入门
作者:David Walsh 翻译:Siqi (siqi.zhong@gmail.com) 原文:Get started with dojox.mobile Web技术飞速更新,而现在Web的趋势也是逐渐向移动设备上迁移。如同其他Web存在的问题一样,Dojo Toolkit已经为你提供了解决方案——dojox.mobile。dojox.mobile是一个由controllers、基于CSS3的主题以及一些外观与你的移动设备契合的widgets组成的。有了dojox.mobile,你可以轻松的创建智能、灵活、跨平台的移动Web应用程序。本文是dojox.mobile系列教程的第一篇。在这个系列中,我们将创建一个很棒的基于Twitter的web应用程序“TweetView”。在我们开始之前,先让我们学习一下怎么使用dojox.mobile。 难度:初学者 版本:1.6 系列:TweetView dojox.mobile简介dojox.mobile是Dojo Toolkit根据用户对移动Web应用程序的需要而量身定制的。dojox.mobile的架构特点是轻量、灵活以及可扩展。同时dojox.mobile也模仿了iOS和Andriod设备的界面,因此你用dojo.mobile创建出的应用程序将带给你的用户无缝的体验。dojox.mobile的核心特点包括:
下面你可以看到dojox.mobile在不同平台大致的样子:
有了dojox.mobile,我们将创建一个简单的移动web应用程序:TweetView。 !这些界面也可以在桌面浏览器使用,但还是推荐花点时间在你的iOS和Andriod设备上试一下每一个样例。你会对dojox.mobile的widgets和CSS主题感到映像深刻的。 构建你的移动页面像任何其他移动应用程序一样,页面结构的设计是很重要的。而dojox.mobile基本不需要任何特殊的页面结构,你只需要加入几项关键的东西就可以了:
!你可以参考Mobile Safari Supported Meta Tags 来学习更多关于META标签的知识。 你可以使用下面的模板开始创建你的应用程序:
将dojox.mobile加入你的移动页面dojox.mobile看上去就像一个简化、定制版的Dijit。添加dojox.mobile到你的页面,你需要:
接下来我们将对每一部分分别进行讲解。 主题像前面提到的,dojox.mobile提供了两种主题:iPhone和Andriod。iPhone主题提供适用于iPhone/iPod和iPad设备的样式表。dojo.mobile引入了一个兼容层来使得这两种iOS设备最大限度地兼容。同时针对非Webkit内核的设备,dojox.mobile 也提供了一套特殊的样式表。为了简化我们的页面,我们将使用iPhone主题:
!dojox.mobile不会侦测设备的种类来导入设备对应的主题。一个很好的做法是在服务器端侦测设备的种类从而向页面写入对应的样式表。HTML页面仅仅用来创建widgets,这样页面就不会受到设备种类的影响了。 导入Dojo和dojox.mobile使用传荣的SCRIPT标签导入Dojo
导入dojox.mobile的最后一步是使用一个requireIf语句来确保当你的客户端不是WebKit内核时为你提供良好的兼容。(比如说你在使用Firefox浏览站点):
!dojox.mobile暂不支持data-dojo-type和data-dojo-props这些Dojo 1.6中新的widget声明属性。期待在将来的把本中这些属性在dojox.mobile中得到支持。当前版本中,请暂时使用dojoType和其他内联属性。 dojox.mobile.compat加载额外的样式表和JavaScript来确保dojox.mobile可以使用基于JavaScript的动画效果来解决无法使用Webkit内核提供的CSS3动画效果导致widget无法工作的问题。 !dojox.mobile.compat并不是必须的。但是使用它是一个很好的习惯。它没有被加入到dojox.mobile的核心是为了尽可能的保持dojo.mobile核心的紧凑。 现在我们加载了iPhone主题和dojox.mobile资源,接下来我们就可以往页面上添加widget啦! 创建视图(views)和widgets
如你所见,创建一个可以使用dojox.mobile的页面就是那么简单。而向页面添加dojox.mobile的widget也一点不难。在我们开始创建widgets之前,让我们先看一下dojox.mobile提供哪些widget:
!记住所有widgets的样式都和设备上的控件相似(在你提供的样式表中定制了)。你肯定会想要让你的widget和图标与你将要支持的设备风格一致。 现在你已经知道了一些dojox.mobile内置的widget了,我们这就创建一个带有标题栏,一些列表和一个开关的视图:
!当用户点击“Carrier”元素并切换到“General”视图(或除了主页外任何其他视图),一个iPhone风格的“back”按钮将显示在左上角。而你并不需要在你的视图中添加一个“Back”按钮,你只需要在子视图的Heading(标题栏) widget中设置“back”属性即可。 上面我们创建了一个简单的视图。当然,大多数应用程序需要更多的视图。现在就让我们为上面的列子创建“general”视图和“about”视图。
演示 !请注意widget使用的自定义属性。完整的自定义属性列表可以参见dojox.mobile API docs for each widget 。同时请注意,标签形式的widget对搜索引擎更友好。 恭喜,你已经创建了你第一个dojox.mobile web应用程序!dojox.mobile让创建移动应用程序中的基本元素变得轻而易举!以后你的移动应用程序变得更加复杂,请记住dojox.mobile提供基本的主题,widgets和创建多视图应用程序的方法。 dojox.mobile相关资源
继续学习!现在我们已经学习了dojox.mobile的基础,本系列的下面几篇教程将介绍如何创建一个动态的,数据驱动的移动应用程序“TweetView”。TweetView将会用到很多dojox.mobile widget,并且将兼容Android和iOS设备。该应用程序将从Twitter获取微博信息并格式化后漂亮地输出给用户。 TweetView系列中文教程Dojo mobile TweetView 系列教程之一 —— dojox.mobile入门 Dojo mobile TweetView 系列教程之二 —— TweetView 启程 Dojo mobile TweetView 系列教程之三 —— Tweets和Mentions视图 Dojo mobile TweetView 系列教程之四 —— 创建Setting视图 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |