Quick start – using Haml

Exclusive offer: get 50% off this eBook here
Instant Haml [Instant]

Instant Haml [Instant] — Save 50%

Learn how to integrate Haml into your current application setup and development workflow with this book and ebook

$14.99    $7.50
by Krzysztof Niksiński | September 2013 | Open Source

In this article by Krzysztof Niksinski, the author of Instant Haml, we will look into a few steps in using Haml.

(For more resources related to this topic, see here.)

Step 1 – integrating with Rails and creating a simple view file

Let's create a simple rails application and change one of the view files to Haml from ERB:

  1. Create a new rails application named blog:

    rails new blog

  2. Add the Haml gem to this application's Gemfile and run it:

    bundle install

  3. When the gem has been added, generate some views that we can convert to Haml and learn about its basic features. Run the Rails scaffold generator to create a scffold named post.

    rails g scaffold post

  4. After this, you need to run the migrations to create the database tables:

    rake db:migrate

  5. You should get an output as shown in the following screenshot:

Our application is not yet generating Haml views automatically. We will switch it to this mode in the next steps.

The index.html.erb file that has been generated and is located in app/views/posts/index.html.erb looks as follows:

<h1>Listing posts</h1>

<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>

<% @posts.each do |post| %>
<tr>
<td><%= link_to 'Show', post %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, method: :delete, data: { confirm:
'Are you sure?' } %></td>
</tr>
<% end %>
</table>

<br>

<%= link_to 'New Post', new_post_path %>]

Let's convert it to an Haml view step-by-step. First, let's understand the basic features of Haml:

  • Any HTML tags are written with a percent sign and then the name of the tag
  • Whitespace (tabs) is being used to create nested tags
  • Any part of an Haml line that is not interpreted as something else is taken to be plain text
  • Closing tags as well as end statements are omitted for Ruby blocks

Knowing the previous features we can write the first lines of our example view in Haml. Open the index.html.erb file in an editor and replace <h1>, <table>, <th>, and <tr> as follows:

  • <h1>Listing posts</h1> can be written as %h1 Listing posts
  • <table> can be written as %table
  • <tr> becomes %tr
  • <th> becomes %th

After those first replacements our view file should look like:

%h1 Listing posts
%table
%tr
%th
%th
%th

<% @posts.each do |post| %>
<tr>
<td><%= link_to 'Show', post %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, method: :delete, data: { confirm:
'Are you sure?' } %></td>
</tr>
<% end %>

<br>

<%= link_to 'New Post', new_post_path %>

Please notice how %tr is nested within the %table tag using a tab and also how %th is nested within %tr using a tab.

Next, let's convert the Ruby parts of this view. Ruby is evaluated and its output is inserted into the view when using the equals character. In ERB we had to use <%=, whereas in Haml, this is shortened to just a =. The following examples illustrate this:

  • <%= link_to 'Show', post %> becomes = link_to 'Show', post and all the other <%= parts are changed accordingly
  • The equals sign can be used at the end of the tag to insert the Ruby code within that tag
  • Empty (void) tags, such as <br>, are created by adding a forward slash at the end of the tag

Please note that you have to leave a space after the equals sign. After the changes are incorporated, our view file will look like

