Ruby on Rails - Mises en page

Une mise en page définit l'environnement d'une page HTML. C'est l'endroit pour définir un aspect et une sensation communs de votre sortie finale. Les fichiers de mise en page résident dans app / vues / mises en page.

Le processus consiste à définir un modèle de mise en page, puis à informer le contrôleur de son existence et à l'utiliser. Commençons par créer le modèle.

Ajoutez un nouveau fichier appelé standard.html.erb à app / views / layouts. Vous indiquez aux contrôleurs quel modèle utiliser par le nom du fichier, il est donc conseillé de suivre le même schéma de dénomination.

Ajoutez le code suivant au nouveau fichier standard.html.erb et enregistrez vos modifications -

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

Tout ce que vous venez d'ajouter était des éléments HTML standard à l'exception de deux lignes. lestylesheet_link_tagLa méthode helper génère une feuille de style <link>. Dans cet exemple, nous lions la feuille de style style.css. leyield La commande permet à Rails de savoir qu'elle doit mettre le html.erb pour la méthode appelée ici.

Ouvert book_controller.rb et ajoutez la ligne suivante juste en dessous de la première ligne -

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

Il indique au contrôleur que nous voulons utiliser une mise en page disponible dans le fichier standard.html.erb. Maintenant, essayez de parcourir les livres qui produiront l'écran suivant.

Ajouter une feuille de style

Jusqu'à présent, nous n'avons créé aucune feuille de style, donc Rails utilise la feuille de style par défaut. Créons maintenant un nouveau fichier appelé style.css et sauvegardons-le dans / public / stylesheets. Ajoutez le code suivant à ce fichier.

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

Maintenant, actualisez votre navigateur et voyez la différence -

Quelle est la prochaine?

Le chapitre suivant explique comment développer des applications à l'aide de Rails Scaffolding pour donner à l'utilisateur l'accès pour ajouter, supprimer et modifier les enregistrements dans n'importe quelle base de données.