Unit2

วิชา การเขียนโปรแกรมโดยใชเ้ คร่ืองมือกราฟฟิ กโหมด รหสั วิชา 2204-2107 หน่วยที่ 2 เรื่อง การใช้งานโปรแกรม Visual Studio เบื้องต้น นางกชพร รัตนปราการ ครูแผนกวิชาคอมพวิ เตอร์ธุรกิจ

2.1 การเปิ ดโปรแกรม Visual Studio และการกาหนดค่าเบือ้ งต้น การเปิ ดใชโ้ ปรแกรม Visual Studio 2012 (Express Edition) ทาเช่นเดียวกบั การเปิ ดใชง้ าน โปรแกรมทว่ั ไป คือ ผใู้ ชค้ ลิกท่ีป่ ุม Start ของ Windows ดา้ นล่างซา้ ยมอื จากน้นั เลอื กท่ีรายการ Microsoft Visual Studio 2012 Express 2

การกาหนดค่าของโปรแกรมเบ้อื งตน้ ในการใชง้ านโปรแกรมใดๆ ในระบบคอมพิวเตอร์ ส่งิ แรกท่ี ผ้ใู ช้งานโปรแกรมควรศกึ ษา คอื การกาหนดคา่ การใชง้ านโปรแกรม เบื้องตน้ โดยเฉพาะการกาหนดเพ่อื ให้สามารถใช้งานกบั ตัวหนงั สอื ภาษาไทยได้ ซงึ่ สาหรบั Visual 2012 (Express Edition) มกี าร กาหนดค่าเบือ้ งต้นก่อนการใชง้ าน ดังน้ี 3

1. ผใู้ ชง้ านไปที่เมนู TOOLS จากน้นั 3.เลอื กแบบตวั หนงั สือ Tahoma เลือกท่ี Options (Main Menu-> เน่ืองจากเป็นตวั หนงั สือ Font ที่รองรับ OPTIONS-> Options) การใชง้ านภาษาไทย 4. เม่อื กาหนดค่าโปรแกรมไดแ้ ลว้ คลิก 2. จากน้นั เลือกรายการ Environment ป่ ุม OK แลว้ เลอื กท่ีรายการ Font and Colors เพ่อื ทาการกาหนดใช้ 4 รูปแบบตวั หนงั สือ (Fonts) ที่ รองรับภาษาไทย

2.2 การสร้างโปรเจค็ ใหม่ กาหนดค่าการสร้างโปรเจค็ ใหมไ่ ด้ 3. ท่ีหนา้ จอ New Project ใหท้ าการ ถกู ตอ้ งโดยการสร้างโปรเจ็คใหม่มี กาหนดค่าโดยการเลอื กท่ี Template> ข้นั ตอน ดงั น้ี Visual Basic-> Windows 1. ผใู้ ชง้ านไปท่ีเมนู เลอื ก FILE 4. จากน้นั ในส่วนของตวั เลอื กที่กลาง หนา้ จอ New Project ใหเ้ ลือก Windows 2. เลอื กท่ี New Project เมือ่ เลอื กแลว้ Forms Application จะไดห้ นา้ จอเพื่อทาการกาหนดค่า 5

5. ที่หนา้ จอ New Project ดา้ นลา่ งใหท้ า 6. เมอ่ื กาหนดค่าเสร็จส้ินดงั ขา้ งตน้ แลว้ การกาหนดช่ือโปรเจ็ค (ควรกาหนดเป็น ใหท้ าการคลกิ ที่ป่ ุม OK ของหนา้ จอ ภาษาองั กฤษ (English) เท่าน้นั ) และ New Project เลือกแฟ้มขอ้ มลู (Folder) ท่ีตอ้ งการ บนั ทึกช้ินงานเก็บไว้(ในท่ีน้ีกาหนดช่ือ 7. จะไดช้ ิ้นงานโปรเจค็ และมกี ารสร้าง โปรเจค็ ว่า First Application และเกบ็ ไว้ Form1 ที่ F \\ projectTestGบเBook) 6

