หน่วยที่ 6 การเขียนโปรแกรมกับคอนโทรล

รู้จักกับคอนโทรล (Control)

ในหน่วยนี้จะอธิบายถึงการใช้งานคอนโทรลเบื้องต้น พร้อมทั้งการเขียนโปรแกรมร่วมกับคอนโทรล ต่างๆ เพื่อให้ผู้เรียนมีความรู้ความเข้าใจเกี่ยวกับการใช้งานคอนโทรลเบื้องต้น

6.1 รู้จักกับคอนโทรล (Control)

คอนโทรล (Control) เป็นออบเจ็กต์ (Object) ที่สามารถมองเห็นได้บนฟอร์มของโปรแกรม เช่น ของ กรอกข้อมูล ปุ่มกด เมนูต่าง ๆ เป็นต้น ซึ่งคอนโทรลเหล่านี้ สามารถเลือกใช้ได้จาก Toolbox สําหรับวิธีการ คอนโทรลมาใช้บนฟอร์มได้กล่าวไว้แล้วในหน่วยการเรียนรู้ที่ 2

6.1.1 กลุ่มของคอนโทรล

ในโปรแกรม Visual Studio 2012 (Express Edition) ได้ทําการแบ่งกลุ่มของคอนโทรลที่แสดง ใน Toolbox ออกเป็นกลุ่ม ๆ เพื่อให้นักพัฒนาเรียกใช้งานได้ง่ายขึ้น โดยแบ่งออกเป็น 11 กลุ่ม (รูปที่ 6.1) ซึ่งแต่ละกลุ่มจะเป็นคอนโทรลที่มีหน้าที่ต่างกัน ดังตารางที่ 6.1

ตารางที่ 6.1 ชื่อกลุ่มและหน้าที่ของคอนโทรล

รูปที่ 6.1 การเเบ่งกลุ่มของคอนโทรลใน Toolbox

สําหรับหน่วยเรียนนี้จะแนะนําเฉพาะการใช้งานคอนโทรลในกลุ่มของ Common Controls เท่านั้น สําหรับคอนโทรลอื่น ๆ หากผู้เรียนสนใจสามารถเรียนรู้ได้ในระดับที่สูงขึ้นต่อไปได้

6.1.2 การกําหนดคุณสมบัติของคอนโทรล

คอนโทรลต่าง ๆ ที่ได้นํามาวางไว้บนฟอร์มนั้น สามารถกําหนดคุณสมบัติเบื้องต้นได้จาก Properties ซึ่งคุณสมบัติของคอนโทรลในแต่ละชนิดแตกต่างกันไป เช่น ถ้าเป็นปุ่มกด (Button) จะมี คุณสมบัติของการใช้งานรูปภาพมาวางเป็นพื้นหลังของปุ่ม แต่ช่องกรอกข้อมูล (TextBox) ไม่มีคุณสมบัตินี้ เป็นต้น ซึ่งการใช้งานคอนโทรลต่าง ๆ ผู้เรียนต้องศึกษาเกี่ยวกับคอนโทรลนั้น ๆ จึงจะสามารถกําหนด

รูปที่ 6.2 Properties สำหรับกำหนดคุณสมบัติเบื้องต้นให้คอนโทรล

6.1.3 คุณสมบัติใดบ้างที่ต้องกําหนดให้กับคอนโทรลเสมอ

คุณสมบัติของแต่ละคอนโทรลจะแตกต่างกัน แต่มีคุณสมบัติหนึ่งที่ทุกคอนโทรลต้องมี และ ก่อนจะไปเขียนโปรแกรมกับคอนโทรลนั้น ๆ ต้องทําการกําหนดเสมอ นั่นคือคุณสมบัติชื่อของคอนโทรล (Name) ซึ่งสามารถกําหนดได้จากหน้าต่าง Properties โดยมีหลักการตั้งชื่อให้คอนโทรลดังนี้

1. ไม่นําหน้าด้วยตัวเลข เช่น 2Button

2. ไม่เป็นภาษาไทย

3. ห้ามมีการเว้นวรรค

4. ไม่ใช้ตัวอักขระพิเศษใด ๆ เช่น – * * | #

5. สามารถใช้เครื่องหมาย Under Score ( ) ได้

โครงสร้างการเขียนโปรแกรมกับคอนโทรล (Control)

6.2 โครงสร้างการเขียนโปรแกรมกับคอนโทรล (Control)

