Le pagine di una stessa applicazione Web condividono spesso alcuni elementi grafici; anche sezioni differenti dell'applicazione tendono a mantenere un aspetto coerente. Quindi non è insolito che intere porzioni di codice HTML siano sempre uguali, come l'intestazione e il fondo della pagina.
Rails mette a disposizione i layout per definire delle "cornici" condivise fra differenti viste, nelle quali inseriamo solamente il codice particolare di una singola view.
Rails abbina automaticamente ad ogni controller, per tutte la action presenti all'interno del controller, il layout presente nella cartella app/views/layouts avente lo stesso nome del controller; così per il controller BookmarksController viene abbinato il layout app/views/layouts/bookmarks.html.erb.
Ecco un esempio di come si presenta il layout:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Bookmarks: <%= controller.action_name %></title>
<%= stylesheet_link_tag 'scaffold' %>
</head>
<body>
<p style="color: green"><%= flash[:notice] %></p>
<%= yield %>
</body>
</html>
Il comando che più ci interessa è <%= yield %>, che indica la posizione in cui andrà ad essere inserito il codice specifico di ogni vista.
Creiamo ora un nuovo layout, da utilizzare per tutti i controller della nostra applicazione (BookmarksController e TagsController). Nella cartella app/views/layouts creiamo il file standard.html.erb e inseriamo il seguente codice:
<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Bookmark Manager</title> <%= stylesheet_link_tag 'scaffold' %> </head> <body> <p style="color: green"><%= flash[:notice] %></p> <%= yield %> <hr /> <p><small><%= link_to "Ruby@HTML.it", "http://ruby.html.it" %></small></p> </body> </html>
Ora modifichiamo il controller BookmarksController per indicare il nuovo template da utilizzare; apriamo il file app/controllers/bookmarks_controller.rb e inseriamo l'indicazione del layout da utilizzare in questo modo:
class BookmarksController < ApplicationController
layout "standard"
# GET /bookmarks
...
Avviamo il server e navighiamo le pagine dell'applicazione: in tutte le viste del controller BookmarksController ora appare il piccolo footer che abbiamo introdotto nel nuovo layout.
Se necessario è possibile scegliere le viste a cui vogliamo applicare il layout:
| Operazione | Descrizione |
|---|---|
layout "standard", :only => :index |
applica il layout solo alla vista della action index |
layout "standard", :except => :show |
applica il layout a tutte le viste tranne che a quella della action show |
Applichiamo ora il template a tutte le action del controller TagsController aggiungendo l'istruzione layout "standard" nel file app/controllers/tags_controller.rb:
class TagsController < ApplicationController
layout "standard"
def show
...
Il layout che abbiamo creato ha estensione html.erb, questo indica, come per le viste, che il layout è da utilizzare per la generazione delle pagine HTML e che il sistema di template da utilizzare è erb.
Erb permette di introdurre componenti dinamiche all'interno del template, così come si farebbe in una vista. Una pratica diffusa ad esempio è di inserire per il tag title del layout il seguente codice:
<title><%= @page_title %></title>
Infine assegnare ad ogni action una stringa differente alla variabile @page_title; in questo modo ogni vista avrà il proprio titolo pur utilizzando il template comune.