2. 3 ส่วนประกอบของโปรแกรม Visual Studio 2012 (Express Edition) เมอื่ ไดท้ าการสร้างโปรเจคใหม่ (New Project) ข้ึนมาแลว้ จากข้นั ตอนท่ีผา่ นมาจะปรากฏ หนา้ จอ ซ่ึงในเบ้ืองตน้ ผเู้ รียนควรทาความเขา้ ใจส่วนประกอบของโปรแกรมท้งั น้ีเพอื่ ให้ สามารถเรียกใชง้ านคาสงั่ ต่าง ๆ ท่ีโปรแกรมจดั เตรียมมาใหไ้ ดถ้ กู ตอ้ งส่วนประกอบของ โปรแกรม Visual Studio 2012 มดี งั น้ี 7

1. Main Menu เป็นเมนูหลกั ที่ให้ 3. Toolbox เป็นส่วนที่ใหผ้ ใู้ ชง้ านได้ ผใู้ ชง้ านไดเ้ รียกใชค้ าสง่ั ต่าง ๆ เรียกใชเ้ คร่ืองมือในการเขียนโปรแกรม ซ่ึงเครื่องมือเหลา่ น้ีเรียกว่า“ คอนโทรล 2. Tool Bar เป็นส่วนท่ีใหผ้ ใู้ ชง้ านได้ เรียกใชค้ าสงั่ ไดโ้ ดยผา่ นป่ ุมคาสงั่ ต่าง ๆ 4. Form เป็นส่วนท่ีใหผ้ ใู้ ชง้ านออกแบบ หนา้ จอของโปรแกรมที่กาลงั พฒั นาซ่ึง ในส่วนน้ีผใู้ ชง้ านสามารถสลบั มุมมอง การใชง้ านใหแ้ สดงในรูปแบบของโคด้ โปรแกรมได้ (Coding) 8

5. Solution Explorer เป็นส่วนแสดงไฟลต์ ่าง ๆ ท่ีเกี่ยวขอ้ งกบั โปรเจ็คท่ีกาลงั พฒั นา 6. Properties เป็นส่วนที่ใหผ้ ใู้ ชง้ านสามารถกาหนดค่าของคอนโทรลต่าง ๆ ไดเ้ ช่นการ กาหนดค่าความกวา้ งความสูงของฟอร์มโปรแกรมที่กาลงั พฒั นา เป็นตน้ 9

2. 4 คณุ สมบตั ิของฟอร์มฟอร์ม (Form) ฟอร์ม (Form) คือหนา้ ตาของโปรแกรมท่ีเมือ่ ผพู้ ฒั นาโปรแกรมพฒั นาไดส้ าเร็จแลว้ และ นาไปใหผ้ ใู้ ชง้ าน (User) ผใู้ ชง้ านโปรแกรมจะทาการใชง้ านกบั ฟอร์มน้ีดงั น้นั นกั พฒั นา โปรแกรมที่ดีควรออกแบบฟอร์มคานึงถงึ การใชง้ านของผทู้ ่ีจะใชง้ านโปรแกรมต่อไปเช่น ควรออกแบบอยา่ งไรใหด้ ูดีใชง้ านโดยง่ายเป็นตน้ สาหรับในข้นั ตอนต่อไปน้ีจะแนะนาการ กาหนดคุณสมบตั ิเบ้ืองตน้ ของฟอร์มดงั น้ี 10

2. 4. 1 ส่วนประกอบของฟอร์ม สาหรับฟอร์มของโปรแกรมท่ีตอ้ งทาความเขา้ ใจเบ้ืองตน้ คือส่วนประกอบของฟอร์มในท่ีน้ี จะอธิบายองคป์ ระกอบของฟอร์มใหพ้ อเขา้ ใจดงั น้ี 1. Title ส่วนที่ใชแ้ สดงขอ้ ความบนหวั ของฟอร์ม 2. Control ส่วนท่ีใชใ้ นการยอ่ ขยายหรือปิ ดหนา้ จอโปรแกรม 3. Control Object ส่วนประกอบท่ีวางอยบู่ นฟอร์มเพือ่ ใหผ้ ใู้ ชง้ านโปรแกรมเรียกใชง้ าน 11

