หน่วยที่ 7 ฟอร์ม และเมนูโปรแกรม

การสร้างฟอร์ม (Form)

ในหน่วยการเรียนรู้ที่ 7 นี้จะอธิบายถึงการสร้างฟอร์มพร้อมกับเมนูคําสั่งต่าง ๆ ที่จะปรากฏบนฟอร์ม ความไปถึงการเขียนโปรแกรมเพื่อให้เมนูต่าง ๆ ที่สร้างขึ้นมีการทํางานได้ตามต้องการ

7.1การสร้างฟอร์ม (Form)

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

7.1.1 ส่วนประกอบของฟอร์ม

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

1. Title ของฟอร์ม สําหรับแสดงชื่อโปรแกรมหรือข้อมูลเบื้องต้นของโปรแกรม

2. Control ของฟอร์ม สําหรับคลิกเพื่อปิดฟอร์ม ย่อฟอร์ม ขยายฟอร์ม

3. Menu Bar ของฟอร์ม สําหรับเลือกใช้เมนูคําสั่งของโปรแกรม

4. พื้นที่การทํางานของโปรแกรม สําหรับใช้แสดงผลหรือผู้ใช้ทํางานกับโปรแกรม

7.1.2 การกําหนดคุณสมบัติให้กับฟอร์ม

ให้ทําการสร้าง Project ขึ้นมา เมื่อทําการสร้างโปรเจ็คแล้ว โปรแกรมจะทําการสร้างฟอร์ม เบื้องต้นให้ 1 ฟอร์ม จากนั้นทําการกําหนดค่าคุณสมบัติเบื้องต้นให้กับฟอร์ม ดังในตารางที่ 7.1 (เรื่องการกําหนดคุณสมบัติให้กับฟอร์มศึกษาได้ในหน่วยการเรียนรู้ที่ 2)

การสร้างเมนู (Menu)

7.2การสร้างเมนู

(Menu) เมน (Menu) เป็นรายการคําสั่งที่ผู้ใช้งานโปรแกรมสามารถเลือกใช้คําสั่งได้จากรายการที่ปรากฏใน แซึ่งผู้ใช้งานโปรแกรมคอมพิวเตอร์มักคุ้นเคยกับการใช้งานเมนูคําสั่งเหล่านี้

7.2.1 Control สําหรับสร้างเมน

การสร้างเมนูให้กับฟอร์ม จะใช้คอนโทรลที่อยู่ในกลุ่มของ Menus 8 Toolbars ซึ่งคอนโทรลใน เล่มนี้จะมีคอนโทรลให้เลือกใช้งานเพื่อสร้างเมนในหลากหลายรูปแบบ สําหรับในเบื้องต้นในหน่วยการ คนนี้ จะใช้คอนโทรลที่ชื่อว่า MenuStrip ดังรูปที่ 7.3 และ 7.4

รูปที่ 7.4 MenuStrip มาวางยังฟอร์ม

เมื่อทําการวาง MenuStrip Control ที่ฟอร์มแล้ว จากนั้นให้ทําการพิมพ์ชื่อเมนูต่าง ๆ ดังนี้ รูปที่ 7.5 ประกอบ)

- File

- Open File

- Save File

- Close File – ออกจากโปรแกรม

เมื่อพิมพ์ชื่อเมนูต่าง ๆ แล้วทําการทดสอบโดยการกดปุ่ม F5 ที่แป้นพิมพ์ แล้วทดสอบการ แสดงผลของเมนูที่สร้างขึ้น (รูปที่ 7.6)

7.2.2 เขียนโค้ดโปรแกรมให้กับเมนู

เมื่อได้ทําการสร้างเมนูกับฟอร์มแล้ว จากนั้นจะเป็นการเขียนโค้ดโปรแกรมเพื่อกำหนดว่าเมนูนั้นๆ ประมวลผลอย่างไร

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

1. เลือกเมนูที่ต้องการเขียนโปรแกรมเพื่อบอกการทํางานให้กับเมนู ในที่นี้เลือกที่เมนู ออก จากโปรแกรม ดูรูปที่ 7.7 ประกอบ

2. ทําการดับเบิลคลิกไปยังเมนูที่เลือกในข้อ 1 โปรแกรมจะเปิดโค้ดขึ้นมาในส่วนของเมนูท เลือก ดูรูปที่ 7.8 ประกอบ

3. จากนั้นทําการเขียนโค้ดคําสั่ง ให้สัมพันธ์กับเมนูที่เลือก ในที่นี้เลือกที่เมนู ออกจาก โปรแกรม ซึ่งเมื่อผู้ใช้คลิกที่เมนูนี้โปรแกรมจะทําการปิดตัวเองลงไป

4. เมื่อทําการเขียนโค้ดโปรแกรมแล้ว จากนั้นให้กด F5 เพื่อทดสอบโปรแกรม โดยเมื่อ โปรแกรมแสดงขึ้นมาแล้ว ให้เลือกไปที่เมนู ออกจากโปรแกรม แล้วทําการคลิก โปรแกรมจะทําการปิดลงไป

7.2.3 สร้าง Shortcut Key ให้เมนู

Shortcut Key คือ การกดปุ่มที่แป้นพิมพ์แล้วสามารถเรียกใช้เมนูที่ต้องการได้ เหมือนกับการ ใช้เมาส์ไปเลือกที่เมนูของโปรแกรม ซึ่งสามารถกําหนดได้ ดังนี้

1. เลือกเมนูที่ต้องการกําหนด Shortcut ในที่นี้เลือกที่เมนู ออกจากโปรแกรม

2. ที่ Properties ให้เลือกรายการที่เขียนว่า ShortcutKeys ดูรูปที่ 7.9 ประกอบ

3. จากนั้นทําการกําหนดปุ่มแป้นพิมพ์ที่ต้องการนํามาใช้เป็น Shortcut ในที่นี้กําหนดให้ใช้ปุ่ม Ctrl กับปุ่ม X เพื่อเรียกใช้เมนูออกจากโปรแกรม

4. ทําการกด F5 ทดสอบการทํางานของ Shortcut ที่กําหนด โดยการกดที่แป้นพิมพ์ปุ่ม Ctrl +x

เมื่อกดแล้วโปรแกรมจะปิดลง ตามการทํางานของเมนู ออกจากโปรแกรม ที่ได้เขียนโปรแกรมไว้

การสร้างเมนูแบบ ToolStrip

7.3 การสร้างเมนูแบบ ToolStrip

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

7.3.1 ขั้นตอนใช้งาน ToolStrip

ToolStrip จะอยู่ในคอนโทรลกลุ่มของ Menus & Toolbars ซึ่งวิธีการใช้งานให้ทําการเลือกที่ คอนโครล Tolstrip นํามาวางไว้ยังฟอร์มที่สร้างไว้แล้ว จากนั้นทําตามขั้นตอนดังนี้

1. จัดเตรียมรูปไอคอนที่ต้องการใช้แสดงเป็นคําสั่ง ควรเป็นไฟล์แบบ (Format) PNG 3 home.png เป็นต้น

2. ที่คอนโทรล ToolTrip บนฟอร์มที่วางไว้ ให้เลือก Button ดังรูปที่ 7.12

3. จากนั้นที่ Properties ให้เลือก Image คลิกที่ปุ่มด้านท้าย ดังรูปที่ 7.13

4. เมื่อทําตามข้อ 3 แล้วโปรแกรมจะให้เลือกไฟล์รูปภาพที่ต้องการนํามาทําเป็นเมนที่ แสดงผลแบบไอคอน ให้เลือกที่ปุ่ม Import ดังรูปที่ 7.14

5. เลือกรูปภาพที่ต้องการ (รูปต้องจัดเตรียมไว้ก่อน) โดยการดับเบิ้ลคลิกรูปที่ต้องการ ดังรูปที่7.15

6. คลิกที่ปุ่ม OK ที่หน้าต่างสําหรับการ Import รูปภาพ ดังรูปที่ 7.16 7. ได้รูปภาพที่นํามาใช้เป็นไอคอนเมนูตามต้องการ ดังรูปที่ 7.17

รูปที่ 7.17 ไอคอนเมนูคำสั่งจากการ lmpont

7.3.2 เขียนโค้ดโปรแกรมให้กับเมนูไอคอน

เมื่อสร้างเมนูไอคอนโดยใช้ ToolStrip แล้ว จากนั้นจึงทําการเขียนโปรแกรมให้แก่เมนูไอคอน ทั้งนี้โปรแกรมที่จะเขียนให้แก่เมนูไอคอน ควรให้สัมพันธ์กับรูปไอคอนที่ใช้ในการสื่อสารกับผู้ใช้งาน โปรแกรม ตัวอย่าง ผู้เขียนทําการเพิ่มไอคอนรูปปุ่มสําหรับปิดโปรแกรม 8 โปรแกรมที่จะเขียนให้แก่ปุ่มนี้ จะเป็นคําสั่งสําหรับการปิดโปรแกรม โดยมีขั้นตอน ดังนี้

1. เลือกที่เมนูไอคอนที่ต้องการเขียนโปรแกรม

2. ทําการดับเบิ้ลคลิกที่ไอคอนที่เลือก เพื่อเข้าไปเขียนโค้ดโปรแกรม

3. ทําการเขียนโปรแกรมดังในรูปที่ 7.19

4. ทําการกดปุ่ม F5 ที่แป้นพิมพ์แล้วทดสอบการทํางานของโปรแกรม

จากรูปที่ 7.19 อธิบายโค้ด เริ่มจากบรรทัดที่ 8 เป็นการประกาศตัวแปร เพื่อรับค่าที่ได้จากการ ปุ่ม MsgBox() ซึ่งจะเป็นการแจ้งเตือนว่าต้องการปิดโปรแกรมหรือไม่ จากนั้นบรรทัดที่ 10 ของโปรแกรม IF ในการตรวจสอบว่าคลิกที่ปุ่ม OK หรือไม่ หากคลิกปุ่ม OK โปรแกรมจะปิดการทํางานลง แต่ถ้าคลิก Cancel โปรแกรมจะไม่มีการทํางานใด ๆ

