[Dev] วิธีการทำ Data Binding กับ Object สำหรับ Windows Forms บน VB.NET เบื้องต้น

ถ้าพูดถึง Design Pattern หลาย ๆ คนน่าจะรู้จัก MVC, MVP และ MVVM กันมาบ้างแล้ว สำหรับ MVVM จุดเด่น ๆ เลยก็คือ การทำ Data Binding

Visual-Basic-logo_Data-Binding-Object

สำหรับการทำ Data Binding บน VB.NET กับ Project แบบ Windows Forms Application นั้น ส่วนใหญ่จะมีการเชื่อมโยงกับ Database หรืออย่างน้อยก็จะต้องสร้าง DataSet จำลอง Database ขึ้นมาภายใน Project

ในบทความนี้ จะแนะนำการทำ Data Binding กับ Object (หรือ Model) ว่ามีขั้นตอนการทำอย่างไร

List of contents

 

Design View

ก่อนอื่นเรามา Design View กันก่อน ในที่นี้ก็คือ Windows Form นั่นเอง โดยเราจะออกแบบให้มี Control ที่สำคัญ ๆ ดังนี้

  • Label ชื่อ LblName
  • NumericUpDown ชื่อ NumAge
  • Button ชื่อ BtnAgePlus1
  • RadioButton ชื่อ RdoGenderUnknown, RdoGenderMale และ RdoGenderFemale
  • Button ชื่อ BtnSave

ดู Code ของ Form ได้ที่ FrmDataBinding.Designer.vb

โดยออกมาเป็นหน้าตา ดังรูปต่อไปนี้

Windows Form
Windows Form

สำหรับตัวอย่างนี้ ถ้ากดปุ่ม BtnAgePlus1 (ปุ่ม +1) จะทำการเพิ่มค่า Age ใน Control NumAge ไป 1 และเมื่อกดปุ่ม BtnSave หรือ Save จะทำการ MessageBox ข้อมูลออกมา

 

Create Model

จาก Form ที่ออกแบบไว้ ข้อมูลที่เราจะต้องสร้าง Model ขึ้นมาเก็บค่าไว้ จะมี Name, Age และ Gender โดยสร้างเป็น Class ชื่อ Employee ให้มี 3 Property ก็คือ Name, Age และ Gender สำหรับเก็บข้อมูลทั้ง 3 ตัว ดังนี้

 

Link View and Model

สำหรับการเชื่อมโยง View กับ Model (Form กับ Class) ถ้าไม่ได้ใช้ Data Binding จะเขียนได้แบบนี้

สังเกตบรรทัดที่ทำ Highlight ไว้ จะเห็นว่า เราจะต้องทำข้อมูลจากตัวแปรใส่ให้กับ Control เมื่อมีการเปลี่ยนแปลงข้อมูล (control.property = data) และนำข้อมูลจาก Control ใส่คืนกับตัวแปร เมื่อมีการเปลี่ยนแปลงค่าบน Control (data = control.property) เชื่อมโยงกันอยู่แบบนี้ ซึ่งก็น่าจะคุ้นเคยกันดีอยู่แล้วล่ะ

 

Create BindingSource

ก่อนจะเปลี่ยนไปใช้ Data Binding เราจะต้องสร้าง BindingSource ขึ้นมาก่อน วิธีสร้างง่ายที่สุดก็คือ ให้คลิกเลือก Control ในหน้า Design Form (1) แล้วดูที่หน้าต่าง Properties จะมีส่วนของ DataBindings ในรูปจะเป็น Properties DataBindings ของ Control ชนิด Label ซึ่งจะมี Binding Properties เริ่มต้นให้เลือกอยู่ 2 ตัว คือ Tag และ Text ก็คลิกเลือกตัวเลือกใน Properties Text (2) แล้วคลิก Add Project Data Source… (3) ก็จะพบกับ Data Source Configuration Wizard dialog

Add Project Data Source
Add Project Data Source

บน Dialog เลือก Data Source Type เป็นชนิด Object (1) แล้วกดปุ่ม Next > (2)

Data Source Configuration Wizard dialog
Data Source Configuration Wizard dialog

แล้วทำการเลือก Data Objects (1) โดยจะมี Class ต่าง ๆ ที่อยู่ใน Project เราให้เลือก ในที่นี้เราเลือกไปที่ Class Employee ที่เราได้ทำการสร้างไว้ก่อนหน้านี้นั่นเอง แล้วกดปุ่ม Finish (2)

Data Source Configuration Wizard dialog
Data Source Configuration Wizard dialog

ก็จะมี Project Data Sources ให้เลือกแล้ว ซึ่งจะมี Property ทั้งหมดที่อยู่ใน Class มาให้เราเลือกใช้งาน ในที่นี้เราจะเลือก Property Name (1) ของ Class Employee

DataBindings Property หลังจาก Add Project Data Source แล้ว
DataBindings Property หลังจาก Add Project Data Source แล้ว

สังเกตุที่ Design View ของ Form จะเห็นว่า มี Control เพิ่มขึ้นมา 1 ตัว มันก็คือ Control ชนิด BindingSource นั่นเอง (2)

BindingSource Control
BindingSource Control

ถ้าเลื่อนไปดู Property Text ของ LblName จะเห็นว่ามี Icon กำกับ และมี Tooltip แจ้งให้รู้ว่า Property ทำการ Binding กับอะไรอยู่

Binding Icon
Binding Icon