2. 4. 2 การกาหนดคุณสมบตั ิของฟอร์ม คุณสมบตั ิของฟอร์มคือส่ิงท่ีบอกวา่ ฟอร์มน้ีมีหนา้ ตาแสดงออกมาอยา่ งไรเช่นหนา้ จอสีน้าเงิน ขนาด 200 pixel ขอ้ ความบน Tile เป็นคาวา่ เครื่องคิดเลข เป็นตน้ ซ่ึงสามารถกาหนดค่าได้ ดงั น้ี 1. ทาการคลกิ ที่ฟอร์มใหส้ งั เกตเมอ่ื มีการคลกิ ท่ีฟอร์มแลว้ หนา้ ต่าง Properties ขวามอื จะแสดง รายการคุณสมบตั ิของฟอร์มข้ึนมาใหก้ าหนดค่าตา่ ง ๆ ได้ 2. ที่หนา้ ต่าง Properties น้ีสามารถกาหนดคุณสมบตั ิต่าง ๆ ซ่ึงแสดงคุณสมบตั ิที่จาเป็นและมกี าร ใชง้ านค่อนขา้ งบ่อย 12

2. 4. 3 ตัวอย่างการกาหนดคุณสมบตั ใิ ห้กับฟอร์ม ตวั อยา่ งน้ีจะทาการกาหนดคณุ สมบตั ิของฟอร์มใหก้ บั ฟอร์มที่สร้างข้ึนดงั น้ี 1. กาหนดชื่อฟอร์มเป็น FrmCalculator (ช่ือฟอร์มตอ้ งเป็นภาษาองั กฤษเท่าน้นั ) 2. เปล่ยี นขอ้ ความที่ Title เป็นคาว่าโปรแกรมเครื่องคานวณ 3. ฟอร์มจะไมแ่ สดงป่ ุมสาหรับยอ่ และขยายฟอร์ม 4. ขนาดของฟอร์มกวา้ ง 400 สูง 300 (400 x 300) 5. 5. สีพ้นื หลงั ของฟอร์มเป็นที่ฟ้า 13

2.5 การใช้ Control Object เบ้ืองตน้ Control Object คือสิ่งท่ีผพู้ ฒั นาโปรแกรมจะนามาวางไวบ้ นฟอร์มเช่นป่ ุมกดฮ่องกรอก ขอ้ มูลลสิ ตแ์ สดงรายการเป็นตน้ ซ่ึงคอนโทรลเหล่าน้ีสามารถเรียกใชง้ านไดจ้ าก Toolbox ซ่ึงในทูลบอ็ กซจ์ ะแบ่งการใชง้ านออกเป็นหมวด 14

2. 5. 1 การใชง้ าน Button Control Button Control หรือป่ ุมกด เป็นคอนโทรลท่ีมกี ารใชง้ านบ่อยมากในการพฒั นาโปรแกรมเน่ืองจาก ผใู้ ชง้ านโปรแกรมส่วนใหญ่คุน้ เคยกบั การคลิกป่ ุม เพ่ือสงั่ ใหโ้ ปรแกรมทางานตามตอ้ งการการใช้ งานคอนโทรล มีข้นั ตอนดงั น้ี 1. ไปที่ Toolbox เลือกกลุ่มของคอนโทรลเป็น Common Controls 2. จากน้นั ใชเ้ มาสค์ ลกิ คา้ งที่รายการ Button แลว้ ทาการลากเมาส์นา Button มาวางท่ีฟอร์มจึงทา การปลอ่ ยเมาส์ 15

3.จะได้ Button หรือป่ ุมกด 4. เม่อื ไดป้ ่ ุมกดแลว้ จากน้นั ใหท้ าการกาหนดคุณสมบตั ิท่ี Properties 5. ใชเ้ มาสค์ ลิกท่ีป่ ุมกดท่ีนามาวาง 1 คร้ังเพอื่ เลอื กป่ ุมกด 6. ท่ีหนา้ ต่าง Properties ทาการกาหนดค่า 16

2. 5. 2 การใชง้ าน TextBox Control TextBox Control คือช่องสาหรับใหผ้ ใู้ ชง้ านโปรแกรมไดท้ าการกรอกขอ้ มลู เช่นขอ้ มูลชื่อ นามสกุลของผใู้ ชง้ านโปรแกรมเป็นตน้ เพื่อส่งค่าขอ้ มูลน้นั ใหโ้ ปรแกรมนาไปประมวลผล สาหรับการใชง้ าน TextBox Control มขี ้นั ตอนการใชง้ านเหมือนกบั Button Control ท่ีไดก้ ลา่ ว มาแลว้ ดงั น้ี 17

