[Algorithm] MVC (How to program with java)

 

วันนี้ผมจะมาสอนเกี่ยวกับแนวคิดการออกแบบ GUI (graphical user interface) หรือบางคนเรียกสั่นๆ ว่า UI ซึ่งในปัจจุบันแนวคิดตัวนี้หรือที่เรียกกันว่า MVC นั้นถือได้ว่ามันคือพื้นฐานที่โปรแกรมเมอร์ต้องรู้เลยก็ว่าได้เกี่ยวกับเชื่อมตัวระบบเข้ากับ GUI ที่เราออกแบบ ซึ่ง ณ ตอนนี้หลายๆ ระบบไม่พ้นแม้ก็กระมือถืออย่างสมาร์ทโฟนก็ใช้หลักการเดียวกัน , เว็บไซต์ต่างๆ  หรือแม้กระทั่ง Framwork ที่เหล่าโปรแกรมเมอร์ใช้กันก็ยังใช้หลักการตัวนี้เข้ามาช่วย แต่ถึงจะเป็นที่นิยมอย่างแพร่หลาย

พื้นฐานของ MVC นั้นจะถูกแบ่งออกเป็น 3 ส่วน สำหรับแนวคิดในการออกแบบนั้นสามารถเขียนออกมาเป็นไดอแกรมง่ายตามนี้ครับ

null

โดยมีความหมายและคุณลักษณะของแต่ละตัวดังนี้

  • Model โดยปกติแล้วจะหมายถึงโดเมนหลักของระบบหรือก็คือตัวระบบที่ใช้ในการประมวลผลของโปรแกรมนั้นเอง ซึ่งจะมีการทำงานหลายๆ รูปแบบ มีตั่งแต่ 1 ขึ้นไป (ตัวอย่างเช่น เชื่อมต่อ Database)  โมเดลจะถูกออกแบบได้หลายๆแบบ ขึ้นอยู่กับโปรแกรมเมอร์ว่ากำลังทำระบบอะไร หรือสรุปคือโมเดลคือที่รวบรวม บรรจุ Function , Object  ของโปรแกรมนั้นเอง
  • View จะเป็นส่วนที่ติดต่อหรือใกล้ชิดกับผู้ใช้งานมากที่สุด เพราะมันคือส่วน GUI ที่เราออกแบบนั้นเอง ที่ใช้สำหรับตอบโต้กับผู้ใช้งาน (Interactive) โดยปัจจุบันก็มีเทคโนโลยีหลายๆ ตัวที่ใช้สร้าง GUI ขึ้นมาเช่น swing , AWT , Android หรือ Vaadin เป็นต้น และส่วนนี้ก็จะเป็นส่วนที่คอยรับ Input จากผู้ใช้งานไม่ว่าทางเมาส์ , คีย์บอร์ด , การสัมผัส หรือการ input แบบอื่นๆ ก็ตาม
  • Controller คือส่วนที่คอยรับคำสั่ง input จาก View และแปลคำสั่งจากนั้นก็เลือกว่าควรจะส่งงานให้ Model ทำหรือจะประมาวลผมเองและทำการเปลี่ยนแปลงค่าให้  View ด้วยตัวเอง

null

หากเรามองจาก Sequence diagrams เราก็จะเห็นการทำงานสองส่วนคือ

  • View เรียกไปหา Model ซึ่ง Model จะมีหน้าที่คอยรับคำสั่งและประมวลผลจากนั้นส่งค่าที่ได้ไปให้กับ View เพื่อแสดงให้ผู้ใช้งานดู
  • Controller คอยรับคำสั่งจาก View โดยอาจะไม่มีการส่งไปหา Model หากเป็นการประมวลผลเสร็จภายในตัวเองและทำการอัพเดท View หรือหากส่งไปหา Model ก็จะทำงานตามคำสั่งและ Model ก็จะอัพเดทหน้าจอเองเหมือนกับข้อแรก

** จากไดอแกรมข้างบนเราจะเห็นว่าการทำงานของ View นั้นจะทำหน้าที่ตอบโต้ (Interaction) กับผู้ใช้งานเมื่อผู้ใช้งงาน input ค่าลงไปด้วยวิธีต่างๆ ขึ้นอยู่กับโปรแกรมตัว View จะทำหน้าที่ส่งข้อมูลไปยัง controller , model และจึงส่งกลับมาที่ View ซึ่งผมจะบอกแบบนี้ครับการทำงานมันทำหน้าที่เหมือน Observer pattern หากใครที่เคยศึกษาเรื่องนี้มาบ้างแล้วก็จะเข้าใจว่ามันทำงานคล้ายกกันจริงๆ ซึ่งเดียวผมจะเขียนเกี่ยวกับตัวนี้ให้

