Ngôn ngữ lập trình java
1.Sự ra đời của mô hình MVC
    2.Mô hình MVC trong swing
II.MVC trong Swing(2)
    1.Model(M) – View(V) – Controller(C)
    2. Tương tác trong MVC
    3. Ưu điểm của MVC trong Swing
III.Ứng dụng MVC trong chương trình:
     1. ShowDemo
     2. JListExample
     3. JTableExample
1.Sự ra đời của mô hình MVC:
      Bắt đầu vào những năm 70 của thế kỷ 20, tại phòng
 thí nghiệm Xerox PARC ở Palo Alto, sự ra đời của giao
 diện đồ họa (Graphical User Interface) và lập trình
 hướng đối tượng (Object Oriented Programming) cho
 phép lập trình viên làm việc với những thành phần đồ
 họa như những đối tượng đồ họa có thuộc tính và
 phương thức riêng của nó. Không dừng lại ở đó, những
 nhà nghiên cứu ở Xerox PARC còn đi xa hơn khi cho
 ra đời cái gọi là kiến trúc MVC (viết tắt của Model –
 View – Controller).
• MVC được dùng một cách rộng rãi trong nhiều hệ
thống phần mềm hướng đối tượng (OO Application), bất
kể được viết bằng ngôn ngữ hướng đối tượng (OO
Language) nào. Và MVC được biết đến như là một thiết
kế giao diện người dùng hướng đối tượng khá tốt.
• Trong bài báo cáo này, nhóm em sẽ trình bày phương
pháp thiết kế MVC, và minh họa Cách sử dụng MVC
trong swing với ngôn ngữ lập trình java.
• Swing trong java sử dụng kiến trúc Model -View –
Controller (MVC) như một thiết kế nền tảng đằng sau
mỗi một thành phần của nó.
2.Mô hình MVC trong swing:
Hình 2: Mô hình MVC cải tiến của Swing
1.Model(M) – View(V) – Controller(C):
  MVC trong Swing là kiến trúc cho các ứng dụng
 gồm 3 phần:
    • Model: là phần logic của ứng dụng.(Trạng
    thái của đối tượng đồ hoạ hay cấu trúc dữ
    liệu của đối tượng)
    • View: phần hiển thị của ứng dụng.
    • Controller: điều khiển giao tiếp với người dùng.

Ví dụ 1: GUI Component đơn giản là Checkbox
     Checkbox có thành phần:
• Model để quản lý trạng thái của nó là check hay uncheck
• View để thể hiện nó với trạng thái tương ứng lên màn
hình
• Controller :để xử lý những sự kiện khi có sự tương tác
của người sử dụng hoặc các đối tượng khác lên Checkbox.
Ví dụ 2: Trên JList
  • Model: mô hình dữ liệu cho JList
  • View: là giao diện hiển thị các mục chọn
  • Controller: xử lý sự kiện mỗi khi các mục trong
  JList được chọn
2. Tương tác trong MVC:
 • Khi người sử dụng cần thay
 đổi trạng thái của đối tượng đồ
 họa, thì sẽ tương tác thông qua
 Controller của đối tượng đồ
 họa.
 • Controller sẽ thực hiện việc
 thay đổi trên Model. Khi có
 bất kỳ sự thay đổi nào ở xảy ra
 ở Model, nó sẽ phát thông điệp
 (broadcast message) thông báo
 cho View và Controller biết.
• Nhận được thông điệp từ
Model:
  View sẽ cập nhật lại thể
  hiện của mình, đảm bảo
  rằng nó luôn là thể hiện
  trực quan chính xác của
  Model.
 Controller khi nhận được
 thông điệp từ Model, sẽ
 có những tương tác cần
 thiết phản hồi lại người sử
 dụng hoặc các đối tượng
 khác.
• Ví dụ: GUI Component là Checkbox

Khi người sử dụng nhấn chuột vào Checkbox:

        Thành phần Controller của Checkbox sẽ
    xử lý sự kiện này, yêu cầu thành phần Model
    thay đổi dữ liệu trạng thái. Sau khi thay đổi
    trạng thái, thành phần Model phát thông điệp
    đến thành phần View và Controller
Thành phần Controller nhận được thông điệp
do Model gởi tới sẽ có những tương tác phản hồi
với người sử dụng nếu cần thiết


    Thành phần View của Checkbox nhận được
 thông điệp sẽ cập nhật lại thể hiện của Checkbox,
 phản ánh chính xác trạng thái Checkbox do
 Model lưu giữ.
