บทปฏิบัติการครั้งที่ 4

เรื่อง การใชคอนโทรลในการเขียนโปรแกรมดวย Visual Basic 2008

 

วัตถุประสงค : เมื่อจบบทปฏิบัติการนี้แลวนักศึกษาสามารถ

1. บอกหนาที่ของคอนโทรลพื้นฐานใน โปรแกรม Visual Basic 2008 ไดอยางถูกตอง

2. เลือกใชคอนโทรลตาง ๆ เพื่อชวยในการเขียนโปรแกรมไดอยางถูกตองและเหมาะสม

 

ขั้นตอนการปฏิบัติ (120 นาที)

1. ศึกษาหนาที่ของคอนโทรลพื้นฐานในโปรแกรม Visual Basic 2008 (15 นาที)

2. ศึกษาวิธีการเขียนโปรแกรมโดยใชคอนโทรลพรอมเขียนโปรแกรม (45 นาที)

3. ทําแบบฝกหัดตามตัวอยางที่กําหนด (30 นาที)

4. ส่วนที่ 2  โปรแกรม PlaRa Browser (30 นาที)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. ศึกษาหนาที่ของคอนโทรลพื้นฐานในโปรแกรม Visual Basic 2008 (15 นาที)

1.1    Common Controls เป็นคอนโทรลพื้นฐาน ประกอบด้วย

Pointer    = สำหรับเลือกวัตถุที่ต้องการ

Button     = ปุ่มกด

CheckBox               = เป็นการแสดงทางเลือกโดยสามารถเลือกได้มากกว่า 1       รายการ

CheckedListBox    = แสดงรายการเลือกโดยเช็คที่หน้ารายการนั้น

ComboBox              = แสดงรายการเลือกคล้ายกับ list Box โดยคลิกที่   คอนโทรลเพื่อแสดงรายการทั้งหมด

DateTimePicker     = แสดงวันที่และเวลา

Label      = แสดงข้อความบนจอภาพ

LinkLabel               = แสดงข้อความที่เป็นตัวเชื่อมโยงบนจอภาพ

ListBox   = แสดงรายการเลือกโดยสามารถแสดงได้มากกว่า 1              รายการ และเลื่อนดูรายการที่ต้องการได้

ListView = เหมือนกับ Listbox แต่ Listview จะแสดงรูปภาพ              ประกอบหัวข้อด้วย ทำให้สื่อความหมายได้ง่ายยิ่งขึ้น

MaskedTextBox    = ใช้ Mask ข้อมูลนำเข้า

MonthCalendar      = แสดงปฎิทิน

NotifyIcon               = แสดงไอคอนในพื้นที่ที่แจ้งไว้ ฝั่งขวาของ windows

                  taskbar ขณะรันโปรแกรม

NumericUpDown   = แสดงรายการตัวเลข สามารถเลื่อนขึ้นลงได้

PictureBox                      = สําหรับแสดงผลกราฟกและภาพกราฟกตาง ๆ

ProgressBar            = แสดงสถานะการทำงาน

RadioButton            = แสดงรายการเลือกโดยสามารถเลือกได้เพียง 1 รายการ

RichTextBox          = กล่องข้อความขนาดใหญ่สามารถเพิ่มขนาดได้ตาม

                   ต้องการ

TextBox  = แสดงข้อความที่ได้จัดเก็บไว้และรับข้อมูลผ่านทาง                                                                 หน้าจอ

ToolTip                 = ใช้แสดงข้อมูลเมื่อผู้ใช้เลื่อนเม้าท์วางบนคอนโทรลที่

     เรียกใช้งาน ToolTip อยู่

TreeView              = สำหรับสร้างคอนโทรลเมนูหรือแสดงรายการเลือกแบบ 

      TreeView

   WebBrowser         = ใช้แสดงหน้า web page

 


1.2 Containers

 

1.3 Menus&Toolbars

 

 

 

 

 

 

 

1.4 Data

 

1.5 Components

 

1.6 Printing

 

1.7 Dialogs

 

 

 

 

 

 

 

1.8 General

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. ศึกษาวิธีการเขียนโปรแกรมโดยใชคอนโทรลพรอมเขียนโปรแกรม (45 นาที)

            2.1  โปรแกรมนาฬิกาตัวเลข

- ให้ทําการสร้าง Project ใหม่โดย ไปเลือกที่เมนู File >> New Projects และเลือกที่ Windows Application ตั้งชื่อโปรเจคใหม่เป็น Lab02_1 ในช่อง Name

-  สราง User Interface ตามตัวอยางหนาจอตอไปนี้

 

- กําหนด Properties ใหแตละคอนโทรลตามหมายเลขที่ระบุไวดังนี้

1. Label - สําหรับแสดงขอความที่เปTitle

Text = โปรแกรมนาฬิกาดิจิตอล

กําหนดรูปแบบตัวอักษร สี ตามตองการ

2. Label - สําหรับแสดงตัวเลขนาที

Name =  LabelMinute

Text   = 0

กําหนดรูปแบบตัวอักษร สี ตามตองการ

3. Label - สําหรับแสดงขอความ

Text   = :

กําหนดรูปแบบตัวอักษร สี ตามตองการ

4. Label - สําหรับแสดงตัวเลขวินาที

Name = LabelSec

Text   = 00