การเขียนโปรแกรมกับคอนโทรล จะเป็นการเขียนโปรแกรมในรูปแบบของ Sub Program หรือเขียนในแบบโปรแกรมย่อย ซึ่งโปรแกรมย่อยเหล่านี้ Visual Studio ที่ใช้ในการเขียนโปรแกรมจะเป็นผู้ดำเนินการสร้างให้เสร็จสรรพ ผู้พัฒนาโปรแกรมเพียงแต่เขียนโค้ดที่ต้องการลงไปเท่านั้น แต่ทั้งนี้ควรจะศึกษาโครงสร้างของการเขียน Sub Program ที่ใช้งานกับคอนโทรลประกอบด้วย

6.2.1 Sub Program ของโปรแกรมกับ Control

Sub Program คือโปรแกรมย่อยที่ใช้ประกอบกับโปรแกรมหลัก โปรแกรมย่อยนี้จะทำงานต่อเมื่อมีการเรียกใช้งาน สำหรับรูปแบบของโปรแกรมย่อยดูในตัวอย่าง Ex.1 จะพบว่ามีการประกาศคำว่า Sub นำหน้าชื่อของ Sub Program

ใน Ex. 1 เป็น Sub Program ที่ชื่อว่า Button1_Clickcซึ่งเป็นชื่อของซับโปรแกรมที่ Visual Studio สร้างขึ้นให้ เมื่อมีการดับเบิ้ลคลิก ที่ Control เพื่อเข้าเขียนโค้ดโปรแกรม

6.2.2 การเขียนโค้ดการทํางานภายใน Sub Program

การเขียนโค้ดของโปรแกรมเพื่อให้ Sub Program ทํางาน สามารพอให้ Sub Program ทํางาน สามารถเขียนโค้ดลงไปก่อนจะEnd Sub ดังในตัวอย่าง EX.1 เป็นการเขียนโค้ดโปรแกรมเพื่อให้แสดง Massage Box เมื่อมีคลิก Button1 เป็นต้น

6.2.3 Event ของ Control

Event คือ เหตุการณ์ที่จะเกิดขึ้น เช่น การคลิก การดับเบิ้ลคลิก การนําเมาส์มาวางบน คอนโทรล เป็นต้น เหล่านี้คือ Event ซึ่งจากหน่วยที่ผ่านมา เมื่อเขียนโปรแกรมเข้าไปที่ปุ่ม จากนั้นทําการ Run โปรแกรม แล้วมีการคลิกไปที่ปุ่ม โปรแกรมจึงจะมีการทํางานเกิดขึ้น การคลิกลงไปที่ปุ่มแล้วโปรแกรม เกิดการทํางานนี้คือ Event ที่ชื่อว่า Click ซึ่ง Event นี้สามารถเปลี่ยนได้จากรายการ Event ที่มีให้เลือก

(ดูรูปที่ 6.5)

รูปที่ 6.5 การเลือก Event

จากรูปที่ 6.5 สังเกตว่าจะมีการเขียนซับโปรแกรมที่เขียนว่า Button1_Click นั่นคือปุ่มกดนี้ถูกตั้งชื่อ ว่า Button1 และมีการใช้งาน Event ที่ชื่อว่า Click นั่นเอง แสดงว่า Button1 นี้เมื่อถูกการคลิก โปรแกรม ข้างในนี้จะทํางาน เป็นต้น แต่ในส่วนของชื่อรับโปรแกรมดังที่กล่าวมา ไม่ใช่การใช้งาน Event สังเกตใน รูปที่ 6.6

จากรูปที่ 6.6 จะพบในส่วนของ Handles และมีโค้ด Button1.Click ซึ่งก็คือ ชื่อปุ่มกด.ชื่ออีเวนท์ โค้ด ในส่วนนี้คือการระบุว่าคอนโทรลนี้จะใช้งานกับ Event ใดหรือเหตุการณ์ไหน ดังนั้นที่ชื่อซับโปรแกรมที่ Visual Studio สร้างให้นั้น สามารถเปลี่ยนแปลงได้ ดังในรูปที่ 6.7 แต่โดยปรกติแล้ว จะไม่นิยมเปลี่ยนชื่อ ซับโปรแกรมในส่วนนี้ เนื่องจากชื่อชับโปรแกรมที่ถูกกําหนดขึ้นให้อัตโนมัตินี้ เป็นชื่อที่สื่อสารและเข้าใจดี อยู่แล้ว ในการเขียนโปรแกรม

การเขียนโปรแกรมกับ Common controls

6.3การเขียนโปรแกรมกับ Common Controls

การเขียนโปรแกรมกับ Controls คือ การเขียนโปรแกรมเพื่อทํางานกับคอนโทรลนั้น ๆ เช่น ถ้าเป็นการเขียนโปรแกรมกับ TextBox Control จะเขียนโปรแกรมเข้าไปเพื่อรับค่าของคอนโทรลที่ผู้ใช้งาน โปรแกรมกรอกข้อมูลเข้ามา เป็นต้น ซึ่งแต่ละคอนโทรลจะมีวิธีการเขียนโปรแกรมร่วมกับคอนโทรลแตกต่าง กันออกไป