%h1 Listing posts
%table
%tr
%th
%th
%th
<% @posts.each do |post| %>
%tr
%td= link_to 'Show',post
%td= link_to 'Edit',edit_post_path(post)
%td= link_to 'Destroy',post,method: :delete,data: { confirm: 'Are
you sure?' }
%br/
= link_to 'New Post',new_post_path

The only thing left to do now is to convert the Ruby block part: <% @posts.each do | post | %>. Code that needs to be run, but does not generate any output, is written using a hyphen character. Here is how this conversion works:

  • Ruby blocks do not need to be closed, they end when the indentation decreases
  • HTML tags and the Ruby code that is nested within the block are indented by one tab more than the block
  • <% @posts.each do |post| %> becomes - @ posts.each do |post|
  • Remember about a space after the hyphen character

After we replace the remaining part in our view file according to the previous rules, it should look as follows:

%h1 Listing posts
%table
%tr
%th
%th
%th
- @posts.each do |post|
%tr
%td= link_to 'Show', post
%td= link_to 'Edit', edit_post_path(post)
%td= link_to 'Destroy', post, method: :delete, data: { confirm:
'Are you sure?' }
%br/
= link_to 'New Post', new_post_path

Save the view file and change its name to index.html.haml. This is now an Haml-based template. Start our example Rails application and visit http: //localhost:3000/posts to see the view being rendered by Rails, as shown in the following screenshot:

Step 2 – switching Rails application to use Haml as the templating engine

In the previous step, we have enabled Haml in the test application. However, if you generate new view files using any of the Rails built-in generators, it will still use ERB.

Let's switch the application to use Haml as the templating engine.

Edit the blog application Gemfile and add a gem named haml-rails to it. You can add it to the :development group because the generators are only used during development and this functionality is not needed in production or test environments.

Our application Gemfile now looks as shown in the following code:

source 'https://rubygems.org'

gem 'rails', '3.2.13'

gem 'sqlite3'
gem 'haml'
gem 'haml-rails', :group => :development

group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

Then run following bundle command to install the gem:

bundle install

Let's say the posts in our application need to have categories. Run the scaffold generator to create some views for categories. This generator will create views using Haml, as shown in the following screenshot:

Please note that new views have a .html.haml extension and are using Haml. For example, the _form.html.haml view for the form looks as follows:

= form_for @category do |f|Asjd12As
- if @category.errors.any?
#error_explanation
%h2= "#{pluralize(@category.errors.count, "error")} prohibited
this category from being saved:"
%ul
- @category.errors.full_messages.each do |msg|
%li= msg
.actions
= f.submit 'Save'

There are two very useful shorthand notations for creating a <div> tag with a class or a <div> tag with an ID.

To create a div with an ID, use the hash symbol followed by the name of the ID. For example, #error_explanation will result in <div id="error_explanation">

To create a <div>tag with a class attribute, use a dot followed by the name of the class. For example, .actions will create <div class="actions">

Step 3 – converting existing view templates to Haml

Our example blog app still has some leftover templates which are using ERB as well as an application.html.erb layout file. We would like to convert those to Haml. There is no need to do it all individually, because there is a handy gem which will automatically convert all the ERB files to Haml, shown as follows:

  1. Let's install the html2haml gem:

    gem install html2haml

  2. Using the cd command, change the current working directory to the app directory of our example application and run the following bash command to convert all the ERB files to Haml (to run this command you need a bash shell. On Windows, you can use the embedded bash shell which ships with GitHub for Windows, Cygwin bash, MinGW bash, or the MSYS bash shell which is bundled with Git for Windows).

    for file in $(find . -type f -name \*.html.erb); do
    html2haml -e ${file} "$(dirname ${file})/$(basename ${file}
    .erb).haml";

    done

  3. Then to remove the ERB files and run this command:

    find ./ -name *erb | while read line; do rm $line; done

  4. Those two Bash snippets will first convert all the ERB files recursively in the app directory of our application and then remove the remaining ERB view templates.

Summary

This article covered integrating with Rails and creating a simple view file, switching Rails application to use Haml as the templating engine, and converting existing view templates to Haml.

Resources for Article :


Further resources on this subject:


Instant Haml [Instant] Learn how to integrate Haml into your current application setup and development workflow with this book and ebook
Published: September 2013
eBook Price: $14.99
See more
Select your format and quantity:

About the Author :


Krzysztof Niksiński

Krzysztof Niksiński is a Ruby On Rails developer from Warsaw, Poland. He has been a Ruby On Rails freelancer since 2003 and regrets that he started using HAML only four years ago in his projects, because it would have saved his lot of time and efforts. He loves to create web applications, which use multiple technologies in synergy, as well as configure all the underlying layers of the application servers, databases, and operating systems. Playing with all the systems that make Internet work is his daily bread and butter. He grew up in Warsaw, where he attended the Warsaw University of Technology. Later, he started to work as an Internet Systems administrator in a bank, where he learned all the details of Internet services and protocols. He later fell in love with Ruby and started his own Ruby On Rails development company. At the time of this writing he also works as a Middleware Infrastructure Administrator for Acxiom, a marketing technology and services company. Krzysztof spends his free time creating electronic music, playing basketball with his friends, or training his dog, Goofy.

Books From Packt


 SproutCore Web Application Development
SproutCore Web Application Development

Mobile First Design with HTML5 and CSS3
Mobile First Design with HTML5 and CSS3

HTML5 and CSS3 Transition, Transformation and Animation
HTML5 and CSS3 Transition, Transformation and Animation

Developing Windows Store Apps with HTML5 and JavaScript
Developing Windows Store Apps with HTML5 and JavaScript

Instant Migration to HTML5 and CSS3 How-to [Instant]
Instant Migration to HTML5 and CSS3 How-to [Instant]

HTML5 Boilerplate Web Development
HTML5 Boilerplate Web Development

HTML5 Data and Services Cookbook
HTML5 Data and Services Cookbook

HTML5 Canvas Cookbook
HTML5 Canvas Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
m
V
N
T
z
N
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software