กําหนดรูปแบบตัวอักษร สี ตามตองการ

5. Button - เปนปุมสําหรับกําหนดการเริ่มต

Name = ButtonStart

Text   = เริ่มต

กําหนดรูปแบบตัวอักษรตามตองการ

6. Button - เปนปุมสําหรับหยุดชั่วคราว

Name = ButtonPause

Text   = หยุดชั่วคราว

กําหนดรูปแบบตัวอักษรตามตองการ

7. Button - เปนปุมสําหรับแสดงตอเนื่องจากที่หยุดชั่วคราวไปแล

Name = ButtonNext

Text   = แสดงต

กําหนดรูปแบบตัวอักษรตามตองการ

8. Button - เปนปุมจบการทํางาน

Name = ButtonEnd

Text   = ออกจากโปรแกรม

กําหนดรูปแบบตัวอักษรตามตองการ

9. Timer - นับจํานวนรอบการแสดงเวลา

Name     = TimerClock

Enabled  = False

Interval   = 1000 (ประมาณ 1 วินาที)

 

 

 

 

 

 

 

 

- ให้เขียนคำสั่งโปรแกรมตามคำสั่งต่อไปนี้

 


 

 

2.2 โปรแกรมการสอบถามขอมูล

- ให้ทําการสร้าง Project ใหม่โดย ไปเลือกที่เมนู File >> New Projects และเลือกที่Windows Application ตั้งชื่อโปรเจคใหม่เป็น Lab02_2 ในช่อง Name

 

- สราง User Interface ตามตัวอยางหนาจอตอไปนี้


 

 

 

 

 

 

 

 

 

-          ใหเขียนโปรแกรม ตามตัวอยางตอไปนี้ (โดยใหกําหนดชื่อคอนโทรลจากโปรแกรม)

 

3. ทำแบบฝึกหัดตามตัวอย่างที่กำหนด (30 นาที) เสร็จแล้วเรียกตรวจในห้อง

 

ส่วนที่ 2  โปรแกรม  “PlaRa Browser”

 

ครั้งที่ 2 เฉลยการสร้าง WebBrowser

 

ตัวอย่างโปรแกรม

               

 

 

 

 

 

จากหน้าจอที่ทำการออกแบบไว้ในครั้งที่ 1 มีขั้นตอนการทำ ดังนี้

1.       ทำการสร้างโปรเจคใหม่และตั้งชื่อโปรเจคเป็น “PlaRaBrowser”

2.       ที่ Form1 คลิกเลือก SplitContainer และลากมาวางบน Form1 เพื่อทำการแบ่งสัดส่วนพื้นที่ในการทำงาน

 

 

 

 

 

3.       หากต้องการเปลี่ยนรูปแบบการจัดวางเป็นแนวนอน ให้คลิกบริเวณมุมบนขวาที่เป็นรูป สามเหลี่ยม และเลือกเป็น Horizontal Splitter Orientation

4.       ผลที่ได้จากข้อ 3

5.       จากนั้นทำการจัดวางตามรูปแบบที่ต้องการ หากต้องการให้ขนาดของ  Panal เต็มพอดีกับขนาดของ Form ให้ทำการกำหนดใน Properties > Dock คลิกเลือกตรงกลาง ดังรูป

ผลที่ได้

 

6.       จากนั้นคลิกเลือกที่ ToolBox > MenuStrip มาวางใน Panel1 และพิมพ์ข้อความดังตัวอย่าง หรือทำตามแบบที่เราออกแบบไว้

 

 

 

 

 

 

7.       เพิ่ม Toolbars โดยคลิกเลือกที่  ToolBox >  ToolStrip และเพิ่ม Standard Items ดังตัวอย่าง

8.       จากนั้นเพิ่ม ToolStrip2 เข้ามา และเพิ่มข้อความ Search URL , TextBox, และ ปุ่ม Go! จัดวางตำแหน่งตามต้องการ

9.       การเพิ่มรูปภาพเข้ามาใช้ในการออกแบบ ที่ Toolbox > Common Controls > PictureBox

คลิกที่ PictureBox และลากมาวางในตำแหน่งที่ต้องการวางรูปภาพ จากนั้น Choose Image เพื่อเลือกภาพที่ต้องการ

 

 

 

 

 

 

 

 

 

 

 

 

 

10.    ที่ Toolbox > Common Controls > WebBrowser คลิกเลือก WebBrowser และลากมาวางใน Panel2 จากนั้นคลิกเลือก Dock in parent Container เพื่อให้ขนาดของ WebBrowser ขยายเต็มพื้นที่ของ Panel2

 

 

 

 

 

 

 

 

 

 

 

 

 

11.    จากนั้นศึกษาการจัดตกแต่งรูปแบบให้สวยงามตามต้องการ

 

12.    ทำการเขียนโปรแกรมดังนี้

(หากปุ่มที่ใช้เป็นลักษณะของรูปภาพ ให้ทำการ ดับเบิ้ลคลิกที่รูปภาพ และเขียนคำสั่ง ข้างต้นลงไป)

13.    ลองรันโปรแกรมเพื่อทดสอบผลที่ได้

14.    ให้นักศึกษาทำโปรแกรมตามตัวอย่างให้เสร็จและนำมาส่งในปฏิบัติการครั้งต่อไป