3. Ưu điểm của MVC trong Swing
Kiến trúc MVC đã tách biệt (decoupling) sự phụ thuộc
giữa các thành phần trong một đối tượng đồ họa, làm
tăng tính linh động (flexibility) và tính tái sử dụng
(reusebility) của đối tượng đồ họa đó. Một đối tượng
đồ họa bấy giờ có thể dễ dàng thay đổi giao diện bằng
cách thay đổi thành phần View của nó trong khi cách
thức lưu trữ (Model) cũng như xử lý (Controller)
không hề thay đổi. Tương tự, ta có thể thay đổi cách
thức lưu trữ (Model) hoặc xử lý (Controller) của đối
tượng đồ họa mà những thành phần còn lại vẫn giữ
nguyên.
III.Ứng dụng MVC trong chương trình:

Ví dụ 1: Thiết kế giao diện như hình dưới




• Model: Dữ liệu hiển thị cho TextArea
• View: Giao diện hiển thị khi nhấn nút “Show”
• Controller: Xử lý sự kiện khi nút “Show” được nhấn
III.Ứng dụng MVC trong chương trình(3):
III.Ứng dụng MVC trong chương trình(1):
package mvc;
import java.awt.FlowLayout;
import java.awt.event.*;
import javax.swing.*;
public class ShowDemo extends JFrame implements ActionListener {
         JTextArea jta;
         JButton jbt;
         public ShowDemo(){
                  JFrame jf = new JFrame();
                  jf.getContentPane().setLayout(new FlowLayout());
                  jf.setSize(300,150);
                  jta = new JTextArea(2,20);
                  jbt = new JButton("Show");
                  jbt.addActionListener(this); // Bat su kien
                  jf.getContentPane().add(jta);
                  jf.getContentPane().add(jbt);
                  jf.setVisible(true);
         }
III.Ứng dụng MVC trong chương trình(2):

// Phuong thuc xu ly su kien khi nut duoc nhan

public void actionPerformed(ActionEvent e) {
         if (e.getSource()==jbt){
                   jta.setText("DE TAI BAO CAO NHOM 4");
         }
}
/**
 * @param args
 */
public static void main(String[] args) {
// TODO Auto-generated method stub
         new ShowDemo();
}

}
III.Ứng dụng MVC trong chương trình(4):

Ví dụ 2: Thiết kế giao diện như hình dưới




