Introducció a Haml: un sistema de vistes web collunut

Haml va ser concebut per tal de fer vistes amb ruby on rails que fossin el més llegibles possible.

Per generar vistes amb aquest sistema cal instal·lar un pluguin a la nostra aplicació rails:


$./script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable

Aquesta ordre el que fa és descarregar els fitxers del plugin i els copia a la carpeta “vendor/plugins” de la nostra aplicacio rails.

Un cop instal·lat el pluguin, per crear plantilles hem de posar l’extensió .haml als fitxers de les vistes en comptes de .rhtml.

Per resumir una mica haml defineix els tags posant:

  
  %nom_tag
  
  Es converteix en:

  
  
    
  

Per posar les propietats d’un tag:

  
  %tag{ :propietat => "valor", :propietat2 => "valor2"}
  
  Es converteix en:

  
  
    
  

Si volem posar un tag del tipus %br que no es tanca li hem de posar / al final:

  
  %br/
  
  Es converteix en:

  
  

si és un tag amb propietats posem la contrabarra al final:

  
  %tag{...}/
  

Per aniuar tags un dins l’altre cal identar amb dos espais.

Per posar la propietat id d’un tag hem de posar (#) i per posar un class (.).

  
    p#prova.hola="Hola"
  
  Es converteix en:

  

Hola

Si senzillament volem posar un div

  
  #id.class
  
  Es converteix en:

    

Quan no posem nom al (#) haml ho converteix en un div

Si per exemple volem definir una taula:

  
  %table{:border => 1}
      %tr
        %td{:width => 20}="el que sigui"
        %td{:width => 50}
          posem el text que ens vingui de gust
      %tr
        %td{:colspan => 2}="Això és un text"
  
  Es converteix en:

  
el que sigui posem el text que ens vingui de gust
Això és un text

Per inserir codi ruby en mig s’ha d’emprar el guió mig(-):

  
  %html
      %head
        %title="Prova"
      %body
        - unless flash[:notice].nil?
        #error="Missatge d'error"
        - end
  

Nota: cal identar el codi ruby a dins del tag corresponent

0 Responses to “Introducció a Haml: un sistema de vistes web collunut”


  • No Comments

Leave a Reply

Últims Twitts

Posting tweet...