用 Ruby on Rails 和 Eclipse 开发 iPhone 应用程序之 3 ：构建视图和表单

本系列的前两部分介绍了构造一个 Ruby on Rails 应用程序的两个重要方面，这个应用程序可以为 iPhone 和 iPod touch 中的 Mobile Safari 浏览器的用户服务特殊内容。第 1 部分 讨论了如何设置服务器以检测和为 Mobile Safari 提供替代内容。所选用的机制（并不是惟一的实现方法）涉及创建伪 MIME 类型，匹配用户代理字符串和使用 Rails 的 respond_to 机制。

第 2 部分 探究了可能为 iPhone 或 iPod touch 创建的实际内容。使用 iUI 库作为确保 Web 应用程序遵循 Apple 的界面外观指南的机制。得到的应用程序很像是原生的 iPhone 应用程序。该文章介绍了如何创建向下展开的列表结构，类似于 iPhone 的原生邮件应用程序。Apple 建议使用这种结构，因为这种结构易于浏览并且尺寸较小，即使使用较慢的 Edge 网络连接，也可以快速下载。

本系列的最后这一篇文章将介绍当用户浏览到列表结构末尾而应用程序实际上还需要显示一些内容时，应当如何执行操作。iUI 给内容及表单布局提供一些有用功能。本文还介绍一些为应用程序提供特别改进的功能，例如，捕捉用户电话的旋转以及添加显示在 iPhone 主屏幕中的图标。

要运行示例，需要一些工具。当然，您需要 Ruby 和 Rails。与 Rails 结合使用的编辑器或者集成开发环境（IDE）十分有帮助，例如 Eclipse with Aptana Studio。iPhone 视图屏幕的模拟器也十分有帮助（第 1 部分 讨论了一些选项的优点）。本文使用的示例是 Soups OnLine，这是在我的 Professional Ruby on Rails 一书中最初创建的菜谱交易站点。不过，对于本文来说，该站点的具体细节并不重要。iUI 工具包提供了带有层叠样式表（Cascading Style Sheets，CSS）和 JavaScript 的 iPhone 感观。创建了 rails_iui 插件以将 iUI 功能封装到 Rails 助手以及其他最佳实践的 Rails 用法中。

使用面板处理列表

在撰写完 第 2 部分 时，我已经创建了浏览结构，可以向 iPhone 用户或者 iPod-touch 用户呈现浏览选项列表。一些选项指向按字母顺序或者按最近访问组织的另一个菜谱列表。在这些清单中单击一个菜谱将可能把用户引导到介绍该菜谱的页面。

在设计 iPhone 显示页面中的各个元素时，必须牢记 iPhone 屏幕的细节。我为该应用程序所选的视窗设置将把页面的宽度设为设备当前方位的宽度。由于我希望此 Web 应用程序看上去像是一个原生的 iPhone 应用程序，因此我还禁用了用户进一步放大的功能。因此，确保我的设计在垂直方向不超出 320 像素的 iPhone 宽度十分重要（我将简要介绍定向更改）。如果可以确保页面不超出像素为 320x480 的屏幕，则十分理想。但是，如果用户不得不朝一个方向滚动页面，那么也没问题。

iPhone 界面的其他方面将混合小屏幕尺寸的效果。与普通桌面屏幕相比，iPhone 的像素排列得更加密集，意味着实际手机中显示的字体和图像比模拟屏幕中显示得更小。您可能必须放大字体大小才能看得清。而且，用户用手指点击屏幕不会像鼠标单击一样精确。Apple 建议可单击的目标至少为 44 像素的正方形以获得最佳可用性。

记住这一点，图 1 显示了我在菜谱显示页面中提供的内容。我保持了 iUI 中提供的样式以使一切变得更简单。

图 1. 菜谱显示页面

本文转自IBM Developerworks中国

      请点击此处查看全文