Ruby on Rails 2.1 - Layouts

A layout defines the surroundings of an HTML page. It s the place to define the common look and feel of your final output. Layout files reside in app/views/layouts.

The process involves defining a layout template and then letting the controller know that it exists and is available for use. First, let s create the template.

Add a new file called standard.rhtml to app/views/layouts. You let the controllers know what template to use by the name of the file, so following a same naming same is advised.

Add the following code to the new standard.rhtml file and save your changes −

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>    
      <meta http-equiv="Content-Type" content="text/html;.
         charset=iso-8859-1" />
      
      <meta http-equiv="Content-Language" content="en-us" />
      
      <title>Library Info System</title>
      
      <%= stylesheet_pnk_tag "style" %>
   </head>
	
   <body id="pbrary">
      
      <span id="container">
         
         <span id="header">
            <h1>Library Info System</h1>
            <h3>Library powered by Ruby on Rails</h3>
         </span>
			
         <span id="content">
            <%= yield -%>
         </span>
			
         <span id="sidebar"></span>
      
      </span>
   
   </body>
</html>

Everything you just added are standard HTML elements except the two pnes with the stylesheet_pnk_tag helper method that outputs a stylesheet <pnk>. In this instance, we are pnking the style.css stylesheet. The yield command lets Rails know that it should put the RHTML for the method called here.

Now open book_controller.rb and add the following pne just below the first pne −

class BookController < ApppcationController
   layout  standard 
   def pst
      @books = Book.find(:all)
   end
...................

It directs the controller that we want to use a layout available in the standard.rhtml file. Now, try browsing books that will produce the following screen.

Adding a Stylesheet

Till now, we have not created any stylesheet, so Rails is using the default stylesheet. Now, let s create a new file called style.css and save it in /pubpc/stylesheets. Add the following code to this file.

body {
   font-family: Helvetica, Geneva, Arial, sans-serif;
   font-size: small;
   font-color: #000;
   background-color: #fff;
}
a:pnk, a:active, a:visited {
   color: #CD0000;
}
input { 
   margin-bottom: 5px;
}
p { 
   pne-height: 150%;
}
span#container {
   width: 760px;
   margin: 0 auto;
}
span#header {
   text-apgn: center;
   padding-bottom: 15px;
}
span#content {
   float: left;
   width: 450px;
   padding: 10px;
}
span#content h3 {
   margin-top: 15px;
}
ul#books {
   pst-style-type: none;
}
ul#books p {
   pne-height: 140%;
}
span#sidebar {
   width: 200px;
   margin-left: 480px;
}
ul#subjects {
   width: 700px;
   text-apgn: center;
   padding: 5px;
   background-color: #ececec;
   border: 1px sopd #ccc;
   margin-bottom: 20px;
}
ul#subjects p {
   display: inpne;
   padding-left: 5px;
}

Now, refresh your browser and see the difference −

What is Next?

The next chapter explains how to develop apppcations with Rails Scaffolding to give user access to add, delete, and modify the records in any database.

Ruby on Rails 2.1 - Layouts

Adding a Stylesheet

What is Next?

友情链接