Introduction to HAML

5,460 views

Published on

Introduction to HAML

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,460
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Introduction to HAML

    1. 1. HAMLWeb Templating for Human Beings
    2. 2. IntroductionHAML is Markup language Its purpose is to describeHTML in a clean, simple way
    3. 3. Introduction Lets face it, HTML is pretty annoying
    4. 4. IntroductionHAML aims to solve problemswith ordinary HTML coding
    5. 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. 6. The problems with HTML Programmers don’t speak HTML The whole concept of markup is foreign as there’s no logic involved.
    7. 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. 8. The problems with HTMLThere’s just too much repetition in HTML.All those open and close tags are redundant
    9. 9. The problems with HTML Keeping track of open and close HTML and template tags is tedious.
    10. 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. 11. HAML Basics!!! 5%html %head %title Haml Test %body #header %h1 Welcome to my blog %nav#navigation #content = yield
    12. 12. HAML Basics• HTML Tags are prefixed with %• ID attribute is prefixed with #• Class attribute is prefixed with .• Default HTML tag is <div>
    13. 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. 14. HAML FormattingRemove whitespace using < and > characters%img%img>%imgCompiles into<img /><img /><img />
    15. 15. HAML Formatting%p<= “FoonBar”Compiles into<p>FooBar</p>
    16. 16. HAML FormattingEscape HTML entities using the & sign&= “I like Cheese & Crackers”Compiles intoI like Cheese &amp; Crackers
    17. 17. HAML FormattingDisable HTML unescaping using the ! sign!= “<strong>Foo</strong>”Compiles into<strong>Foo</strong>
    18. 18. Dynamic HAMLHAML supports dynamic content as well asstatic content.(let the real fun begin)
    19. 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. 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. 21. Dynamic HAMLHAML doesn’t limit us to just plain old coderunning and evaluation.Since markup documents may contain a mixof other languages (like Javascript or CSS),we can use Filters to parse those languagesinto HAML
    22. 22. HAML Filters
    23. 23. HAML Filters:javascript document.getElementById(‘content’);:css body{ font:normal normal 14px Arial,sans-serif; }:sassli font: family: serif
    24. 24. HAML Filters:markdown Textile ======= Hello, *World*:textile I *really* prefer _#{h flavor}_ jam.
    25. 25. HAML Filters:zoharmodule Haml::Filters::Zohar include Haml::Filters::Base def render(text) # run some snazzy logic text endend
    26. 26. HAML interoperability• Python - HamlPy & DAML (Django)• PHP - Fammel, pHAML, phpHAML• .NET - NHaml, MonoRail NHaml• Javascript - HAML-js• Perl - Text::Haml• Java - JHaml
    27. 27. HAMLQuestions ?

    ×