Bài giảng Lập trình hướng đối tượng - Bài 12: Lập trình giao diện với Java - TS. Nguyễn Mạnh Hùng

Nội dung text: Bài giảng Lập trình hướng đối tượng - Bài 12: Lập trình giao diện với Java - TS. Nguyễn Mạnh Hùng

1. Lập trình hướng đối tượng Lập trình giao diện với Java Giảng viên: TS. Nguyễn Mạnh Hùng Học viện Công nghệ Bưu chính Viễn thông (PTIT)
2. Nội dung  Tạo giao diện với các đối tượng cơ bản  Xử lí sự kiện giao diện  Các đối tượng multimedia  Java swing  Table và cách bố trí giao diện  Bài tập 2
3. Giao diện cơ bản
4. Các loại khung chứa  Frame: khung cửa sổ  Panel: khung chứa các vùng trong cửa sổ  Dialog: cửa sổ con của một cửa sổ chính 4
5. Frame import java.awt.*; public class FrameDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“This is my Frame!”); myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setVisible(true); // Hiển thị frame } } 5
6. Panel import java.awt.*; public class PanelDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a panel!”); myFrame.setSize(300,150); // Định kích cỡ frame Panel myPanel = new Panel();// Khai báo panel myFrame.add(myPanel); // Thêm panel vào frame myFrame.setVisible(true); // Hiển thị frame } } 6
7. Dialog import java.awt.*; public class DialogDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a dialog!”); myFrame.setSize(300,150); // Định kích cỡ frame // Khai báo và khởi tạo dialog Dialog myDialog = new Dialog(myFrame, “An empty dialog!”, true); myFrame.add(myDialog); // Thêm dialog vào frame myFrame.setVisible(true); // Hiển thị frame } } 7
8. Các loại component cơ bản  Label: dùng để hiển thị nhãn text, không edit được khi chạy  TextField và textArea: dùng để nhập text vào và hiển thị text ra  Button: nút lệnh, dùng để thực thi nhiệm vụ nào đó 8
9. Label import java.awt.*; public class LabelDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has some labels!”); myFrame.setSize(300,150); // Định kích cỡ frame // Khai báo và khởi tạo label Label myLabel1 = new Label(); myLabel1.setText(“The first label!”);//Gán nội dung myLabel1.setAlignment(Label.CENTER);// Căn lề giữa myFrame.add(myLabel1); // Gắn label vào frame myFrame.setVisible(true); // Hiển thị frame } } 9
10. TextField import java.awt.*; public class TextFieldDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a panel!”); myFrame.setSize(300,150); // Định kích cỡ frame // Khai báo và khởi tạo textField TextField myTextField = new TextField(“A text field!”); myFrame.add(myTextField); // Gắn vào frame myFrame.setVisible(true); // Hiển thị frame } } 10
11. TextArea import java.awt.*; public class TextAreaDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a panel!”); myFrame.setSize(300,150); // Định kích cỡ frame // Khai báo và khởi tạo textArea TextArea myTextArea = new TextArea(5, 40); String str=“The TextField’s columns is: ” + myTextField.getColumns()+ “The TextArea’s size is: ” + myTextArea.getRows() + “*” + myTextArea.getColumns(); myTextArea.setText(str); // Thiết lập nội dung myFrame.add(myTextArea); // Gắn vào frame myFrame.setVisible(true); // Hiển thị frame } } 11
12. Button import java.awt.*; public class ButtonDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has a button!”); myFrame.setSize(300,150); // Định kích cỡ frame // Khai báo và khởi tạo button Button myButton = new Button(“Click!”); myFrame.add(myButton); // Gắn vào frame myFrame.setVisible(true); // Hiển thị frame } } 12
13. Các sự kiện (event) cơ bản  ActionEvent: Xuất hiện khi một nút bị click vào, một danh sách (list) được chọn, một menu được chọn.  ComponentEvent: Xuất hiện khi một component bị thay đổi kích cỡ, vị trí, trạng thái.  FocusEvent: Xuất hiện khi một component có hoặc mất focus.  ItemEvent: Xuất hiện khi một menu item được chọn hoặc bỏ, khi checkbox hoặc list item được click vào.  WindowEvent: Xuất hiện khi một của sổ được mở ra, kích hoạt, đóng lại hoặc thoát ra.  TextEvent: Xuất hiện khi giá trị văn bản của các đối tượng TextField và TextArea bị thay đổi.  MouseEvent: Xuất hiện khi chuột được click, di chuyển qua, nhấn xuống và thả ra.  KeyEvent: Xuất hiện khi có đầu vào từ bàn phím. 13
14. Các giao tiếp bắt sự kiện  ActionListener.  ComponentListener  FocusListener  ItemListener  WindowListener  TextListener  MouseListener và MouseMotionListener  KeyListener 14
15. Ví dụ bắt sự kiện (1) import java.awt.*; import java.awt.event.*; public class EventDemo extends Frame implements ActionListener{ Label lblKq; TextField txt1, txt2; Button btnCong; public EventDemo(){ super(“Event demo!”); this.setLayout(new GridLayout(1,4)); //Hiển thị 1 dòng, 4 cột txt1 = new TextField(); // Ô văn bản số thứ nhất this.add(txt1); txt2 = new TextField(); // Ô văn bản số thứ hai this.add(txt2); lblKq = new Label(); // Nhãn kết quả this.add(lblKq); // Nút nhấn btnCong = new Button(“Cong”); // Nút cộng btnCong.addActionListener(this); // Bắt sự kiện this.add(btnCong); 15
16. Ví dụ bắt sự kiện (2) // Phương thức bắt sự kiện click vào nút đóng frame this.addWindowListener(new WindowAdapter(){ public void windowClosing(WindowEvent e){ System.exit(0); } }); } /* Phương thức xử lí sự kiện nút được nhấn */ public void actionPerformed(ActionEvent ae){ float x = Float.parseFloat(txt1.getText()); float y = Float.parseFloat(txt2.getText()); float kq = 0; if(ae.getSource() == btnCong) // Cộng hai số kq = x + y; // Thay đổi nội dung kết quả lblKq.setText(String.valueOf(kq)); } } 16
17. Bài tập Viết chương trình giao diện chát đơn giản:  Giao diện gồm một ô textField để nhập dòng chát, một ô textArea để hiển thị nội dung chát, một nút nhấn send để gửi nội dung chát lên cửa sổ  Mỗi khi click vào nút send, nội dung trong ô nhập chát sẽ được thêm vào một dòng mới ở cuối phần hiển thị nội dung chát. 17
18. Các đối tượng multimedia
19. Các đối tượng multimedia  Ô đánh dấu (Checkbox) và Nút chọn (Radio button)  Lựa chọn (Choice)  Danh sách (List)  Trình đơn (Menu) 19
20. Checkbox/Radio button (1) import java.awt.*; import java.awt.event.*; public class RadioDemo extends Frame implements ItemListener{ Checkbox cbxRed, cbxBlue, cbxGreen; public RadioDemo(){ super(“Radio demo!”); this.setLayout(new GridLayout(3,1)); CheckboxGroup cbxg = new CheckboxGroup(); // Nhóm radio cbxRed = new Checkbox(“Red”, cbxg, true); // Nút red cbxRed.addItemListener(this); // Bắt sự kiện this.add(cbxRed); cbxBlue = new Checkbox(“Blue”, cbxg, false);// Nút blue cbxBlue.addItemListener(this); // Bắt sự kiện this.add(cbxBlue); cbxGreen = new Checkbox(“Green”, cbxg, false);// Nút green cbxGreen.addItemListener(this); // Bắt sự kiện this.add(cbxGreen); } 20
21. Checkbox/Radio button (2) /* Phương thức xử lí sự kiện thay đổi trạng thái nút */ public void itemStateChange(ItemEvent ie){ if(ie.getStateChanged() == ItemEvent.SELECTED){ String item = (String)ie.getItem(); if(item.equals(“Red”)) // Đổi màu red this.setBackground(Color.red); if(item.equals(“Blue”)) // Đổi màu blue this.setBackground(Color.blue); if(item.equals(“Green”)) // Đổi màu green this.setBackground(Color.green); this.repaint(); // Vẽ lại màu nền } 21
22. Choice public class ChoiceDemo extends Frame implements ItemListener{ Choice myChoice; public ChoiceDemo(){ super(“Choice demo!”); myChoice = new Choice(); // Khởi tạo myChoice.addItem(“Red”); // Thêm item red myChoice.addItem(“Blue”); // Thêm item blue myChoice.addItem(“Green”); // Thêm item green myChoice.addItemListener(this); // Bắt sự kiện this.add(myChoice); // Gắn vào frame } /* Phương thức xử lí sự kiện thay đổi trạng thái item */ public void itemStateChange(ItemEvent ie){ if(ie.getStateChanged() == ItemEvent.SELECTED){ String item = (String)ie.getItem(); if(item.equals(“Red”)) // Đổi màu red this.setBackground(Color.red); if(item.equals(“Blue”)) // Đổi màu blue this.setBackground(Color.blue); if(item.equals(“Green”)) // Đổi màu green this.setBackground(Color.green); this.repaint(); // Vẽ lại màu nền } 22 }
23. List public class ListDemo extends Frame implements ItemListener{ List myList; Label lbl; public ListDemo(){ super(“List demo!”); myList = new List(1, true); myList.add(“White”); myList.add(“Red”); myList.add(“Orange”); myList.addItemListener(this); // Bắt sự kiện this.add(myList); // Gắn vào frame lbl = new Label(); // Khởi tạo nhãn this.add(lbl); // Gắn vào frame } /* Phương thức xử lí sự kiện thay đổi trạng thái item */ public void itemStateChange(ItemEvent ie){ if(ie.getStateChanged() == ItemEvent.SELECTED){ String kq = “Cac mau duoc chon:”; String[] items = myList.getSelectedItems(); for(int i=0; i<items.length; i++) kq += items[i] + “, ”; lbl.setText(kq); } 23 }
24. Các loại trình đơn
25. Các loại trình đơn  Menubar: Thanh trình đơn  Menu: Trình đơn đổ xuống  PopupMenu: Trình đơn xuất hiện khi click chuột phải  MenuItem: Các mục chọn của trình đơn. 25
26. Ví dụ (1) import java.awt.*; import java.awt.event.*; public class MenuDemo extends Frame implements ActionListener, MouseListener{ Menubar myBar; Menu myMenu; PopupMenu myPopup; Label lbl; public MenuDemo(){ super(“Menu demo!”); myBar = new Menubar(); // Thanh tr.nh đơn this.setMenuBar(myBar); // Thiết lập menubar của frame myMenu = new Menu(“File”); // menu File myBar.add(myMenu); // Gắn menu vào thanh tr.nh đơn myMenu.addActionListener(this);// Bắt sự kiện myMenu.add(new MenuItem(“New”)); myMenu.add(new MenuItem(“Open”)); myMenu.addSeparator(); // Thêm dấu nhóm item myMenu.add(new MenuItem(“Save”)); myMenu.add(new MenuItem(“Save As”)); myMenu.addSeparator(); myMenu.add(new MenuItem(“Exit”)); 26
27. Ví dụ (2) myPopup = new PopupMenu(“Options”);// Menu popup myPopup.addActionListener(this);// Bắt sự kiện myPopup(new MenuItem(“Cut”)); myPopup(new MenuItem(“Copy”)); myPopup(new MenuItem(“Paste”)); lbl = new Label(); // Khởi tạo nh.n this.add(lbl); // Gắn vào frame } /* Phương thức xử lí sự kiện */ public void actionPerformed(ActionEvent ae){ if(ae.getActionCommand().equals(“Exit”)){ System.exit(0); } lbl.setText(ae.getActionCommand()); } public void mouseClicked(MouseEvent me){ myPopup.show(this, me.getX(), me.getY());// Hiện menu popup } 27
28. Các kĩ thuật tạo layout
29. Các loại layout  Cách trình bày theo dòng (Flow layout)  Cách trình bày theo mảng (Grid layout)  Cách trình bày theo Border (Border layout)  Cách trình bày theo GridBag (GridBag layout)  Cách trình bày tự do (Null layout) 29
30. Flow layout import java.awt.*; public class FlowLayoutDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”); myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setLayout(new FlowLayout( ));// Cách trình bày // Khai báo và khởi tạo button for(int i=0; i<10; i++) myFrame.add(new Button(“Click”+i));// Gắn vào frame myFrame.setVisible(true); // Hiển thị frame } } 30
31. Grid layout import java.awt.*; public class GridLayoutDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”); myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setLayout(new GridLayout(0,2));//Cách trình bày // Khai báo và khởi tạo button for(int i=0; i<10; i++) myFrame.add(new Button(“Click”+i));// Gắn vào frame myFrame.setVisible(true); // Hiển thị frame } } 31
32. Border layout import java.awt.*; public class BorderLayoutDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”); myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setLayout(new BorderLayout()); // Định cách trình bày // Khai báo và khởi tạo button myFrame.add(“West”, new Button(“West”)); // Gắn vào vùng west myFrame.add(“East”, new Button(“East”)); // Gắn vào vùng east myFrame.add(“North”, new Button(“North”)); // Gắn vào vùng north myFrame.add(“South”, new Button(“South”)); // Gắn vào vùng south myFrame.add(“Center”, new Button(“Center”));// Gắn vào vùng center myFrame.setVisible(true); // Hiển thị frame } } 32
33. GridBag layout import java.awt.*; public class GridBagLayoutDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”); myFrame.setSize(300,150); // Định kích cỡ frame GridBagLayout layout = new GridBagLayout(); myFrame.setLayout(layout); // Định cách trình bày // Khai báo đối tượng ràng buộc GridBagConstraints cts = new GridBagConstraints(); // Button1: vị trí (1,1), kích thước (2,1) Button btn1 = new Button(“Click1”); cts.gridx = 1; cts.gridy = 1; cts.gridheight = 2; cts.gridwidth = 1; layout.setConstraints(btn1, cts); // Định ràng buộc myFrame.add(btn1); // Gắn vào frame myFrame.setVisible(true); // Hiển thị frame } } 33
34. Null layout import java.awt.*; public class NullLayoutDemo{ public static void main(String[] args) { // Khai báo và khởi tạo frame có tiêu đề Frame myFrame = new Frame(“Frame has somes buttons!”); myFrame.setSize(300,150); // Định kích cỡ frame myFrame.setLayout(null); // Định cách tr.nh bày // Button1: vị trí (10,10), kích thước (20,10) Button btn1 = new Button(“Click1”); btn1.setSize(20, 10); btn1.setLocation(new Point(10, 10)); myFrame.add(btn1); // Gắn vào frame // Button2: vị trí (20,20), kích thước (10,20) Button btn2 = new Button(“Click2”); btn2.setBounds(20, 20, 10, 20); myFrame.add(btn2); // Gắn vào frame myFrame.setVisible(true); // Hiển thị frame } } 34
35. Mở rộng các đối tượng thành swing JFC mở rộng các đối tượng cơ bản của java thành các lớp tương ứng, ngoài trừ việc có thêm chữ “J” ở đầu mỗi tên lớp:  Button → JButton  Label → JLabel  TextField → JTextField  TextArea → JTextArea  Checkbox → JCheckbox  List → JList  Menu → JMenu 36
36. Bài tập (1) Tạo giao diện ô số sudoku:  Tạo ma trận 9*9 ô số của sudoku  Mỗi ô số là một đối tượng đồ họa  Các ô số đã có số theo đề bài thì không click vào được nữa  Các ô số còn lại, khi click vào, sẽ hiện ra một cửa sổ con chứa một bảng các số từ 1-9. Người dùng click chọn vào số nào thì cửa sổ con đóng lại, và số được chọn sẽ điền vào ô số tương ứng trong cửa sổ chính  Nếu ô số điền vào vi phạm qui luật hàng, luật cột, hoặc luật ô vuông con, nó sẽ bị đổi màu thành đỏ 37
37. Bài tập (2) Tạo giao diện ô số sudoku:  Tạo thanh menubar bao gồm 3 menu con: file, option và ranking  Trong menu file, có các menu item: new game, save game, load game, back, quit. Khi click vào sẽ gọi các chức năng tương ứng  Trong menu option, có các menu item: easy, medium, hard, hardest. Khi click vào sẽ tạo ra game mới với độ khó tương ứng  Trong menu ranking, cũng có các menu item: easy, medium, hard, hardest. Khi click vào sẽ hiện ra topten ranking tương ứng 38
38. Câu hỏi?