向客户机显示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 的屏幕尺寸（320×480）比用于桌面电脑 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 插件，则可以简单表达为 。
至此，您已经为创建 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 主导航栏的布局正文
<body> <%= 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") %> </body>
生成的屏幕类似于图 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
<div class="toolbar"> <a href="#" class="button" id="backButton"></a> <h1 dddd="header_text">Soups OnLine</h1> <a href="http://localhost:3000/search/new" class="button" id="searchButton">Search </a> </div>
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, ptions = {}) list_content = options[:top] + list_content if options[:top] list_content += options[:bottom] if options[:bottom] list_content end def iui_list(items, ptions = {}) 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
<ul selected="true"> <h1 class="header">Soups OnLine</h1> <li> <a href="/recipes" nclick="$('header_text').innerHTML='Most Recent Recipes'; $('backButton').addEventListener('click', function() {$('header_text').innerHTML='Soups OnLine'; }, false);"> Most Recent Recipes</a> </li> ### OTHER LIST ITEMS REMOVED <a href="/browsers/desktop" class="mobile_link">Switch To Desktop View</a></ul>
单击 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 函数（）调用的 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, ptions = {})<br /> list_content = options[:top] + list_content if options[:top]<br /> list_content += list_element(options[:more], :replace) if options[:more]<br /> list_content += options[:bottom] if options[:bottom]<br /> list_content<br /> end<br /> def iui_list(items, ptions = {})<br /> list_content = items.map {|i| list_element(i)}.join("/n")<br /> list_content = append_options(list_content, options)<br /> if options[:as_replace] <br /> list_content<br /> else<br /> content_tag(:ul, list_content, :selected => "true")<br /> end<br /> end
额外的 list 元素实际上添加到 append_options 方法的第二行。应该在 :more 选项中传递这个元素，就像 items 列表元素应该有一个标题和一个 URL 一样。如果传递 :as_replace => true 的话，iui_list 中的最后一个 if 语句会造成 ul 列表标记被省略。
调用具有最后链接的 iui_list 方法类似于下面的清单，: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, ptions = {}, &group_by_block)<br /> groups = items.group_by(&group_by_block).sort<br /> group_elements = groups.map do |group, members|<br /> group = content_tag(:li, group, :class => "group")<br /> member_elements = [group] + members.map { |m| list_element(m) }<br /> end<br /> content_tag(:ul, group_elements.flatten.join("/n"), <br /> :selected => "true")<br /> end
iui_grouped_list 方法使用 Rails ActiveSupport group_by 方法，将列表转换成 [group, [members]] 的 2-D 列表。分类可以保证组以字母顺序排列（在应用这个方法之前，您肯定希望将每个条目按顺序排列）。
这个方法的视图代码类似于（块返回食谱标题的首字母）：
结束语
到目前为止，已经学习了如何向 Mobile Safari 用户提供定制内容。也懂得了如何使用列表外观显示站点导航，这种方式不仅符合 iPhone 用户的期望，也加快了加载速度（在网速比较慢的情况下也不例外）。
本系列的第 3 部分将讨论用户下钻并获取了一些内容之后要显示的内容。这包括显示面板和对话框，以及使用普通的 iPhone 圆角矩形样式。您将明白如何对旋转 iPhone 设备以及翻转 Mobile Safari 侧边作出响应。
不论你在什么时候结束，重要的是结束之后就不要悔恨
