Infinite Web Development

วันนี้เริ่มหัวข้อด้วยภาษาอังกฤษเลยทีเดียว หุหุ ที่จริงก็ไม่อยากจะอินเตออะไรหรอกนะ แต่เพราะถ้าใช้ภาษาไทยหัวข้อคงยาวซัก 3 บรรทัดได้ ก็เลยอินเตอร์ก็เค้าหน่อย :P

อืม..เข้าเรื่องดีกว่า Interactive UI(User Interface) ก็คือการเขียน หน้าจอ website ของเราให้มีการโต้ตอบกับผู้ใช้งาน ซึ่งบางคนก็นิยมใช้ flash นำการทำ interactive ui แต่วันนี้เราจะมาดูกันว่า javascript ธรรมดาๆก็ทำให้หน้าจอของเว็บเราน่าสนใจขึ้นมาได้เหมือนกัน

ซึ่งถ้าจะพูดถึง interactive ui สำหรับ jQuery แล้วล่ะก็ไม่ใช่เรื่องยากเลย เพราะ jQuery ได้เตรียมชุดของ plugin ที่ใช้สำหรับเพิ่มลูกเล่นให้ ui ของเราเอาไว้เรียบร้อยแล้ว โดย plugin ชุดนี้มีชื่อว่า jQuery UI ใครสนใจก็ตามลิงค์ไปเลยครับ :)

ในหน้า download นั้น มันก็จะมีให้เราเลือกว่าจะโหลด plugin ตัวไหนมามั่ง และสามารถเลือก theme ของ plugin ได้อีกตะหาก

โดยหลักๆแล้วที่เราต้องใช้จริงๆก็มีอยู่ 2 กลุ่ม ก็คือ Interaction กับ Widget

Interaction คือการปฏิสัมพันธ์กะผู้ใช้งาน(ศัพท์ยากจัง -"- ใครมีคำที่เข้าใจง่าย โปรดบอกที อิอิ) เช่น draggable กะ droppable ก็เอาไว้ทำให้ DOM element ในหน้าเว็บของเราสามารถลากวางได้

resizeable เอาไว้ทำให้ DOM element สามารถย่อขยายได้ อะไรประมาณนั้น :)

ส่วน Widget นั้นคือ เครื่องมือเพิ่มเติมที่นักพัฒนาเว็บส่วนใหญ่ต้องการใช้ แต่ HTML ปกติดันไม่มีมาให้ นั่นเอง เช่น tab, slider, datepicker(ปฎิทินเอาไว้เลือกวันที่) เป็นต้น

จาก plugin พวกนี้เราสามารถทำให้ web ของเราน่าสนใจขึ้นมาได้เยอะเลยทีเดียว

ส่วนเรื่องการนำไปใช้นั้น ก็แค่ download plugin ที่ต้องการ แล้วก็ include ไฟล์ plugin นั้นๆเข้ามาที่หน้าเว็บของเราด้วย tag script

เช่น <script type='text/javascript' src='ชื่อ file ของเรา' />

แล้วก็ include stylesheet ด้วย tag link

เช่น <link href="ชื่อ file css" rel="stylesheet" type="text/css">

จากนั้นก็เรียกใช้งาน plugin เช่น ถ้าเราอยากได้ datepicker เราก็ต้องสร้าง div tag มาหนึ่งอัน วางไว้ในตำแหน่งที่เราต้องการแสดง datepicker.... อ้อ อีกอย่างอย่าลืมใส่ id ให้ div tag ด้วยนะครับ

จากนั้นเราก็เขียน code ด้วย javascript ประมาณนี้

$("#id ของ div tag").datepicker();

เราก็จะได้ datepicker มาใช้อย่างง่ายดาย :) ซึ่ง plugin แต่ละตัวของ jQuery UI นั้น จะมี option ให้ set ได้มากมาย อย่างเช่น การ set date format หรือรูปแบบการแสดงวันที่ ก็จะมี option dataFormat ให้ใช้ดังตัวอย่าข้างล่าง ที่เราจะ set data format ให้เป็น วัน/เดือน/ปี

$("#id ของ div tag").datepicker(dateFormat: 'dd/mm/yy');

ซึ่งรายละเอียดของ plugin และ option ทั้งหมดก็ตามไปดูได้จาก link ที่ให้ไว้ครับ

Callbacks คือเหตุการณ์ที่เกิดขึ้น เมื่อเรามีการปฏิสัมพันธ์กับ model object(Active Record) เช่นเวลาที่เราเรียกเมทธอด create, save หรือ destroy มันก็จะเกิด callback ขึ้น และไม่ใช่เกิดแค่ callback เดียวแต่มีหลาย callback ซึ่ง callback ของ active record ทั้งหมดก็มีดังต่อไปนี้

Creating an Object: เป็น call back ที่เกิดจากการ create object(คำสั่ง INSERT ใน sql)

• before_validation
• after_validation
• before_save
• after_save
• before_create
• around_create
• after_create

Updating an Object: เป็น call back ที่เกิดจากการ save object(คำสั่ง UPDATE ใน sql)

• before_validation
• after_validation
• before_save
• after_save
• before_update
• around_update
• after_update

Destroying an Object: เป็น call back ที่เกิดจากการ destroy object(คำสั่ง DELETE ใน sql)

• before_destroy
• after_destroy
• around_destroy

ซึ่ง Callbacks พวกนี้จะเตรียมไว้ให้เราเอามาใช้เพื่อเขียนคำสั่งหรือการทำงานเพิ่มเติม ระหว่างขั้นตอนต่างๆของการ create, save และ destroy

ซึ่งเวลาเราจะเอา Callback มาใช้ เราก็แค่สร้าง method ชื่อเดียวกะ Callback เหล่านี้ลงใน model class ที่เราต้องการ เช่นหากเราต้องการให้มีการทำงานเพิ่มเติมหลังจากการ destroy object เราก็แค่ สร้าง method after_destroy ขึ้นมา(def after_destroy) แค่นี้เองครับ ง่ายมั้ย :)

อ้ออีกอย่าง ถ้าเราใช้ update(แทน save) และ delete(แทนที่จะเป็น destroy) มันก็จะไม่เกิด callback นะครับ อันนี้ต้องระวังด้วย