6.3.1 การเขียนโปรแกรมกับ Button Control

Button Control จากหน่วยที่ผ่านมามีการนํา Bution Control มาใช้กับการเขียนโปรแกรมใน เบื้องต้น สําหรับในหน่วยการเรียนรู้นี้ จะมาทําความเข้าใจให้มากยิ่งขึ้นกับการเขียนโปรแกรมกับ ButtonControl นี้

1. นํา Button มาวาง

ให้ทําการนํา Button มาวางยังฟอร์มที่สร้างขึ้นจํานวน 2 ปุ่ม ดังรูปที่ 6.8 พร้อมกับกําหนด คุณสมบัติที่ Properties ดังแสดงในตารางที่ 6.2

2. เขียนโค้ดให้ Btn1

เมื่อได้ Button มาวางบนฟอร์มและทําการกําหนดค่าที่จําเป็นแล้ว จากนั้นที่ Bin1 ให้ทํา การดับเบิ้ลคลิก เพื่อเข้าไปเขียนโค้ดการทํางานให้กับปุ่มกดนี้ โดยเขียนโค้ด ดังรูปที่ 6.9

จากโค้ดในรูปที่ 6.9 เป็นการเขียนคําสั่งให้กับ Btn1 โดยเป็นคําสั่งที่ใช้ในการเขียนข้อความ ลงบนปุ่มกด ในที่นี้ให้เขียนข้อความลงไปบนปุ่มกด Btn2 โดยใช้ชื่อปุ่มกด แล้วตามด้วย Text ดังตัวอย่าง EX.2

3. ทดสอบการทํางานของโปรแกรม

เมื่อได้ทําการเขียนโค้ดข้างต้นแล้ว จากนั้นให้ทําการกดปุ่ม F5 ที่แป้นพิมพ์แล้วทําการ ทดสอบโดยกา คลิกไปที่ปุ่ม Btn1 (Button 1) จะสังเกตได้ว่าข้อความบนปุ่มกด Btn2 นั้นมีการเปลี่ยนไป ตามที่เขียนในโค้ดโปรแกรม ดังรูปที่ 6.10

6.3.2 การเขียนโปรแกรมกับ TextBox Control

TextBox Control เป็นคอนโทรลที่ใช้ในการรับค่าข้อมูลจากผู้ใช้งานโปรแกรม เพื่อนําข้อมูลที่ ได้มาประมวลผลในโปรแกรมต่อไป การใช้งานและการเขียนโปรแกรมเบื้องต้นกับ TextBox มีดังนี้

1. นํา TextBox มาวาง

ให้ทําการนํา TextBox จาก Toolbox มาวางยังฟอร์มที่ได้สร้างขึ้นไว้แล้ว ดังรูปที่ 6.11 และ ทําการกําหนดค่า Properties ดังในตารางที่ 6.3

ตารางที่ 6.3 การกําหนดค่า Properties ให้ TextBox

2. เขียนโค้ดให้ Txt1

เมื่อได้ TextBox มาวางบนฟอร์มและทําการกําหนดค่าที่จําเป็นแล้ว จากนั้นที่ Btn2 ให้ทํา การดับเบิ้ลคลิก เพื่อเข้าไปเขียนโค้ดการทํางานให้กับปุ่มกดนี้ โดยจะเป็นการเขียนโค้ดโปรแกรมเพื่อทําการ รับค่าจาก Txt1 เมื่อมีการกดปุ่ม Btn2

ดังรูปที่ 6.12

จากโค้ดโปรแกรมในรูปที่ 6.12 ได้ทําการเขียนโค้ดโปรแกรมเพื่อทําการรับค่าจากผู้ใช้ โปรแกรมที่มีการกรอกข้อมูลผ่าน Txt1 โดยเมื่อมีการกดปุ่ม Btn2 โปรแกรมจะทําการรับค่าจาก Txt1 มาเก็บลง ในตัวแปร strinput จากนั้นจึงแสดงผลโดยผ่าน MsgBox (strinput) สําหรับการรับค่าจาก TextBox จะใช้ ชื่อเท็กซ์ บ็อกซ์.Text

3. ทดสอบการทํางานของโปรแกรม

เมื่อเขียนคําสั่งข้างต้นแล้ว ให้ทดสอบโปรแกรมโดยการกดปุ่ม F5 ที่แป้นพิมพ์จากนั้น กรอกข้อมูลลงไปยัง Txt1 แล้วทําการคลิกที่ปุ่ม Btn2 สังเกตการทํางานของโปรแกรมดูรูปที่ 6.13 ประกอบ