• Model: Mô hình dữ liệu cho JList
• View: Giao diện hiển thị các mục được chọn
• Controller: Xử lý sự kiện khi một nút được nhấn
III.Ứng dụng MVC trong chương trình:
III.Ứng dụng MVC trong chương trình(5):
package mvc;
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class JListExample implements ActionListener {
         private JList lst1,lst2;
         private DefaultListModel dt1,dt2;
         private JButton bt1,bt2;
         public JListExample(){
                  JFrame jf = new JFrame();
                  jf.getContentPane().setLayout(new FlowLayout());
                  String dsMonHoc[]= {"Pascal","Java","Visual
                                                  Basic","C","C++","C#"};
                  dt1 = new DefaultListModel();
                  dt2 = new DefaultListModel();
                  for (int i =0;i<dsMonHoc.length;i++){
                             dt1.addElement(dsMonHoc[i]);
                  }
III.Ứng dụng MVC trong chương trình(6):

      lst1 = new JList(dt1);
      lst2 = new JList(dt2);
      bt1 = new JButton(">");
      bt1.addActionListener(this);
      bt2 = new JButton("<");
      bt2.addActionListener(this);
      jf.getContentPane().add(lst1);
      jf.getContentPane().add(bt1);
      jf.getContentPane().add(bt2);
      jf.getContentPane().add(lst2);
      jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      jf.setVisible(true);
      lst1.setPreferredSize(new Dimension(100,120));
      lst2.setPreferredSize(new Dimension(100,120));
      jf.pack();
}
III.Ứng dụng MVC trong chương trình(7):
// Phuong thuc xu ly su kien khi mot nut duoc nhan
public void actionPerformed(ActionEvent e) {
        if (e.getSource()==bt1){
                 Object s1 = lst1.getSelectedValue();
                 dt2.addElement(s1);
                 dt1.removeElement(s1);
        }else{
                 Object s2 = lst2.getSelectedValue();
                 dt1.addElement(s2);
                 dt2.removeElement(s2);
        }

}
public static void main(String[] args) {
        new JListExample();
}

}
III.Ứng dụng MVC trong chương trình(8):
 Ví dụ 3: Thiết kế giao diện như hình sau




• Model: Mô hình dữ liệu cho JTable
• View: Giao diện hiển thị các mục được chọn
• Controller: Xử lý sự kiện khi một nút được nhấn
III.Ứng dụng MVC trong chương trình(9):
III.Ứng dụng MVC trong chương trình(10):
III.Ứng dụng MVC trong chương trình(11):
End_End
jtht         jlb2

jlb1                         jtdtb



 jtb
                 jbtTiep




       jbtThem      jbtXoa

MVC

  • 1.
    Ngôn ngữ lậptrình java
  • 2.
    1.Sự ra đờicủa mô hình MVC 2.Mô hình MVC trong swing II.MVC trong Swing(2) 1.Model(M) – View(V) – Controller(C) 2. Tương tác trong MVC 3. Ưu điểm của MVC trong Swing III.Ứng dụng MVC trong chương trình: 1. ShowDemo 2. JListExample 3. JTableExample
  • 3.
    1.Sự ra đờicủa mô hình MVC: Bắt đầu vào những năm 70 của thế kỷ 20, tại phòng thí nghiệm Xerox PARC ở Palo Alto, sự ra đời của giao diện đồ họa (Graphical User Interface) và lập trình hướng đối tượng (Object Oriented Programming) cho phép lập trình viên làm việc với những thành phần đồ họa như những đối tượng đồ họa có thuộc tính và phương thức riêng của nó. Không dừng lại ở đó, những nhà nghiên cứu ở Xerox PARC còn đi xa hơn khi cho ra đời cái gọi là kiến trúc MVC (viết tắt của Model – View – Controller).
  • 4.
    • MVC đượcdùng một cách rộng rãi trong nhiều hệ thống phần mềm hướng đối tượng (OO Application), bất kể được viết bằng ngôn ngữ hướng đối tượng (OO Language) nào. Và MVC được biết đến như là một thiết kế giao diện người dùng hướng đối tượng khá tốt. • Trong bài báo cáo này, nhóm em sẽ trình bày phương pháp thiết kế MVC, và minh họa Cách sử dụng MVC trong swing với ngôn ngữ lập trình java. • Swing trong java sử dụng kiến trúc Model -View – Controller (MVC) như một thiết kế nền tảng đằng sau mỗi một thành phần của nó.
  • 5.
    2.Mô hình MVCtrong swing:
  • 6.
    Hình 2: Môhình MVC cải tiến của Swing
  • 7.
    1.Model(M) – View(V)– Controller(C):  MVC trong Swing là kiến trúc cho các ứng dụng gồm 3 phần: • Model: là phần logic của ứng dụng.(Trạng thái của đối tượng đồ hoạ hay cấu trúc dữ liệu của đối tượng) • View: phần hiển thị của ứng dụng. • Controller: điều khiển giao tiếp với người dùng. Ví dụ 1: GUI Component đơn giản là Checkbox Checkbox có thành phần:
  • 8.
    • Model đểquản lý trạng thái của nó là check hay uncheck • View để thể hiện nó với trạng thái tương ứng lên màn hình • Controller :để xử lý những sự kiện khi có sự tương tác của người sử dụng hoặc các đối tượng khác lên Checkbox. Ví dụ 2: Trên JList • Model: mô hình dữ liệu cho JList • View: là giao diện hiển thị các mục chọn • Controller: xử lý sự kiện mỗi khi các mục trong JList được chọn
  • 9.
    2. Tương táctrong MVC: • Khi người sử dụng cần thay đổi trạng thái của đối tượng đồ họa, thì sẽ tương tác thông qua Controller của đối tượng đồ họa. • Controller sẽ thực hiện việc thay đổi trên Model. Khi có bất kỳ sự thay đổi nào ở xảy ra ở Model, nó sẽ phát thông điệp (broadcast message) thông báo cho View và Controller biết.
  • 10.
    • Nhận đượcthông điệp từ Model: View sẽ cập nhật lại thể hiện của mình, đảm bảo rằng nó luôn là thể hiện trực quan chính xác của Model. Controller khi nhận được thông điệp từ Model, sẽ có những tương tác cần thiết phản hồi lại người sử dụng hoặc các đối tượng khác.
  • 11.
    • Ví dụ:GUI Component là Checkbox Khi người sử dụng nhấn chuột vào Checkbox: Thành phần Controller của Checkbox sẽ xử lý sự kiện này, yêu cầu thành phần Model thay đổi dữ liệu trạng thái. Sau khi thay đổi trạng thái, thành phần Model phát thông điệp đến thành phần View và Controller
  • 12.
    Thành phần Controllernhận được thông điệp do Model gởi tới sẽ có những tương tác phản hồi với người sử dụng nếu cần thiết Thành phần View của Checkbox nhận được thông điệp sẽ cập nhật lại thể hiện của Checkbox, phản ánh chính xác trạng thái Checkbox do Model lưu giữ.
  • 13.
    3. Ưu điểmcủa MVC trong Swing Kiến trúc MVC đã tách biệt (decoupling) sự phụ thuộc giữa các thành phần trong một đối tượng đồ họa, làm tăng tính linh động (flexibility) và tính tái sử dụng (reusebility) của đối tượng đồ họa đó. Một đối tượng đồ họa bấy giờ có thể dễ dàng thay đổi giao diện bằng cách thay đổi thành phần View của nó trong khi cách thức lưu trữ (Model) cũng như xử lý (Controller) không hề thay đổi. Tương tự, ta có thể thay đổi cách thức lưu trữ (Model) hoặc xử lý (Controller) của đối tượng đồ họa mà những thành phần còn lại vẫn giữ nguyên.
  • 14.
    III.Ứng dụng MVCtrong chương trình: Ví dụ 1: Thiết kế giao diện như hình dưới • Model: Dữ liệu hiển thị cho TextArea • View: Giao diện hiển thị khi nhấn nút “Show” • Controller: Xử lý sự kiện khi nút “Show” được nhấn
  • 15.
    III.Ứng dụng MVCtrong chương trình(3):
  • 16.
    III.Ứng dụng MVCtrong chương trình(1): package mvc; import java.awt.FlowLayout; import java.awt.event.*; import javax.swing.*; public class ShowDemo extends JFrame implements ActionListener { JTextArea jta; JButton jbt; public ShowDemo(){ JFrame jf = new JFrame(); jf.getContentPane().setLayout(new FlowLayout()); jf.setSize(300,150); jta = new JTextArea(2,20); jbt = new JButton("Show"); jbt.addActionListener(this); // Bat su kien jf.getContentPane().add(jta); jf.getContentPane().add(jbt); jf.setVisible(true); }
  • 17.
    III.Ứng dụng MVCtrong chương trình(2): // Phuong thuc xu ly su kien khi nut duoc nhan public void actionPerformed(ActionEvent e) { if (e.getSource()==jbt){ jta.setText("DE TAI BAO CAO NHOM 4"); } } /** * @param args */ public static void main(String[] args) { // TODO Auto-generated method stub new ShowDemo(); } }
  • 18.
    III.Ứng dụng MVCtrong chương trình(4): Ví dụ 2: Thiết kế giao diện như hình dưới • Model: Mô hình dữ liệu cho JList • View: Giao diện hiển thị các mục được chọn • Controller: Xử lý sự kiện khi một nút được nhấn
  • 19.
    III.Ứng dụng MVCtrong chương trình:
  • 20.
    III.Ứng dụng MVCtrong chương trình(5): package mvc; import java.awt.*; import java.awt.event.*; import javax.swing.*; public class JListExample implements ActionListener { private JList lst1,lst2; private DefaultListModel dt1,dt2; private JButton bt1,bt2; public JListExample(){ JFrame jf = new JFrame(); jf.getContentPane().setLayout(new FlowLayout()); String dsMonHoc[]= {"Pascal","Java","Visual Basic","C","C++","C#"}; dt1 = new DefaultListModel(); dt2 = new DefaultListModel(); for (int i =0;i<dsMonHoc.length;i++){ dt1.addElement(dsMonHoc[i]); }
  • 21.
    III.Ứng dụng MVCtrong chương trình(6): lst1 = new JList(dt1); lst2 = new JList(dt2); bt1 = new JButton(">"); bt1.addActionListener(this); bt2 = new JButton("<"); bt2.addActionListener(this); jf.getContentPane().add(lst1); jf.getContentPane().add(bt1); jf.getContentPane().add(bt2); jf.getContentPane().add(lst2); jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); jf.setVisible(true); lst1.setPreferredSize(new Dimension(100,120)); lst2.setPreferredSize(new Dimension(100,120)); jf.pack(); }
  • 22.
    III.Ứng dụng MVCtrong chương trình(7): // Phuong thuc xu ly su kien khi mot nut duoc nhan public void actionPerformed(ActionEvent e) { if (e.getSource()==bt1){ Object s1 = lst1.getSelectedValue(); dt2.addElement(s1); dt1.removeElement(s1); }else{ Object s2 = lst2.getSelectedValue(); dt1.addElement(s2); dt2.removeElement(s2); } } public static void main(String[] args) { new JListExample(); } }
  • 23.
    III.Ứng dụng MVCtrong chương trình(8): Ví dụ 3: Thiết kế giao diện như hình sau • Model: Mô hình dữ liệu cho JTable • View: Giao diện hiển thị các mục được chọn • Controller: Xử lý sự kiện khi một nút được nhấn
  • 24.
    III.Ứng dụng MVCtrong chương trình(9):
  • 25.
    III.Ứng dụng MVCtrong chương trình(10):
  • 26.
    III.Ứng dụng MVCtrong chương trình(11):
  • 27.
  • 28.
    jtht jlb2 jlb1 jtdtb jtb jbtTiep jbtThem jbtXoa