Spiga

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

2008-01-07 21:01 by Cat Chen, 4231 visits, 收藏, 编辑

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开发系列的文章,欢迎订阅:

Add your comment

15 条回复

  1. #1楼 电视机9号      2008-01-07 23:06
    RoR的编码转换能力确实不强;
    youtube加载速度超级慢,唉,还是明天到办公室的千兆网看了。
    周末20hs,真的很努力,我那Flex研究任务这周也要完成啊!
     回复 引用 查看   
  2. #2楼 怪怪      2008-01-08 05:44
    小手看起来挺嫩哈哈 :P
     回复 引用 查看   
  3. #3楼[楼主] Cat Chen      2008-01-08 08:51
    @怪怪
    我faint……你竟然关注这个。你要知道这是涂了n多润手霜之后的效果,北京的干燥实在让人顶不顺。
     回复 引用 查看   
  4. #4楼 LikeCode      2008-01-08 09:39
    cat,很感谢你无私的分享这么多篇关于IPHONE之WEB开发的文章,但是,在中国,不象US那样全民流行APPLE文化,所以使用IPHONE的用户还相对较少的,所以我认为CAT你写的这类文章可能受关注的不多.

    可以的话,我很希望CAT你能分享一些关于ASP.NET WAP的开发方面的文章,我想,这更通用的开发文章会更受欢迎.

    以上只是竹子个人想法,若有不对,还请原谅.

    PS:干燥的天气实在是让人顶不顺!~!~!~!~~!最讨厌冬天!~!~!
     回复 引用 查看   
  5. #5楼[楼主] Cat Chen      2008-01-08 10:14
    @电视机9号
    对了,你知道什么好用的Ruby编码转换库吗?至少能够在GBK和UTF-8之间转换。
     回复 引用 查看   
  6. #6楼[楼主] Cat Chen      2008-01-08 10:17
    @LikeCode
    其实ASP.NET Mobile好像也是完全被人忽略的东西,在ASP.NET 2.0中干脆就把template从VS2005剥离了,要用的话还必须另外装。

    所谓的WAP,是个非常尴尬的词,其实直接说清楚是HTML还是WML好了。WAP的话,大多数时候仅仅指其中一种,你又不知道是哪个。ASP.NET Mobile还好一些,自动根据客户端选择生成HTML或WML,但这又造成其它问题了。
     回复 引用 查看   
  7. #7楼 电视机9号      2008-01-08 21:10
    @Cat Chen
    Iconv.conv(toendocing, fromencoding, str)

    windows下面iconv 的安装

    http://www.dave.burt.id.au/ruby/iconv.zip下载iconv安装包, 按照如下方式放置包中的文件就OK了

    iconv.so -> ruby\lib\ruby\1.8\i386-mswin32\
    iconv.dll -> windows\system32\
    charset.dll -> windows\system32\

    更详细的说明见安装包中的README

    这个转换库我在今天同事给我看解决redmine中文文件名的文件下载问题的代码时发现的。应该用得最多就是这个库了。
     回复 引用 查看   
  8. #8楼[楼主] Cat Chen      2008-01-09 01:39
    @电视机9号
    谢谢!我的开发机器是Mac,部署机器是Linux,可以使用iconv吗?它依赖于Windows内建的编码转换机制吗?
     回复 引用 查看   
  9. #9楼 电视机9号      2008-01-09 08:57
    @Cat Chen
    不依赖于Windows内建的编码转换机制,Mac的话应该也有的吧,你找找看,Linux默认就带了的。
     回复 引用 查看   
  10. #10楼 Cat Chen (Chinese)[未注册用户]2008-01-09 13:27
    @电视机9号
    这东西不能通过gem来安装?
     回复 引用   
  11. #11楼[楼主] Cat Chen      2008-01-09 14:19
    @电视机9号
    对了,我这东西想要扔到DreamHost的空间上面,这种租用的空间能够用iconv吗?
     回复 引用 查看   
  12. #12楼 电视机9号      2008-01-09 23:08
    不能通过gem来安装吧,它是服务器平台的东西。Iconv类是访问Open Group 的iconv函数库的接口,仅当安装有Libiconv时才适用,而DreamHost应该是可以用iconv的。
     回复 引用 查看   
  13. #13楼 电视机9号      2008-01-09 23:09
    如果你发现在DH下不能用,那就让管理员装libiconv吧。
     回复 引用 查看   
  14. #14楼[楼主] Cat Chen      2008-01-10 00:29
    @电视机9号
    我试试看。谢谢。
     回复 引用 查看   
  15. #15楼 Evernory      2008-06-23 23:22
    最近也在搞iPhone Web开发。看了你的文章收益匪浅啊
     回复 引用 查看