Haml 은 XHTML을 간단하고 편리하게 표현할 수 있도록 도와주는 markup langage이다.
Rails에서는 view를 위한 template engine으로 ERB가 기본으로 사용된다. ERB는 ruby code를 <% %>와 <%= %>를 통해서 사용할 수 있는데, 이것이 HTML 코드들과 섞여 있으면 영 지저분한 모양이 되곤 한다. 좀 더 깔끔하고 중복이 없는 view를 만들고 싶다면 Haml을 이용하는 것이 좋은 선택이 될 것이다.
John Philip Green 의 haml 소개페이지 에 나와있는 다음 문장이 맘에 든다.
Haml is not an entirely new language, but an abstraction of XHTML for your views.
특징
- 간결하다.
- 들여쓰기가 의미를 갖는다.
- 깔끔하게 view code가 유지된다.
설치
gem을 통해서 설치한다.
- gem install haml
rails에서 사용하기 위해서는 plugin도 설치해 준다.
- haml --rails path/to/rails/app
사용
사용법은 아주 간단하다. Module:Haml 에 자세한 사용법이 설명되어 있다.
여기서는 haml을 사용한 예를 가지고 haml에 대해 알아보자.
- !!! XML
!!! 1.1
%html
%head
%title= title_helper
%body
/ Start of body
#body_wrapper
%p This is really long senetence. This is really long senetence |
This is really long senetence. This is really long senetence. |
%div{:id=>"header", :class=>"first"}
%img{logo_class_helper, :src=>"/images/log", :alt=>"Logo"}
= render :partial=>"layouts/header"
%br
%br/
%div#contents.span24.nospace
= yield
- @tasks.each do |task|
%div[task]= task.name
#footer.span24
= render :partial=>"layouts/footer"
이 코드는 다음과 같이 보여진다.
- <?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Better Life</title>
</head>
<body>
<!-- Start of body -->
<div id='body_wrapper'>
<p>
This is really long senetence. This is really long senetence This is really long senetence. This is really long senetence.
</p>
<div class='first' id='header'>
<img alt='Logo' src='/images/log' title='Logo' />
<h1>Better Life</h1>
<br />
<br />
</div>
<div class='span24 nospace' id='contents'>
<div class='task' id='task_14'>aaa</div>
</div>
<div class='span24' id='footer'>
<span>by aproxacs</span>
</div>
</div>
</body>
</html>
간단히 설명을 하자면,
우선 들여쓰기를 잘 해주어야 한다. haml은 python처럼 들여쓰기가 의미를 갖는다.
!!! 은 다음과 같이 변형된다.
- <?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
% 뒤에는 tag 이름이 온다.
= 뒤에는 ruby 코드를 사용할 수 있다. 이 코드의 결과는 HTML에 포함된다. erb의 <%= %> 와 같다.
- = render :partial=>"layouts/header"
=는 tag뒤에 바로 붙여서 inline으로 사용할 수도 있다.
- %title= title_helper
title_helper는 내가 정의한 helper method이다.
- 뒤에 사용되는 ruby 코드는 HTML에는 포함되지 않는다. erb의 <% %>와 같다.
- - @tasks.each do |task|
[] 안에 ruby 객체가 있으면 그 객체로 부터 tag의 id와 class를 만든다. 호.. 좋아보임.
task의 class가 Task이고 id가 14이고 task.name이 aaa인 경우이다.
- %div[task]= task.name
- =>
- <div class='task' id='task_14'>aaa</div>
/ 를 이용해 주석을 사용할 수 있다.
{} 안에는 hash가 들어가는데, 이 hash는 tag의 attribute가 된다.
- %div{:id=>"header", :class=>"first"}
- =>
- <div class='first' id='header'></div>
{} 안에 hash가 여러개 들어갈 수도 있다.
logo_class_helper가 {:title=>"Logo"}를 return한다고 하면
- %img{logo_class_helper, :src=>"/images/log", :alt=>"Logo"}
- =>
- <img alt='Logo' src='/images/log' title='Logo' />
자주 쓰이는 tag의 id와 class attribute는 각각 '#'과 '.'을 이용해서 표현할 수 있다.
- %div#contents.span24.nospace
- =>
- <div class='span24 nospace' id='contents'></div>
자주쓰이는 div tag는 생략할 수 있다.
- #footer.span24
- =>
- <div class='span24' id='footer'>
tag뒤에 / 를 붙여서 한 줄에 끝나는 거(self-closed)라고 알려줄 수 있다.
- %br/ => <br/>
사실 br같은 경우는 /를 붙일 필요가 없는데, haml이 알아서 해준다. 이렇게 알아서 해 주는 태그들은 [‘meta’, img’,‘link’, br’,‘hr’,‘input’,‘area’] 이다.
이 목록은 Haml option중 하나인 :autoclose 를 이용해 조작할 수 있다.
문장이 길어지면 |를 이용해 다음줄로 넘길 수 있다.
- %p This is really long senetence. This is really long senetence |
This is really long senetence. This is really long senetence. |
불편한점
javascript를 사용하기 매우 불편한다.
indent가 안됨.
syntax highlighting도 안됨.
아...치명적이다.
http://b.lesseverything.com/2008/2/19/haml-doesn-t-like-javascript
참조
RDOC : http://haml.hamptoncatlin.com/docs/rdoc/classes/Haml.html
개발자 페이지 : http://unspace.ca/discover/haml
프로젝트 홈 : http://haml.hamptoncatlin.com/
이 글은 스프링노트에서 작성되었습니다.
'Rails' 카테고리의 다른 글
| Integration Testing in Ruby with RSpec's Story Automation Framework (0) | 2008/04/16 |
|---|---|
| [Rails] Openid 사용하기 (0) | 2008/04/06 |
| [Rails] HAML 사용하기 (0) | 2008/04/06 |
| [Rails] netbeans에서 haml highlighting 지원 (0) | 2008/04/06 |
| [Rails]controller에 파라미터로 들어온 민감한 데이터를 로그에 남기지 않기 (0) | 2008/04/06 |
| [Rails] increment_counter (0) | 2008/04/06 |
