posts - 138, comments - 1881, trackbacks - 97, articles - 13
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

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

Feedback

#1楼   回复  引用  查看    

2008-01-07 23:06 by 电视机9号      
RoR的编码转换能力确实不强;
youtube加载速度超级慢,唉,还是明天到办公室的千兆网看了。
周末20hs,真的很努力,我那Flex研究任务这周也要完成啊!

#2楼   回复  引用  查看    

2008-01-08 05:44 by 怪怪      
小手看起来挺嫩哈哈 :P

#3楼[楼主]   回复  引用  查看    

2008-01-08 08:51 by Cat Chen      
@怪怪
我faint……你竟然关注这个。你要知道这是涂了n多润手霜之后的效果,北京的干燥实在让人顶不顺。

#4楼   回复  引用  查看    

2008-01-08 09:39 by LikeCode      
cat,很感谢你无私的分享这么多篇关于IPHONE之WEB开发的文章,但是,在中国,不象US那样全民流行APPLE文化,所以使用IPHONE的用户还相对较少的,所以我认为CAT你写的这类文章可能受关注的不多.

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

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

PS:干燥的天气实在是让人顶不顺!~!~!~!~~!最讨厌冬天!~!~!

#5楼[楼主]   回复  引用  查看    

2008-01-08 10:14 by Cat Chen      
@电视机9号
对了,你知道什么好用的Ruby编码转换库吗?至少能够在GBK和UTF-8之间转换。

#6楼[楼主]   回复  引用  查看    

2008-01-08 10:17 by Cat Chen      
@LikeCode
其实ASP.NET Mobile好像也是完全被人忽略的东西,在ASP.NET 2.0中干脆就把template从VS2005剥离了,要用的话还必须另外装。

所谓的WAP,是个非常尴尬的词,其实直接说清楚是HTML还是WML好了。WAP的话,大多数时候仅仅指其中一种,你又不知道是哪个。ASP.NET Mobile还好一些,自动根据客户端选择生成HTML或WML,但这又造成其它问题了。

#7楼   回复  引用  查看    

2008-01-08 21:10 by 电视机9号      
@Cat Chen
Iconv.conv(toendocing, fromencoding, str)

windows下面iconv 的安装

http://www.dave.burt.id.au/ruby/iconv.zip" target="_new">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楼[楼主]   回复  引用  查看    

2008-01-09 01:39 by Cat Chen      
@电视机9号
谢谢!我的开发机器是Mac,部署机器是Linux,可以使用iconv吗?它依赖于Windows内建的编码转换机制吗?

#9楼   回复  引用  查看    

2008-01-09 08:57 by 电视机9号      
@Cat Chen
不依赖于Windows内建的编码转换机制,Mac的话应该也有的吧,你找找看,Linux默认就带了的。

#10楼   回复  引用    

2008-01-09 13:27 by Cat Chen (Chinese)[未注册用户]
@电视机9号
这东西不能通过gem来安装?

#11楼[楼主]   回复  引用  查看    

2008-01-09 14:19 by Cat Chen      
@电视机9号
对了,我这东西想要扔到DreamHost的空间上面,这种租用的空间能够用iconv吗?

#12楼   回复  引用  查看    

2008-01-09 23:08 by 电视机9号      
不能通过gem来安装吧,它是服务器平台的东西。Iconv类是访问Open Group 的iconv函数库的接口,仅当安装有Libiconv时才适用,而DreamHost应该是可以用iconv的。

#13楼   回复  引用  查看    

2008-01-09 23:09 by 电视机9号      
如果你发现在DH下不能用,那就让管理员装libiconv吧。

#14楼[楼主]   回复  引用  查看    

2008-01-10 00:29 by Cat Chen      
@电视机9号
我试试看。谢谢。

#15楼   回复  引用  查看    

2008-06-23 23:22 by Evernory      
最近也在搞iPhone Web开发。看了你的文章收益匪浅啊



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1029500




相关文章:

相关链接: