พื้นฐานการใช้คอนโทรลใน VS2008

image บทความนี้จะพูดถึงภาพรวมของการใช้ Control ภายใน VS2008 ที่มีการ
ใช้งานเป็นประจำ ว่าในแต่คอนโทรลนั้นมีการใช้งานกันอย่างไร
โดยจะเน้นการ Coding เป็นหลักเป็น เช่นการผูกข้อมูลกับ Textbox
ผูกข้อมูลกับ ComboBox
ผูกข้อมูลกับ DataGrid View เป็นต้น
เริ่มต้นขอแนะนำหน้าจอ ใน VS2008 ให้พอเห็นภาพก่อนดังรูปต่อไปนี้
ต่อจากนั้นเราก็มาเรื่องการสร้างโปรเจ็ตกัน ว่าสร้างกันอย่างไร

 

image

image

 

 

เมื่อเปิดโปรแกรมขึ้นมา สามารถสร้างเลือกสร้างโปรเจ็ตได้สองทาง
ตามที่แสดงในรูป ที่ WebSite เลือกสร้างแบบเว็บไซต์
Project เลือกสร้างแบบโปรเจ็ต ซึ่งในตัวอย่างเราจะสร้างแบบ Project

image ในตัวอย่างเราเลือกสร้างโปรเจ็ตแบบ Windown เลือกใช้ VB
ในการพัฒนา กรอกชื่อโปรเจ็ต เลือกที่เก็บโปรเจ็ต
และเลือกว่าจะสร้าง Solution หรือไม่ เมื่อเลือกเสร็จ
คลิก OK เพื่อสร้างโปรเจ็ต

 

 

image

แสดงส่วนต่างใน VS2008 โดยคร่าวๆที่ใช้กันประจำ โดยมีรายละเอีดยดังนี้
1.กลุ่มคอนโทรลที่ใช้ในการควบคุม เช่น รันโปรเจ็ต หยุดโปรเจ็ต ยกเลิกการรันโปรเจ็ต และ Restart โปรเจ็ตใหม่
2.กลุ่มคอนโทรลช่วยสนการ Debug
3.กลุ่มคอนโทรลมาตรฐานที่ต้องใช้
4.หน้าฟรอ์มที่เราใช้งานในการ Design งานให้ได้ตามที่เราต้องการ
5.หน้าต่างโปรเจ็ตของเราปัจจุบัน
6.Properties ของคอนโทรลซึ่งเราสามารถปรับให้มีลักษณะตามที่เราต้องการได้ที่นี้
7.กลุ่มคอนโทรลในการ Build Project, Build Sulution
8.ใช้ในการยุบหน้าต่างการทำงานที่ Active อยู่

image ส่วนเรื่องการ Design นั้นทำได้ง่ายครับ เพียงลากคอนโทรลที่ต้องการลงในฟอร์ ทำการปรับคอนโทรลให้เป็นไปอย่างที่เราต้องการได้จาก Properties ดังแสดงในตัวอย่างนี้ โดยการคลิกขวาที่คอนโทรลนั้นๆ เลือก Properties หรือกด F4 จะปรกฏหน้าต่างให้เราทำการปรับค่าต่างๆ ต่อไปนี้ เช่น
ID : ชื่อคอนโทรลที่เราต้องใช้ในการอ้างอิง
AcceptReturn : ให้มีการเพิ่ม \r ต่อท้ายกรณีที่เราเลือกให้ TextBox เป็นแบบ multiline
AcceptTab: ให้มีการเพิ่ม \t ต่อท้ายทุกๆครั้งที่มีการกด Tab หรือเปล่า
AllowDrop: ยอมให้มีการ Drag and Drop หรือไม่
Anchor : ทำการขยายตามสเกลฟอร์ม
BackColor: สีพื้นหลัง
Enable : ให้คอนโทรลนี้ทำงานได้หรือไม่
Cursor : ลักษณะของ Cursor ที่ไปวางที่คอนโทรลเป็นแบบไหน เราสามารถเลือกได้จาก List
Font : ลักษณะฟรอนที่ใช้
ForeColor : ลักษณะสีของตัวอักษร
Text : ข้อความที่ปรากฏบนคอนโทรล
Multiline : ยอมให้คอนโทรลมีหลายบรรทัดหรือไม่
PasswordChar: ลักษณะตัวอักษรที่เราจะกำหนดให้เป็นรหัสผ่าน
TextAlign : ตำแหน่งของตัวอักษรที่เราจะให้แสดงออกบนหน้าจอ
Properties ทั้งหมดที่กล่าวมานี้ยังไม่หมด ผมเพียงเกลิ่นเรียกน้ำย่อยเท่านั้น ซึ่งสามารถหาอ่านเพิ่มเติมจากแหล่งข้อมูลหรือใน MSDN ของ Microsoft ได้ครับDesign Form
ต่อไปเรามาDesign ให้มีหน้าฟอร์มให้มีรูปร่างหน้าตา ให้เหมือนกับรูปต่อไปนี้ โดยเริ่มแรกให้สร้างฟอร์มมาหนึงฟอร์มตั้งชื่อเป็นอะไรก็ได้ ลาก TooStrip มาวางบนฟอร์ กด F4 เพื่อเรียกหน้า Properties ขึ้นมาตั้งค่า DOCK = TOP เพื่อให้อยู่ด้านบน ลากคอนโทรลต่างๆให้ได้เหมือนในตัวอย่าง ซึ่งก็ไม่ได้ยากเกินไปสำหรับการ Design เบื้องต้น ซึ่งในฟอร์มนี้มี tool ดังนี้ ToolStrip, GroupBox, Label, ComboBox, TextBox, ToolTip, ErrorProvider, DataGridView เมื่อ Design ได้เหมือนตัวอย่างแล้วต่อมาเราจะทำการ Coding กัน ลักษณะการทำงานจะเป็นลักษณะ Event Drivent Programming คือ อยากให้ทำงานที่ไหน ก็เขียนCode ที่นั้น ซึ่งจะไม่เหมือนกับภาษา C,Pascal ที่เราเคยเรียนและใช้ๆกัน ที่ต้องทำทีละคำสั่งจากบนลงล่าง ซึ่งยากต่อการบำรุงดูแลรักษามากๆ เมื่อมีข้อผิดพลาดเกิดขึ้น ลักษณที่เห็นได้อย่างชัดเจนคือ จะแยกระหว่างหน้า Design กับหน้า Coding ออกจากกัน(Code Behide) ทำง่ายในการเขียน และดูแลรักษามากกว่าภาษา C, Pascal หรืออื่นๆเป็นต้น

image ดับเบิ้ลคลิกเพื่อให้เข้าสู่หน้า Coding จะได้ดังภาพต่อไปนี้ สังเกตเห็นสนแต่ละส่วนนั้นจะแยกการทำการออกจากกัน แต่อยู่ภายในฟอร์มเดียวกัน แต่การทำงานในแต่ล่ะส่วนนั้นจะเกี่ยวข้องและมีความสัมพันธ์กัน โดยแยกเป็นสองฝั่ง ฝั่งซ้ายจะเก็บคอนโทรลที่มีทั้งหมดบนฟอร์ม และฝั่งขวาจะเก็บเก็บ Event ที่คอนโทรลตัวนั้นๆใช้ ในการ Coding ที่คอนโทรลสามารถทำได้ 3 ทางคือเลือกจากหน้า Design โดยการกับเบิ้ลคลิก หรือเข้ามาหน้าต่างดังกล่าวนี้ เลือกคอนโทรลฝั่งซ้าย และเลือก Event ฝั่งขวานี้ หรือกด F4 เพื่อเรียกหน้า Properties ออกมาเลือกที่ Event image รูปฟ้าผ่าสีเหลืองจะปรากฏหน้า Event ให้เราเลือกการทำงาน โดยการดับเบิ้ลคลิกลงไปใน Event ที่เราต้องการ จะได้ Code ต่อไปนี้ เรามาดูแยกกันทีล่ะส่วนว่าหมายถึงอะไร

Private Sub btnSearch_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSearch.Click
//เพิ่ม Code ที่นี้

End Sub

Private : บอกให้รู้ว่า ในหน้านี้เท่านนั้นทีเรียกใช้งานได้ ดังนั้นในหน้าอื่นๆจะมองไม่เห็น Properties นี้
Sub      : บอกให้รู้ว่า เป็น Sub Procedure หรือพูดให้เข้าใจง่ายๆคือ เป็น Code การทำงานของปุ่มที่เรากดนั้นเอง
ByVal   : บอกให้รู้ว่า เราส่งค่าของคอนโทรลนี้นี้ไป โดยไม่มีผลการเปลี่ยนแปลงต่อคอนโทรลตัวนี้เมื่อค่ามีเปลี่ยนแปลง
sender : Object ของ Control ที่เรียกใช้ ซึ่งก็คือ คอนโทรลนั้นๆที่เรากำลังใช้อยู่ เป็นชนิด Object
e         : เป็นเหตุการณ์ที่คอนโทรลตัวนี้เรียกใช้ 
Handles : บอกให้ผูกเหตุการณ์ Click ของคอนโทรลนี้เข้ากับ Sub Procedure btnSearch_Click() ผลที่ได้คือเมื่อมีการกด Sub  Procedure นี้จะถูกเรียกใช้งาน
End Sub : บอกให้รู้ว่า จบการทำงานเท่านี้

เมื่อรวมกันจะบอกให้เรารู้ว่า เมื่อเกิดเหตุการณ์ Click ให้ไปเรียกการทำงานใน Sub btnSearch_Click โดยรับพารามิเตอร์ 2 ตัวคือคอนโทรลที่กำลังใช้งานในขณะนั้น(sender)ชนิด Object กับเหตุการณ์(e)ชนิด EventArgs โดยจะเรียกใช้งานในฟอร์มนี้เท่านั้น(Private)

ในคอนโทรลตัวอื่นการ Coding มีลักษณะที่คล้ายกันครับ แตกต่างกันเล็กน้อยที่ Event ที่เลือกใช้ อาจมีการรับ Parameter ที่แตกต่างกันออกและสิทธิ์ในการเข้าถึงอาจไม่เหมือนกัน ขึ้นอยู่กับว่า Sub หรือ Function นั้น จำเป็นหรือมีความปลอดภัยมากแค่ไหน

กรุณา Comment สักหน่อยเถอะ จะได้ปรับปรุ่งให้ดีขึ้น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s