Wednesday, July 05, 2006

Dojo Custom Widget

ช่วงนี้กำลังลุ่มหลงกับการหาวิธีใช้ Dojo ให้เกิดประโยชน์สูงสุดอยู่
วันนี้เลยทดลองสร้าง widget ง่ายๆเองดู
แน่นอนเริ่มต้น ก็ต้องเริ่มที่ HelloWorld

ขั้นแรก เริ่มด้วยการ define widget ก่อน
dojo.widget.defineWidget(
"pok.Test",
dojo.widget.HtmlWidget,
{ ... }
);

parameter แรกสุด ก็คือชื่อ widget ของเรา
parameter ตัวที่สอง ก็คือ widget ที่เรา extend
ส่วน parameter ตัวที่สาม เป็น object ที่เป็น properties, methods ของ widget เรา
(จริงๆมี parameter อีก 2 ตัว แต่เรา ignore ก่อน)

แน่นอนว่า เมื่อเป็น html widget
widget ของเราก็ต้อง generate html ออกมาด้วย
เราสามารถเลือกวิธี generate html ออกเป็น 2 วิธี (คงมีมากกว่านี้ แต่ตอนนี้รู้แค่นี้)
  • generate จาก template file
  • generate จาก template string


ทดลองทำวิธี template string
โดยต้องการ output แบบนี้ <input type='text' value=''/>
dojo.widget.defineWidget(
"pok.Test",
dojo.widget.HtmlWidget,
{
templateString: "<input type='text' value=''/>"
}
);

เวลานำไปใช้ก็แค่
<body>
<div dojoType="Test"/>
</body>


ทีนี้ ถ้าเราอยากเพิ่ม parameter ให้เรา customize widget เราได้
ก็สามารถทำได้ดังนี้
กรณีนี้เราจะยกตัวอย่างการ customize textbox value
dojo.widget.defineWidget(
"pok.Test",
dojo.widget.HtmlWidget,
{
templateString: "<input type='text' value='${title}'/>",
// default value
title: "hello world",
postMixInProperties: function() {
this.strings = {
title: this.title
}
}
}
);

เห็นได้ว่า เราทำการ map title ที่แสดงใน template ผ่านทาง
method postMixInProperties

ที่นี้เวลานำไปใช้ เราก็สามารถ customize title ได้ดังนี้
<div dojoType="Test" title='hi'/>


concept อันถัดไปก็คือ dojoAttachPoint
ลองเปลี่ยน template เราให้เป็นหน้าตาแบบนี้แทน
    templateString: "<span> <input type='text' value='${title}'/> " +
" <span dojoAttachPoint='labelNode'>xx</span></span>",

dojoAttachPoint ก็คือจุดที่เราสามารถ manipulate DOM ในระหว่างที่ render widget ได้
โดย implement ผ่านทาง hook method ที่ชื่อ fillInTemplate
dojo.widget.defineWidget(
"pok.Test",
dojo.widget.HtmlWidget,
{
templateString: "<span> <input type='text' value='${title}'/> " +
" <span dojoAttachPoint='labelNode'>xx</span></span>",
title: "hello world",
label: "your name here",
postMixInProperties: function() {
this.strings = {
title: this.title
}
},
fillInTemplate: function() {
this.labelNode.innerHTML = this.label;
}

});


ไม่เลยเลย พอเริ่มเข้าใจก็ดูไม่ค่อยยากแล้ว

Related link from Roti

2 comments:

Anonymous said...

ผมมีปัญหาว่า dojo มันช้ามากพอมีวิธีแก้เปล่า

polawat phetra said...

ช้าตรงไหนครับ
1.ตรงช่วง load javascript
>> ให้ build เฉพาะ src ที่เราต้องการ
>> config ให้ server ใช้ gzip protocol
2.ตรงช่วงที่เกี่ยวกับการ render widget
>> ผมสังเกตดูพวก window widget มันตอบสนอง
ไม่ค่อยดีเท่าไร กรณีนี้คือผมหลีกเลี่ยงไม่ใช้ widget
ทีมีปัญหา