Ruby on Rails - układy

Układ definiuje otoczenie strony HTML. To miejsce, w którym można zdefiniować wspólny wygląd i styl końcowego produktu. Pliki układów znajdują się w app / views / layouts.

Proces obejmuje zdefiniowanie szablonu układu, a następnie poinformowanie kontrolera o jego istnieniu i użycie go. Najpierw utwórzmy szablon.

Dodaj nowy plik o nazwie standard.html.erb do app / views / layouts. Poinformuj kontrolerów, jakiego szablonu użyć, używając nazwy pliku, więc zaleca się stosowanie tego samego schematu nazewnictwa.

Dodaj następujący kod do nowego pliku standard.html.erb i zapisz zmiany -

<!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>

Wszystko, co właśnie dodałeś, to standardowe elementy HTML z wyjątkiem dwóch linii. Plikstylesheet_link_taghelper wyświetla arkusz stylów <link>. W tym przypadku łączymy arkusz stylów style.css. Plikyield polecenie informuje Railsy, że powinno umieścić plik html.erb dla wywoływanej tu metody.

Teraz otwarte book_controller.rb i dodaj następującą linię tuż pod pierwszą linią -

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

Instruuje kontroler, że chcemy użyć układu dostępnego w pliku standard.html.erb. Teraz spróbuj przeglądać książki, co spowoduje wyświetlenie następującego ekranu.

Dodawanie arkusza stylów

Do tej pory nie stworzyliśmy żadnego arkusza stylów, więc Railsy używają domyślnego arkusza stylów. Teraz stwórzmy nowy plik o nazwie style.css i zapiszmy go w / public / stylesheets. Dodaj następujący kod do tego pliku.

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;
}

Teraz odśwież przeglądarkę i zobacz różnicę -

Co jest następne?

Następny rozdział wyjaśnia, jak tworzyć aplikacje przy użyciu Rails Scaffolding, aby umożliwić użytkownikom dodawanie, usuwanie i modyfikowanie rekordów w dowolnej bazie danych.