Dojo คืออะไร?
18 Dec 2011
4. Exploring Base
จากหัวข้อนี้เป็นต้นไปเราจะมาลองเขียน Dojo แบบง่ายๆกัน จากแพ็คเกจต่างๆไม่ว่าจะเป็น Base, Core, Dijit เพื่อให้เห็นภาพกันว่า Dojo เป็นอย่างไร โดยในหัวข้อนี้ผมจะเริ่มจาก Base ก่อน โดยขอเริ่มต้นจากไฟล์ HTML ล้วนๆก่อน ดังแสดงในตัวอย่างที่ 1 (welcome_dojo.html)
<html>
<head>
<title>Welcome to Dojo</title>
</head>
<body>
<div id="msg">Are you ready for Dojo?</div>
<button id="go" type="button">Let's Go</button>
</body>
</html>
จะเห็นได้ว่าเป็นเพียงแค่ HTML แบบง่ายๆ ใน <body> ประกอบไปด้วย <div> สำหรับข้อความ และ <button> เท่านั้น โดยมี id เป็น msg และ go ตามลำดับ ในตัวอย่างนี้เราจะทำให้ข้อความมีการเปลี่ยนแปลงเมื่อมีการกดปุ่ม โดยใช้ฟังก์ชันจาก Base เริ่มแรกเราจะต้องโหลด Dojo (dojo.js) เข้ามาใช้ในเว็บเพจก่อน โดยการเพิ่มบรรทัดดังต่อไปนี้ลงไปใน <head></head>
<script type="text/javascript" src="dojo-release-1.6.1/dojo/dojo.js">
</script>
ในตัวอย่างข้างต้นไฟล์ HTML และโฟลเดอร์ dojo-release-1.6.1 จะต้องอยู่ที่เดียวกัน เช่นที่ Desktop เหมือนกัน เพียงเท่านี้เราก็สามารถเรียกใช้ Base ได้แล้ว จากนี้เราจะใช้ dojo.byId() และ dojo.connect() เพื่อให้ตัวอย่างนี้เป็นจริง dojo.byId() นั้นใช้เพื่อเข้าถึง DOM Node โดยเพียงแค่ระบุ id ของ Node ที่ต้องการเท่านั้น และเราจะใช้ dojo.connect() เพื่อเชื่อมโยงชุดคำสั่งหรือฟังก์ชัน (ให้เปลี่ยนข้อความ) เข้ากับเหตุการณ์ที่ปุ่มโดนกด โดยให้เขียนโค้ดดังต่อไปนี้ต่อจากโค้ดข้างต้น (<javascript src. . .>)
<script> var btn = dojo.byId("go"); var fn = function(){ dojo.byId("msg").innerHTML = "<b>Welcome to Dojo :)</b>"; } dojo.connect(btn,"onclick",fn); </script>
บรรทัดแรกเราต้องการตัวแปรอ้างอิงปุ่มก่อน (btn) โดยใช้ dojo.byId() เพื่อเข้าถึง จากนั้นเราจึงสร้างฟังก์ชัน (fn()) ขึ้นมาเพื่อให้มีการแก้ไขข้อความโดยใช้ dojo.byId() ช่วยเช่นกัน สุดท้ายเราต้องการให้ fn() ถูกรันเมื่อมีการกดปุ่มเท่านั้น เราจึงใช้ dojo.connect() เพื่อเชื่อมโยงในตอนสุดท้าย เมื่อรวมโค้ดทั้งหมดก็จะได้ดังแสดงในตัวอย่างที่ 2
<html>
<head>
<title>Welcome to Dojo</title>
<script type="text/javascript"
src="dojo-release-1.6.1/dojo/dojo.js">
</script>
<script>
var btn = dojo.byId("go");
var fn = function(){
dojo.byId("msg").innerHTML = "<b>Welcome to Dojo :)</b>";
}
dojo.connect(btn,"onclick",fn);
</script>
</head>
<body>
<div id="msg">Are you ready for Dojo?</div>
<button id="go" type="button">Let's Go</button>
</body>
</html>
5. Exploring Core
ในหัวข้อที่ผ่านมาเราได้ลองใช้ฟังก์ชันบางส่วนจาก Base มาในหัวข้อนี้เรามาลองดูตัวอย่างการใช้งานจากแพ็คเกจ Core กันดูบ้าง โดยเราจะใส่ Animation Effect จากแพ็คเกจ Core ให้กับตัวอย่างที่ผ่านมากัน ในตัวอย่างนี้เราต้องการให้ปุ่มหายไปเมื่อถูกกด และค่อยๆหดตัวหายไปด้วย โดยใช้ dojo.fx.wipeOut() ดังนั้นเราจึงต้องเริ่มต้นด้วยการอิมพอร์ต dojo.fx ก่อน โดยเพิ่มโค้ดเข้าไปใน <script> ดังนี้
dojo.require("dojo.fx");
dojo.fx.wipeOut({
duration: 1000,
node: dojo.byId("go")
}).play();
wipeOut() รับพารามิเตอร์สองตัวด้วยกันคือ duration หรือระยะเวลาก่อนที่จะทำให้ Node หายไปทั้งหมด และ node ที่ต้องการให้หายไป และสุดท้ายจึงเรียก play() เพื่อให้รันและแสดงผล ตัวอย่างที่ 3 แสดงโค้ดรวมทั้งหมด
<html>
<head>
<title>Welcome to Dojo</title>
<script type="text/javascript"
src="dojo-release-1.6.1/dojo/dojo.js">
</script>
<script>
dojo.require("dojo.fx");
var btn = dojo.byId("go");
var fn = function(){
dojo.byId("msg").innerHTML = "<b>Welcome to Dojo :)</b>";
dojo.fx.wipeOut({
duration: 1000,
node: dojo.byId("go")
}).play();
}
dojo.connect(btn,"onclick",fn);
</script>
</head>
<body>
<div id="msg">Are you ready for Dojo?</div>
<button id="go" type="button">Let's Go</button>
</body>
</html>
(หมายเหตุ: ตัวอย่างข้างต้นไม่สามารถรันกับเว็บเบราว์เซอร์ Chromium ได้ (Chrome บนลินุกซ์) เนื่องจากโดยค่าตั้งต้นของ Chromium จะไม่อนุญาติให้มีการอ่านไฟล์จากไฟล์อีกทีหนึ่งได้ (เป็นหนึ่งในนโยบายด้านความปลอดภัย) ทำให้คำสั่ง dojo.require() ไม่สามารถทำงานได้ ดังนั้นหากคุณใช้ Chromium (น่าจะรวมถึง Chrome ด้วย) แล้วหล่ะก็ ให้รันเว็บเบราว์เซอร์ Chromium ใหม่ผ่านเทอร์มินัลหรือคอมมานไลน์ด้วยคำสั่งต่อไปนี้
chromium-browser --allow-file-access-from-files
เพียงเท่านี้ก็หมดปัญหาแล้วครับ สำหรับ Chrome ก็น่าจะเป็น chrome.exe นะครับ ถ้าพบปัญหาไม่รู้จักคำสั่ง ก็ให้ใส่ Path ของโปรแกรมลงไปด้วย
อย่างไรก็ตามปัญหานี้จะไม่เกิดขึ้นกับการใช้งานจริง เพราะเราจะต้องอัพโหลดไปยังเซิร์ฟเวอร์ จึงไม่มีปัญหาเรื่องความปลอดภัยกับไฟล์บนเครื่องที่ใช้งาน)
