Giáo trình Kỹ thuật phần mềm - Chương 5: Giáo diện đồ họa người dùng - Phạm Duy Trung

Java GUI #1 PHẠM DUY TRUNG Bộ môn Kỹ thuật Phần mềm GIAO DIỆN ĐỒ HỌA NGƯỜI DÙNG Từ khóa • AWT – Abstract Windows Toolkit • SWING • JFC – Java Foundation Classes • Java FX duytrung.tcu@gmail.com 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 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 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 Abstract Window Toolkit duytrung.tcu@gmail.com Abstract Window Toolkit • Package java.awt • Các component trong AWT là heavyweight duytrung.tcu@gmail.com Peer class Component Class 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 Các component trong AWT duytrung.tcu@gmail.com 9 Label Button Button Checkbox Choice List Scrollbar TextField TextArea CheckboxGroupCheckbox Chương trình đầu tiên duytrung.tcu@gmail.com 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 Layout manager STT Tên và mô tả 1 BorderLayout – Mặc định của Frame Sắp xếp các đối tượng vào 5 khu vực: trung tâm, đông, tây, nam, bắc 2 CardLayout 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ị 3 FlowLayout – Mặc định của Panel 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 4 GridLayout Bố trí component vào như các mắt lưới của một lưới chữ nhật 5 GridBagLayout 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 Demo LayoutManager duytrung.tcu@gmail.com Demo LayoutManager duytrung.tcu@gmail.com 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 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 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 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 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 Cây phân cấp AWTEvent duytrung.tcu@gmail.com Click lên component ActionListener Sự kiện thêm,bớt đối tượng trên container ContainerListener Sự kiện nhấn phím, gõ phím, thả phím KeyListener Các sự kiện liên quan đến chuột MouseListener Các sự kiện với window: đóng, mở, thêm bỏ icon WindowListener Các sự kiện khi văn bản của đối tượng bị thay đổi TextListener Thay đổi giá trị của thanh cuộn chẳng hạn AdjustmentListener Ẩn, hiện, di chuyển, thay đổi kích cỡ component ComponentListener Thay đổi lựa chọn phần tử trong danh sách, tick, bỏ tick ItemListener Quan hệ Component – Listener : N-N Component ComponentListener FocusListener KeyListener MouseListener Container ContainerListener Window WindowListener Button List MenuItem TextField ActionListener Choice Checkbox List ItemListener Scrollbar AdjustmentListener TextField TextArea TextListener duytrung.tcu@gmail.com Các phương thức xử lý trong Listener duytrung.tcu@gmail.com ActionListener actionPerformed(ActionEvent e) TextListener textValueChanged(TextEvent e) ItemListener ActionListener MouseListener mouseClicked(MouseEvent e) mouseEntered(MouseEvent e) mouseExited(MouseEvent e) mousePressed(MouseEvent e) mouseReleased(MouseEvent e) MouseMotionListener mouseDragged(MouseEvent e) mouseMoved(MouseEvent e) WindowListener windowActivated(WindowEvent e) windowClosed(WindowEvent e) windowClosing(WindowEvent e) windowDeactivated(WindowEvent e) windowDeiconified(WindowEvent e) windowIconified(WindowEvent e) windowOpened(WindowEvent e) Đă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 Đăng ký Listener cho GUI: cách 1 duytrung.tcu@gmail.com Đăng ký Listener cho GUI: cách 2 và 3 duytrung.tcu@gmail.com Đăng ký Listener cho GUI: cách 4 duytrung.tcu@gmail.com Đăng ký Listener cho GUI: cách 5 duytrung.tcu@gmail.com Không cần thiết 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 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 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. duytrung.tcu@gmail.com 1 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 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 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 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 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 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 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 Lightweight vs Heavyweight duytrung.tcu@gmail.com • 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ó Look-and-Feel duytrung.tcu@gmail.com • 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 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 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 LayoutManager trong Swing • BorderLayout • CardLayout • FlowLayout • GridBagLayout • GridLayout duytrung.tcu@gmail.com • GroupLayout • SpringLayout • BoxLayout https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html • TabbedPanelLayout • SplitPanelLayout 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 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 Bài tập • Viết lại chương trình demo 1 sử dụng Swing duytrung.tcu@gmail.com