Chương 6 Lập trình GUI

LẬP TRÌNH JAVA Chương 6 LẬP TRÌNH GUI GV: Võ Hoàng Phương Dung  Giới thiệu về GUI (Graphical user interface)  Vật chứa (Container)  Thành phần (Component)  Quản lý cách trình bày (Layout manager)  Xử lý các sự kiện 2/25 Nội dung  GUI cung cấp chức năng nhập liệu theo cách thân thiện với người dùng  Các bộ thư viện: AWT, SWING, SWT…  AWT là viết tắt của Abstract Windowing Toolkit  AWT là một bộ các lớp trong Java cho phép chúng ta tạo GUI và chấp nhận các nhập liệu của người dùng thông qua bàn phím và chuột. 3/25 Giới thiệu về GUI  AWT cung cấp các thành phần khác nhau để tạo GUI: • Vật chứa (Container ) • Thành phần (Component) • Trình quản lý cách trình bày (Layout manager) • Đồ họa (Graphic) và các tính năng vẽ (draw) • Phông chữ (Font) • Sự kiện (Event) 4/25 Giới thiệu về GUI  Gói AWT chứa các lớp, giao diện và các gói khác.  Sau đây mô tả một phần nhỏ của hệ thống phân cấp lớp AWT 5/25 Giới thiệu về GUI  Container là vùng mà bạn có thể đặt các thành phần giao diện của bạn vào đó  Gói java.awt chứa một lớp gọi là Container  Frame và Panel là các vật chứa thường được sử dụng • Frame là cửa sổ độc lập • Panel là vùng nằm trong cửa sổ khác 6/25 Vật chứa (Container)  Frame: các constructor để tạo frame • Frame(): Tạo một frame nhưng không hiển thị (invisible) • Frame(String title): Tạo một frame không hiển thị, có tiêu đề 7/25 Vật chứa (Container)  Ví dụ import java.awt.*; public class MyFrame extends Frame { public MyFrame(String title){ super(title); } public static void main(String[] args){ MyFrame myframe=new MyFrame("Hello"); myframe.setSize(300, 200); myframe.setVisible(true); } } 8/25 Vật chứa (Container)  Panel được sử dụng để nhóm một số các thành phần lại với nhau • Hàm khởi tạo: Panel()  Dialog: là một đối tượng cửa sổ con của một cửa sổ chương trình chính. Có 2 dạng • Modal • Non-modal 9/25 Vật chứa (Container)  Ví dụ public class MyPanel extends Panel { public static void main(String[] args){ MyPanel p=new MyPanel(); Frame f=new Frame("Test Panel"); f.add(p); f.setSize(200,500); f.setVisible(true); } } 10/25 Vật chứa (Container)  Các lớp thành phần 11/25 Thành phần (Components)  Nhãn (Label) • Label() • Label(String labeltext) • Label(String labeltext, int alignment) 12/25 Thành phần (Components)  Ô văn bản (TextField) • TextField() • TextField(int columns) • TextField(String s) • TextField(String s, int columns) 13/25 Thành phần (Components)  Vùng văn bản (TextArea) • TextArea() • TextArea(int rows, int cols) 14/25 Thành phần (Components)  Nút ấn (Button) • Button() • Button(String text) 15/25 Thành phần (Components)  Checkbox và RadioButton • Checkbox() • Checkbox(String text) • Tạo RadioButton CheckboxGroup cg=new CheckboxGroup(); Checkbox male=new Checkbox(“small", cg, true); Checkbox female=new Checkbox(“medium", cg, false); 16/25 Thành phần (Components)  Danh sách chọn lựa (Choice List) Choice colors=new Choice(); colors.addItem("Red"); colors.addItem("Green"); 17/25 Thành phần (Components)  Các kiểu trình bày (Layout manager) • Null layout • Flow layout • Border layout • Grid layout • GridBag Layout  Layout manager được thiết lập bằng phương thức ‘setLayout()’ 18/25 Quản lý cách trình bày  Null layout: khi không sử dụng layout manager • setLayout(null) • Sử dụng các hàm thiết lập vị trí  public void setLocation(Point p)  public void setSize(Dimension p)  public void setBounds(Rectangle r) 19/25 Quản lý cách trình bày  FlowLayout manager • ‘FlowLayout’ là layout manager mặc định cho Applet và Panel • Các thành phần được xắp xếp từ góc trái trên đến góc phải dưới của màn hình • Hàm thiết lập  setLayout(new FlowLayout())  setLayout(new FlowLayout( FlowLayout.RIGHT)) 20/25 Quản lý cách trình bày  BorderLayout Manager • ‘BorderLayout’ là layout manager mặc định cho ‘Window’, ‘Frame’ và ‘Dialog’. • Layout này xắp xếp tối đa 5 thành phần trong một container • Hàm thiết lập  setLayout(new BorderLayout()) • Thêm thành phần vào layout  add(b1,BorderLayout.NORTH); 21/25 Quản lý cách trình bày  GridLayout Manager • ‘GridLayout’ trợ giúp việc chia container vào trong ô lưới • Hàm tạo  setLayout(new GridLayout(số hàng, số cột)) 22/25 Quản lý cách trình bày  GridBagLayout Manager • Các thành phần được sắp xếp trong lưới theo dòng và cột như GridLayout • Cho phép chỉ định kích thước của thành phần theo số hàng và cột 23/25 Quản lý cách trình bày  GUI là mô hình hướng sự kiện (event-driven) • Phát sinh các sự kiện khi người dùng tương tác GUI • Thông tin về sự kiện được chứa trong các đối tượng thừa kế từ lớp java.awt.event hoặc or javax.swing.event  Event (sự kiện): là tương tác của người dùng • Ví dụ: di chuyển chuột, nhấn phím, nhả phím v.v... 24/25 Xử lý sự kiện  Event source (nguồn sự kiện): Đối tượng sản sinh sự kiện  Bộ lắng nghe (listener): nhận và xử lý sự kiện  Nhiều bộ nghe có thể được đăng ký cho 1 đối tượng  Một bộ nghe có thể đăng ký cho nhiều đối tượng 25/25 Xử lý sự kiện  Ví dụ: Xử lý sự kiện khi 1 nút được nhấn 26/25 Xử lý sự kiện  Cài đặt giao diện listener thích hợp VD: class MyListener implements ActionListener  Thi hành các phương thức của listener. class MyListener implements ActionListener{ public void actionPerformed(ActionEvent e) { //code... } } 27/25 Xử lý sự kiện  Xác định tất cả các thành phần tạo ra sự kiện. Đăng ký bộ nghe sự kiện (event listener) đến 1 thành phần obj.addXX(h) obj: thành phần tạo ra sự kiện h: là bộ nghe sự kiện loại XX VD: button1.addActionListener(new myListener()) 28/25 Xử lý sự kiện  Code 1 class MyListener implements ActionListener{ public void actionPerformed(ActionEvent e) { System.out.print(“Clicked !!!”); } } 29/25 Xử lý sự kiện public class ButtonEvent extends Frame { private Button btn=new Button("Click Here"); public ButtonEvent(){ super(); this.add(btn); btn.addActionListener(new myListener()); } public static void main(String[] arg){ ButtonEvent myclass=new ButtonEvent(); myclass.setSize(100,200); myclass.pack(); myclass.setVisible(true); } } 30/25 Xử lý sự kiện  Code 2 public class ButtonEvent2 extends Frame implements ActionListener{ private Button btn=new Button("Click Here"); public void actionPerformed(ActionEvent e) { System.out.print("DDD"); } public ButtonEvent2(){ super(); this.add(btn); btn.addActionListener(this); } 31/25 Xử lý sự kiện public static void main(String[] arg){ ButtonEvent myclass=new ButtonEvent(); myclass.setSize(100,200); myclass.pack(); myclass.setVisible(true); } } 32/25 Xử lý sự kiện  Bảng sau đây chỉ ra các sự kiện khác nhau và mô tả về chúng 33/25 Xử lý sự kiện  Các interface của các listener 34/25 Xử lý sự kiện ComponentListener  Danh sách các listener cho các thành phần 35/25 Xử lý sự kiện  Lấy thông tin event: • Object getSource(): trả lại đối tượng đã gây ra event • Ví dụ public void actionPerformed(ActionEvent e) { if(e.getSource()==btn) System.out.print("DDD"); } 36/25 Xử lý sự kiện  Các lớp thích nghi (Event Adapters) • Nhiều listener interface có nhiều hơn 1 phương thức • Ví dụ: MouseListener có 5 phương thức  mousePressed  mouseReleased  mouseEntered  mouseExited  mouseClicked • Sử dụng chi 1 phương thức của interface, ta phải thực thi tất cả các phương thức => không cần thiết 37/25 Xử lý sự kiện  Các lớp thích nghi (Event Adapters) • Sử dụng Adapter, ta chỉ cần định nghĩa phương thức cần sử dụng • Ví dụ public class MyClass extends MouseAdapter { someObject.addMouseListener(this); public void mouseClicked(MouseEvent e) { //code } } 38/25 Xử lý sự kiện  Các lớp lồng (Inner Classes) public class MyClass extends Frame{ public MyClass(){ this.addWindowListener(new MyAdapter()); } class MyAdapter extends WindowAdapter{ public void windowClosing (WindowEvent event) { System.exit(0); } } 39/25 Xử lý sự kiện  Các lớp lồng vô danh (Anonymous Inner Classes) public class MyClass extends Frame{ public MyClass(){ this.addWindowListener(new WindowAdapter(){ public void windowClosing (WindowEvent event){ System.exit(0); }}); } } 40/25 Xử lý sự kiện