Ruby on Rails - Layout
Un layout definisce l'ambiente circostante una pagina HTML. È il luogo in cui definire un aspetto comune del tuo output finale. I file di layout risiedono in app / visualizzazioni / layout.
Il processo prevede la definizione di un modello di layout e quindi la comunicazione al controller che esiste e che lo utilizzi. Per prima cosa, creiamo il modello.
Aggiungi un nuovo file chiamato standard.html.erb ad app / views / layouts. Si comunica ai controller quale modello utilizzare con il nome del file, quindi si consiglia di seguire lo stesso schema di denominazione.
Aggiungi il codice seguente al nuovo file standard.html.erb e salva le modifiche -
<!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>Tutto ciò che hai appena aggiunto erano elementi HTML standard tranne due righe. Ilstylesheet_link_tagIl metodo helper genera un foglio di stile <link>. In questo caso, stiamo collegando il foglio di stile style.css. Ilyield comando fa sapere a Rails che dovrebbe mettere html.erb per il metodo chiamato qui.
Ora aperto book_controller.rb e aggiungi la riga seguente appena sotto la prima riga:
class BookController < ApplicationController
layout 'standard'
def list
@books = Book.all
end
...................Indica al controller che vogliamo utilizzare un layout disponibile nel file standard.html.erb. Ora prova a sfogliare i libri che produrranno la seguente schermata.
Aggiunta di fogli di stile
Fino ad ora, non abbiamo creato alcun foglio di stile, quindi Rails sta usando il foglio di stile predefinito. Ora creiamo un nuovo file chiamato style.css e lo salviamo in / public / stylesheets. Aggiungi il codice seguente a questo file.
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;
}Ora aggiorna il tuo browser e vedi la differenza -
Cosa c'è dopo?
Il prossimo capitolo spiega come sviluppare applicazioni usando Rails Scaffolding per dare agli utenti l'accesso per aggiungere, eliminare e modificare i record in qualsiasi database.