ตารางที่ 6.4 การกําหนดค่า Properties ให้กับ Label

6.3.3 การเขียนโปรแกรมกับ Label Control

Label Control เป็นคอนโทรลที่ใช้ในการแสดงผลข้อมูลบนฟอร์มของโปรแกรม ซึ่งในโปรแกรม ต่าง ๆ จะมีการใช้งานคอนโทรลนี้เป็นประจํา โดยมีวิธีการใช้งาน ดังนี้

1. นํา Label มาวาง

ให้ทําการนํา Label มาวางไว้ยังฟอร์มที่สร้างขึ้นไว้แล้ว ดังรูปที่ 6.14 จากนั้นทําการ กําหนดค่า Properties ให้แก่ Label ดังในตารางที่ 6.4

2. เขียนโค้ดให้ LB1

เมื่อได้ Label มาวางบนฟอร์มและทําการกําหนดค่าที่จําเป็นแล้ว จากนั้นที่ Btn2 ให้ทํา การดับเบิลคลิก เพื่อเข้าไปเขียนโค้ดโปรแกรม ในขั้นตอนนี้ ต้องการเขียนโปรแกรมคําสั่ง คือ ต้องการให้ โปรแกรมมีการทํางานเมื่อปุ่ม Btn2 ถูกคลิก แล้วมีการรับค่าจาก Txt1 จากนั้นให้นําเอาข้อความที่ได้จาก Txt1 มาแสดงผลที่ LB1 (Label) ที่ได้วางไว้บนฟอร์ม ดังรูปที่ 6.15

จากโค้ดโปรแกรมในรูป 6. 15 ขั้นตอนการทํางานของโปรแกรม คือ เมื่อมีการคลิกปุ่ม Btn2 แล้ว โปรแกรมจะทําการรับค่าจาก Txt1 นําค่าที่ได้มาเก็บลงในตัวแปล strinput จากนั้นนําไปแสดงผลที่ LB1 โดยแสดงผลผ่าน เลเบล.Text

3. ทดสอบการทํางานของโปรแกรม

เมื่อเขียนโค้ดโปรแกรมข้างต้นแล้ว ให้ทําการทดสอบโปรแกรมโดยการกดปุ่ม F5 ที่ แป้นพิมพ์จากนั้นให้ทําการกรอกข้อมูลลงไปยัง Txt1 แล้วทําการกดที่ปุ่ม Btn2 สังเกตการทํางานของ โปรแกรม(ดูรูปที่ 6.16 ประกอบ)

6.3.4 การเขียนโปรแกรมกับ ComboBox Control

ComboBox เป็นคอนโทรลที่ใช้แสดงรายการ เพื่อให้ผู้ใช้งานโปรแกรมสามารถเลือกรายการที่ ต้องการได้ มีวิธีการใช้งานดังนี้

1. นํา ComboBox มาวาง

ที่ Toolbox ให้ทําการเลือกที่ ComboBox จากนั้นนํามาวางยังฟอร์มของชิ้นงาน จากนั้นทํา การกําหนดค่าคุณสมบัติดังตารางที่ 6.5

2. เขียนโค้ดให้ BoxList

เมื่อได้ ComboBox มาวางยังฟอร์มแล้ว และได้มีการกําหนดค่าให้แก่ ComboBox แล้วจากนั้นให้เขียนโค้ดโปรแกรมเพื่อสร้างรายการให้แก่ ComboBox โดยการเขียนโปรแกรมจะประยุกต์ใช้ตัวแปรอาร์เรย์ที่ได้เรียนรู้ไปแล้วนำมาใช้งาน โดยใช้ทำการดับเบิ้ลคลิกที่ฟอร์ม (ที่พื้นที่ว่างของฟอร์ม) จากนั้นเขียนโค้ดโปรแกรม ดังรูปที่ 6.18

จากโค้ดโปรแกรมในรูปที่ 6.18 จะพบว่าได้มีการเขียนโค้ดลงไปที่ฟอร์ม และในบรรทัดที่ 8 มีการ ประกาศตัวแปรอาร์เรย์ occupation() เพื่อเก็บค่าชื่ออาชีพต่าง ๆ จากนั้นบรรทัดที่ 9 มีการประกาศตัวแปร strOcc เพื่อนําไปใช้ในการรับค่าขณะวนลูป For Each (บรรทัด 11) เพื่อนําข้อมูลที่ได้จากอาร์เรย์occupation() นํามากําหนดเป็นรายการให้แก่ BoxList ซึ่งเป็น ComboBox Control ในบรรทัดที่ 12