Agile Web Development with Rails 翻译(十一)

Agile Web Development with Rails 翻译(十一)

6.4 循环 A4: 完善清单

我们客户有个最后要求(客户总是会有所谓的最后要求的)。产品的清单太丑陋了。我们可以让它看起来更好一些？我们可以用imageURL来显示产品的图像吗？

2006年4月16日更新

目录app/views/admin/list.rhtml的这个文件显示当前products表内的产品。由“支架”“生成器”生成的源代码看起来像下面这样。
<h1>Listing products</h1>
<table>
<tr>
<% for column in Product.content_columns %>
<th><%= column.human_name %></th>
<% end %>
</tr>
<% for product in @products %>
<tr>
<% for column in Product.content_columns %>
<td><%=h product.send(column.name) %></td>
<% end %>
<td><%= link_to 'Show', :action => 'show', :id => product %></td>
<td><%= link_to 'Edit', :action => 'edit', :id => product %></td>
<td><%= link_to 'Destroy', {:action => 'destroy', :id => product},
:confirm => "Are you sure?" %></td>
</tr>
<% end %>
</table>
<%= if @product_pages.current.previous
link_to "Previous page", { :page => @product_pages.current.previous }
end %>
<%= if @product_pages.current.next
link_to "Next page", { :page => @product_pages.current.next }
end %>
<br />
<%= link_to 'New product', :action => 'new' %>
“视图”使用ERb来迭代“模型”Product 内的所有行。用@products数组内的每个产品来创建表内的一行。(这个数组由“控制器”内的list“动作”方法设置。)行包括结果记录集中的每个列。
这个代码动态的，它将自动地显示更新的列。但是，它的显示也太平常了一些。所以让我们修改它的外观。
<h1>Product Listing</h1>
<table cellpadding="5" cellspacing="0">
<%
odd_or_even = 0
for product in @products
odd_or_even = 1 - odd_or_even
%>
<tr valign="top" class="ListLine<%= odd_or_even %>">
<td>
<img width="60" height="70" src="<%= product.image_url %>"/>
</td>
<td width="60%">
<span class="ListTitle"><%= h(product.title) %></span><br />
<%= h(truncate(product.description, 80)) %>
</td>
<td align="right">
<%= product.date_available.strftime("%y-%m-%d") %><br/>
<strong>$<%= sprintf("%0.2f", product.price) %></strong>
</td>
<td class="ListActions">
<%= link_to 'Show', :action => 'show', :id => product %><br/>
<%= link_to 'Edit', :action => 'edit', :id => product %><br/>
<%= link_to 'Destroy', { :action => 'destroy', :id => product },
:confirm => "Are you sure?" %>
</td>
</tr>
<% end %>
</table>
<%= if @product_pages.current.previous
link_to("Previous page", { :page => @product_pages.current.previous })
end
%>
<%= if @product_pages.current.next
link_to("Next page", { :page => @product_pages.current.next })
end
%>
<br />
<%= link_to 'New product', :action => 'new' %>
注意我们是如何使用odd_or_even变量来订住用于表格的交替行的CSS类名字。结果是每个产品行以颜色浓淡来交叉显示。我们也使用Ruby的sprintf()方法来转换浮点型单价是个好看格式的字符串。
所有由“支架”生成的应用程序都使用了public/stylesheets目录内的scaffold.css的风格。我们可以向这个文件内添加自己的风格。
.ListTitle {
color: #244;
font-weight: bold;
font-size: larger;
}
.ListActions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}
.ListLine0 {
background: #e0f8f8;
}
.ListLine1 {
background: #f8b0f8;
}

放一些图片到public/images目录内，输入一些产品描述。结果看起来和图6.7应该差不多。

Rails的“支架”提供了真实的源代码，我们修改文件后立即就能看到结果。这种途径给我们的开发提供了很大的灵活性。我们可以定制一个特殊的源文件，让所有的改动即是可能的又是局部的。



现在，我们可以向客户显示新的产品清单了，它会很高兴。

我们做了些什么

在这一章，我们为商店应用程序做了些基础工作。
1、我们创建了三个数据库(development，test，和production)，并配置了我们的Rails应用程序来访问它们。
2、我们创建了products表并使用“支架”“生成器”来写出一个管理它的应用程序。
3、我们用确认增强了被自动生成的代码。
4、我们重写了用于显示的“视图”代码。
我们没有讨论的是有关的产品清单分页问题。“支架”“生成器”使用Rails内建的pagination“帮助者”脚本自动地为我们生成。每次显示清单的十个入口条目，并自动处理页之间的导航。我们在340页会更多地讨论这些。