Props: My family, the HAML folks, everybody at Applied Autonomics LLC.
Cheat Sheet
pHAML | What it does |
---|---|
%tagname.class1.class2#id{attribute_1="value 1"...} Element Content | Create and element and put the content after it |
A text line without preceding command | Just print as is (according to indent) |
\ the line | Eat the '\', print the line as is |
/ the line | Create HTML comment from the line |
<<< >>> | Print everything between <<< & >>> verbatim |
- | Wrap what follows in PHP tags |
? | Turn on/off debug HTML comments |
?? | Turn on/off rendering as browser viewable HTML |
!!! & !!!! | Opening doctype elements |
Spacing | |
Indentation is how pHAML determines the tag structure. Elements indented more than the elements above will be contained within the one above. Elements with the same (or less) indentation will cause all elements above with more indentation to close. |
|
Simple HTML Document | Simple XML Document |
!!!! %html %head %title Simple Document %body %p this is the body, 5 lines=real document |
!!! XML %element_1 %element_2 <![CDATA[ Stuff ]]> %element_3 |
Debug Hints | |
Try the following, turn on the debug comments, then show the HTML: %pre ? ?? %problem_element(s) ... ?? ? |
Here are some common debug issues, in order of occurence:
When in doubt, you can look through the documentation code, since that is all pHAML, or read the source. If after all that, and you have found an undocumented feature (ok, call it a bug), or have a suggestion, submit it please. |
Try it for a few days...it can save you hours.
This project is truly a work of accident. While working on an implementation of our Autonomic Services Framework, there was the need to quickly develop a web site. Somewhere in the midst of trying to figure out which table data tag to change the class of, the thought occurred that maybe a new way was needed. HAML ( http://haml.hamptoncatlin.com/ ) showed up. HAML looked like a nice implementation of a �templating� system for HTML and XML. Templating systems are not new, and there are several ways to do them, HAML seemed like a nice approach. The problem was that it was not in PHP, but Ruby�Ruby is nice, but PHP has always stood out as the fastest way to develop applications for web services (and yes, we tried RAILS, but that is still a technical distance from the data warehousing/AI work that we do).
The great thing about open source is that you can view the code, take a look at how others do it. HAML is well written and documented�so it did not take long to get the gist. The first step was to copy in the core code of HAML and rewrite it in PHP, but that approach left a lot of strengths of PHP on the table. So quickly, the approach changed to what you see in this implementation. That was a good thing, since I later found a PHP implementation of HAML. Which in itself was a good thing since I do not like rewriting code, I may have never written this.
The first production level release of the code was written in two days�the core has remained the same, there has been some refactoring, and some added functions. But the entire functionality boils down to around 160 lines of code�which keeps it simple, yet powerful�and that is the combination that creates value.
The name is pun on Pig Latin, and HAML. So this is like HAML, only different--in ways good for PHP and getting code done.
There is no greater fan of the principles behind HAML than pHAML, markup should be beautiful, DRY (don't repeat yourself), well-indented, and the XHTML structure should be clear.
This solution was created to enhance Smarty (it evolved a bit since then). There have been other tweaks to assist in the creation of code. Also, PHP and Ruby share a bit, but are a bit different as well.
This entire document has been produced in pHAML, it is included in the examples, and shows almost all of the functionality.
The basic structure of a line of pHAML code is:
%tagname.class1.class2#id{attribute_1="value 1"...} Element Content
Since experience is the best teacher, we are going to use examples.
A Simple Tag
pHAML | HTML Result |
---|---|
%tagname
|
<tagname> </tagname> |
A Tag With a Class
pHAML | HTML Result |
---|---|
%tagname.class
|
<tagname class="class"> </tagname> |
A Tag With Two Classes
pHAML | HTML Result |
---|---|
%tagname.class.class_two
|
<tagname class="class class_two"> </tagname> |
A Tag With a Class and ID
pHAML | HTML Result |
---|---|
%tagname.class#id
|
<tagname class="class" id="id"> </tagname> |
A Tag with Content
pHAML | HTML Result |
---|---|
%tagname Some content
|
<tagname> Some content </tagname> |
Please note that the content has a space before it.
A Tag with Attributes
pHAML | HTML Result |
---|---|
%tagname{att1="v1" att2="v2"}
|
<tagname att1="v1" att2="v2"> </tagname> |
This is a different structure than HAML. pHAML takes everything in brackets and adds it to the tag literally.
Bare Class Creates a DIV Tag with that Class
pHAML | HTML Result |
---|---|
.class
|
<div class="class"> </div> |
Bare ID Creates a DIV Tag with that ID
pHAML | HTML Result |
---|---|
#id
|
<div id="id"> </div> |
Same for Attributes
pHAML | HTML Result |
---|---|
{att1="v1" att2="v2"}
|
<div att1="v1" att2="v2"> </div> |
Mix and Match
pHAML | HTML Result |
---|---|
.class1.class2#id{a="1" b="2"}
|
<div class="class1 class2" id="id" a="1" b="2"> </div> |
An Ordered List
pHAML | HTML Result |
---|---|
%ol %li Hello %li World |
<ol> <li> Hello </li> <li> World </li> </ol> |
A Table
pHAML | HTML Result |
---|---|
%table.table#t_1{width="100%"} %tr %td.sam{valign="top" style="color:white;bgcolor:red;"} Data %tr %td.bob Other Data |
<table class="table" id="t_1" width="100%"> <tr> <td class="sam" valign="top" style="color:white;bgcolor:red;"> Data </td> </tr> <tr> <td class="bob"> Other Data </td> </tr> </table> |
That is 12 lines of XHTML for 5 lines of code, better than two to one--and you can read it easily.
Kick it Up a Notch
This is where we diverge from HAML. HAML folks may ask themselves "how do I debug", pHAML has a simple answer. PHP folks may ask themselves "where did all the commands go?". This section answers both and more.
pHAML has a rich set of commands, so let's walk through those.
Like it's HAML progenitor, pHAML provides shortcuts for your coding pleasure. The first is the !!! command.
!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
!!! XML
<?xml version="1.0" encoding="utf-8" ?>
!!! 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
!!! Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
We use this class for standard HTML4, so why would we leave these out?
!!!!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
!!!! Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
!!!! Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
If a line of pHAML does not start with a "%", ".", "#", "{", "!!!", "!!!!","-", "/" , "//" , "<<< or >>>", "?", "??", "$", "\" it will be printed as is. The line will also be printed if a command is not understood. The system should never "eat" a line without some kind of result--this is to prevent frustrating "silent errors" that slow the speed of coding. By the way, this is why there is no annoying "|" following a line for continuation, just put the continuation on the next line, the system understands.
The system will not ignore leading whitespace before a command (except inside a heredoc and the debug detail command, explained later). The system will also "eat" the command itself, good to keep in mind when formatting.
Please feel free to use and it's kin, if you need accurate spacing in text that spans lines--or to force a character (see? check the source for this document, this line has one).
The "\" at the start of the line (after whitespace) will be eaten, and the remainder of the line is printed out as is. That is how you can start a line with any of the command letters mentioned above.
Escape Lines
pHAML | HTML Result |
---|---|
\%donottagme.meneither#ohnoo{not="us"} %tagme.meto#cool \/do not comment me /comment me |
%donottagme.meneither#ohnoo{not="us"} <tagme class="meto" id="cool"> </tagme> /do not comment me <!-- comment me --> |
The "/" command will wrap what follows it with an HTML comment.
HTML Comments
pHAML | HTML Result |
---|---|
/this is a comment |
<!-- this is a comment --> |
The "//" command will "hide the line" during rendering, and allows comments.
Non Rendered Comments
pHAML | HTML Result |
---|---|
now you see me!! //now you don't good to see you again!! |
now you see me!! good to see you again!! |
The "<<<" is used to set off a heredoc. All of the following code will be printed verbatim, including returns and spacing, until a ">>>" preceded by white space is seen.
As pHAML heredoc commands (both "<<<" and ">>>") are "preceding space sensitive" (indents will force preceding tag closures). The content between the tags is not.
Unlike the rest of the commands, heredoc will render empty lines and "//" (comment lines) verbatim.
Here Doc Example
pHAML | HTML Result |
---|---|
%style{type="text/css"} <<< body { height:100%; font-size:11px; margin-left:5%; margin-right:5%; background-color:white; color:black; } >>> |
<style type="text/css"> body { height:100%; font-size:11px; margin-left:5%; margin-right:5%; background-color:white; color:black; } </style> |
Here Doc Example(Indents Matter)
pHAML | HTML Result |
---|---|
%style{type="text/css"} <<< body { height:100%; font-size:11px; margin-left:5%; margin-right:5%; background-color:white; color:black; } >>> |
<style type="text/css"> body { height:100%; font-size:11px; margin-left:5%; margin-right:5%; background-color:white; color:black; } </style> |