1. ไปที่ Toolbox เลือกกลมุ่ ของคอนโทรลเป็น Common Controls 2. จากน้นั ใชเ้ มาส์คลิกคา้ งไปท่ีรายการ TextBox แลว้ ทาการลากเมาสน์ า TextBox มา วางที่ฟอร์มจึงทาการปลอ่ ยเมาส์ 3. เม่อื ได้ TextBox ท่ีวางอยบู่ นฟอร์มแลว้ จากน้นั ใหท้ าการกาหนดคา่ คุณสมบตั ขิ อง TextBox 18

สรุปการใชง้ าน Control เบ้ืองตน้ การใชง้ าน Control น้นั มวี ธิ ีการใชง้ านโดยสรุปดงั น้ี 1. เลอื ก Control ท่ีตอ้ งการใชง้ านจาก Toolbox นามาวางที่ฟอร์มโดยการคลิกเมาสค์ า้ งท่ี คอนโทรลแลว้ ลากวางยงั ฟอร์ม 2. ทาการกาหนดคุณสมบตั ิใหแ้ ก่ Control น้นั โดยการใชห้ นา้ ต่าง Properties 19

3. คุณสมบตั ิของ Control จะแตกต่างกนั ไปข้นึ อยกู่ บั ชนิดของ Control ท่ีใชง้ านแต่ คุณสมบตั ิท่ีจาเป็นตอ้ งกาหนดใหก้ บั ทุก ๆ Control คือ (Name) เนื่องจากคุณสมบตั ิ (Name) น้ีจะใชอ้ า้ งอิงในการเขียนโปรแกรมต่อไป 20

2. 6 วิธีการเขียนโคด้ กบั โปรแกรม Visual Studio 2012 (Express Edition) การเขียนโคด้ โปรแกรมโดยใชโ้ ปรแกรม Visual Studio 2012 (Express Edition) น้นั จะเขียนในโหมดของโคด้ ซ่ึงสามารถเขา้ สู่โหมดน้ีไดโ้ ดยการดบั เบิ้ลคลกิ (Double Click) ไปท่ีฟอร์มหรือที่ Control ตามตอ้ งการหากดบั เบ้ิลคลิกท่ีฟอร์มจะหมายถงึ ตอ้ งการเขา้ ไป เขียนโคด้ โปรแกรมใหแ้ ก่ฟอร์มแต่ถา้ เป็นการดบั เบ้ิลคลกิ ท่ี Control จะหมายถงึ ตอ้ งการ เขียนโคด้ คาสงั่ ใหแ้ ก่ Control น้นั เป็นตน้ 21

2. 7 การสง่ั รันโปรแกรม (Run) เม่ือไดท้ าการเขียนโคด้ โปรแกรมใหแ้ ก่ฟอร์มหรือ Control แลว้ ข้นั ตอนต่อมาคือทดสอบ การทางานของโคด้ โปรแกรมซ่ึงข้นั ตอนการทดสอบน้ีเรียกวา่ การสงั่ รันโปรแกรมหรือ Run สามารถทาไดด้ งั น้ี 1. คลิกที่ป่ ุม Start ที่ Tool Bar ดา้ นบนหรือสงั่ รันโปรแกรมโดยการกดป่ ุม F5 ท่ีแป้นพิมพก์ ็ ไดเ้ ช่นเดียวกนั 22

2.เมื่อสงั่ รันโปรแกรมแลว้ จะพบว่าโปรแกรมหรือฟอร์มท่ีไดส้ ร้างไวท้ าการแสดงผล ออกมา 3. ใหท้ าการทดสอบโปรแกรมโดยการกดป่ ุม 23

สรุปสาระสาคัญ จากเน้ือหาหน่วยเรียนน้ีผเู้ รียนจะไดท้ าความเขา้ ใจภาพรวมการใชง้ านโปรแกรม Visual Studio 2012 (Express Edition) ในการพฒั นาโปรแกรม GUI วา่ มขี ้นั ตอนการใชง้ านอยา่ งไรมี การเขียนโคด้ อยา่ งไรรวมถึงการสงั่ รันโปรแกรมเพ่อื ทดสอบโปรแกรมที่ไดพ้ ฒั นาข้ึนมาแลว้ ซ่ึงเป็นความรู้พ้นื ฐานใหผ้ เู้ รียนไดใ้ ชเ้ รียนรู้ในหน่วยเรียนต่อไป 24