Dojo คืออะไร?
18 Dec 2011
6. Exploring Dijit
ผ่านไปแล้วกับ Base และ Core คราวนี้เรามาดูตัวอย่างเกี่ยวกับ Dijit เป็นการปิดท้ายกัน โดยจะยกตัวอย่างการใช้งานปฏิทินแล้วกัน ตัวอย่างที่ 4 (dojo_calendar.html) แสดงโค้ด HTML ก่อนใช้ Dijit
<html>
<head>
<title>Dojo Calendar Example</title>
</head>
<body>
<form>
Please select a date:
<input id="date" type="text" />
</form>
</body>
</html>
จากตัวอย่างข้างต้นเราจะเห็นได้ว่า มีเพียงแค่ Textfield สำหรับกรอกวันเดือนปีเพียงเท่านั้น ต่อไปเราจะเปลี่ยน Textfield ให้เป็น DateTextBox (ก็ Calendar นี่แหละ) กัน ในการใช้งาน Dijit นั้นสิ่งแรกที่ต้องทำคือโหลด Theme ก่อน เพราะ Widget ใน Dojo สามารถเลือกรูปแบบการแสดงผลหรือ Theme ได้ และบังคับด้วยว่าต้องเลือกด้วยเพราะไม่มี Default มาให้ การโหลด Theme นั้นก็คือการโหลด CSS ไฟล์นั่นเอง โดยมี Themes ที่ติดมากับไลบรารี Dojo อยู่ด้วยกัน 3 ตัวคือ i) tundra ii) soria และ iii) nihilo การโหลด Theme ให้เขียนโค้ดดังนี้
<link rel="stylesheet" type="text/css"
href="dojo-release-1.6.1/dijit/themes/nihilo/nihilo.css" />
จะเห็นได้ว่าเหมือนการอ้างอิงไฟล์ CSS ตามปกติ ดังนั้นจึงให้ใส่ไว้ที่ <head></head> นอกจากนี้เรายังต้องเพิ่มแอททริบิวท์ class เข้าไปใน <body> ด้วย เพื่อให้การแสดงผล Theme เป็นไปอย่างถูกต้อง ดังนี้
<body class="tundra">
จากนั้นก็ให้เขียนโค้ดเพื่อโหลด Dojo's Base เหมือนดังตัวอย่างที่ผ่านๆมา (ภาคบังคับนะ) ตามนี้
<script type="text/javascript"
src="dojo-release-1.6.1/dojo/dojo.js"
djConfig="parseOnLoad:true">
</script>
แต่ให้เพิ่มพารามิเตอร์ djConfig เข้าไป เพื่อบอกกับ Dojo ว่าจะใช้ Dijit จึงให้ทำการแปลง Widget หลังจากโหลดเสร็จ แล้วนั้นจึงอิมพอร์ตแพ็คเกจที่ต้องใช้เพิ่มโดยแยกเป็น <script> ใหม่ดังนี้
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.DateTextBox");
</script>
สุดท้ายแก้โค้ด Textfield เพื่อบอกกับ Dojo ว่านี่แหละ ที่จะให้แปลงเป็น Calendar ให้หน่อยดังนี้
<input id="date" type="text" dojoType="dijit.form.DateTextBox"
constraints="{datePattern:'dd/MM/yyyy'}" />
แอททริบิวท์ dojoType ใช้สำหรับระบุชนิด Widget ส่วนแอททริบิวท์ constraints ใช้สำหรับกำหนดรูปแบบวันที่ ตัวอย่างที่ 5 แสดงโค้ดทั้งหมด เห็นไหมครับการใช้ Dojo ทำให้ JavaScript เป็นเรื่องที่ง่ายขึ้นเยอะเลย (ถึงแม้ช่วงเริ่มต้นอาจดูซับซ้อนบ้าง) ลองคิดดูว่าถ้าเราต้องเขียน Calendar ขึ้นเอง จะต้องเขียนโค้ดมากกว่านี้สักกี่สิบเท่า?
<html>
<head>
<title>Dojo Calendar Example</title>
<link rel="stylesheet" type="text/css"
href="dojo-release-1.6.1/dijit/themes/tundra/tundra.css" />
<script type="text/javascript"
src="dojo-release-1.6.1/dojo/dojo.js"
djConfig="parseOnLoad:true">
</script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="tundra">
<form>
Please select a date:
<input id="date" type="text" dojoType="dijit.form.DateTextBox"
constraints="{datePattern:'dd/MM/yyyy'}" />
</form>
</body>
</html>
7. What's Next?
จบแล้วนะครับสำหรับ Hello World, Dojo !! จากนี้ไปก็คือเรียนรู้แพ็คเกจต่างๆที่มีใน Dojo ตามแต่ความต้องการใช้งาน และถ้าไม่รู้หรือไม่เคยเขียน JavaScript มาก่อน ก็แนะนำว่าให้ศึกษา JavaScript ให้เข้าใจก่อนนะครับ ไม่เช่นนั้นคงไม่สามารถเข้าใจ Syntax ของ Dojo ได้
