Closure with dojo.hitch

Posted May 13, 2009 at Ajax66
polygot จริงๆ หลังจากเล่น zk ได้นิดหน่อย ก็มาใช้ jQuery แบบหนักๆ ตอนนี้เจ้านายชวนมา dojo ซะแล้ว ก็เลยมีหนังสือ dojo มาที่ออฟฟิศให้อ่านเล่นๆ อ่านไปอ่านมาก็เจอเรื่อง dojo.hitch มันคือวิธีการสร้าง closure อีกแบบนั่นเอง คือมันเป็น function ที่จะสร้าง function ให้เรา โดยที่เรากำหนด context ให้กับ function นั้นๆได้ด้วย อธิบายก่อนว่า javascript สามารถส่ง function ไปเป็น argument ของอีก function ได้ ปัญหามันอยู่ตรงที่ว่า ถ้าเราต้องการส่ง function( method)  ของ object ใด object หนึ่งไปเป็น argument ของ function อื่นหละ แบบนี้ someFunction(someObject.someMethod); โดยที่ตัว someFunction เขียนไว้แบบนี้ function someFunction(f) { [...]

Javascript Closure

Posted February 12, 2009 at Ajax66
ช่วงนี้มีเหตุให้ต้องพักการใช้ zk ไปเลยต้องค้างเรื่องของการสร้าง zk component ไว้ก่อน หันมาเล่นกับ javascript ตัวแม่กันก่อน ปกติเราเขียนฟังก์ชันใน javascript ที่เราเขียนๆกันมันก็จะมีหน้าตาแบบนี้ function ajax66(title,content){ ... ... return ....; } คีย์เวิร์ด function ตามด้วย ชื่อฟังก์ชัน แล้วตามด้วย argument list จะรับพารามิเตอร์กันเท่าไหร่ก็ใส่กันไป จะให้ทำงานอะไรก็เขียนไป สุดท้ายถ้าจะให้ส่งค่ากลับก็ใส่ return อะไรก็ว่ากันไป ใช้งานก็เอาชื่อฟังก์ชันไปใช้เรียกไป ทีนี้ javascript มันยังมองว่า function เป็น object อย่างนึงเช่นกัน [...]

custom zk component ภาค 2

Posted January 27, 2009 at Ajax66
วันนี้จะมาต่อกันที่ส่วน view ของ component ซึ่งเขียนได้ด้วย Dynamic Server Page (DSP) เขียน class ที่ extends จาก ComponentRenderrer หรือจะเป็น JSP และ Servlet Technology ตัวอย่างที่แสดงให้ดูนี่จะเขียนด้วย DSP ซึ่งเหมือนกับ JSP ต่างกันตรงที่ DSP เขียน java โค้ดลงไปไม่ได้ แต่ว่า DSP นั้นไม่ต้องถูก compile ก่อนเหมือน JSP <%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %> <%@ taglib uri="http://www.zkoss.org/dsp/zk/core" prefix="z" %>
${self.title}
${z:redraw(child,null)}
จะเห็นว่ามีการ include taglib เข้ามา 2 ตัวเพื่อช่วยในการสร้าง [...]

custom zk component ภาค 1

Posted January 26, 2009 at Ajax66
การสร้าง zk component นั้นแบบออกเป็น 3 ส่วนนะครับ ตามรูปนี้ คือส่วนที่เป็น view ได้แก่พวกโค้ด HTML,JavaScript,CSS ส่วนที่เป็น Handle ได้แก่โค้ด Java ที่ทำงานที่ฝั่ง Server และส่วนที่เป็นการ configuration ที่จะ config ค่าต่างๆของ component โดยเราสามารถสร้าง component แล้ว package ไปกับ war หรือ จะแยกเป็น jar ต่างหากก็ได้ ตัวอย่าง ไฟล์คอนฟิค lang-addon.xml hellocomponent xul/html

ZK: What It Is

Posted January 03, 2009 at Ajax66
ZK เป็น framework แบบ event-driven และ component-based ช่วยในการสร้าง rich user interfacs สำหรับ Web applications. ZK ประกอบด้วย AJAX-based event-driven engine , XUL และ XHTML components และ markup language ที่เรียกว่า ZUML (ZK User Interface Markup Language) ด้วย ZK เราสามารถสร้าง rich interface ได้ด้วย XUL และ XHTML components และ จัดการมัน โดยขึ้นอยู่กับ event ที่ ผู้ใช้งาน กระทำกับ แอพพลิเคชั่น แบบเดียวกับ เดสท็อป แอพพลิเคชั่น ไม่เหมือนกับ [...]

มาลองเล่น ZK ตอนที่ 2 ลองสร้าง Application

Posted November 11, 2008 at Ajax66
มาลองดูกันครับ ว่ามันทำงานอย่างไรบ้าง

มาลองเล่น ZK ตอนที่ 1 Config ZK

Posted November 10, 2008 at Ajax66
ก่อนอื่น สามารถโหลด ZK ได้ ที่นี่ ZK เป็น RIA Framework โดยเราไม่ต้องมานั่งเขียนจาวาสคริปต์เอง หลังจากโหลดไฟลล์มาแล้ว ก็ให้ทำการคัดลอกไฟลล์ Library มาไว้ที่ WEB-INF/lib ครับ แล้วหลังจากนั้นเราจะทำการเขียน Config เพิ่มเติมใน web.xml ดังนี้ 1. เพิ่มในส่วนของ Listener Used to cleanup when a session is destroyed ZK Session Cleaner org.zkoss.zk.ui.http.HttpSessionListener 2. เพิ่มในส่วนของ Servlet ZK loader for ZUML pages zkLoader org.zkoss.zk.ui.http.DHtmlLayoutServlet update-uri /zkau 1 The asynchronous update engine for ZK auEngine org.zkoss.zk.au.http.DHtmlUpdateServlet 3. เพิ่มในส่วนของ Servlet-Mapping zkLoader *.zul zkLoader *.zhtml auEngine /zkau/* หลังจาก Config web.xml เสร็จแล้วเป็นอันเสร็จ เราสามารถที่จะใช้งาน ZK Framework ได้แล้ว โดยจะเป็นไฟลล์นามสกุล zul ตัวอย่างสำหรับลองเทสดูว่าเรา Config web.xml ถูกไหม

DWR2 กับ Spring2

Posted November 05, 2008 at Ajax66
DWR2.x กับ Spring2.x เมื่อวานมีประเด็นต้องเขียน DWR2 เชื่อมกับ Spring2 เพื่อทำอะไรบางอย่าง และเพื่อความเท่เราจะต้องเขียนแบบ Spring2 นะครับคือการใช้ namespace dwr แบบ แทนการใช้ dwr.xml เหมือนสมัยก่อน แต่ช้าก่อนเอกสารน้อยมาก งมอยู่นาน เกือบทุ่มถึงทำได้เลยต้องเอามาแปะไว้หน่อยกันลืม สรุปขั้นตอนรวมๆ ก่อนอื่นสร้าง Service ง่ายๆขึ้นมาเพื่อใช้ทดสอบ package sample; /** * @author Roofimon */ public class SampleBean { public String getMessage(){ return "Hello World"; } public MyBean getSomething(){ return new MyBean(100, "ROOFIMON"); } } เมธอดชื่อ getSomething นั้นจะ return ค่าเป็น MyBean ดังนั้นเราต้องสร้าง MyBean ก่อนแล้วอีกสักพักเราจะทำการ สั่งให้ DWR แปลงคลาสนี้ให้เราแทน package sample; /** * * @author roofimon */ public class MyBean { private int age; private [...]

สนุกกับ Dojo ภาค 4 (เรื่องของ Event)

Posted November 01, 2008 at Ajax66
Events เรื่องต่อไปคือเรื่องการมีปฏิสัมพันธ์กับเพจของเรา โดยเราได้เห็นการเปลี่ยน style ของตัวหนังสืออย่างง่ายไปแล้ว ว่ามันง่ายจริงๆแต่ความสนุกเพิ่งเริ่มต้น ต่อไปเราจะลองสั่งให้เกิดการเปลี่ยนแปลงบางอย่างตามเหตุการณ์ที่เรากำหนดเช่นเมื่อมีการ click ซึ่งวิธีแรกเราสามารถทำได้ด้วยการใช้ dojo.connect เพื่อนเก่าของเรา dojo.addOnLoad(function(){ var node = dojo.byId("testHeading"); dojo.connect(node,"onclick",function(){ node.innerHTML = "I've been clicked"; }); }); สิ่งเดียวกันนี้สามารถเขียนใหม่ได้ด้วย dojo.query dojo.addOnLoad(function(){ dojo.query("#testHeading") .style("cursor","pointer") .connect("onclick",function(){ this.innerHTML = "I've been clicked"; }); }); สำหรับ dojo.query เราทำการเพิ่ม style เข้าไปให้กับ pointer ของเราเมื่อมันไปอยู่เหนือบริเวณที่เราต้องการ ซึ่งจริงๆแล้วเราสามารถทำได้ด้วย css แต่เราอยากโชว์ความสามารถของเมธอด .style ว่าสมารถเพิ่มเข้าหรือลบออก ได้ทุกเวลาที่เราต้องการโดยสามารถทำได้ทั้งการระบุโหนดหรือเป็นกลุ่มของโหนดก็ได้ ดังนั้นเราจึงสามารถเชื่อมโหนดต่างๆที่เราต้องการเข้ากับ onclick ฟังก์ชั่นได้พร้อมๆกันในครั้งเดียว แต่ตัวอย่างด้านบนมีโหนดเดียว ตัวอย่างต่อไปเราจะลองหาโหนดที่เป็นแบบกลุ่มเพื่อทดลองว่าเป็นอย่างไร โดยตัวอย่างนี้จะทำการปิดความสามารถ click ของโหนด var disableLinks = function(){ dojo.query("a").connect("onclick",function(e){ e.preventDefault(); // stop the event console.log('clicked: ',e.target); // the node we clicked [...]

jQuery Documentation Alternatives

Posted October 16, 2008 at Ajax66
ตอนนี้ต้องยอมรับว่า jquery เป็นรู้จักมากขึ้นในวงการนักพัฒนาโปรแกรม  หลายๆครั้งที่เราต้องเปิด api ดูว่าแต่ละ function มีการ ทำงานอย่างไร  มีอะไรให้ใช้บ้างใช่ไหมครับ ปกติเราอาจะเข้าไปดูที่ http://docs.jquery.com เลย  แต่วันนี้มีหลายๆที่มาแนะนำตามนี้เลย API Browser Visual jQuery Adobe Air App (zip) for offline browsing jQuery API Browser นอกจากนี้ยังมี download ให้ด้วย downloaded as a zip file. gotAPI/jQuery

สนุกกับ Dojo ภาค 3 (มหัศจรรย์แห่ง DOM)

Posted October 14, 2008 at Ajax66
เริ่มเข้าเรื่องการจัดการกับ DOM ด้วย Dojo ตัว Dojo เองเตรียมเครื่องมือในการจัดการกับ DOM ไว้ให้เราใช้เบื้องต้นคือ dojo.query() โดยเราสามารถใช้มันเพื่อ parse เอกสารทั้งชุดหรือบางส่วนที่เราต้องการทำงานด้วย ยกตัวอย่างเช่น dojo.require("dojo.NodeList-fx"); dojo.addOnLoad(function(){ // our dom is ready, get the node: dojo.query("#testHeading") // add "testClass" to its class="" attribute .addClass("testClass") // and fade it out after 500 ms .fadeOut({ delay:500 }).play(); }); ตัวอย่างข้างบนคือการเพิ่ม .testClass (CSS) เข้าไปเพื่อกำหนดสี background ให้เป็น background-color:red ให้ head ของเราก่อนจะถูกทำ Fade Out .testClass { background-color:red; } โดยที่ dojo.query จะส่งค่า instance ของ dojo.NodeList กลับมาให้เรา dojo.query returns [...]

สนุกกับ Dojo ภาค 2 (ก้าวแรกสู่ Dojo)

Posted October 13, 2008 at Ajax66
เริ่มต้นด้วยการสร้าง HTML ไฟล์แบบบ้านๆดังตัวอย่าง Dojo Toolkit Test Page

Dojo Skeleton Page

Some Content To Replace

เพจนี้จะมี DOCTYPE ตามมาตรฐาน HTML/4.01 และเพจนี้ถ้าตรวจตามมาตรฐาน W3C [...]

[Firefox-addon] Online Web Training

Posted October 08, 2008 at Ajax66
เอาการบ้านสมัยเรียน ป.โท กลับมา review อีกรอบ ไปหาของเก่าๆ มา ก็งงๆ เพราะว่าลืมไปหมดแล้ว ดีนะยังพอมี .xpi เหลืออยู่ กับเอกสารการออกแบบระบบ รู้สึกว่าเท่าที่ได้ เขียน class diagram ของทั้งระบบไว้ แต่ทำไม่เสร็จ และที่เหลือเก็บไว้ิเป็น future work (ฮา) Online Web Training หรือ OWT เป็น firefox extension ที่เสริมพลังเว็บบราวเซอร์ โดย OWT จะช่วยทำให้ผู้ใช้สามารถ synchronize เพื่อมองเห็นหน้าเว็บไซต์เดียวกันได้ มีประโยชน์กับการเรียนการสอนที่ใช้บราวเซอร์เป็นสื่อ เพื่อเป็นระบบช่วยเหลือระหว่างผู้เรียนและผู้สอน หรือหากมองในมุมของธุรกิจที่ต้องการมีการเรียนการสอนทางไกลผ่านบราวเซอร์ ก็จะทำให้ประหยัดค่าใช้จ่ายได้อีกด้วย นอกจากจะมองเห็นหน้าเว็บไซต์เดียวกันที่ถูกควบคุมโดยผู้สอนแล้ว ยังสามารถ chat ผ่านหน้า บราวเซอร์ได้อีกด้วย และสิ่งที่ยังทำไม่เสร็จคือ การทำ interaction ระหว่างผู้เรียนกับผู้สอน ในการวาดรูป เขียนตัวอักษรลงไปบนหน้าเว็บ ข้อจำักัดของระบบตอนนี้คือ สามารถใช้ได้เฉพาะในเครือข่ายเดียวกันเท่านั้นค่ะ นี่คือ Architecture ของระบบค่ะ จริงๆ มีอีกหลาย diagram [...]

Step 0 : ทดลองสร้าง Paw66 feed Plug-in for Firefox

Posted October 06, 2008 at Ajax66
ไม่รู้ว่าจะ post ที่ไหน แต่คิดว่าที่นี่น่าจะเหมาะสมที่สุดครับ เพราะว่า technology ที่ใช้ในการสร้าง Firefox Plug-in จะสอดคล้องกับ AJAX, JavaScript, CSS, XUL ครับ ถ้าไม่เหมาะสมแจ้งลบหรือลบได้เลยครับ พอดีผมลองศึกษาการเขียน firefox plug-in ดูครับ  และได้สร้าง plug-in ขึ้นมาตอบสนองความต้องการของผมเองมาหนึ่งตัว ซึ่งมี feature ดังนี้ 1. ไปดึงข้อมูล RSS feed มาจาก  PAW66.COM โดยจะทำการ update ทุกๆ 10 วินาที[ ค่าเริ่มต้น ] ไม่รู้ว่าจะรบกวน server ของ paw66 หรือไม่ ถ้ารบกวน server ต้องขออภัยด้วยครับ สามารถทำการแก้ไขได้ที่ about:config ชื่อ key คือ [...]

สนุกกับ Dojo ภาค 1

Posted October 03, 2008 at Ajax66
Why Dojo? Dojo เป็น javascript toolkit ที่ถูกสร้างขึ้นมาเพื่อให้ช่วยเราสร้างสุดยอดเวบแอพพลิเคชั่นได้อย่างรวดเร็ว ลดช่องว่างระหว่างการคิดกับการลงมือทำด้วยการเตรียใไว้ซึ่ง API ระดับเทพเครื่องมือที่ช่วยในการตรวจจับและแก้ไขปัญหาที่อาจจะเกิดกับการพัฒนาแอพพลิเคชั่นในชีวิตจริง Doja เองเล็ก(26KB) เร็ว มีความยืดหยุ่นสูง และ ดูเรียบง่าย นอกจากนี้ยังเตรียมสุดยอดเครื่องมือที่ใช้ในการจัดการกับ DOM ภาพเคลื่อนไหว Ajax Event I18n และ a11y นอกจากนี้ตัว dojo.js เองก็เพียบพร้อมไปด้วยเครื่องมือที่ดี และโมดูลพื้นฐานเช่น Drag and Drop, Advanced Ajax transports, String utilities, a powerful Data API, และอีกหลายร้อยโมดูลที่จำเป็นต่อการสร้างแอพพลิเคชั่น ตัว Dojo Toolkit เองก็มาพร้อมกับ pre-package ชื่อ Dijit หรือเครื่องมือวิเศษในการสร้าง widgets ที่พร้อมให้เราสร้างสุดยอด widget ได้ง่ายดั่งใจนึก ดังนั้นในยุคที่คนต่างพูดคำว่า Web 2.0 (มันคืออะไร) ที่การแสดงผลจำเป็นต้องดู dynamic [...]

List ของ AJAX Framework

Posted October 02, 2008 at Ajax66
List of Ajax Framework มาดูกันว่า AJAX Framework ปัจจุบันมีอะไรบ้าง ตามภาษานะครับ 1. Java Script - PrototypeJS - jQuery - Scriptaculous - Dojo Toolkit - Ext - YUI [ Yahoo UI Library ] 2. Java - ZK Framework - DWR - Echo - Google Web Toolkit 3. PHP - Sajax - Xajax 4. .Net Frameowrk http://www.ajaxpro.info/ คร่าวๆ ประมาณนี้ครับ ใครมีตัวอื่นๆ ที่น่าสนใจ comment บอกกันได้ครับ ตัวหลักๆ ที่ผมใช้มาคือ - PrototypeJS, DWR ครับ เพราะว่ามันง่ายดีนะครับ ^_^

ปูพื้นด้วย DOM(Document object Model)

Posted October 02, 2008 at Ajax66
Document Object Model(DOM) เป็นมาตรฐานเปิดที่ไม่ยึดติดอยู่กับระบบหรือภาษาใดๆ โดยที่จุดประสงค์หลักของ DOM คือการเตรียมอินเทอร์เฟสในการเข้าถึงขอ้มูลต่างๆในเอกสาร HTML หรือ XML ด้วย javascript โดยนอกจากนี้เรายังสามารถแก้ไขและตรวจจับค่าของเพจได้อีกด้วย โอ้ยยากจัง DOM คือ API ที่เตรียมไว้ให้เราจัดการเอกสาร XML, HTML ได้อย่างสะดวกคล่องคอ โดยข้อดีหลักของ DOM คือเราสามารถเดินไปเดินมาในเอกสารที่เราต้องการได้ไม่จำกัดจำนวนครั้ง หรือสามารถท่องไปได้ตามสะดวกเพราะเอกสารนั้นถูกอ่านเก็บไว้ในหน่วยความจำแล้ว แตกต่างจาก SAX (อะไรอีกเนี่ย) ที่เน้นการทำงานแบบกระบี่เดียวคือการทำงานกับเอกสารแบบครั้งเดียว ทางเดียวเส็ดไม่ไหลย้อนกลับนั่นเอง ดังนั้เราสามารถจินตนาการเอกสารให้เป็นแบบนี้ได้เวลาเราจะใช้ DOM นั้่นคือต้นไม้ที่กิ่งก้านสาขา Everyday Italian Giada De Laurentiis 2005 30.00 Harry Potter J K. Rowling 2005 [...]

มาลองเริ่มศึกษา AJAX กัน

Posted October 01, 2008 at Ajax66
มาลองเริ่มศึกษา AJAX กัน ผมเคยเขียนไว้ที่ Narisa.com  เลยเอามาแบ่งปันครับผม มาเริ่มกันเลยดีกว่า ( ตามความเข้าใจของผมนะครับ ) ผมเห็นเขาบอกว่า AJAX คือ New Approch to Web Application  ??? แล้ว AJAX มันคืออะไร ?? AJAX ไม่ใช่เทคโนโลยีหรือของใหม่อะไร แต่ว่าเป็นเพียงการนำเทคโนโลยีเดิมๆ หลายๆ ตัวมารวมกัน แล้วมันดันทำให้ประสิทธิภาพในการทำงานที่ดีขึ้นซะงั้น AJAX จะประกอบไปด้วยอะไรบ้าง ?? 1. ส่วนแสดงผลจะใช้ XHTML และ CSS ( Cascading Style Sheets ) 2. ส่วนที่ต้องการแสดงผลแบบ Dynamic และการติดต่อกับผู้ใช้งานใช้ DOM ( Document Object Model ) 3. การแลกเปลี่ยนข้อมูลและการจัดการข้อมูลจะใช้ XML ( Extensible Markup Language ) และ XSLT ( EXtensible [...]

Dojo FishTank

Posted September 30, 2008 at Ajax66
Blaine Ehrhart เขียนแอพพลิเคชั่นน่ารักๆชื่อ fish tank ด้วย Dojo, นี่เป็นอีกหนึ่งตัวอย่างที่แสดงถึงการทำภาพเคลื่อนไหว( animation) ด้วย JavaScript, ที่มีตัวอย่างการเขียนแบบนี้ครับ // Only dojo.fx is required for this awesome effect! dojo.require("dojo.fx"); // Variables for the bubbles... var bubbleTimer=null; var bubbleRand=3000; var fishAmount=4; var fishtank; // Here we start the bubbles and create the fish dojo.addOnLoad(function(){ fishtank = dojo.byId('fishtank'); imageObj = new Image(); images = new Array("bubble1.png","bubble2.png","bubble3.png","bubble4.png","bubble5.png","fishL.png","fishR.png"); dojo.forEach(images,function(image) { imageObj.src='images/'+image; }); createBubble(); createFish(); }); // This is the bubble creating function function createBubble () { var [...]

Hello world!

Posted September 30, 2008 at Ajax66
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!