向客户机显示iPhone内容
使用 iUI 和 iPhone 列表结构
iPhone 和 iPod touch 使 Mobile Safari 成为风靡美国的手机浏览器。虽然使用 Mobile Safari 呈 现普通 Web 页面绰绰有余,但是许多 Web 开发人员都创建了针对 iPhone 的应用程序版本。本文是 “ 使用 Ruby on Rails 和 Eclipse 开发 iPhone 应用程序” 系列的第 2 部分,介绍了将下钻(drill- down)列表作为导航方法的常见用途。
本系列的 第 1 部分 采用了一个现有的 Ruby on Rails Web 应用程序,然后对它进行增强,供 iPhone 用户使用。第 1 部分集中讲解必要的客户端支持,这种支持允许向 iPhone 用户发送不同的内容 ,并允许接受方选择特定的内容,然后全屏显示该站点。第 2 和第 3 部分集中讲解了实际发送给用户的 内容,以及如何使这些内容符合 iPhone 或 iPod touch 用户的期望。第 2 部分集中讲解将下钻列表作 为导航方法的常见用途,第 3 部分集中讲解表单、分组及其他更高级的特性。
在本文中,您将使用层叠样式表(CSS)和 JavaScript 库 iUI 处理 iPhone 内容。iUI 库拥有与 Apple 的 iPhone 人机界面指南(human-interface guidelines)相匹配 CSS 类,以及处理模仿原始 iPhone OS 应用程序界面的向侧面滑动(sideswipe)效果的 JavaScript。然而,我们通常不希望在应用 程序中使用 iUI,所以我将讨论一些处理这些通用元素的实用 CSS 和 JavaScript。与出色的 Rails 实 践一致,我为 Ruby helper 方法的通用 iUI 模式构造了 HTML。这些方法绑定在一个 Rails 插件中,可 以下载并添加到任何 Rails 应用程序。
您将继续基于 第 1 部分 使用的 Soups OnLine 示例进行构建。Soups OnLine 是我的著作 Professional Ruby On Rails 中的一个示例,同时也是一个列出了 “汤的烹饪方法” 的站点。在多数 情况下,这个站点的具体细节与本文没有多大关系。整合 iPhone 界面所需要的步骤与 Soups OnLine 示 例的具体细节没有什么关联。最重要的细节是这个应用程序(由于保留了早期的 iPhone 形式)包含一个 控制器 RecipesController,它通过 index 方法处理食谱清单。在 第 1 部分 添加了 BrowsersController,用于管理 Mobile Safari 版本的站点中的各种选择。
要在本文使用这些示例,需要一个 Ruby 编辑器或 IDE,比如 Eclipse。模仿 iPhone 显示的浏览器 模拟器能提供不少帮助。有以下模拟器可供选择:用于 Eclipse 的 Aptana iPhone 插件、用于 Mac 的 iPhoney 以及官方 iPhone 软件开发工具箱(SDK)模拟器。本系列的第 1 部分讨论了各个模拟器的安装 、用法和优缺点。本文的示例使用 iUI 工具箱和 rails_iui plug-in。
iPhone 和用户体验
第一次接触 iPhone 时,一般人都会立即注意到它与传统的桌面浏览器区别不大。例如,要把普通的 笔记本电脑装在口袋里则是件非常困难的事情。这些差别深刻地影响到应该如何在 Iphone 上构建 Web 应用程序,给用户带来最佳的体验。最重要的差别包括:
iPhone 的屏幕尺寸(320x480)比用于桌面电脑 Web 应用程序的最小目标应用程序还要小得多。 iPhone 屏幕的高宽比也与典型的桌面或笔记本电脑的显示器有巨大的差别。
iPhone 的像素密度比桌面电脑显示器要高得多,便于阅读小文本或更改图像的相对尺寸。
用户可以 90° 旋转 Mobile Safari 视图,更改图像的大小,更重要的是,还可以更改屏幕的高宽比 。
Mobile Safari 的触摸屏界面不如鼠标界面精确,这意味着它的按钮、链接等目标及它们之间的距离 应该比桌面电脑应用程序的大。
iPhone 所使用的网络环境通常比较慢。但是用户却热切期望网络能够即时响应他们请求。
这些差别的结果表明:iPhone Web 开发不是一场在屏幕上填塞东西的比赛。尽管能够设法将所有的导 航栏、标志、插入广告以及内容填塞到 iPhone 屏幕上,但是移动用户会难以忍受网速的下降,或他们必 须很费劲才能选择屏幕上的目标。相反,iPhone Web 开发的目标是创建简洁的用户界面,为移动用户提 供最重要的功能。的确,对于 Web 应用程序的某些部分,移动用户需要更多的点击才能访问,但是必须 突出应用程序的核心部分。
例如,Amazon 和 Digg 是两个很受欢迎的 Web 站点,它们具有专用于 iPhone 的版本。Digg 使用了 iUI 框架(已在本文讨论)的变体,模仿 iPhone 的外观和体验。而 Amazon 使用更有个性的外观,这个 外观在 Mobile Safari 浏览器中也表现得很好。下面给出了 Mobile Digg 的图片。(由于某种原因, Amazon.com 模仿得不是很好)。
图 1. iPhone 版的 Digg
Digg 和 Amazon 都一样,只为移动用户保留了核心功能 —— Digg 的新闻列表,Amazon 的搜索功能 。只显示核心功能可以将站点适当地显示在 iPhone 屏幕上,同时也使用户能够直接访问最重要的站点功 能。在本文的剩余部分,我将展示如何改造站点,使它适合于 iPhone。
将 iUI 添加到 Rails 应用程序
要使应用程序具备 iPhone 的外观和体验有两种主要选择:
根据 Apple 的示例代码或其他外观不错的站点,将您自己的 CSS 和 JavaScript 添加到您的站点。
使用现有的工具箱。
最出色的现有工具箱是 iUI。它已经创建了按钮图形、字体选择和 JavaScript 效果,您只需要关注 站点的内容。这是这个工具箱的优点。它的缺点是规定了站点的组织方式:
需要在指定位置使用特定的文档对象模型(Document Object Model,DOM)ID。
与服务器的默认交互通过 Asynchronous JavaScript + XML(Ajax)来实现。
我认为 iUI 最适合用于能够轻松实现为列表的站点。Apple 的 iPhone 人机界面指南把列表格式当作 组织 iPhone 内容的 “最有效方法”,因此,可能的话,最好考虑列使用列表组织。
iUI 被封装为一个包含 JavaScript 文件、CSS 文件和一系列图像的目录。因为 Rails 会在特定的目 录下寻找这些文件,所以必须通过以下步骤集成 iUI 文件与 Rails 应用程序:
将 iui.js JavaScript 文件移动到 Rails 应用程序的 public/javascripts 目录下。
将 CSS 文件 iui.css 移动到 public/stylesheets。
将图像文件(.png and .gif)移动到 public/images。
移动会打乱 CSS 文件里面的相对 URL,因此需要将所有的引用形式 url(button.png) 更改为 url (/images/button.png)。这样,CSS 文件才能在 Rails 发行版中准确地定位图像。
如果觉得手工完成这些步骤比较复杂,可以使用 rails_iui 插件所包含的一组 Rake 任务,它可以下 载并安装 iUI,包括在 CSS 文件中更改 URL。执行命令是 rake iui:install。iUI 还包含压缩版的 CSS 和 JavaScript 文件(为了加快下载速度,删除了额外的空白)。文件名为 iuix.js 和 iuix.css。在自 动的 Rake 任务中,可以选择使用这些文件的压缩版。
在项目中安装 iUI 后,需要在布局中添加 JavaScript 和 CSS 文件。iPhone 布局文件(在本示例中 为 app/views/layouts/recipes.iphone.erb)的开头应该包含以下两行:
<%= stylesheet_link_tag 'iui' %>
<%= javascript_include_tag 'iui' %>
如果正在使用 rails_iui 插件,则可以简单表达为 <%= include_iui_files %>。
至此,您已经为创建 iPhone 内容做好准备。
创建 iPhone 布局
在原始版本的 Soups OnLine 应用程序中,导航部分位于侧边栏,正文内容位于中央。这不适用于 iPhone,因此,我将把这个应用程序转换为列表结构。应用程序的主页将以列表的形式包含基本相同的导 航选择,并且用户可以向下钻取每个条目。例如,Recipes 导航条目将把用户带到另一个条目,这个条目 显示了最近添加的 “食谱”,并且还可以选择显示更多的条目。这里的每个条目将链接到特定 “食谱” 的显示页面 。
我将从 3 个层次讨论这些代码:
rails_iui 插件定义的 Rails helper
这个插件使用 iUI 定义的样式类生成的 HTML
在非 iUI 项目中要用到的关于 CSS 本身的一些详细信息
在默认情况下,iUI 会覆盖对单击正常链接的响应。iUI 执行 Ajax 调用并且重新绘制页面的可见区 域,而不是重新绘制整个页面。因此,iUI 可以为每个链接添加一种向侧面滑动的效果,这种效果类似于 在 iPhone 的 iPod 应用程序中下钻艺术家或专辑列表时产生的效果。通过在锚标记中更改 target 属性 ,可以用两种方式对此进行覆盖。如果链接目标是 _self,将使用刷新整个页面的正常超链接行为。如果 链接目标是 _replace,将使用服务器请求的结果代替锚标记。
从 Rails 的角度看,iUI 结构意味着正文布局仅呈现一次。在这之后,所有调用都是 Ajax 调用。即 使是常规的 link_to 调用,也必须作为 Ajax 调用和 :layout => false 一起发布。此外,这还意味 着对于 iPhone Web 应用程序中的简单 Ajax 活动,不需要使用 link_to_remote。
所以这个应用程序的初始用户页面仅是导航部分。这意味着必须为应用程序设置一个默认路径。这个 应用程序没有呈现自己的文本,仅显示正文导航的布局。如果缺乏明显的位置来放置这个路径,那么通过 向 config/routes.rb file 添加下面的行,将它添加到在第 1 部分中创建的 BrowsersController: map.root :controller => "browsers"。
控制器操作在 app/controllers/browsers_controller 中进行,并且很简单。
清单 1. 默认布局路径-控制器操作
layout "recipes"
def index
respond_to do |format|
format.html {redirect_to recipes_url}
format.iphone {render :text => "", :layout => true}
end
end
在 iPhone 中,仅呈现没有文本的布局。如果请求的是 HTML,它会重定向到 RecipesController 索 引页面,这个页面是应用程序的桌面视图的主页面。
iPhone 的呈现活动在呈现器中进行,目前正在调用一些由 rails_iui 插件定义的 helper 函数,根 据 iUI 的要求设置页面,如清单 2 所示。(如果 rails_iui 插件放置在 Rails 应用程序的 vendor/plugin/rails_iui 目录下,rails_iui helper 将自动应用到所有视图)。
清单 2. iPhone 主导航栏的布局正文
<%= iui_toolbar "Soups OnLine", new_search_url %>
<%= iui_list iphone_menu.items,
:top => content_tag(:h1, "Soups OnLine", :class => "header"),
:bottom => link_to ("Switch To Desktop View",
{:controller => "browsers", :action => :desktop},
:class => "mobile_link") %>
生成的屏幕类似于图 2。
图 2. iPhone Soups OnLine 主导航栏
这里有两个 helper 函数。第一个是 iui_toolbar,用于设置大多数 iPhone 应用程序顶部的灰蓝色 工具栏。Rails helper 类似于清单 3。
清单 3. iUI 工具栏的 Rails helper
def button_link_to(name, options, html_options = nil)
html_options[:class] = "button"
link_to(name, options, html_options)
end
def iui_toolbar(initial_caption, search_url = nil)
back_button = button_link_to("", "#", :id => "backButton")
header = content_tag(:h1, initial_caption, :id => "header_text")
search_link = if search_url
then button_link_to("Search", search_url, :id => "searchButton")
else ""
end
content = [back_button, header, search_link].join("\n")
content_tag(:div, content, :class => "toolbar")
end
这些代码生成下面的 HTML。
清单 4. iUI 工具栏的 HTML
HTML 中的几个条目由 iUI 定义。toolbar 类定义顶部工具栏的颜色、尺寸和位置。工具栏内部的 h1 标记也由白色文本的 iUI 专门定义。backButton DOM ID 由 iUI 保存,它在单击链接后由 iUI JavaScript 创建。下一个 rails_iui helper 将使用 header_text DOM ID。清单 5 提供了一些来自 iUI 的相关 CSS。
清单 5. iUI 的头部 CSS
body > .toolbar {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 1px solid #2d3642;
border-top: 1px solid #6d84a2;
padding: 10px;
height: 45px;
background: url(/images/toolbar.png) #6d84a2 repeat-x;
}
.toolbar > h1 {
position: absolute;
overflow: hidden;
left: 50%;
margin: 1px 0 0 -75px;
height: 45px;
font-size: 20px;
width: 150px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
color: #FFFFFF;
}
第二个 rails_iui helper 函数,如清单 6 所示,从菜单条目列表中生成实际的列表。在这种情况下 ,创建菜单条目对象并不重要。(详细情况请查阅 Professional Ruby on Rails —— 参见 参考资料) 。出于本书的需要,菜单条目是一个具有标题和 URL 属性(描述单击时菜单条目的去向)的对象。
清单 6. rails-iui 列表 helper
def list_element(item)
onclick_one = "$('header_text').innerHTML='#{item.caption}'; "
onclick_two = "$('backButton').addEventListener('click',
function() {$('header_text').innerHTML='Soups OnLine'; }, false);"
link = link_to(item.caption, item.option_hash,
:onclick => "#{onclick_one} " + " #{onclick_two}")
content_tag(:li, link)
end
def append_options(list_content, options = {})
list_content = options[:top] + list_content if options[:top]
list_content += options[:bottom] if options[:bottom]
list_content
end
def iui_list(items, options = {})
list_content = items.map {|i| list_element(i)}.join("n")
list_content = append_options(list_content, options)
content_tag(:ul, list_content, :selected => "true")
end
在 HTML 列表中,菜单列表中的每个条目都有各自的 li 元素。它包含连接到正确的 URL 的链接以及 一些管理工具栏标题的 JavaScript。JavaScript 处理程序负责两件事情。首先,它更改工具栏的文本以 反映新的链接。(因为新的链接仅调用 Ajax 更新页面的正文,所以这只能在客户端处理)。其次,它更 改处理程序的 Back 按钮,因此 Back 按钮将工具栏的标题改为原来的 Soups OnLine。这并不能真正解 决在深层下钻时保持标题同步的问题。但在撰写本文时,iUI 和 rails_iui 都不支持这个功能。
将所有的列表条目放置在一个 HTML UL 列表中,这个列表具有特定的属性对 selected=true。iUI 使 用这来决定将哪个列表放置在 iPhone 视见区的正文部分。如果在页面中 selected 设置为 true 的位置 存在一个 HTML 标记,CSS 会使用 CSS 声明 display: block 将它赋值到视见区的整个正文。与正文标 志的尺寸定义一起,这将给 selected 条目一个完整的视见区。这是很有用的。在一个 iUI 示例中,同 一个页面出现了几个代表多层下钻的列表。最初只会显示 selected 列表,其他列表则通过单一页面内的 锚和名称链接来访问。
然而,因为 selected 列表是完整的视见区,具有 Soups OnLine 标志的头部和具有 Switch to Desktop View 链接的底部必须置于 UL 标记的内部。helper 函数允许列表的顶部和底部包含任意的 HTML —— 它们在前面的布局正文片段(清单 2)中是 :top 和 :bottom。生成的 HTML 类似于清单 7。 我为菜单的第一个元素添加了完整的清单,但对于其他元素,则省略了重复的清单。
清单 7. iUI 列表 HTML
Soups OnLine
Most Recent Recipes ### OTHER LIST ITEMS REMOVED Switch To Desktop View
单击 Most Recent Recipes 条目,界面内容就会向侧面滑动,屏幕如图 3 所示。在这里,iUI JavaScript 更改了标题和 Back 按钮。
图 3. 只有一级的下钻
要创建这个屏幕,Recipe Controller 的 index 方法需要将 format.iphone {render :layout => false} 放置到它的 respond_to 块中,如下所示。
清单 8. 食谱的索引操作
def index
@recipes = Recipe.find_for_index(params[:type])
respond_to do |format|
format.html # index.html.erb
format.xml { render :xml => @recipes }
format.iphone {render :layout => false}
end
end
呈现的文件 app/views/recipes/index.iphone.erb 使用了相同的 rails_iui helper 函数。这假设 Recipe 对象能够恰当地响应 helper 函数(<%= iui_list @recipes %>)调用的 caption 和 option_hash 方法。
使用替换扩展列表
我在前面提到,在 iUI 锚标记中将目标设为 _replace 会导致这个标记调用的结果自动地替换原始列表。这能够使列表的最后一个元素显示某些内容,比如 “Next 25 items”,同时也使新的条目像原始条目一样出现在相同的列表上,便于用户上下滚动整个列表。
要想使用已经构建的 helper 函数实现替换功能,必须通过两种方式扩展 iui_list 方法。列表 helper 函数需要一个选项来为列表添加更多的条目 —— 目前,假设它是列表底部的一个额外选项。然后,对单击的响应需要返回标记为 li 的条目列表,但没有包围的 ul 标记,这个标记已经存在于需要更改的页面中。
这个实现的第一部分是一些特定的 link_to helper 函数,用于管理 iUI 特定的 _replace 和 _self 行为。然后,我将再添加一个方法,根据 target 参数实现不同链接类型的转换。这两种方法如下所示。
清单 9. iUI 链接 helper 函数
def link_to_replace(name, options, html_options = {})
html_options[:target] = "_replace"
link_to(name, options, html_options)
end
def link_to_external(name, options, html_options = {})
html_options[:target] = "_self"
link_to(name, options, html_options)
end
def link_to_target(target, name, options, html_options = {})
if target == :replace
link_to_replace(name, options, html_options)
elsif target == :self or target == :external
link_to_external(name, options, html_options)
else
link_to(name, options, html_options)
end
end
准备好链接 helper 函数后,可以扩展 iui_list 函数和附加的 append_options 方法,添加新的功能。
清单 10. iUI 链接 helper 函数
def append_options(list_content, options = {})
list_content = options[:top] + list_content if options[:top]
list_content += list_element(options[:more], :replace) if options[:more]
list_content += options[:bottom] if options[:bottom]
list_content
end
def iui_list(items, options = {})
list_content = items.map {|i| list_element(i)}.join("\n")
list_content = append_options(list_content, options)
if options[:as_replace]
list_content
else
content_tag(:ul, list_content, :selected => "true")
end
end
额外的 list 元素实际上添加到 append_options 方法的第二行。应该在 :more 选项中传递这个元素,就像 items 列表元素应该有一个标题和一个 URL 一样。如果传递 :as_replace => true 的话,iui_list 中的最后一个 if 语句会造成 ul 列表标记被省略。
调用具有最后链接的 iui_list 方法类似于下面的清单,:more 选项在列表的底部提供了列表元素:
<%= iui_list @recipes,
:more => ListModel.new(nil, "Next 25 items", more_recipes_url) %>
响应 more_recipes_url 的控制器操作 —— 不管结果是什么 —— 应该使用 :as_replace => true 调用 iui_list。
iUI 还有一个处理列表的技巧。使用 CSS group 类将在列表内部生成一个标题,类似于本机 iPod 歌曲应用程序的清单。
图 4. 具有组标题的列表
构建组列表的 rails_iui helper 函数重用构建普通列表的大部分代码。这个方法使用一个块动态地决定标题。
清单 11. 构建具有组的列表的 rails_iui helper 函数
def iui_grouped_list(items, options = {}, &group_by_block)
groups = items.group_by(&group_by_block).sort
group_elements = groups.map do |group, members|
group = content_tag(:li, group, :class => "group")
member_elements = [group] + members.map { |m| list_element(m) }
end
content_tag(:ul, group_elements.flatten.join("\n"),
:selected => "true")
end
iui_grouped_list 方法使用 Rails ActiveSupport group_by 方法,将列表转换成 [group, [members]] 的 2-D 列表。分类可以保证组以字母顺序排列(在应用这个方法之前,您肯定希望将每个条目按顺序排列)。
这个方法的视图代码类似于(块返回食谱标题的首字母):
<%= iui_grouped_list(@recipes) {|r| r.title[0, 1]} %>
结束语
到目前为止,已经学习了如何向 Mobile Safari 用户提供定制内容。也懂得了如何使用列表外观显示站点导航,这种方式不仅符合 iPhone 用户的期望,也加快了加载速度(在网速比较慢的情况下也不例外)。
本系列的第 3 部分将讨论用户下钻并获取了一些内容之后要显示的内容。这包括显示面板和对话框,以及使用普通的 iPhone 圆角矩形样式。您将明白如何对旋转 iPhone 设备以及翻转 Mobile Safari 侧边作出响应。