Netbeans Tips: สร้าง Code Template ไว้ใช้เอง

Published on April 25th, 2011

By Armno P.

ฟีเจอร์ Code Templates ของ NetBeans IDE นั้น เราสามารถเพิ่ม custom code templates เองได้ พูดง่ายๆก็คือ การสร้าง Code Snippet ที่เราต้องพิมพ์เองบ่อยๆ ย่อเป็นคำสั้นๆ ทำให้เราสามารถลดเวลาการพิมพ์โค้ดไปเยอะเลยทีเดียว .. จริงๆแล้ว Zen Coding ของ Netbeans ก็ใช้ความสามารถนี้แหละครับพี่น้อง

เอาล่ะ มาดูสถานการณ์กัน .. ยกตัวอย่างผมเขียน CSS บางส่วนต้องใช้ CSS3 อย่าง border-radius หรือ text-shadow แต่ด้วยความที่ browser รุ่นเก่าบางตัว ยังต้องใช้ vendor-prefix properties ถึงจะสามารถแสดงผลได้สมบูรณ์ บ่อยครั้งเลยที่ property บางตัว ต้องเขียน CSS ถึง 3 บรรทัด (หรือบางคนก็ 5) (หรือบางคนขยันเว่อร์ก็ล่อไป 8!) ทั้งๆที่ values เหมือนกัน อย่างภาพข้างล่าง

จะดีกว่าไหม ถ้าเราพิมพ์ครั้งเดียวแล้วมันออกทั้ง 3 บรรทัดเลย ..

เข้าไปที่ Tools > Options > Editor > Code Templates ครับ .. มีหลายภาษาให้เลือก ลองกดเลือกเล่นๆดูก่อนได้ .. ถ้าว่างนะ

เลือกภาษาเป็น Cascading Style Sheet (CSS) ตอนนี้ยังไม่มีอะไรเลย ก็กดปุ่ม New เพื่อเพิ่มอันใหม่เข้าไป .. Abbreviation (คำย่อ) คือ คำที่เราต้องการพิมพ์แบบย่อๆนั่นแหละครับ ผมใส่เป็น text-shadow ละกัน

จากนั้นในส่วนกล่องเบิ้มๆข้างล่าง Expanded Text นั้น เป็นช่องที่ Netbeans จะเติมโค้ดให้อัตโนมัติ เมื่อเราพิมพ์ตาม Abbreviation แล้วกด Tab .. กรณีนี้ก็คือ ผมต้องการพิมพ์แค่ text-shadow แล้วกด tab แล้วให้มันบรึ้มมม กลายเป็นโค้ดสามบรรทัดนั้น

โค้ดในเครื่องหมาย $ ก็เหมือนตัวแปรครับ จะเป็นตัวรับ input จากเรา .. คล้ายๆ scanf ในภาษา C แหละมั้ง (โห้ววว ยังจำได้) .. ข้างล่างนี้ ผมตั้งตัวแปรชื่อว่า value เหมือนกันทั้ง 3 บรรทัด เพราะผมต้องการใช้ value ทั้ง 3 ตัวของ CSS 3 บรรทัดนี้ มีค่าเหมือนกันนั่นเอง

ทดสอบครับ โดยการพิมพ์ text-shadow .. แล้วสวดมนต์รอ

พอสวดมนต์จนพอใจแล้ว กด Tab ครับ แล้วโค้ดเราก็จะ วรึ๊บ ออกมาอย่างที่เห็น โดยในกรอบสีม่วงๆนั่นคือ ตัวแปรที่ใส่ไว้ใน $ นั่นเอง

พิมพ์ values ของ text-shadow ที่เราต้องการลงไป .. เนื่องจากเราใช้ตัวแปรเดียวกัน มันเลยโผล่ทีเดียว 3 บรรทัดเลย

หรือใครขยันหน่อย อาจทำแยกตัวแปรกันเป็นแบบข้างล่างก็ได้ครับ

กดพิมพ์ทีละค่า แล้วกด Enter หรือ Tab มันก็จะเลื่อนไปตัวแปรถัดไปให้

หรือจะใช้กับมหากาพย์ CSS3 อย่าง Gradient Background ก็ได้นะครับ พิมพ์เองคงเหนื่อยน่าดู

ส่วนตัวแล้วคิดว่า ฟีเจอร์นี้มีประโยชน์มากๆครับ ถ้าใครคิดจะใช้ Netbeans ไปนานๆ สร้าง Code Templates เป็นโกดังเก็บไว้ก็ดีนะครับ เพราะเราสามารถ Export Code Templates พวกนี้ ไปใช้กับ Netbeans เครื่องอื่นๆได้ด้วยนะ (ดูวิธีการได้ที่การใช้ Zen Coding ครับ)

ลองใช้ดูนะ ผมว่าหลายคนต้องชอบแน่ๆ

ปล. เราใส่ค่า default ของตัวแปรแต่ละตัวได้นะครับ ถ้าต้องพิมพ์แบบเดิมซ้ำกันบ่อยๆ (แต่ผมไม่ได้ใช้เลย) ลองดูตัวอย่าง code template ของแท็ก a ใน HTML ดูนะครับ