Bài giảng Lập trình Java - Chương VI: GUI Graphical User Interface

Nội dung text: Bài giảng Lập trình Java - Chương VI: GUI Graphical User Interface

1. GUI Graphical User Interface 1
2. Nội Dung ❖Giới thiệu GUI với gói awt, swing ❖Các lớp cơ bản ❖Giao diện tương tác với người dùng ❖Các container cơ bản ❖Layout ❖Sự kiện trong awt 2
3. Giới Thiệu ❖GUI cung cấp tính năng thân thiện với người dùng ❖GUI là một đối tượng trực quan. Người dùng tương tác với đối tượng này qua con trỏ chuột hay bàn phím ❖Để tạo ra các thành phần trong GUI ▪ import java.awt.*; ▪ import javax.swing.*; 3
4. Giới thiệu Swing ❖ Swing là tập hợp các thành phần bao gồm các widget cho phép lập trình giao diện đồ hoạ tương tự như AWT ❖ Đặc biệt, khắc phục bộ mặt nghèo nàn của chương trình viết bằng AWT so với các giao diện đẹp đẽ khác (chẳng hạn với MFC (Microsoft Foundation Classes) của Microssoft. ❖ Swing là sự hợp tác giữa Sun Microsystems với Netscape, IBM và một vài công ty khác để xây dựng nên những GUI (Graphical User Interface) khác. 4
5. Chương trình AWT Chương trình Swing 5
6. Container ❖Dùng để chứa các đối tượng ▪ JFrame ▪ Panel 6
7. JFrame Các constructor : JFrame() : tạo một khung cửa sổ không có tiêu đề. JFrame( String) : tạo một khung cửa sổ với tiêu đề được chỉ định trong chuỗi. 7
8. Các Phương thức chính Các phương thức chính : void setTitle(String) : đặt lại tiêu đề cho cửa sổ. String getTitle() : lấy tiêu đề của cửa sổ. Boolean isResizable(): có được phép co dãn hay không. void setIconImage(Image) : đặt biểu tượng của cửa sổ . void show(): hiển thị cửa sổ. void setVisible(boolean): đặt cửa sổ ở chế độ nhìn thấy (true,false). void setSize(int width, int height) : đặt kích thước cho cửa sổ . 8
9. Example Frame (awt) import java.awt.*; Output class FrameDemo extends Frame { public FrameDemo(String title) { super(title); } public static void main (String args[]) { FrameDemo ObjFr = new FrameDemo("I have been Framed!!!"); ObjFr.setSize(500,500); ObjFr.setVisible(true); } } 9
10. JPanel ❖Là vùng chứa đối tượng cho window ❖Hiển thị tốt trong trình duyệt không cần dùng khung ❖Được sử dụng nhóm các đối tượng lại. ❖JPanle không thể hiển thị. Do đó ta cần phải add vào JFrame ❖Khởi tạo JPanle p = new JPanel(); 10
11. Example Panel import java.awt.*; class PanelTest extends Panel { public static void main(String args[]) { PanelTest ObjPanel = new PanelTest(); Frame ObjFr = new Frame("Testing a Panel!"); ObjFr.add(ObjPanel); Output ObjFr.setSize(400,400); ObjFr.setVisible(true); } public PanelTest() { // write code to override default behavior } } 11
12. Kế thừa các lớp trong Java Component Button Checkbox Container Choice Canvas Label TextComponent Panel Window TextArea TextField Applet Frame Dialog 12
13. Various components Label Text field Checkbox Radio button Text Area Button 13
14. Các componet đầy đủ 14
15. Một số lớp cơ bản ❖Một số thành phần thông dụng ngoài việc hoàn toàn giống với các lớp trong gói java.awt, javax.swing còn có thêm một số tính năng để tăng thêm tính thẩm mỹ và tiện dụng 15
16. JLabel ❖ Người sử dụng không chỉnh sửa được ❖ Có thể sử dụng constructors: ▪ JLabel(); Tạo JLabel ▪ JLabel(String Jlabeltext); Tạo JLabel với Text ▪ Label(String labeltext, int alignment); Tạo JLabel với các chế độ canh chữ Label.LEFT, Label.RIGHT or Label.CENTER 16
17. JTextField ❖ Cho phép người sdụng đánh giá trị vào. ❖ JTextField chứa một dòng đơn. ❖ Tạo JTextField bằng constructors: ▪ JTextField() hay ▪ JTextField(int columns) Tạo JTextField với số cột được cho ▪ JTextField(String s) Tạo một JTextField với chuỗi cho trước ▪ TextField(String s, int columns) Tạo một JTextFile với chuỗi và số cột cho trước 17
18. Example import java.awt.*; class AcceptName extends Frame { TextField txtName = new TextField(20); Label lblName = new Label("Name :"); public AcceptName (String title) { super(title); setLayout(new FlowLayout()); add(lblName); add(txtName); Output } public static void main(String args[]) { AcceptName ObjAccName = new AcceptName ("Testing components!"); ObjAccName.setSize(300,200); ObjAccName.show(); } } 18
19. JButtons ❖Nút lệnh để tạo tác động của người dùng ▪ JButton() Tạo một JButton mới. ▪ JButton(String text) Tạo một JButton mới với chuỗi cho trước. 19
20. Example addWindowListener(new WindowAdapter() { import publicjava.awt.*; void windowClosing(WindowEvent we) import {java.awt.event.*; class ButtonTestsetVisible(false); extends Frame Output { System.exit(0); Button} btnBread = new Button("Bread!"); Button}); btnButter = new Button("Butter!"); }Button btnJam = new Button("Jam!"); public ButtonTest(String title) public{ static void main(String args[]) { super(title); ButtonTestsetLayout(new ObjTest FlowLayout()); = new ButtonTest("The three little buttons!"); ObjTest.setSize(500,500);add(btnBread); ObjTest.show();add(btnButter); } add(btnJam); } 20
21. Bố Trí Layout ❖ Việc sắp đặt được thực hiện bằng cách đưa vào các lơp quản lý việc sắp xếp (layout manager classes) thừa kế từ lơp Object và hiện thực từ giao diện LayoutManager. ❖ Mỗi container phải được quy định hình thức sắp xếp bằng cách gọi hàm setLayout() của lơp Container. ❖ Trong gói awt có các lơp dùng để bố trí các thành phần trên mot lơp container nào đó như sau:null Layout, lớp FlowLayout, lớp BorderLayout, lớp GridLayout, lớp CardLayout, lớp GridBagLayout. 21
22. 1. Lớp FlowLayout ❖Đây là cách thức sắp xếp đơn giản và thường sử dụng nhất trong Java. Mỗi thành phần được sắp xếp trên container theo thứ tự xuất hiện của chúng bởi hành vi add() để gắn vào container. Các thành phần được bố trí hết dòng nầy đến dòng khác. 22
23. ❖Ví dụ: 23
24. ❖Chúng ta cũng có thể sắp đặt các thành phần để canh lề vơi các biến như LEFT, CENTER, RIGHT của lơp FlowLayout. setLayout(new FlowLayout(FlowLayout.CENTER)) 24
25. ❖FlowLayout() :Tạo layout với các thành phần được bố trí giữa container, các thành phần cách nhau 5 pixel theo chiều đứng và chiều ngang ❖FlowLayout(int): Với thành phần được bố trí theo vị trí chỉ định (LEFT, RIGHT, CENTER) 25
26. ❖FlowLayout(int,int,int): Vừa canh lề, vừa quy định khoảng cách giữa các thành phần theo 2 chiều ❖void setHgap(int):Đặt lại số pixel cách nhau giữa các thành phần theo chiều đứng ❖void setVgap(int): Đặt lại số pixel cách nhau giữa các thành phần theo chiều ngang 26
27. ❖Với cách sử dụng đối tượng new FlowLayout( FlowLayout.LEFT, 20,10 ), cho phép chúng ta thể hiện các thành phần được canh lề trái, mỗi thành phần cách nhau theo chiều đứng là 10 pixel, và chiều ngang 20 pixel. Trường hợp để cần đặt ở vị trí trung tâm, sử dụng với FlowLayout(FlowLayout.CENTER, 20, 20) 27
28. 2. Lớp BorderLayout ❖Khi cần bố trí theo vị trí bao xung quanh container, chúng ta sử dụng lớp BorderLayout để đặt vào container đó, chẳng hạn Để sắp đặt các lớp quanh một vùng của Frame 28
29. ❖Trong đó, chúng ta sử dụng các phương thức add() của lớp Container dưới dạng add(String,Component) ❖Với các tham số: "West", "East", "South", "North“, "Center" Tây, Đông, Nam, Bắc giữa của container. 29
30. ❖Tạo thêm khoảng cách giữa các đối tượng thêm dòng lệnh setLayout(new BorderLayout(10,10)) ❖Hoặc với khoảng cách với xung quanh, cài đặt thêm hàm public Insets getInsets(){ return new Insets(40,20,20,20); } 30
31. ❖Với cách sắp đặt như phần trên, các thành phần được xếp gần vị trí biên của khung window. ❖Trường hợp muốn dịch chuyển vào phía trong của khung, Java cung cấp lớp Insets để có được khoảng cách từ biên vào là 20 pixel theo các phía hai bên, dưới. Còn phía trên cách vào 40. Sử dụng phương thức getInsets() của lớp trừu tượng Container. 31
32. ❖Phương thức thiết lập ▪ BorderLayout(): Tạo bố cục xung quanh một container ▪ BorderLayout(int,int): Tạo bố cục với khoảng cách giữa các thành phần được chỉ định 33
33. 3. Lớp GridLayout ❖Lớp GridLayout dùng để sắp xếp các thành phần trên container dưới dạng hình lưới bố trí theo dòng và cột như kiểu ma trận trong toán học. ❖Có 3 cách tạo đối tượng của lớp GridLayout. 34
34. ❖GridLayout(): tạo bố cục với lưới một dòng một cột ❖GridLayout(int,int): tạo bố cục với lưới dòng, cột chỉ định ❖GridLayout(int,int,int,int): tạo bố cục với lưới dòng, cột chỉ định có thêm khoảng cách giữa các thành phần trên container 35
35. ❖Có thể lưới các đối tượng kề sát bên nhau ❖Hoặc có thể cách nhau bằng một số pixel nào đó: setLayout(new GridLayout(3,3, 10, 10)) 36
36. Sự Kiện Trong Java Sự kiện (event) được phát sinh từ bàn phím, từ chuột hay từ hệ điều hành. Các thành phần, control (button, list, choice, textfield ) nơi phát sinh sự kiện được gọi là đối tượng nguồn (source). Mọi sự kiện đều là lớp con của lớp EventObject ( nằm trong gói java.util). Hầu hết các lớp sự kiện đều nằm trong gói java.awt.event. 37
37. Giao Diện Lắng Nghe Sự Kiện ❖Mỗi loại sự kiện đều được biểu diễn bằng 1 class, ví dụ : MouseEvent, KeyEvent ❖Một sự kiện có thể đươc nhận bởi một hay nhiều đối tượng nhận. Đối tượng dùng để nhận sự kiện được gọi là Listener. 38
38. Các Bước Cài Đặt Xử Lý Skiện 1/ Tạo đối tượng (lớp) Listener để nhận sự kiện : Có thể dùng bất cứ lớp nào để nhận sự kiện, và lớp đó phải cài đặt interface tương ứng với biến cố cần xử lý. class MyListener implements XListener. 2/ Đăng ký đối tượng Listener này với đối tượng phát sinh event. obj.addXListener(receiver); 3/ Cài đặt các phương thức xử lý các sự kiện này. Những phương thức xử lý các sự kiện được định nghĩa trong các giao diện, nằm trong gói java.awt.event. 39
39. Ví Dụ ❖ Đối tượng X → XEvent → XListener → AddXListener(). Ví dụ : ❖ Mouse → MouseEvent → MouseListener→ addMouseListener(). ❖ Key → KeyEvent → KeyListener → addKeyListener() 40
40. Các Sự Kiện Nguồn Lớp sự Giao diện lắng Phương thức phát kiện nghe sinh SK. Button ActionEvent ActionListener actionPerformed(ActionEvent e) Item ItemEvent ItemListener itemStateChanged(ItemEvent e) Key KeyEvent KeyListener keyPressed(KeyEvent e) keyReleased(KeyEvent e) 41
41. MouseListener M Mous MouseListener mousePressed(MouseEvent e) o eEve mouseReleased (MouseEvent e) u nt mouseEntered(MouseEvent e) s e mouseExited(MouseEvent e) s mouseClicked(MouseEvent e) MouseMotionListener mouseDragged(MouseEvent e) mouse Moved(MouseEvent e 42
42. Window W Window Window windowOpened(WindowEvent e) i Event Listener windowDeiconified(WindowEvent e) n windowIconified(WindowEvent e) d windowActivated(WindowEvent e) o windowDeactivated(WindowEvent e) w windowClosing(WindowEvent e) windowClosed(WindowEvent e) 43
43. Ví Dụ ❖Ví dụ bạn viết 1 lớp có sử dụng JFrame và sdụng phím. class vd extends JFrame implements KeyListener { public void keyPressed(KeyEvent e) { } public void keyReleased(KeyEvent e) { } } 44
44. Bài tập ❖Tạo giao diện gồm có 2 JTextField và JCombobox ❖Click chọn phép toán và Button Tính sẽ thực hiện các phép toán 45