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 - 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 - Nguyễn Mạnh Hùng

1. 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
2. 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
3. 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
4. Các giao tiếp bắt sự kiện  ActionListener.  ComponentListener  FocusListener  ItemListener  WindowListener  TextListener  MouseListener và MouseMotionListener  KeyListener 14
5. 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
6. 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
7. 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
8. Các đối tượng multimedia
9. 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
10. 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
11. 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
12. 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 }
13. 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 }
14. Các loại trình đơn
15. 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
16. 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
17. 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
18. Các kĩ thuật tạo layout
19. 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
20. 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
21. 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
22. 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
23. 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
24. 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
25. 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
26. 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
27. 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
28. Câu hỏi?