เอาละเพื่อไม่ให้เสียเวลาเรามาดูวิธีการเขียนโค้ดกันเลยดีกว่า

สร้างตัว Model ขึ้นมาโดยผมจะทำเครื่องคิดเลขแบบง่ายๆ ละกันครับ

public class CalModel {

private int sum;

public void add(int num1, int num2){

sum = num1 + num2;

}

public int getSum(){

return sum;

}

}

จากนั้นก็ทำส่วน View ระบบเรา

import java.awt.event.ActionListener;
import javax.swing.*;

public class CalView extends JFrame{

private JTextField txtNum1  = new JTextField(10);
private JLabel lblAdd = new JLabel("+");
private JTextField txtNum = new JTextField(10);
private JButton btnSum = new JButton("Calculate");
private JTextField txtAns = new JTextField(10);

CalView(){

// set all of component to JPanal via constructor

JPanel calcPanel = new JPanel();

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setSize(600, 200);

calcPanel.add(txtNum1);
calcPanel.add(lblAdd);
calcPanel.add(txtNum1);
calcPanel.add(btnSum);
calcPanel.add(txtAns);

this.add(calcPanel);

}

public int getTxtNum1(){

return Integer.parseInt(txtnum1.getText());

}

public int getTxtNum2(){

return Integer.parseInt(txtNum2.getText());

}

public void setTxtAns (int sum){

txtAns.setText(Integer.toString(sum));

}

// If btnSum clicked execute a method
// use to set action of button

void addActionListener(ActionListener actionPerformed){

btnSum.addActionListener(actionPerformed);

}

// show error message

void displayErrorMessage(String errorMessage){

JOptionPane.showMessageDialog(this, errorMessage);

}

}

จากนั้นเราก็มาทำส่วนของ Controller ในการรับ Input มาจาก View และผลลัพธ์จาก Model

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class CalController {

private CalView view;
private CalModel model;

public setModel(CalModel model){
this.model = model;
}

public setView(CalView view){
this.view = view;
this.view.addActionListener(new CalListener());
}

// use inner class
class CalListener implements ActionListener{

public void actionPerformed(ActionEvent e) {

int num1, num2= 0;

try{

num1 = view.getTxtNum1();
num2 = view.getTxtNum2();

model.add(num1, num2);

view.setTxtAns(model.getSum());

}

catch(NumberFormatException ex){

System.out.println(ex);

theView.displayErrorMessage("Integers Only");

}

}

}

}

จากนั้นก็สร้าง main() สำหรับรันโปรแกรม

public class MVC{

public static void main(String[] args) {

CalView v = new CalView();

CalModel m = new CalModel();

CalController con = new CalController();

con.setModel(m);

con.setView(v);

v.setVisible(true);

}
}

เสร็จแล้วครับแค่นี้เราก็ได้เครื่องคิดเลขแบบง่ายๆ กันแล้ว ซึ่งปกติเวลาผมเขียนโปรแกรมจะไม่สร้าง view เองแต่จะสร้างไฟล์ JFlame ซึ่งในโปแกรม Netbeans มีเตรียมไว้ให้แต่เพื่อให้เห็นภาพผมเลยสร้าง view ขึ้นเองทั่งหมดและสืบทอด class JFlame ซึ่งหลักการก็จะคล้ายๆ กับสร้างไฟล์ แต่การทำ action performed นั้นจะต่างกันนิดหน่อยถ้าเราใช้ไฟล์ JFlame เราสร้างสามารถทำลงไปในนั้นได้เลย หรือจะทำแยกก็แล้วแต่บริบทของโปรแกรมขึ้นอยู่กับเรา ซึ่งถ้าหากเข้าใจหลักการ OOP แล้วจะไม่มีปัญาตรงนี้ และการรันโปรแกรมก็จะต่างกันตรงที่หากสร้าง view เองจะต้องสร้าง main() ขึ้นมารันเอง แต่ถ้าใช้ไฟล์ JFlame มันจะมี main() มาให้จบในตัวครับ หากมีข้อสงสัยตรงไหนก็ถามได้นะครับ

อ้างอิง: newthinktank.com , tidalwave.it

Facebook Comments