Ruby on Rails :: Haml
Posted by PunNeng, Wed Mar 14 14:54:00 UTC 2007
view source หน้า html แล้วมึน เคยเป็นไหมครับ tag มั่วไปหมด ขนาดใช้ div จัด layout แล้วนะ นั่นก็เป็นเพราะตอนเขียน code มันอิรุงตุงนังไปหน่อย ย่อหน้าก็กระเถิบไป กระเถิบมา
ไอ่เหน่งมีตัวช่วยครับ มันคือ Haml
Haml เป็นตัว generator ฝั่ง view อีกตัวของ ruby ซึ่งเป็น plugin ถอดเข้าถอดออกได้ ซึ่งมันจะทำให้ code ของเราดูเป็นระเบียบขึ้น ตามหลักที่ว่า "Markup should be beautiful"
ลองติดตั้งกันก่อน สำหรับ unix ทั้้งหลาย
./script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable
สำหรับ windows
ruby script\plugin install http://svn.hamptoncatlin.com/haml/tags/stable
แต่ถ้า svn ก็ต้องสั่ง
rake package gem install pkg/haml-*version number*.gem
ก่อน แล้วค่อยสั่ง
svn co svn://hamptoncatlin.com/haml/tags/stable haml
ใน vendor/plugin อีกที
อันนี้เป็นตัวที่ stable ครับ ถ้าอยากลองตัวที่เขาพัฒนากันอยู่ ก็เปลี่ยน path ให้ไปที่ trunk เลยครับ
หลังจากติดตั้งเรียบร้อยแล้ว ก็มาลองดูละกันครับ เอามาจาก tutorial ของ haml ครับ
จาก
<small><%= item.body %></small>
เป็น
%small= item.body
ข้อสังเกตที่ผมได้คือใช้ %xxx มันก็จะกลายเป็น tag นั้นเลยเช่น %html มันก็จะเปิดและปิด html tag ให้ -> <html></html> ที่มันเปิดและปิดให้ ก็ไว้ใช้สำหรับ xhtml ด้วย
แต่ถ้าต้องการประกาศ attribute ก็เพ่ิมเป็น
%small{:class => "code", :id => "message"} Hello, World!
ก็จะกลายเป็น
<small class="code" id="message">Hello, World!</small>
หรือ (อันนี้ผมชอบแฮะ)
%small.code#message Hello, World!
ก็ได้ ในหน้า tutorial ยังเขียนไว้ว่า designer เข้าใจได้แน่ๆ แต่ดูเหมือน designer ที่ทำงานอยู่กับผมจะไม่เข้าใจแฮะ
แต่ถ้าเอาชื่อของ tag ออก เช่น
.content Hello, World!
มันจะแทนที่ด้วย div โดยอัตโนมัติ และเพิ่ม attribute ที่มีอยู่ไปด้วย เป็น
<div class="content">Hello, World!</div>
มาดูของจริงๆ ที่มันซ้อนกันไปกันมาดีกว่า
<div id='content'>
<div class='left column'>
<h2>Welcome to our site!</h2>
<p>
<%= print_information %>
</p>
</div>
<div class="right column">
<%= render :partial => "sidebar" %>
</div>
</div>แบบนี้ มันจะเขียนในรูปของ haml ได้แบบนี้
#content
.left.column
%h2 Welcome to our site!
%p= print_information
.right.column= render :partial => "sidebar" ดูเป็นระเบียบขึ้นเยอะ
คราวนี้ผมไม่ได้ลองด้วยตัวเอง เพราะว่าคงไม่ได้ใช้งานตัวนี้ เนื่องมาจากเหตุผลที่บอกไปตอนต้น คือ designer ที่ออฟฟิศผมมีปัญหาแน่(และคนอื่นๆด้วย) และอีกอย่างหนึ่ง คงเป็นเพราะเรื่องความเคยชิน เพราะมอง tag ต่างๆ จนชินแล้ว บางงานต้องทำกัน 3 คน คงไม่เหมาะแน่ ถ้าจะให้คนที่ไม่เป็น Rails มาเจอ tag แปลกๆ แบบนี้(แค่ตัว Erb ก็มึนกันแล้ว)
ใครชอบใครถูกใจ ก็ลองกันนะครับ
