Ruby on Rails 2.1-レイアウト

レイアウトは、HTMLページの周囲を定義します。これは、最終的な出力の一般的なルックアンドフィールを定義する場所です。レイアウトファイルはapp/views/layoutsにあります。

このプロセスでは、レイアウトテンプレートを定義し、コントローラーにそのテンプレートが存在し、使用できることを通知します。まず、テンプレートを作成しましょう。

standard.rhtmlという新しいファイルをapp/views/layoutsに追加します。コントローラーにファイル名で使用するテンプレートを知らせるため、同じ名前を付けることをお勧めします。

次のコードを新しいstandard.rhtmlファイルに追加し、変更を保存します-

<!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_link_tag "style" %>
   </head>

   <body id="library">

      <div id="container">

         <div id="header">
            <h1>Library Info System</h1>
            <h3>Library powered by Ruby on Rails</h3>
         </div>

         <div id="content">
            <%= yield -%>
         </div>

         <div id="sidebar"></div>

      </div>

   </body>
</html>

追加したものはすべて、スタイルシート<link>を出力する stylesheet_link_tag ヘルパーメソッドを含む2行を除き、標準のHTML要素です。この例では、style.cssスタイルシートをリンクしています。 yield コマンドは、ここで呼び出されるメソッドにRHTMLを配置する必要があることをRailsに知らせます。

今 book_controller.rb を開き、最初の行のすぐ下に次の行を追加します-

class BookController < ApplicationController
   layout 'standard'
   def list
      @books = Book.find(:all)
   end
...................

これは、standard.rhtmlファイルで利用可能なレイアウトを使用したいコントローラーに指示します。次に、次の画面を生成する本をブラウズしてみてください。

レイアウト例

スタイルシートを追加する

これまで、スタイルシートを作成していないため、Railsはデフォルトのスタイルシートを使用しています。それでは、style.cssという新しいファイルを作成して、/public/stylesheetsに保存しましょう。このファイルに次のコードを追加します。

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

今、ブラウザを更新して、違いを確認してください-

レイアウト例

次は何ですか？

次の章では、Rails Scaffoldingを使用してアプリケーションを開発し、任意のデータベースのレコードを追加、削除、および変更するためのユーザーアクセスをユーザーに提供する方法について説明します。

Ruby-on-rails-2.1-rails-layouts

Ruby on Rails 2.1-レイアウト

スタイルシートを追加する

次は何ですか？