Topic: Haml -- A Great Alternative to RHTML
Is your head is swimming and your eyes blurring from <%= and %> tags? Are you having trouble picking out your document structure among all the markup? Lucky for us, Rails allows for alternate template languages. One that is gaining traction right now is Haml. The reason is that it generates beautiful XHTML every time and your source reflects your document structure.
This all seems good, but what's the catch? Well the answer is pretty much: There is no catch. But, it's a work-style change. First let's look at what an RHTML file and its corresponding Haml file might look like:
The RHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
</meta>
<%= stylesheet_link_tag('application') %>
<%= javascript_include_tag(:defaults) %>
<title><%= yield :header %></title>
</head>
<body>
<div id='banner'>
<img alt="Banner_l" height="135" src="/images/banner_l.gif?1170462461" width="263" />
</div>
<div id='menu'>
<div id='menu-container'>
<%= render :partial => '/layouts/shared/nav_links' %>
</div>
</div>
<div id='content'>
<%= yield %>
<div id='footer'>
<p>
copyright © <%= "#{Date.today.year}." -%> all rights reserved
</p>
</div>
</div>
</body>
</html>
Now, the Haml:
!!!
%html
%head
%meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}
= stylesheet_link_tag('application')
= javascript_include_tag(:defaults)
%title= yield :title
%body
#banner= image_tag('banner_l.gif', :size => '263x135')
#menu
#menu-container
= render :partial => '/layouts/shared/nav_links'
#content
= yield
#footer
%p
copyright ©
= "#{Date.today.year}."
all rights reserved
%p= footer_links
If you're like me, you will find the Haml much more concise, and reflective of the structure of the XHTML document. Coincidentally, that makes it easier to associate CSS styles with elements without doing a ton of visual parsing of your code. In Haml's trunk (if you like to live on the edge) is Sass, which is to CSS as Haml is to Rhtml. Sass is best left for a different tutorial.
So, how to get started with Haml? Install the plugin as follows:
script/plugin install http://svn.hamptoncatlin.com/haml/trunk haml
Rails will keep rendering your Rhtml files just fine, but when you write a view file with the .haml extension, Haml kicks in.
Rules of the road:
Haml is space-sensitive! All blocks in Haml are denoted by a two-space increase in indentation. Don't use tabs.
Normal HTML tags are prefixed with the % character. So:
%p now is the time
is the same as
%p
now is
the time
Classes are denoted by a preceding period, so an emphasized paragraph might read:
%p.reallyimportant Listen Up!
IDs are similarly identified by a preceding hash mark:
#menu.item= @menus[:name]
Note in the above, there is an equal-sign right after the tag? That means what follows is Erb! Just like in Rhtml.
If you want to set options, use a hash, as follows:
#menu{:background => "#ffeeee"} I have bad taste in background colorsFinally there is the much-debated issue of silent code in views. Here's the Haml take on that:
- for line_item in @line_items
you have
= line_item[:quantity]
things in your shopping cart.
Notice that there was no need to close the block with an explicit "end". Haml figured that out from the indentation.
I hope this has been a useful introduction to what I find an enormous productivity tool. For further reading, see:
http://unspace.ca/discover/haml
Enjoy!
