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: #e 0f 8f8;

}

.ListLine1 {

background: #f8b 0f8;

}

 

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

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

 

 

 

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

 

我们做了些什么

 

在这一章，我们为商店应用程序做了些基础工作。

1、我们创建了三个数据库(development，test，和production)，并配置了我们的Rails应用程序来访问它们。

2、我们创建了products表并使用“支架”“生成器”来写出一个管理它的应用程序。

3、我们用确认增强了被自动生成的代码。

4、我们重写了用于显示的“视图”代码。

我们没有讨论的是有关的产品清单分页问题。“支架”“生成器”使用Rails内建的pagination“帮助者”脚本自动地为我们生成。每次显示清单的十个入口条目，并自动处理页之间的导航。我们在340页会更多地讨论这些。