- - - - - - - - - - - - - - ผู้ให้การสนับสนุน- - - - - - - - - - - - - -

บทที่ 2 หน้าต่าง Code Editor และการเขียนโปรแกรมแบบ Event Driven

จากบทที่ผ่านมา เราได้ทำการสร้างโปรแกรมแรก ไปแล้ว ซึ่งในกระบวนการสร้าง เราได้ทำการ ดับเบิ้ลคลิกปุ่ม Command1 แล้วทำการป้อนโค้ดเข้าไป เพื่อให้มีการทำงาน ลักษณะหน้าต่างที่เราป้อนโค้ดจะเป็นดังนี้

รูปแสดง หน้าต่าง Code Editor

จะสังเกตุได้ว่า Project นี้ที่สร้างมา มี คอนโทรล เพียง 2 อย่างคือ Form และ CommandButton โดย Form มีชื่อว่า Form1 และ CommandButton มีชื่อว่า Command1 (ดูจาก Property (name) ของหน้าต่าง Property )

เมื่อทำการเลือก รายการด้านซ้ายบนสุด จะเป็นส่วนให้ใช้ในการเลือกรายการของ คอนโทรล และ ทำการเลือกรายการ เหตุการณ์ (Event) จากด้านขวาบนของหน้าต่าง Code Editor ดังในรูปด้านบน จะเห็นได้ว่า เราได้ทำการเลือก Command1 ซึ่งเป็นปุ่มที่อยู่บน Form ของเรา และจะสามารถเลือกเหตุการณ์ (ต่อไป ผมจะขอเรียกทับศัพท์ ว่า Event ตลอดแบบเรียนนะครับ) ได้หลายรายการ ทั้ง Click, GotFocus, Key Down และอื่นๆ โดยจะสังเกตุได้ว่า รายการของ Click Event เป็นตัวอักษรหนา ก็หมายความว่า มีการสร้าง Sub (Sub เป็นการเขียนโปรแกรมการทำงานเป็นกลุ่มของคำสั่ง อาจมีหลายบรรทัด หรือบรรทัดเดียวก็ได้ ขึ้นอยู่กับการทำงานของโปรแกรมที่ต้องการ) โปรแกรมให้ทำงานไว้แล้ว โดยสังเกตุได้จาก Private Sub Command1_Click() และ มี End Sub เพื่อบอกการสิ้นสุดของกลุ่มคำสั่งภายใน

จะเห็นว่าจะมีการกำหนด ชื่อของคอนโทรล_เหตุการณ์ ในที่นี้คือ Command1_Click() เพื่อบอกว่า Sub จะถูกเรียกให้ทำงานเมื่อ Command1 ถูก Click (คลิก) นั้นเอง และเมื่อเราทำการคลิกที่ปุ่ม จากผลการ Run ของโปรแกรมบน Emulator คำสั่ง MsgBox (เป็นคำสั่ง ในการแสดงหน้าต่างข้อความ) ก็จะถูกเรียกให้ทำงาน และแสดงข้อความคำว่า Hello World ออกมาให้เห็น

Option Explicit

Private Sub Command1_Click()
    MsgBox "Hello World"
End Sub

Private Sub Form_OKClick()
    App.End
End Sub

สำหรับ Sub Form_OKClick() ก็จะมีการทำงาน ก็ต่อเมื่อ Form มีการคลิกปุ่ม OK (ปุ่ม OK ที่อยู่ด้านบน ของ Form ขณะทำการ Run) โดยจะมีการเรียกใช้ App.End เพื่อออกจากโปรแกรม ซึ่งตัวแปร App เป็นตัวแปรที่ใช้ในการอ้างถึง Application หรือ โปรแกรมที่เราพัฒนา และสั่ง Run อยู่ในขณะนี้ นอกจากคำสั่ง End แล้วยังมีคำสั่งอื่นๆ ที่สามารถสั่งให้ทำงานได้

รูปแสดง ผลจาก Run โปรแกรม Hello World บน Emulator

จาากหน้าต่าง Code Editor จะเป็นหน้าต่างสำหรับการแก้ไขโค้ด โดยจะต้องทำการเลือกรายการของ Form จากหน้าต่าง (ตำแหน่งที่ 1) จากนั้นให้คลิกปุ่ม View Code เพื่อเปิดหน้าต่าง Code Editor สำหรับแก้ไขโค้ด (ตำแหน่งที่ 2) และหากต้องการกลับไปแสดงหน้าต่าง Form ให้คลิกที่ปุ่ม View Object (ตำแหน่งที่ 3) ดังรูปด้านล่าง

รูปแสดง หน้าต่าง Project

หลักการของการเขียนโปรแกรมแบบ Event Driven คือ การที่เราสร้าง คอนโทรลต่างๆไว้ และเมื่อมีการเลือกคลิกเมาส์ หรือกดปุ่มคีย์บอร์ด ผู้พัฒนาโปรแกรมจะทำการเขียนโค้ด ลงไปในส่วนของ Sub นั้นๆ ซึ่งสำหรับผู้ที่ไม่มีพื้นฐานทางด้าน การเขียนโปรแกรม ผมจะได้นำเสนอ พื้นฐานการเขียนโปรแกรม ในส่วนของบทต่อไป แต่หากท่านใดพอมีพื้นฐานแล้ว สามารถข้ามส่วนนี้ไปได้เลยครับ