• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Sistema di template HAML

sant0

Utente Esperto
Autore del topic
1 Settembre 2014
1.345
124
Miglior risposta
0
In una mia precedente guida sull'installazione di Ruby On Rails ho fatto vedere come i file views usassero una versione di HTML combinata al Ruby: sto parlando di eRuby.

Oggi parlerò di un valido sostituto di suddetto linguaggio:
Perfavore, Entra oppure Registrati per vedere i Link!
. Esso rende la creazione dei template, oltre che più bella sintatticamente, più semplice.

Per installare HAML bisogna avere Ruby Gems e digitare da terminale:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Un possibile codice, richiamando il modulo Haml da Ruby potrebbe essere:
Ruby:
Perfavore, Entra oppure Registrati per vedere i codici!
Una volta eseguito, avremo in output <h1>hello, world</h1>.

Per installare Haml all'interno del proprio progetto Rails bisogna aggiungere gem 'haml' all'interno del Gemfile.
Adesso modifichiamo i file all'interno di app/views che hanno estensione .html.erb in .html.haml.

Un esempio di file in eRuby:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

può essere scritto così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Sintassi
L'Haml fa molto caso all'indentanzione: se ad esempio usassimo un tab (di 4 spazi) al posto di 4 spazi, Rails genererà un errore. Per conformità il codice Ruby, in genere, viene indentato con 2 spazi, pertanto, da ora in poi, tutto il codice sarà indentato in tal modo.
Ogni elemento indentato è all'interno del tag superiore:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Spieghiamo il codice soprastante:
!!! -> genera il doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
Perfavore, Entra oppure Registrati per vedere i Link!
">


Se invece volessimo usare una versione del doctype diversa, basta inserire la versione dopo !!!:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Il codice sopra genererà il doctype stile HTML5:
<!DOCTYPE html>
% -> identificato di un tag HTML
-# -> commento Haml (non viene generato nel file HTML)
/ -> commento HTML

Come si può notare, nel commento Haml, non viene identificato solo la parola "Genera:" bensì tutto quello che viene indentato.

Se volessimo inserire degli attributi ai tag basta inserire i symbols all'interno delle parentesi graffe (o tonde):
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

In realtà, gli attributi class e id possono essere scritti anche in modo più semplificativo %tag.class.id:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Ad ogni modo, il tag div, può essere omesso:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Per eseguire del codice Ruby, basta inserire prima il trattino (-):
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Per l'inserimento di testo Ruby basta usare il simbolo dell'uguale (=) e prendendo d'esempio il codice soprastante:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Spero la guida vi sia stata utile; alla prossima :emoji_nerd:
 
Ultima modifica: