Skip to content

HAML Layout

Jump to bottom Edit New page
m3nt0r edited this page Sep 13, 2010 · 5 revisions

All views have their own extension. I chose *.haml so you can always revert to the default View class. I will now explain how to replace the layouts/default.ctp with a working layouts/default.haml. You should also start with this because without it nothing will work.

Create the file default.haml (or whatever layout name you chose + .haml) and begin with three exclamation marks (!!!). This HAML directive will tell the renderer that we are going to produce XHTML 1.1 and print out the matching DocType on that location.

Instead of continuing step by step i will throw a complete working default.haml at you and explain later.

!!! 
%head
	%title FooBar
%body
	#wrap
		#header
			%h1 FooBar
		#content
			- $session->flash()
			= $content_for_layout
		#footer
			foo.bar (c) 2009

This is the very basic layout that you will need to get started.

###About the Markup###

The indention used in this layout was tab-based. Unlike the real HAML we don’t use the double-space indention here. Easier1…

####%head####
The percent-sign is used to tell the parser that the following is a HTML tagname. In our second line this is the <head> tag.

####%#header%####
The hash-sign is used to identify a DOM ID. This is much like CSS Syntax only that it also produces a <div> tag. In fact, this produces <div id="header">

####- $session→flash()####
The dash tells the parser to treat the following content as PHP code. It will wrap the content in <?php .. ?> tags.

  1. $content_for_layout####
    The equal-sign tells the parser to echo the following content. It will wrap the content in <?php echo .. ?> tags.

####%#footer whatever%####
In the #footer section you see that i just wrote a little copyright notice. Nothing dynamic. This works everywhere.

###About the structure###

As you can see this is very well structured. Think of it as a tree. Every child is wrapped around it’s parent. Wether it’s static text, another tag or dynamic content. The beauty is that we don’t need semicolons in php, nor the php-tags. We also don’t need to close tags or even write tags as much as we would do in HTML. Of course could one argue that you save like 5 to 10 chars per line and what the big deal is, but if we think about the complete project these few characters add up pretty fast.

##Extending the basic layout##

This is all good, but let’s get dirty. We now want to use helpers, add scripts and put some dynamic stuff here and there.

!!! 
%head
	%title FooBar
		= $title_for_layout
	= $html->css('style')
%body
	#wrap
		#header
			%h1= $html->link('FooBar', '/')
		#content
			- $session->flash()
			= $content_for_layout
		#footer
			foo.bar (c) 2009
	
	%script{ :type => 'text/javascript' }
		var base = '<?=$this->base; ?>', here = '<?=$this->here; ?>';
	%script@=$html->url('/js/libs/prototype-1.6.0.2.js')
	%script@=$html->url('/js/libs/scriptaculous-1.8.1.js')
	%script@=$html->url('/js/libs/lowpro-0.5.js')
	%script@=$html->url('/js/application.js')

Whoa! Alot of stuff and weird characters, but this is just a raw mix of what’s possible.

  1. $title_for_layout####
    We just indent the next line and add our equal-sign directive to add the $title_for_layout we all know about. The extra indention will put the output into the %title tag. Of course we can do it conditional, but i don’t believe that this is ment to be in a view, but that’s another story.

####%h1= $html→link(‘FooBar’, ‘/’)####
You can write in one line, if it’s one line! If we specify a tag (in any valid way) and add the little equal sign right after it we are allowed to echo whatever PHP code is following it. For example we could simplify the title tag the same way doing %title= 'FooBar '.$title_for_layout.

####%script{ :type => ‘text/javascript’ }####
Yup.. that’s how we do attributes. This is helpful when adding meta tags and stuff. You can place variables1 instead of strings, too. We’ve filled the script tag the same way we fill any other tag. We just start a bew line, indent by one, write our Inline-Javascript and move on.

####%script@=/application.js####
Okay.. that’s a little more advanced and also features a new function i’ve added/ported. The at-sign combined with the equal sign. This is a shorthand to ‘src’ in the case of script tag. So instead of writing %script{ :type => 'text/javascript', :src => $html->url('/js/application.js') }, we just put the at-sign and write the src-URL. The fun part is that it automaticly knows about CakePHP and uses the html helper if you use the equal sign.

###Produced HTML###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
  <title>
    FooBar
Home  </title>
<link rel="stylesheet" type="text/css" href="/cakephp/rb/ccss/style.css" /></head>
<body>
  <div id="wrap">
    <div id="header">
      <h1><a href="/cakephp/">FooBar</a></h1>
    </div>
    <div id="content">

    </div>
    <div id="footer">
      foo.bar (c) 2009
    </div>
  </div>

  <script type="text/javascript">
    var base = '/cakephp', here = '/cakephp/';
  </script>
  <script type="text/javascript" src="/cakephp/js/libs/prototype-1.6.0.2.js"></script>
  <script type="text/javascript" src="/cakephp/js/libs/scriptaculous-1.8.1.js"></script>
  <script type="text/javascript" src="/cakephp/js/libs/lowpro-0.5.js"></script>
  <script type="text/javascript" src="/cakephp/js/application.js"></script>
</body><!-- 0.2474s -->

Only thing that sucks right now is that helper methods don’t properly indent (link tag) and that the title_for_layout expands over a new line. These are cosmetics which i will take care of some time soon. If you leave out helpers and stuff (okay, you won’t. just saying) the parser generates beautiful indented HTML. My goal is to achieve this with helpers and echos. Why? Because structure does matter!

###Classes? Where are they?###

You’ve learned about the hash-sign which is much like CSS and just about the same with classes.

#content
	.hello
		This is our hello-message to you.

Prints out: 







	



		This is our hello-message to you.

You can also combine hash-tags with classes like so:



#content.hello

	This is our hello-message to you.

###Showing muscles###

%a{ :title => 'Back to Index' }.home@=$html->url('/') Back to Index
<a title="Back to Index" href="/cakephp/" class="home">Back to Index</a>

1 I hacked the parser pretty much to be more convinient for CakePHP people. This means that i’ve added features and changed stuff. More notably the indention. But this will soon be configurable so don’t worry. This is still HAML.

Add a custom footer
Add a custom sidebar
Clone this wiki locally