วันนี้เลยทดลองสร้าง 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 ที่ชื่อ
fillInTemplatedojo.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;
}
});
ไม่เลยเลย พอเริ่มเข้าใจก็ดูไม่ค่อยยากแล้ว
2 comments:
ผมมีปัญหาว่า dojo มันช้ามากพอมีวิธีแก้เปล่า
ช้าตรงไหนครับ
1.ตรงช่วง load javascript
>> ให้ build เฉพาะ src ที่เราต้องการ
>> config ให้ server ใช้ gzip protocol
2.ตรงช่วงที่เกี่ยวกับการ render widget
>> ผมสังเกตดูพวก window widget มันตอบสนอง
ไม่ค่อยดีเท่าไร กรณีนี้คือผมหลีกเลี่ยงไม่ใช้ widget
ทีมีปัญหา
Post a Comment