使用Ruby on Rails和Eclipse开发iPhone应用程序，第3部分 - 编程入门网

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

图 1. 菜谱显示页面

此页面的 Rails 代码利用一些 rails_iui 助手以简化对 iUI 功能的访问。此文件为 app/views/recipes/show.iphone.erb。启用此功能所需的惟一一处控制器更改是将 format.iphone 代码 行添加到相应控制器操作的 respond_to 代码块中，如下所示：

清单 1. 菜单显示代码

　　<% panel do %>
　　　<% if @recipe.has_image? %>
　　　　<%= image_tag(@recipe.soup_image.public_filename, :align => :left,
　　　　　　:height => 80, :width => 80,
　　　　　　:style => "padding: 5px" ) %>
　　　<% else %>
　　　　&nbsp;
　　　<% end %>
　　　<div>Servings: <%= @recipe.servings %></div>
　　　<br/>
　　　<div>Description:</div>
　　　<div><%= @recipe.description %></div><br/>
　　　<div>Ingredients:</div>
　　　<% fieldset do %>
　　　　<% for ingredient in @recipe.ingredients %>
　　　　　<% row_label do %>
　　　　　　<%= h ingredient.display_string %>
　　　　　<% end %>
　　　　<% end %>
　　　<% end %>
　　　<div>Directions:</div>
　　　<% fieldset do %>
　　　　<%= row @recipe.directions %>
　　　<% end %>
　　　<div>Tags: <%= h @recipe.tag_list.to_s %></div>
　　<% end %>

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

在撰写本文时，iUI CSS 结构有一些特殊的地方，大多数情况与一些限制有关，即一些特殊类的出现 必须响应其他的标记。无论如何，这段代码都使用一些 rails_iui 代码块助手，这些助手将用 iUI 所定 义的特定 CSS 类封装 div 标记。

第一个助手是位于代码段顶部的处理程序 panel，这是带有 panel 类的 div 标记的包装器。panel 类将把元素的边界设为设备框的大小，添加 10 个像素的填充，并且设置页面的背景颜色和条纹。这将模 拟 iPhone 设置页面。

此屏幕的另一个独特的特征是圆角矩形。在 Mobile Safari 中，用名为 -webkit-border-radius 的 自定义 CSS 属性可以轻松地进行处理，在本例中，该属性被设为 10px。在 iUI 面板内，fieldset 标记 用于指定圆角矩形的边界。除了边界半径以外，面板 > 字段集选择器还将设置顶部空白、白色背景、 边界及 16 个点的右对齐文本（就像您在 iPhone 设置页面的单个元素中看到的那样）。rails_iui 将 fieldset 代码块助手定义为放置 fieldset 标记对。

现在，当看到图 1 中的文本都是左对齐时，fieldset 中的文本是右对齐的。那是因为有更多更改文 本对齐的 CSS 类。您在配料清单中看到的 row 类将设置 42 像素高的块，该块适用于圆角矩形内的一叠 行中的一行。在 row 类中，label 标记将把文本设为粗体并将它放回到该行的末尾。可以在设置页面中 看到其最初版本，其中标签左对齐，设置切换在右侧。

rails_iui 为行定义了两个助手，出于演示目的，本例中同时使用了这两个助手。row 版本将获取一 个实参、字符串和可选块。该字符串用作标签文本，块是行内容（与所有 Rails 块助手一样，非块版本 使用 ERb 模板的输出对 <%= 分隔，而块版本只使用 %lt;%）。row_label 助手

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