Bài giảng Kỹ thuật phần mềm - Chương 5: Giao diện đồ họa người dùng - Phạm Duy Trung

Nội dung text: Bài giảng Kỹ thuật phần mềm - Chương 5: Giao diện đồ họa người dùng - Phạm Duy Trung

1. GIAO DIỆN ĐỒ HỌA NGƯỜI DÙNG Java GUI #1 PHẠM DUY TRUNG Bộ môn Kỹ thuật Phần mềm
2. Từ khóa • AWT – Abstract Windows Toolkit • SWING • JFC – Java Foundation Classes • Java FX duytrung.tcu@gmail.com
3. Giao diện người - máy Là cách phần mềm máy tính tương tác với con người  Giao diện dòng lệnh – Command Line Interface  Giao diện đồ họa – Graphical User Interface  Giao diện cảm ứng – Touch User Interface  Đa phương tiện (âm thanh, hoạt họa ) – Multimedia  Trí tuệ máy tính (nhận dạng cử chỉ, nhận dạng tiếng nói, trợ lý ảo ) duytrung.tcu@gmail.com
4. GUI trong ngôn ngữ lập trình • Không phải ngôn ngữ lập trình nào cũng hỗ trợ tạo GUI • Widget/control/component ám chỉ đến các phần tử tương tác trong GUI, như cửa sổ, nút bấm, thanh cuộn, danh sách • Component như những viên gạch xây nên ứng dụng • GUI toolkit/library là một tập hợp chuyên biệt các component để xây dựng nên GUI, thường tích hợp với một rendering engine cụ thể  Các toolkit tích hợp: Cocoa, Carbon trong MacOS; Windows API trong Windows  Các toolkit bậc cao: Qt, MFC, WPF, AWT, Swing, JavaFX duytrung.tcu@gmail.com
5. Abstract Window Toolkit • Là thư viện API tạo GUI đầu tiên của Java • Why abstract? Trong bộ công cụ này, Java chỉ xây dựng các lớp trừu tượng hoặc implements các interface mô tả các đối tượng • Khi thực thi, các đối tượng (cửa sổ, nút bấm, thanh cuộn ) thực chất do hệ điều hành thực hiện • Cơ chế tương tự như các lớp con kế thừa lớp cha trừu tượng sẽ cung cấp hành vi cho nó → Platform–dependent : phụ thuộc vào hệ điều hành duytrung.tcu@gmail.com
6. Abstract Window Toolkit duytrung.tcu@gmail.com
7. Abstract Window Toolkit • Package java.awt • Các component trong AWT là heavyweight Peer class Component Class duytrung.tcu@gmail.com
8. Thuật ngữ cơ bản trong AWT THUẬT NGỮ MÔ TẢ Component Chỉ đến tất cả các đối tượng có biểu diễn đồ họa để hiển thị được trên màn hình và tương tác với người dùng. Ví dụ như các nút bấm (button), hộp thoại tick (checkbox), thanh cuộn (scrollbar) Lớp Component là lớp cha của đa số component, trừ các menu, trong AWT Container Là một loại component có thể chứa các component khác. Component được thêm vào trong container sẽ được theo dõi bởi 1 danh sách. Thứ tự trong danh sách này sẽ quy định thứ tự xếp chồng trên dưới trong container. Nếu không xác định chỉ số thứ tự cho component khi thêm vào, mặc định sẽ được thêm vào cuối danh sách Panel Panel là một container đơn giản, cung cấp không gian để gắn vào bất kỳ component nào, kể cả các panel khác Window Window là một container hình chữ nhật hiển thị trên màn hình mà cho phép chạy các chương trình khác nhau. Window giúp tạo nên môi trường đa nhiệm như ta đang sử dụng trên máy tính. Một window phải được sở hữu bởi 1 frame, dialog hoặc một window khác khi khởi tạo Frame Frame là một window mức đỉnh, có tiêu đề (title) và viền (border). Kích cỡ của frame đã bao hàm cả viền trong đó. Frame bao lấy window. Frame có thanh tiêu đề, thanh menu, các viền và các góc cho phép thay đổi kích thước Canvas Canvas là một khu vực chữ nhật trên màn hình cho phép ứng dụng Java có thể vẽ lên đó. duytrung.tcu@gmail.com
9. Các component trong AWT Label Button Checkbox Choice Scrollbar TextField List TextArea Button Checkbox CheckboxGroup 9 duytrung.tcu@gmail.com
10. Chương trình đầu tiên duytrung.tcu@gmail.com
11. Layout • Layout là bố cục sắp xếp của các component trong một container • Việc sắp xếp component phù hợp với loại Layout được thực hiện tự động nhờ trình quản lý bố cục LayoutManager • Một container khi khởi tạo thường được gắn với một bố cục sắp xếp cụ thể • LayoutManager sẽ tự động điều chỉnh kích thước và vị trị của component trong container duytrung.tcu@gmail.com
12. Layout manager STT Tên và mô tả BorderLayout – Mặc định của Frame 1 Sắp xếp các đối tượng vào 5 khu vực: trung tâm, đông, tây, nam, bắc CardLayout 2 Xem mỗi component như một quân bài, tại một thời điểm thì một quân được hiển thị FlowLayout – Mặc định của Panel 3 Sắp xếp component theo luồng: lần lượt bố trí từ trái sáng phải, từ trên xuống dưới GridLayout 4 Bố trí component vào như các mắt lưới của một lưới chữ nhật GridBagLayout 5 Là layout manager linh hoạt nhất trong AWT. GridBagLayout cũng có dạng lưới, cho phép tùy chỉnh kích thước, giãn cách ngang dọc, trọng số kích thước của component duytrung.tcu@gmail.com
13. Demo LayoutManager duytrung.tcu@gmail.com
14. Demo LayoutManager duytrung.tcu@gmail.com
15. Demo LayoutManager • Khi sử dụng GridBagLayout, phải đặc tả vị trí cho component thông qua một đối tượng kiểu GridBagConstraints duytrung.tcu@gmail.com
16. Demo LayoutManager • Khi sử dụng CardLayout, cần sử dụng các phương thức next(), previous(), first(), last(), show() để “lật quân bài” component mong muốn trong container duytrung.tcu@gmail.com
17. Sự kiện trên GUI • Làm trung gian kết nối giữa người dùng với máy tính, giao diện cần có hành động đáp ứng lại những tác động của người dùng lên nó • Cơ chế đáp ứng này thông qua các sự thay đổi thuộc tính của component • Bất kỳ sự thay đổi nào trên giao diện đều có thể phát sinh/kích hoạt một sự kiện Ví dụ: Button được ấn kích hoạt sự kiện “Ấn nút bấm”, văn bản trong TextField thay đổi kích hoạt sự kiện “Văn bản thay đổi” duytrung.tcu@gmail.com
18. Xử lý sự kiện • Xử lý sự kiện thực hiện ấn định một hành động cho một sự kiện xảy ra trên giao diện • Lớp EventObject là lớp gốc của tất cả các đối tượng lưu trữ trạng thái sự kiện. Với các sự kiện trên GUI ta quan tâm đến lớp AWTEvent , sử dụng package java.awt.event • 3 yếu tố tham gia vào quá trình xử lý sự kiện:  Nguồn sự kiện (Event Source): component sinh sự kiện  Sự kiện (Event): thể hiện bởi một EventObject, chứa tất cả các thông tin cần thiết về sự kiện: loại sự kiện, nguồn sự kiện  Bộ “lắng nghe”/xử lý sự kiện (Event Listener/Handler): nhận và xử lý sự kiện duytrung.tcu@gmail.com
19. Lưu đồ xử lý sự kiện • Một listener sẽ được đăng ký với một nguồn sự kiện • Khi đăng ký, listener sẽ chờ sự kiện • Khi một sự kiện được kích hoạt: • Nguồn sự kiện tạo ra một đối tượng sự kiện • Đối tượng sự kiện sẽ được chuyển đến cho listener • Khi listener nhận được đối tượng: • Giải mã đối tượng • Xử lý đối tượng theo logic đã định duytrung.tcu@gmail.com
20. Cây phân cấp AWTEvent Ẩn, hiện, di chuyển, thay đổi Thay đổi lựa chọn phần tử kích cỡ component trong danh sách, tick, bỏ tick ComponentListener ItemListener Thay đổi giá trị của thanh cuộn chẳng hạn AdjustmentListener Các sự kiện khi văn bản của đối tượng bị thay đổi Click lên component TextListener ActionListener Các sự kiện với window: đóng, mở, thêm bỏ icon Sự kiện thêm,bớt đối tượng trên container WindowListener ContainerListener Sự kiện nhấn phím, gõ phím, thả phím Các sự kiện liên quan đến chuột KeyListener MouseListener duytrung.tcu@gmail.com
21. Quan hệ Component – Listener : N-N ComponentListener FocusListener Component KeyListener MouseListener Container ContainerListener Window WindowListener Button List ActionListener MenuItem TextField Choice Checkbox ItemListener List Scrollbar AdjustmentListener TextField TextListener TextArea duytrung.tcu@gmail.com
22. Các phương thức xử lý trong Listener ActionListener actionPerformed(ActionEvent e) TextListener textValueChanged(TextEvent e) ItemListener ActionListener mouseClicked(MouseEvent e) mouseEntered(MouseEvent e) MouseListener mouseExited(MouseEvent e) mousePressed(MouseEvent e) mouseReleased(MouseEvent e) mouseDragged(MouseEvent e) MouseMotionListener mouseMoved(MouseEvent e) windowActivated(WindowEvent e) windowClosed(WindowEvent e) windowClosing(WindowEvent e) WindowListener windowDeactivated(WindowEvent e) windowDeiconified(WindowEvent e) windowIconified(WindowEvent e) windowOpened(WindowEvent e) duytrung.tcu@gmail.com
23. Đăng ký Listener cho GUI: 5 cách 1. Tạo một lớp thành viên (inner class) chuyên xử lý sự kiện: Lớp này phải kế thừa trực tiếp interface hoặc một lớp kế thừa interface của listener tương ứng. Cách làm này thuận tiện khi nhiều component phát sinh cùng loại sự kiện có thể sử dụng chung listener 2. Sử dụng lớp nặc danh (anonymous class): khai báo lớp nặc danh không đòi hỏi phải đặt tên cho lớp. 3. Sử dụng biểu thức lambda (lambda expression) 4. Sử dụng tham chiếu phương thức (method reference) 5. Listener mức đỉnh (top-level listener): Cho chính lớp hiện tại kế thừa interface của một listener và tham chiếu đến nguồn sự kiện bằng từ khóa this. Cách này phù hợp khi chỉ có một event source duytrung.tcu@gmail.com
24. Đăng ký Listener cho GUI: cách 1 duytrung.tcu@gmail.com
25. Đăng ký Listener cho GUI: cách 2 và 3 duytrung.tcu@gmail.com
26. Đăng ký Listener cho GUI: cách 4 duytrung.tcu@gmail.com
27. Đăng ký Listener cho GUI: cách 5 Không cần thiết duytrung.tcu@gmail.com
28. Sử dụng Adapter để xử lý sự kiện Một lớp adapter đã khởi tạo tất cả các phương thức trong một interface listener, ta chỉ cần dùng phương thức ta muốn duytrung.tcu@gmail.com
29. Quy trình xây dựng một giao diện Java • Tạo một container - Frame, Dialog, Window, Panel, ScrollPane • Ấn định một LayoutManager cho container • Tạo các component • Thêm các component vào container • Xử lý sự kiện trên giao diện - Đăng ký listener với các source dựa trên loại sự kiện - Thực thi phương thức xử lý sự kiện phù hợp trong listener duytrung.tcu@gmail.com
30. Demo 1 Xây dựng chương trình có giao diện như (1) Khi nhấn vào button Red hoặc button Green hoặc button Blue thì nền của cửa sổ chương trình thay đổi màu tương ứng, đồng thời label bên dưới các button cũng có câu thông báo màu tương ứng. 1 duytrung.tcu@gmail.com
31. Demo 1 package test_gui_1; import java.awt.*; import java.awt.event.*; // Tạo frame chính public class MyFrame extends Frame { // Khai báo các component sử dụng Button redButton = new Button("Red"); Button blueButton = new Button("Blue"); Button greenButton = new Button("Green"); Label status; /* Tiếp đến: Xây dựng hàm khởi tạo frame chính, trong đó thực hiện: - Khởi tạo các thuộc tính của frame chính, thêm layout - Khởi tạo các component và thêm vào frame - Xử lý sự kiện cho frame */ // Xem slide kế tiếp >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> duytrung.tcu@gmail.com
32. Demo 1 public MyFrame() { this.setTitle("Test button listener"); this.setLayout(new FlowLayout()); this.add(redButton); this.add(blueButton); this.add(greenButton); status = new Label("Press any button please!"); this.add(status); redButton.addActionListener(new MyListener(status, this)); greenButton.addActionListener(new MyListener(status, this)); blueButton.addActionListener(new MyListener(status, this)); this.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent windowEvent) { System.exit(0); } }); }// Xem slide kế tiếp >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> duytrung.tcu@gmail.com
33. Demo 1 public class MyListener implements ActionListener { // Lớp thành viên làm listener Label status; Component mainFrame; public MyListener(Label status, Component compo) { this.status = status; this.mainFrame = compo; } @Override public void actionPerformed(ActionEvent event) { if (event.getSource() instanceof Button) { Button eventSource = (Button) event.getSource(); String color = eventSource.getLabel(); status.setText("You have selected " + color); if (color.equals("Red")) { mainFrame.setBackground(Color.red); /* hoặc như này cũng được *///mainFrame.setBackground(new Color(255,0,0)); } }// Xem slide kế tiếp >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> duytrung.tcu@gmail.com
34. Demo 1 if (color.equals("Green")) { mainFrame.setBackground(Color.green); //mainFrame.setBackground(new Color(0,255,0)); } if (color.equals("Blue")) { mainFrame.setBackground(Color.blue); //mainFrame.setBackground(new Color(0,0,255)); } } } } public static void main(String[] args) { MyFrame frame = new MyFrame(); frame.setSize(300, 200); frame.setVisible(true); } } // Đóng class MyFrame duytrung.tcu@gmail.com
35. Bài tập Chỉnh sửa lại giao diện demo 1 để: 1. Thêm listener cho giao diện bằng 2 cách còn lại: lớp nặc danh và listener mức đỉnh 2. Lấy được màu trực tiếp từ nhãn của button, không cần xét đến từng trường hợp nhãn của button nữa Kiểu như: màu = ép_màu_từ_chuỗi(nhãn button) duytrung.tcu@gmail.com
36. Java Foundation Classes & Swing • Năm 1997, Sun Microsystems cùng Netscape quyết định hợp tác phát triển 1 framework mới chuyên hỗ trợ về xây dựng GUI có tên là JFC, sau đó dự án được đổi tên thành Swing • Đưa thêm các nhiều component mới, các chức năng đồ họa phong phú và các hoạt động tương tác với ứng dụng Java Swing GUI components: Lightweight Pluggable Look-and-Feel support: Thay đổi trải nghiệm nhìn và cảm nhận Accessibility API: Các công nghệ hỗ trợ như đọc văn bản, chữ Braille Java 2D API: các chức năng đồ họa 2D, xử lý in ấn Internationalization: hỗ trợ đa ngôn ngữ, đa văn hóa cho ứng dụng duytrung.tcu@gmail.com
37. Lightweight vs Heavyweight • Trong AWT, giao diện người dùng sẽ mang diện mạo của hệ điều hành cài đặt chương trình, bởi bản chất nó chính là các component của hệ điều hành đó: cùng một chương trình Java, chạy trên Windows sẽ có giao diện Windows, chạy trên Mac sẽ có giao diện của Mac • Component bằng AWT do phụ thuộc vào OS, nên có diện mạo, hoặc thậm chí là hành vi thay đổi trên các OS khác nhau -> Write once, run anywhere • Look-and-feel của component là cố định và không thể thay đổi duytrung.tcu@gmail.com
38. Lightweight vs Heavyweight • Với Swing, 99% các component là lightweight: chúng không cần đến peer class, hay native GUI toolkit • Chỉ có các container mức đỉnh (JFrame, JWindow, Japplet, JDialog) là heavyweight, các component lightweight khác sẽ “tự vẽ” lên container chứa chúng bởi Java runtime • Một chương trình giao diện Swing sẽ có diện mạo như nhau trên Mac, Windows hay Solaris (cross-platform look-and-feel) • Swing component có thể “bắt chước” diện mạo của OS hiện tại, song OS không liên quan đến việc tạo ra nó duytrung.tcu@gmail.com
39. Look-and-Feel • Swing component có thể thay đổi diện mạo thông qua các pluggable look-and-feel • Look: diện mạo • Feel: cách thể hiện hành vi • Cross-platform L&F Java mặc định: Metal • Hướng dẫn thay đổi Look-and-feel trong Java duytrung.tcu@gmail.com
40. Giới thiệu Swing • Mở rộng các khái niệm và cơ chế của AWT: vẫn sử dụng component, container, layour manager, event, listener • Thay thế hoàn toàn bộ component của AWT bằng một bộ mới  Package javax.swing  Tiếp đầu ngữ “J”  Bổ sung thêm nhiều component mới duytrung.tcu@gmail.com
41. Swing component • Atomic Components JLabel, JButton, JCheckBox, JRadioButton, JToggleButton, JScrollBar, JSlider, JProgressBar, JSeparator • Complex Components JTable, JTree, JComboBox, JSpinner, JList, JFileChooser, JColorChooser, JOptionPane • Text Editing Components JTextField, JFormattedTextField, JPasswordField, JTextArea, JEditorPane, JTextPane • Menus JMenuBar, JMenu, JPopupMenu, JMenuItem, JCheckboxMenuItem, JRadioButtonMenuItem • Intermediate Containers JPanel, JScrollPane, JSplitPane, JTabbedPane, JDesktopPane, JToolBar • High-Level Containers JFrame, JDialog, JWindow, JInternalFrame, JApplet duytrung.tcu@gmail.com
42. LayoutManager trong Swing • BorderLayout • GroupLayout • CardLayout • SpringLayout • FlowLayout • BoxLayout • GridBagLayout • TabbedPanelLayout • GridLayout • SplitPanelLayout duytrung.tcu@gmail.com
43. Sử dụng kết hợp cả Swing và AWT • Khuyến cáo: không nên sử dụng lẫn lộn component của 2 thư viện này  Các component heavyweight luôn được vẽ đè lên component lightweight  Button ≠ Jbutton !  Có thể gây ra những lỗi không bình thường • Trước đây, một kinh nghiệm là sử dụng AWT cho các ứng dụng Applet, còn Swing cho ứng dụng desktop • Swing có thể được sử dụng cho cả hai mảng trên duytrung.tcu@gmail.com
44. Câu hỏi nghiên cứu • Swing thực sự thay thế AWT hay không? • So sánh Swing và AWT duytrung.tcu@gmail.com
45. Bài tập • Viết lại chương trình demo 1 sử dụng Swing duytrung.tcu@gmail.com