Upload
jason-noble
View
1.992
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Catalog Display
What we’ll cover
• Writing our own views• Using layouts to decorate pages• Integrating CSS / styling• Using Helpers• Writing functional tests
Generate a store controller
• rails generate controller store index– This sets up the scaffolding for /store/index
• http://localhost:3000/store/index
Make / point to the store
• Right now when you go to http://localhost:3000/ you get the “default” rails page
• Let’s make / load the store we just created
• config/routes.rb– root :to => ‘store#index’, :as => ‘store’• :as allows us to use store_path later
Try it out
• http://localhost:3000/– Still the default page, why?
– Remove public/index.html• rm public/index.html
Display a list of products available
• app/controllers/store_controller.rbdef index
@products = Product.all
end• app/models/product.rb– default_scope :order => ‘title’
Update our view
• app/views/store/index.html.erb
Sanitize your HTML
• We use the sanitize method to escape HTML– http://api.rubyonrails.org/classes/ActionView/Hel
pers/SanitizeHelper.html• Also use the image_tag helper to provide
<img> tags
Adding a page layout
• Most pages on a site have a similar look– Header– Side bar– Footer
• application.html.erb is the “default” layout– Unless a controller specifies otherwise
Application Layout
• app/views/layouts/application.html.erb
curl -o app/views/layouts/application.html.erb http://media.pragprog.com/titles/rails4/code/depot_e/app/views/layouts/application.html.erb
New concepts in Layout
• <%= stylesheet_link_tag “depot”, :media => “all” %>– Generates a HTML <link> tag for our stylesheet– <link href="/stylesheets/depot.css?1289056297" media="all"
rel="stylesheet" type="text/css" />
• <%= csrf_meta_tag %>– Helps prevent cross site request forgery attacks– Covered in detail in chapter 12
• <%= @page_title || “Pragmatic Bookshelf” %>– If @page_title is defined, print it, otherwise “Pragmatic Bookshelf”
• <%= yield %>– Rails puts the stuff from the app/views/* files in at this point
Update stylesheet
http://media.pragprog.com/titles/rails4/code/depot_e/public/stylesheets/depot.css
Reload the page
• http://localhost:3000/• What’s wrong with the prices– Displaying 5.0 instead of $5.00
• We’ll fix that with a helper
Keep code out of your views
• <%= sprintf(“$%0.02f”, product.price) %>– Embeds knowledge in your views– Makes internationalization hard– Don’t Repeat Yourself
• Helper methods help you display things in your views
number_to_currency
• app/views/store/index.html.erb– <%= product.price %>
becomes
– <%= number_to_currency(product.price) %>
• Rails provides number_to_currency for you– http://api.rubyonrails.org/classes/ActionView/
Helpers/NumberHelper.html
Write tests!
• Did we break anything?– rake test• No failures, yay!
• Functional tests verify that a model, view and controller work together properly
Functional Tests (cont.)
assert_select selectors
• # matches on id attributes– <div id=“mydiv”> => ‘#mydiv’
• . matches on class attributes– <div class=“myclass”> => ‘.myclass’
• No prefix match on element names– <a> => ‘a’
What do these match?
• assert_select ‘#main .entry img’– An image tag in an element with a entry class inside
an element with an id of main• assert_select ‘.sidebar ul li.odd’– An li item with a class of odd inside of a ul item
inside of an item with a class of sidebar• assert_select ‘span.wide div.even a img’– An image tag within an anchor (a) tag within a div
with a class of even within a span with a class of wide
What we just did
• Created a new store controller• Made the store controller our root page• Made Products be sorted by title by default• Implement a view and an application layout• Use a Rails helper to format prices• Make use of a CSS stylesheet• Write functional tests for our controller
Homework
• Add a date and time to the sidebar• Investigate the options to
number_to_currency and play with a couple– http://api.rubyonrails.org/classes/ActionView/Hel
pers/NumberHelper.html• Write some functional tests for the products
controller (test/functional/product_controller_test.rb)
• Commit your work in Git