เนื่องจาก Property Text ของ Label เป็นชนิด String ซึ่งตรงกับ Property Name ของ Class Employee จึงสามารถทำการ Binding กันได้ตรง ๆ นั่นเอง

ต่อไปก็ทำการ Binding ข้อมูล Age บ้าง โดยเราจะทำการ Bind Property Value ของ Control NumAge ซึ่งเป็น Control ชนิด NumericUpDown เข้ากับ Property Age ของ Class Employee กันต่อ

DataBindings Property Value
DataBindings Property Value

ซึ่ง Property Value ของ Control ชนิด NumericUpDown เป็นชนิด Decimal ส่วน Property Age ของ Class Employee เป็นชนิด Byte ทั้งสองชนิดเป็นตัวเลขเหมือนกัน จึงสามารถทำ Binding ได้

ส่วน Property Gender ของ Class Employee นั้น เป็นชนิด Enum ส่วน RadioButton นั้น การกำหนดตัวเลือก จะต้องกำหนด Property Checked เป็น True ซึ่งก็คือเป็นชนิด Boolean ไม่สามารถทำการ Binding กันตรง ๆ ได้ จึงต้องทำ Property ชนิด Boolean เพิ่มเติมให้กับ Class Employee ดังนี้

เมื่อสร้าง Property เพิ่มขึ้นมาแล้ว ก็ทำการ Binding กับ RadioButton ทั้ง 3 ตัวซะให้เรียบร้อย

DataBindings Property Checked
DataBindings Property Checked

ถ้า Property ที่เพิ่มใหม่ ไม่แสดงให้เห็นใน BindingSource ให้ทำการ Refresh หรือ Build ซักครั้งนึง

 

Data Binding

ถึงเวลาทำ Data Binding แล้ว…

ในหัวข้อที่แล้ว เราแค่ทำการผูก Property ของ Control เข้ากับ Property ของ Class แต่… Class มันเป็นแค่พิมพ์เขียว เราต้องสร้าง Object ขึ้นมาก่อน แล้วทำการกำหนด Property DataSource ของ Control BindingSource ดังนี้

ถูกต้องครับ เขียนแค่นี้เลย บรรทัดเดียว เสร็จแล้ว…

รวม ๆ แล้ว Code ใน Form จะถูกยุบไปหมด เหลือแค่นี้เอง

ลองรันดูซิครับ จะเห็นว่า มีการเชื่อมโยงข้อมูลถูกต้องแล้ว และถ้ามีการเปลี่ยนแปลงข้อมูลบน Control ข้อมูลใน Property ของ Class Employee ก็จะเปลี่ยนตามด้วยเช่นกัน

View Update แล้วข้อมูล Update ตาม

แต่เดี๋ยวก่อน… ลองคลิกปุ่ม +1 เพื่อเพิ่มค่าใน Property Age ดูซิครับ จะเห็นว่า Property Age ถูกเพิ่มขึ้น 1 ตาม Code ที่เราเขียนไว้ใน Event Click ของ BtnAgePlus1 แล้ว ดังนี้

แต่ Control NumAge ไม่อัพเดตตาม ก็คือ ข้อมูลอัพเดต View ยังไม่อัพเดตตามนั่นเอง  ดูหัวข้อต่อไปนะ

 

Refresh View

สำหรับการอัพเดต View นั้น เราจะต้อง Implement Interface INotifyPropertyChanged ซึ่งอยู่ใน System.ComponentModel เราก็จะได้ Event PropertyChanged เพิ่มขึ้นมา ดังนี้

หลังจากนั้น ก็ไปทำการ Raise Event ซะ เมื่อมีการ Set ข้อมูลใน Property ต่าง ๆ ก็จะได้ Class Employee เต็ม ๆ ออกมาเป็นดังนี้

เสร็จแล้วครับ ที่ View (Form) ไม่ต้องเขียน Code ใด ๆ เลยเมื่อข้อมูลเปลี่ยนแปลง View จะถูกอัพเดตตามแล้ว…

ข้อมูล Update แล้ว View Update ตาม

 

สำหรับการทำ Data Binding กับ Object เบื้องต้น ก็มีเพียงเท่านี้ครับ ส่วน Code ทั้งหมดในบทความนี้ ผม Push ไปไว้ที่ GitHub แล้ว ซึ่งผมเขียนบน Visual Studio 2013 นะครับ แต่ Data Binding ใช้กับ Visual Studio เวอร์ชั่นเก่า ๆ ได้นะ

ส่วนใครที่อยากศึกษาเพิ่มเติม ลองอ่านต่อที่ Object Binding Tips and Tricks

2 Comments


  1. ขอบคุณมากๆเลยครับ กำลังศึกษาเลยครับ เขียนแบบเดิมมานานถึงเวลาต้องเปลี่ยนแนวความคิด เปลี่ยนแปลงโครงสร้างเพื่อให้งานบริหารต่อไปง่ายขึ้นครับ

    Reply
    1. gplus-profile-picture

      ยินดีครับผม ^_^

      จริง ๆ เรื่องนี้ เป็นพื้นฐานที่จะต่อยอดไปถึง MVVM (Model-View-ViewModel) ซึ่งเป็น Design Pattern นึง ที่นิยมใช้กัน ทำให้ Project แบ่งส่วนต่าง ๆ ตามหน้าที่ได้อย่างดี บริหารจัดการง่ายขึ้นมากครับ

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.