การสร้าง Web Browser อย่างง่ายด้วยฟอร์มและคอนโทรล

7.4 การสร้าง Web Browser อย่างง่ายด้วยฟอร์มและคอนโทรล

หลักการเรียนรู้เรื่องการสร้าง Form และการใช้คอนโทรล จะนําความรู้ที่ได้นํามาเขียนโปรแกรมที่ สามารถใช้งานได้จริง 1 โปรแกรม ซึ่งในที่นี้จะแนะนําการสร้างโปรแกรม Web Browser เพื่อใช้ในการรับชม เว็บไซต์ต่าง ๆ โดยมีขั้นตอน ดังนี้

รูปที่ 7.21 Chrome Web browser

Web Browser คือ โปรแกรมที่ใช้ในการรับชมเว็บไซต์ต่าง ๆ เช่น โปรแกรม Chrome โปรแกรม Firefox โปรแกรม Internet Explorer เป็นต้น

74.1 ออกแบบหน้าจอโปรแกรม

ทําการสร้างโปรเจ็คขึ้นมาใหม่กับ Visual Studio จากนั้นทําการออกแบบหน้าจอโปรแกรมดัง ที่ 722 โดยให้มีคอนโทรลต่าง ๆ ดังนี้

- TextBox สําหรับให้ผู้ใช้พิมพ์ URL เพื่อเข้าสู่เว็บไซต์ต่าง ๆ

- Button สําหรับคลิกเพื่อเข้าชมเว็บไซต์

- WebBrowser สําหรับแสดงหน้าเว็บไซต์

รูปที่ 7.22 การออกแบบหน้าจอโปรเเกรม Web Browser

7.4.2 กําหนดค่าให้กับคอนโทรล

เมื่อวางคอนโทรลต่าง ๆ ลงบนฟอร์มแล้ว จากนั้นกําหนดค่าต่าง ๆ ให้แก่คอนโทรล ดังตารางที่ 7.2

7.4.3 เขียนโค้ดโปรแกรม

ขั้นตอนต่อมาหลังจากทําการกําหนดคุณสมบัติให้กับคอนโทรลต่าง ๆ แล้ว คือการเขียน โปรแกรม โดยการเขียน

โปรแกรมสําหรับโปรแกรม Web Browser นี้ จะทําการเขียนที่ปุ่ม BtnGo เนื่องจาก เมื่อมีการคลิกปุ่มนี้แล้ว โปรแกรมจะนําค่าที่ผู้ใช้งานพิมพ์ URL ที่ TextBox นํามาส่งให้กับ WebBrowser คอนโทรลทําการเปิดเว็บไซต์ขึ้นมาแสดง ดังนี้

1. ทําการดับเบิ้ลคลิกที่ปุ่ม BtnGO

2. ทําการเขียนโค้ดดังในรูปที่ 7.23

รูปที่ 7.23 โค้ดโปรแกรม Web Browser

จากโค้ดในรูปที่ 7.23 บรรทัดที่ 4 เป็นการประกาศตัวแปร strURL เพื่อใช้ในการเก็บค่า URL ของเว็บไซต์ที่ได้จาก TextBox ในบรรทัดที่ 6 เป็นการส่งค่าตัวแปรดังกล่าวให้กับเมธอดที่ชื่อว่า Navigate URL) ของ MyWebBrowser หรือก็คือ WebBrowser คอนโทรลที่วางไว้ที่ฟอร์มนั้นเอง

7.4.4 ทดสอบการใช้งานโปรแกรม Web Browser

ทําการทดสอบโปรแกรมโดยการกดที่ปุ่ม F5 จากนั้นให้ทําการพิมพ์ URL ลงไปที่ TextBox เงิน http:/www.google.com เป็นต้น จากนั้นคลิกที่ปุ่ม GO โปรแกรม Web Browser ที่พัฒนาขึ้นจะทํา การแสดงหน้าเว็บไซต์ขึ้นมาให้รับชม ดังรูปที่ 7.22

* การทดสอบเครื่องคอมพิวเตอร์ต้องมีการเชื่อมต่อกับอินเทอร์เน็ต (internet)

รูปที่ 7.24 การทดสอบโปรเเกรม Web Browser

สรุปสาระสําคัญ

จากหน่วยการเรียนรู้นี้ ผู้เรียนได้ทําการเรียนรู้การใช้งานฟอร์มมากขึ้น โดยมีการสร้างเมนูในรูปแบบ ต่าง ๆ เพื่อให้โปรแกรมมีความน่าใช้งานมากยิ่งขึ้น ทั้งนี้การสร้างเมนู ควรคํานึงถึงผู้ใช้งานเป็นสําคัญ เนื่องจาก หากสร้างเมนูที่ผู้ใช้ไม่คุ้นเคยหรือเข้าใจได้ยาก โปรแกรมที่พัฒนาขึ้นมาแม้จะมีประโยชน์มากมาย แต่อาจไม่เป็นที่นิยมใช้งาน