Introduction to HAML
- 1. HAML Web Templating for Human Beings
- 2. Introduction HAML is Markup language Its purpose is to describe HTML in a clean, simple way
- 3. Introduction Lets face it, HTML is pretty annoying
- 4. Introduction HAML aims to solve problems with ordinary HTML coding
- 5. Introduction • Markup should be beautiful • Markup should be DRY • Too much repetition in HTML and templating engines like ERB • Markup should be well-indented • Markup structure should be clear
- 6. The problems with HTML Programmers don’t speak HTML The whole concept of markup is foreign as there’s no logic involved.
- 7. The problems with HTML The mix of markup and logic seems a bit odd, if not ugly. Markup should be beautiful, not just code
- 8. The problems with HTML There’s just too much repetition in HTML. All those open and close tags are redundant
- 9. The problems with HTML Keeping track of open and close HTML and template tags is tedious.
- 10. HAML to the rescue <ul id=”navigation”> <li class=”menu_item”> <a href=”/home” title=”Home”>Home</a> </li> </ul> %ul#navigation %li.menu_item %a({:href => “/home”, :title => “Home” }) Home
- 11. HAML Basics !!! 5 %html %head %title Haml Test %body #header %h1 Welcome to my blog %nav#navigation #content = yield
- 12. HAML Basics • HTML Tags are prefixed with % • ID attribute is prefixed with # • Class attribute is prefixed with . • Default HTML tag is <div>
- 13. HAML Basics • Additional attributes are passed as • space-separated attr./value pairs • %a(title=@title href=href) Stuff • attr./value hash • %a{:title => @title, :href => href} Stuff
- 14. HAML Formatting Remove whitespace using < and > characters %img %img> %img Compiles into <img /><img /><img />
- 15. HAML Formatting %p<= “FoonBar” Compiles into <p>Foo Bar</p>
- 16. HAML Formatting Escape HTML entities using the & sign &= “I like Cheese & Crackers” Compiles into I like Cheese & Crackers
- 17. HAML Formatting Disable HTML unescaping using the ! sign != “<strong>Foo</strong>” Compiles into <strong>Foo</strong>
- 18. Dynamic HAML HAML supports dynamic content as well as static content. (let the real fun begin)
- 19. Dynamic HAML • We use the “=” sign to evaluate dynamic code and assign the value to the desired tag • We use the “-” sign to run code without appending a value to any tag • We use Ruby interpolation to mix static and dynamic strings
- 20. Dynamic HAML %h2= “Posts for #{Time.now}” %ul#posts - @posts.each do |post| %li.post_item %h3= post.title %p= post.post %p=
- 21. Dynamic HAML HAML doesn’t limit us to just plain old code running and evaluation. Since markup documents may contain a mix of other languages (like Javascript or CSS), we can use Filters to parse those languages into HAML
- 22. HAML Filters
- 23. HAML Filters :javascript document.getElementById(‘content’); :css body{ font:normal normal 14px Arial,sans-serif; } :sass li font: family: serif
- 24. HAML Filters :markdown Textile ======= Hello, *World* :textile I *really* prefer _#{h flavor}_ jam.
- 25. HAML Filters :zohar module Haml::Filters::Zohar include Haml::Filters::Base def render(text) # run some snazzy logic text end end
- 26. HAML interoperability • Python - HamlPy & DAML (Django) • PHP - Fammel, pHAML, phpHAML • .NET - NHaml, MonoRail NHaml • Javascript - HAML-js • Perl - Text::Haml • Java - JHaml
- 27. HAML Questions ?