I have a concern: We are using the created_at special column name for the date and do not support editing. What if I am entering the records for January in February (I am lazy most of the time) ? Can I do that ?
Only way to find out is to try it out.. So start our app locally via
\ShowMeTheMoney>ruby script\server
So start our app locally - Type in http://localhost:3000/inflow to take us to the list page.
Add a new record, Rails is showing Created At to the user. I edit the Month to last month. Add a description and amount and click ‘Create’
Sure enough ATCO.. way of least surprise. Rails saved it as Jan… saving me some work.
Now to edit the view for the 'list' action,
file: /ShowMeTheMoney/app/views/inflow/list.rhtml
<h1>Inflows</h1>
<!-- Translatable strings -->
<%
@created_at_label = InflowHelper::ResourceManager.getString(:credit_created_at)
@description_label = InflowHelper::ResourceManager.getString(:credit_description)
@amount_label = InflowHelper::ResourceManager.getString(:credit_amount)
%>
<!-- Translatable strings -->
<table>
<tr>
<!-- <% for column in Credit.content_columns %>
<th><%= column.human_name %></th>
<% end %>
-->
<th><%= @created_at_label %></th>
<th><%= @description_label %></th>
<th><%= @amount_label %></th>
<% for credit in @credits %>
<tr>
<!--
<% for column in Credit.content_columns %>
<td><%=h credit.send(column.name) %></td>
<% end %>
-->
<td> <%= h( credit.created_at.strftime("%d %b %Y" ) ) %> </td>
<td style='width:350px;text-align:center'> <%= h( credit.description ) %> </td>
<td style='text-align:right'> <%= h( sprintf("%0.2f", credit.amount) ) %> </td>
<!-- <%= link_to 'Show', :action => 'show', :id => credit %> </td> -->
<!-- <td><%= link_to 'Edit', :action => 'edit', :id => credit %></td> -->
<!-- <td><%= link_to 'Destroy', { :action => 'destroy', :id => credit }, :confirm => 'Are you sure?', :method => :post %></td> -->
<td><%= link_to 'Delete', { :action => 'destroy', :id => credit }, :confirm => 'Are you sure?', :method => :post %></td>
</tr>
<% end %>
</table>
<%= link_to 'Previous page', { :page => @credit_pages.current.previous } if @credit_pages.current.previous %>
<%= link_to 'Next page', { :page => @credit_pages.current.next } if @credit_pages.current.next %>
<br />
<%= link_to 'Add new entry', :action => 'new' %>
file: \ShowMeTheMoney\app\views\inflow\_form.rhtml
<%= error_messages_for 'credit' %>
<!--[form:credit]-->
<p>
<label for="credit_created_at">
<%= InflowHelper::ResourceManager.getString(:credit_created_at) %>
</label><br/>
<%= datetime_select 'credit', 'created_at' %>
</p>
<p>
<label for="credit_description">
<%= InflowHelper::ResourceManager.getString(:credit_description) %>
</label><br/>
<%= text_field 'credit', 'description' %>
</p>
<p>
<label for="credit_amount">
<%= InflowHelper::ResourceManager.getString(:credit_amount) %>
</label><br/>
<%= text_field 'credit', 'amount' %>
</p>
<!--[eoform:credit]-->
file: \ShowMeTheMoney\app\helpers\inflow_helper.rb
module InflowHelper
class ResourceManager
@strings = {
:credit_created_at => "Date",
:credit_description => "Description",
:credit_amount => "Amount",
}
def ResourceManager.getString( sKey )
sKey = @strings[sKey] || "";
end
end
end
Phew! I added a class to avoid duplicating the labels/captions. We just need to chip away at list and new views.
We need a layout – a common look-n-feel for the app. For that we modify the rhtml file with the same name as the controller
file: /ShowMeTheMoney/app/views/layouts/inflow.rhtml
<head>
<%= stylesheet_link_tag 'smtm' %>
<title>ShowMeTheMoney - Inflows</title>
<div class='GrandTitle'> Showing you the money.. </div>
</head>
<body>
<div id='banner'>
<%= link_to( image_tag("inflow.jpg"), {:controller => 'inflow', :action => 'list'} ) %>
<%= link_to( image_tag("outflow.jpg"),
{:controller => 'inflow', :action => 'list'} )
%>
</div>
<p style="color: green"><%= flash[:notice] %></p>
<%= yield %>
</body>
</html>
I found 2 images used in the layout to denote inflow and outflow. Copied it to the ShowMeTheMoney\public\images folder. Next we add the css styles (shown in bold above) to smtm.css (I copied scaffold.css)
Well that’s it for now. It’s as pretty as I’d like for now. I need to learn all that CSS Stuff one of these days…
.GrandTitle {
background-color:teal;
color:yellow;
height:30px;
width:100%;
font-family: candara, sans-serif;
font-size:xx-large;
text-align:center;
padding-top:1%;
}
#banner{
background-color:teal;
}
Adding an inflow record
List all expenses
Moral of the story: UI in Rails is pretty sweet. The way you can change a small thing in the view, Hit F5 in the browser and ZAP! Improved (hopefully) UI just like you wanted it.
No comments:
Post a Comment