代码改变世界

编写 iPhone Friendly 的 Web 应用程序 (Part 6 - iUI)

2008-01-07 21:01  Cat Chen  阅读(4600)  评论(15编辑  收藏

iUI是一个针对iPhone Safari的Web开发框架,由Joe Hewitt开发。这位Joe Hewitt曾经参与过Firefox的开发,包括其中的DOM Inspector以及Firebug,后来到了Facebook,为Facebook开发了iPhone专用版本,对iPhone Web开发社区算是作出了巨大贡献。

样式

我们继续说iUI这个框架。这个框架所做的事情,就是提供iPhone Friendly的交互方式与样式。为了简单起见,我们先来说说样式方面,iUI提供的不仅仅是一个CSS文件,基于这个CSS文件你所创建的页面能够符合iPhone的人机界面指引,并且看起来的效果贴近iPhone原生的应用程序,从而降低用户学习门槛,避免你自己设计的Web应用对iPhone操作不友善(例如按钮不够大,手指难以点击)。

交互

至于交互方面,iUI提供一个基于page的换页导航机制。这里所说的page不是一个Web页面,而是一个<body />内的顶级DOM元素,每一个这样的DOM元素都可以作为一个page,同一时间上仅显示一个page。页面上的所有链接,要么导致page转跳,要么导致整个页面转跳。这种转跳有如下几种情况。

转跳

如果链接的href指向的是一个锚点,例如#somePage,那么iUI就会在页面中寻找id="somePage"的page对象,然后进行转跳。

如果链接的href指向的是站内地址,例如/somePage.html,那么iUI就会使用AJAX的方法加载/somePage.html的内容并追加到<body />内,注意,/somePage.html必然是一个文档片段而不可能是完整的XHTML文档,否则把<html />追加到<body />下就是错误的了。追加的内容内可以有多个page,如果其中一个有selected="true"的属性,那么接下来将显示该page,否则显示追加内容中的第一个page。

最后一种情况是指向站内地址,但是有target="_replace"属性。iUI在看到target="_replace"属性后,就会知道该<a />所在的page内直属元素要被删除,并且替换为目标页面的内容。在这里用CSS来解释一下所谓的直属元素,body > ul#somePage > li > a[target="_replace"],这里<li />就是<ul id="somePage />的直属元素了。这种转跳通常用于曾亮加载,例如iPhone内置的Mail打开邮箱后自动加载50封邮件,点击more之后再加载50封,Web界面上就可以通过这种方式实现——一个<ul />内包含51个<li />,前面50个对应50封邮件,最后一个<li />包含<a target="_replace" />的more链接,目标页面就是下50封邮件的<li />

在转跳的时候,iUI提供了一种很好看的效果,你能够看到当前page从屏幕左边移出去,新的page从屏幕右边移进来,好像PowerPoint的某种幻灯片切换动画那样。如果添加了axis="y"属性,page还能够子底向下滚动。

历史记录

AJAX式的页内内容更新不是不好,问题就在于浏览器无法自动保存历史记录,导致前进后退按钮实效。iUI已经解决了这个问题,上述3种转跳中的前两种iUI都会自动创建新的hash以便创建历史记录,hash默认就是#_pageId的形式,如果当前显示的page没有id,那么hash就按照增量自动分配id。

在拥有历史记录之后,用户就可以通过浏览器的后退按钮向前翻页了,此时相当于加载前面的page,iUI知道这是一个后退操作,就会提供反向的滚动效果(自左向右或自上向下)。

如果我访问页面的顺序是A > B > C > D > B,那么历史记录会如何呢?历史记录会变成A > C > D > B,也就是说第一次访问B时B从历史记录中删除并重新添加到最前的位置了。

演示

说了那么多,我们来看看iUI的实战效果吧!又是Facebook或者Digg的iPhone版?不是,我们来看看自己利用iUI开发一个小应用的效果以及成本如何。就在上个周末,我花了不到20小时做了个名为iBaidu的小东西,自动抓取Baidu的搜索结果与排行榜并以iPhone friendly的方式显示出来。以下是发布到YouTube的演示视频:

服务器端使用的技术是Ruby on Rails以及ASP.NET。为什么需要ASP.NET?这是一个很郁闷的问题,因为Baidu是基于GBK的,而RoR的编码转换能力其若无比,我懒得花时间去寻找适合的转码库,因此直接拿了ASP.NET来做抓去代理,抓取的时候顺便做一下编码转换。如果不是编码问题,那么只需要RoR就能轻松完成任务。

小结

在这篇文章中,我们已经看到了如果使用RoR搭配Prototype,不好意思,iUI才对,要设计一个iPhone friendly的Web应用程序是多么地容易,开发过程也相当敏捷。如果你喜欢iPhone开发系列的文章,欢迎订阅: