使用Ruby on Rails和Eclipse开发iPhone应用程序，第2部分(2)

这些差别的结果表明：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）来实现。

使用Ruby on Rails和Eclipse开发iPhone应用程序，第2部分(3)

我认为 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

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!