Ruby on Rails: Views and Layouts
In this lesson we will learn how to do some stuff with views and layouts! These massivly affect the RoR application and will be used constantly.
Layouts
Ok, so layouts are basically files which store the layout of the application, and what stuff to show around the main content.
In our last lesson we created a very simple blog, however it didn't exactly look that nice, how would we customize the look of it?
The layout for our all of our applications views (at the moment) are stored in "app/views/layouts/application.html.erb"; If we open this up in any text editor, we should see something like this which RoR has made for us:
<!DOCTYPE html> <html> <head> <title>TestApp</title> <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>Most of this is simple HTML coding, however some of it isnt..
<%= stylesheet_link_tag "application" %>Whenever we have "<% SOMETHING %>" in a layout file, this means we have some ruby inside of it which is being executed when the layout is displayed. The "<%=" (with the equals sign) means that the output will be actually put in the pages HTML. In this instance we are simply linking our application.css stylesheet (in app/assets/stylesheets) which was generated for us using stylesheet_link_tag (which is something cool we can do in rails).
Note that what we're doing here is called calling a "helper function". Helpers are pieces of code which you can assign names to and call as many times as you like (if you've done any other kind of programming/scripting - the function concept should be familiar to you), rails has created this stylesheet_link_tag helper for us.
javascript_include_tag "application"This is basically exactly the same as the stylesheet_link_tag, however it's for our application javascript file.
<%= csrf_meta_tags %>This basically just puts in some meta tags for us.
<%= yield %>
This basically means "Shove everything else here" and is basically where all the main content will go..
If we wanted to edit this then we could simply insert various HTML tags, or we could even customise it further by putting in more ruby that executes to get different pieces of custom text (more about these in later lessons).
Views
Views are basically what the program decides to display with different actions (and for the most part are what will go in the "yield" part of our layout); views are stored in app/views/NameOfYourScaffold (in our case app/views/posts).As you may have noticed there are many auto generated files here: index.html.erb, show.html.erb, edit.html.erb and new.html.erb. They are all appropriately named for their actions, index is the index page, it displays all of the posts in our case, show is for showing a certain post, edit is for editing a post, and new is for creating a new post.
In this lesson we are just going to look through index..
When you open up index.html.erb in our blog application you should find some code that looks like this:
<h1>Listing posts</h1>
<table>
<tr>
<th>Name</th>
<th>Content</th>
<th></th>
<th></th>
<th></th>
</tr>
<% @posts.each do |post| %>
<tr>
<td><%= post.name %></td>
<td><%= post.content %></td>
<td><%= link_to 'Show', post %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, confirm: 'Are you sure?', method: :delete %></td>
</tr>
<% end %>
</table>
<br />
<%= link_to 'New Post', new_post_path %>
Again there is some HTML, however there is a lot of ruby/rails stuff in here too:
<% @posts.each do |post| %>This essentially loops round everything in @posts (which is an instance variable (don't worry about what that means - we'll get to it in a later lesson) which basically stores all of the posts in our simple blog) and for each loop stores the current post in the block, "post" (hence |post| in the code).
We can then do various things with this "post" variable from the start to the "<% end %>" tag, and it will loop for every post.
<%= post.name %>Displays the post that's currently going through the loop's name.
<%= post.content %>Displays the post that's currently going through the loop's content.
<%= link_to 'Show', post %>This uses the link_to helper to create a hyperlink with the anchor text of "Show" that links to the current post in the loop.
<%= link_to 'Edit', edit_post_path(post) %>This also uses "link_to" to display an edit link using the edit_post_path route (we'll learn about routes later - don't worry about it!).
<%= link_to 'Destroy', post, confirm: 'Are you sure?', method: :delete %>Destroy link.. In this case we use "confirm:" to come up with a dialog box to confirm the user wants to delete the post, and then we use the "method: delete" to delete the post.
<%= link_to 'New post', new_post_path %>A lot like the other links - this is just basically a link to create a new post.
Back to Ruby on Rails
