Immagini, JavaScript e fogli di stile

Le viste di norma utilizzano differenti asset per la corretta visualizzazione della pagina HTML (fogli di stile, immagini, file Javascript); Rails mette a disposizione una serie di tag specializzati per l’inclusione di questi asset nella pagina, e prepara una serie di cartelle nelle quali depositare i relativi file.

Durante la creazione dello scheletro dell’applicazione Rails sono state preparate alcune cartelle dedicate ad ospitare immagini, javascript e css:

• public/images – per le immagini
• public/javascripts – per i javascript
• public/stylesheets – per i fogli di stile

L’applicazione di prova che abbiamo creato contiene già alcuni file all’interno di queste cartelle: public/images contiene il logo di Ruby on Rails che appare nella schermata di benvenuto, public/javascripts contiene i file del framework javascript Prototype (integrato in Rails) e public/stylesheets contiene il foglio di stile scaffold.css, generato automaticamente dal comando scaffold utilizzato per la creazione della risorsa Bookmark.

Depositando immagini, javascript e fogli di stile nelle rispettive cartelle, abbiamo accesso ad alcuni comandi dedicati alla loro inclusione nelle viste.

Supponiamo di aggiungere alle nostre cartelle una immagine dal nome immagine.gif, un file Javascript dal nome javascript.js e un foglio di stile dal nome stile.css, ognuno nella cartella predisposta per il diverso tipo di file.

Per includere l’immagine è possibile utilizzare il comando:

<%= image_tag("immagine.gif") %>

che produrrà il codice HTML:

<img src="immagine.gif" />

È possibile specificare alcuni attributi tipici del tag <img>, come alt, width, height:

<%= image_tag("immagine.gif", size => "16x16", :alt => "Immagine") %>

produce il codice HTML:

<img src="imagine.gif" width="16" height="16" alt="Immagine" />

Per includere il file javascript è sufficiente inserire il comando:

<%= javascript_include_tag 'javascript'%>

Per includere il foglio di stile possiamo invece utilizzare il comando:

<%= stylesheet_link_tag 'stile' %>

Per il tag di inclusione del foglio di stile l’opzione :media permette di specificare il media al quale il foglio di stile è dedicato; inserendo il codice:

<%= stylesheet_link_tag 'stile', :media => "print" %>

Si otterrà il codice HTML:

<link href="stile.css" media="print" rel="stylesheet" type="text/css" />

È possibile organizzare i file in cartelle e sottocartelle, ad esempio creare una cartella images/avatars, e specificare la sottocartella nel tag:

<%= image_tag("avatars/immagine.gif") %>