Tài liệu tham khảo bài giảng lập trình java - Lê Đình Thanh , bộ môn mạng và truyền thông máy tính , khoa công nghệ thông tin - Bài 08 Tạo giao diện đồ họa.Sau khi tạo xong phần giao diện của trang chủ, nhấp vào nút bắt đầu để liên kết đến trang thứ hai. Trong phần thực hành này bạn sẽ tạo các đoạn phim để tạo giao diện cho trang thứ hai.
Bài giảng LẬP TRÌNH JAVA Lê ðình Thanh Bộ mơn Mạng Truyền thơng Máy tính Khoa Cơng nghệ Thơng tin Trường ðại học Cơng nghệ, ðHQGHN Lê ðình Thanh, Tạo giao diện ñồ họa Bài Tạo giao diện đồ họa Lê ðình Thanh, Tạo giao diện ñồ họa Nội dung • • Java Foundation Classes Swing Lê ðình Thanh, Tạo giao diện đồ họa Java Foundation Classes (JFC) Lê ðình Thanh, Tạo giao diện ñồ họa JFC • Các lớp tảng Java (JFC) bao gồm lớp thành phần ñể xây dựng giao diện người dùng, chia thành nhóm sau: • Swing: thành phần nút bấm, hộp chọn, họp soạn thảo, danh sách, cây, … ñể phát triển giao diện đồ họa • • • • Look-and-Feel: Tùy biến theme Java 2D: ñể ñồ họa chiều Internationalization: thay đổi ngơn ngữ cho người dùng sử dụng ngơn ngữ khác Accessibility: cung các công nghệ hỗ trợ truy cập khác đọc hình, … Lê ðình Thanh, Tạo giao diện đồ họa Swing Lê ðình Thanh, Tạo giao diện đồ họa Các bước tạo ứng dụng swing import javax.swing.*; //Nhập lớp swing public class HelloWorldSwing { private static void main(String[] args) { //Tạo thiết lập cửa sổ/ñối tượng chứa JFrame frame = new JFrame("HelloWorldSwing"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Thêm thành phần vào cửa sổ JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); //Thêm kiện mã xử lý cho thành phần cửa sổ //Hiển thị cửa sổ frame.pack(); frame.setVisible(true); } } ðình Thanh, Tạo giao diện đồ họa Lê Tạo ứng dụng swing NetBeens • • • • Tạo thiết lập cửa sổ/ñối tượng chứa Thêm thành phần vào cửa sổ Thêm kiện mã xử lý cho thành phần cửa sổ Hiển thị cửa sổ Lê ðình Thanh, Tạo giao diện đồ họa Tạo ứng dụng swing NetBeens Lê ðình Thanh, Tạo giao diện ñồ họa Tạo ứng dụng swing NetBeens 10 Lê ðình Thanh, Tạo giao diện đồ họa Tạo ứng dụng swing NetBeens 11 Lê ðình Thanh, Tạo giao diện ñồ họa Tạo ứng dụng swing NetBeens • • • • Tạo thiết lập cửa sổ/ñối tượng chứa Thêm thành phần vào cửa sổ Thêm kiện mã xử lý cho thành phần cửa sổ Hiển thị cửa sổ 12 Lê ðình Thanh, Tạo giao diện đồ họa Tạo ứng dụng swing NetBeens • • • • Tạo thiết lập cửa sổ/ñối tượng chứa Thêm thành phần vào cửa sổ Thêm kiện mã xử lý cho thành phần cửa sổ Hiển thị cửa sổ 13 Lê ðình Thanh, Tạo giao diện đồ họa Tạo ứng dụng swing NetBeens • • • • Tạo thiết lập cửa sổ/ñối tượng chứa Thêm thành phần vào cửa sổ Thêm kiện mã xử lý cho thành phần cửa sổ Hiển thị cửa sổ 14 Lê ðình Thanh, Tạo giao diện ñồ họa Tạo ứng dụng swing NetBeens • • • • Tạo thiết lập cửa sổ/ñối tượng chứa Thêm thành phần vào cửa sổ Thêm kiện mã xử lý cho thành phần cửa sổ Hiển thị cửa sổ 15 Lê ðình Thanh, Tạo giao diện ñồ họa Tạo ứng dụng swing NetBeens • • • • Tạo thiết lập cửa sổ/ñối tượng chứa Thêm thành phần vào cửa sổ Thêm kiện mã xử lý cho thành phần cửa sổ Hiển thị cửa sổ 16 Lê ðình Thanh, Tạo giao diện ñồ họa Tạo ứng dụng swing NetBeens • • • • Tạo thiết lập cửa sổ/ñối tượng chứa Thêm thành phần vào cửa sổ Thêm kiện mã xử lý cho thành phần cửa sổ Hiển thị cửa sổ 17 Lê ðình Thanh, Tạo giao diện đồ họa Tạo ứng dụng swing NetBeens • • • • Tạo thiết lập cửa sổ/ñối tượng chứa Thêm thành phần vào cửa sổ Thêm kiện mã xử lý cho thành phần cửa sổ Hiển thị cửa sổ 18 Lê ðình Thanh, Tạo giao diện đồ họa Tạo ứng dụng swing NetBeens • • • • Tạo thiết lập cửa sổ/ñối tượng chứa Thêm thành phần vào cửa sổ Thêm kiện mã xử lý cho thành phần cửa sổ Hiển thị cửa sổ 19 Lê ðình Thanh, Tạo giao diện ñồ họa Một vài lưu ý • • • • • • Có 03 loại cửa sổ khung (JFrame) (cửa sổ chính), hộp thoại (JDialog) JApplet (applet) Chức cửa sổ để chứa thành phần giao diện khác Cửa sổ chứa cửa sổ khác (top-level) Các thành phần khác muốn hiển thị ñược phải ñược ñặt cửa sổ Một số thành phần làm vật chứa, ví dụ toolbar chứa button, textbox, … Một thành phần (trừ cửa sổ) ñược chứa thành phần khác • Quan hệ thành phần giao diện tạo thành Các thành phần ñều ñược kế thừa từ JComponent menu1 menu2 20 Lê ðình Thanh, Tạo giao diện đồ họa JPassword • • • Chức năng: Nhập mật Các phương thức • char [] pwd.getPassword(): ðặt nội dung password Sự kiện • keyReleased: nhả phím • focusLost: hết focus 25 Lê ðình Thanh, Tạo giao diện đồ họa JTextArea • • • Chức năng: Nhập nhiều dòng văn Các phương thức • setText(String): ðặt nội dung văn • String getText(): ðọc nội dung văn • setLineWrap(boolean): Cho phép hiển thị dòng văn nhiều hàng (gấp hàng) • setWrapStyleWord(boolean): Có bẻ từ gấp hàng hay khơng Sự kiện • keyReleased: nhả phím 26 Lê ðình Thanh, Tạo giao diện đồ họa JTextPane • • • Chức năng: Hiển thị nội dung văn có định dạng cho nhập nhiều dịng văn Chứa bên đối tượng StyledDocument • getStyledDocument(): trả lại đối tượng StyledDocument chứa bên StyledDocument • Chứa danh sách styles • Chứa nội dung Nộ dung ñược chia thành nhiều ñoạn, ñoạn áp dụng style • … 27 Lê ðình Thanh, Tạo giao diện đồ họa JTextPane • StyledDocument … Lấy kiểu mặc ñịnh: • Style kmd = StyleContext.getDefaultStyleContext() getStyle(StyleContext.DEFAULT_STYLE); • Thêm kiểu: • Style k1 = doc.addStyle("kieu1", kmc); • Style k2 = doc.addStyle("kieu2", k1); • Xác định thuộc tính kiểu: • StyleConstants.setFontFamily(k1, "SansSerif"); • StyleConstants.setItalic(k1, true); • StyleConstants.setFontSize(k2, 30); • Chèn nội dung có kiểu • doc.insertString(doc.getLength(), “Văn có kiểu 1", doc.getStyle("kieu1")); • doc.insertString(doc.getLength(), “Văn có kiểu 2", doc.getStyle("kieu2")); • • 28 Lê ðình Thanh, Tạo giao diện đồ họa JEditorPane • Chức năng: Hiển thị nội dung tài liệu HTML cho nhập nhiều dòng văn • Phương thức: • setText(String): ðặt nội dung văn • String getText(): ðọc nội dung văn • setPage(URL): Load tài liệu HTML java.net.URL url = APPView.class.getResource("thu.html"); try { jEditorPane1.setPage(url); } catch (Exception e) { System.err.println("Attempted to read a bad URL: " + helpURL); } 29 Lê ðình Thanh, Tạo giao diện đồ họa JCheckBox • • Các phương thức • boolean isSelected(): Kiểm tra nút tích hay khơng Sự kiện • mouseClicked: kích chuột, thay đổi trạng thái tích 30 Lê ðình Thanh, Tạo giao diện đồ họa JRadioButton • • • Cần tạo nhóm cho radio button ñể ñược chọn nhóm • Tạo JGroupButton đặt thuộc tính groupButton cho JRadioButton Các phương thức • boolean isSelected(): Kiểm tra nút tích hay khơng Sự kiện • mouseClicked: kích chuột, thay đổi trạng thái tích 31 Lê ðình Thanh, Tạo giao diện đồ họa JComboBox • • Cho chọn phần tử danh sách thả xuống Các phương thức • JComboBox(String []): Tạo đối tượng combo với danh sách mục chọn String[] • setSelectedIndex(i): Chọn mục i • int getSelectedIndex(): Trả lại mục mục chọn • Object getSelectedValue(): Trả lại mục chọn • setEditable(boolean): Cho biên soạn hay khơng • setModel(Model): ðặt model • getModel(): Lấy model • Sự kiện 32 thay đổi mục chọn Lê ðình•Thanh,actionPerformed: Tạo giao diện đồ họa JList • • Cho nhiều phần tử danh sách Các phương thức • • • • • • • • • • • • • • JList(DefaultListModel): Tạo ñối tượng list với danh sách mục chọn model setLayoutOrientation(JList. _): ðặt hướng xếp danh sách setVisibleRowCount(int): ðặt số hàng nhìn thấy setSelectedIndex(i): Chọn mục I setSelectedIndices(int[]): Chọn mục setSelectionInterval(index, size): Chọn mục liên tục khoảng ensureIndexIsVisible(i): ðiều chỉnh hiển thị để mục I nhìn thấy setSelectionMode(ListSelectionModel.MODE): ðặt kiểu chọn mục int getSelectedIndex(): Trả mục mục ñược chọn int[] getSelectedIndices(); Trả mục mục ñược chọn Object getSelectedValue(): Trả giá trị mục ñược chọn Object[] getSelectedValues(): Trả giá trị mục chọn ListModel: • addElement(obj), add(index, obj): Thêm mục • remove(index): Xóa mục Sự kiện • • actionPerformed: thay đổi mục chọn mouseClicked: Kích chuột 33 Lê ðình Thanh, Tạo giao diện đồ họa JTable • • Trình bày liệu theo bảng Nội dung bảng ñược quản lý TableModel TableModel bao gồm • • • Một mảng String[] chứa tiêu đề cột Một mảng Object[][] chứa ñối tượng nội dung ô Số cột mảng hai chiều phải số cột (số phần tử mảng chứa tiêu ñề) Các phương thức ñể lấy số hàng, số cột, tên cột, ñối tượng ơ, xác định biên tập ðể tạo bảng • • • Tạo TableModel Tạo đối tượng JTable sử dụng TableModel tạo • JTable tạo hàng tiêu đề với số số phần tử mảng tiêu đề có tiêu ñề mảng tiêu ñề • Với phần tử [i][j] mảng đối tượng • JTable sử dụng Renderer để hiển thị đối tượng (i, j) • JTable sử dụng Editor ñể cập nhật ñối tượng 34 Lê ðình Thanh, Tạo giao diện đồ họa TableModel JTable class MyTableModel extends AbstractTableModel { private String[] a = {"First Name", "Last Name", "Sport", "# of Years", "Vegetarian",}; private Object[][] data2 = { {"Kathy", "Smith", "Snowboarding", new Integer(5), new Boolean(false)}, {"John", "Doe", "Rowing", new Integer(3), new Boolean(true)}, {"Sue", "Black", "Knitting", new Integer(2), new Boolean(false)}, {"Jane", "White", “Speed reading", new Integer(20), new Boolean(true)}, {"Joe", "Brown", "Pool", new Integer(10), new Boolean(false)} }; … Renderer cho String Renderer cho Integer Renderer cho Boolean } Editor cho String Editor cho Integer Editor cho Boolean 35 Lê ðình Thanh, Tạo giao diện đồ họa Renderer Editor mặc ñịnh class MyTableModel extends AbstractTableModel { … public Class getColumnClass(int c) { return getValueAt(0, c).getClass(); } } JTable sử dụng Renderer/Editor mặc ñịnh cho lớp Renderer cho String Renderer cho Integer Renderer cho Boolean Editor cho String Editor cho Integer Editor cho Boolean 36 Lê ðình Thanh, Tạo giao diện đồ họa ðịnh nghĩa sử dụng Renderer ðịnh nghĩa DefaultTableCellRenderer renderer = new DefaultTableCellRenderer(); renderer.setBackground(Color.red); public class MyRenderer implements TableCellRenderer {} MyRenderer renderer = new MyRenderer(); renderer.set _(); Sử dụng cho cột table.getColumnModel().getColumn(3).setCellRenderer(renderer); cho bảng table.setDefaultRenderer(Class.class, renderer); 37 Lê ðình Thanh, Tạo giao diện đồ họa Ví dụ sử dụng Renderer DefaultTableCellRenderer renderer = new DefaultTableCellRenderer(); renderer.setForeground(Color.red); table.getColumnModel().getColumn(1).setCellRenderer(re nderer); 38 Lê ðình Thanh, Tạo giao diện đồ họa Ví dụ sử dụng Renderer table.setDefaultRenderer(Color.class, new ColorRenderer()); public class ColorRenderer extends JLabel implements TableCellRenderer { public ColorRenderer() { setOpaque(true); } public Component getTableCellRendererComponent( JTable table, Object obj, boolean isSelected, boolean hasFocus, int row, int column) { setBackground((Color)obj); return this; } }ðình Thanh, Tạo giao diện đồ họa Lê 39 ðịnh nghĩa sử dụng Editor ðịnh nghĩa DefaultTableCellEditor editor = new DefaultTableCellEditor(object); public class MyEditor extends AbstractCellEditor implements TableCellEditor {} MyEditor editor = new MyEditor(); Sử dụng cho cột table.getColumnModel().getColumn(3).setCellEditor(editor); cho bảng table.setDefaultEditor(Class.class, editor); 40 Lê ðình Thanh, Tạo giao diện đồ họa Ví dụ sử dụng Editor JComboBox comboBox = new JComboBox(); comboBox.addItem("1"); comboBox.addItem("2"); comboBox.addItem("3"); comboBox.addItem("4"); DefaultCellEditor editor = new DefaultCellEditor(comboBox); table.getColumnModel().getColumn(1).setCellEditor(edito r); 41 Lê ðình Thanh, Tạo giao diện đồ họa Ví dụ sử dụng Editor table.setDefaultEditor(Color.class, new ColorEditor()); public class ColorEditor extends AbstractCellEditor implements TableCellEditor, ActionListener { … public Object getCellEditorValue() { return currentColor; } public Component getTableCellEditorComponent(JTable table, Object value, boolean isSelected, int row, int column) { currentColor = (Color)value; return button; } } Lê ðình Thanh, Tạo giao diện đồ họa 42 Cập nhật ô class MyTableModel extends AbstractTableModel { … public boolean isCellEditable(int row, int col) { … } } Biên tập đối tượng (row, col) hay không tùy thuộc vào isCellEditable(int row, int col) trả true hay false 43 Lê ðình Thanh, Tạo giao diện đồ họa Cập nhật class MyTableModel extends AbstractTableModel { … public void setValueAt(Object value, int row, int col) { data[row][col] = value; fireTableCellUpdated(row, col); } } Lưu cập nhật ñược phương thức setValueAt ñược cài ñặt 44 Lê ðình Thanh, Tạo giao diện đồ họa Sắp xếp hàng theo giá trị cột table.setAutoCreateRowSorter(true); 45 Lê ðình Thanh, Tạo giao diện ñồ họa Tạo lọc //Tạo bảng có sorter MyTableModel model = new MyTableModel(); sorter = new TableRowSorter(model); table.setRowSorter(sorter); //ðặt lọc RowFilter rf = null; //If current expression doesn't parse, don't update try { rf = RowFilter.regexFilter(“xâu con”, col); } catch (java.util.regex.PatternSyntaxException e) { return; } sorter.setRowFilter(rf); 46 Lê ðình Thanh, Tạo giao diện ñồ họa ðặt chế ñộ chọn ô Chế ñộ chọn table.setSelectionMode(mode); Chọn mục ListSelectionModel.SINGLE_SELECTION Một khoảng ListSelectionModel.SINGLE_INTERVAL_SELECTION Nhiều khoảng ListSelectionModel.MULTIPLE_INTERVAL_SELECTION Mục chọn Cả hàng table.setRowSelectionAllowed(true); table.setColumnSelectionAllowed(false); Cả cột table.setRowSelectionAllowed(false); table.setColumnSelectionAllowed(true); Từng table.setCellSelectionEnabled(true); Ghi chú: Nếu chọn hành khơng chọn cột Chọn KHƠNG áp dụng 47 cho nhiều khoảng Lê ðình Thanh, Tạo giao diện ñồ họa Một số phương thức khác class MyTableModel extends AbstractTableModel { … public int getColumnCount() { return a.length; } public int getRowCount() { return data2.length; } public String getColumnName(int col) { return a[col]; } public Object getValueAt(int row, int col) { return data2[row][col]; } } 48 Lê ðình Thanh, Tạo giao diện đồ họa JFrame JDialog • • ðặt look and feel: JFrame.setDefaultLookAndFeelDecorated(true); JDialog.setDefaultLookAndFeelDecorated(true); Hiển thị hộp thoại JOptionPane.showConfirmDialog(parent, text, title, JOptionPane. _OPTION ); Các hộp thoại hiển thị modal trả giá trị nút ñược bấm 49 Lê ðình Thanh, Tạo giao diện đồ họa JMenu • • • • • JMenuBar – Thanh menu ñể chứa menu JMenu – Thực ñơn (ñược ñặt JMenuBar) Các khoản thực ñơn (ñược ñặt JMenu) • JMenuItem – Một khoản thường • JRadioButtonMenuItem – Một khoản có nút radio • JCheckBoxMenuItem – Một khoản có nút check • Separator – Phân cách khoản • Memu chứa menu Sự kiện khoản thực ñơn • actionPerformed Kiểm tra radio hay checkbox ñược chọn menu item • bool isSelected() 50 Lê ðình Thanh, Tạo giao diện đồ họa JPopupMenu • • Menu hiển thị kích chuột phải, cịn gọi menu ngữ cảnh Cần xử lý kiện MousePressed MouseReleased ñối tượng hiển thị popup menu private void mainPanelMousePressed(java.awt.event.MouseEvent evt) { maybeShowPopup(evt); } private void mainPanelMouseReleased(java.awt.event.MouseEvent evt) { maybeShowPopup(evt); } private void maybeShowPopup(java.awt.event.MouseEvent e) { if (e.isPopupTrigger()) { jPopupMenu1.show(e.getComponent(), e.getX(), e.getY()); } } 51 Lê ðình Thanh, Tạo giao diện đồ họa JPopupMenu • Thêm actionPerformed cho khoản popup menu menuItem.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { jMenuItem1ActionPerformed(evt); } }); private void jMenuItem1ActionPerformed(java.awt.event.ActionEvent evt) { } 52 Lê ðình Thanh, Tạo giao diện đồ họa Tiếp theo Lập trình socket 53 Lê ðình Thanh, Tạo giao diện ñồ họa ...Nội dung • • Java Foundation Classes Swing Lê ðình Thanh, Tạo giao diện đồ họa Java Foundation Classes (JFC) Lê ðình Thanh, Tạo giao diện đồ họa JFC • Các lớp tảng Java (JFC) bao gồm lớp... chọn, họp soạn thảo, danh sách, cây, … ñể phát triển giao diện ñồ họa • • • • Look-and-Feel: Tùy biến theme Java 2D: ñể ñồ họa chiều Internationalization: thay ñổi ngôn ngữ cho người dùng sử... mainPanelMousePressed (java. awt.event.MouseEvent evt) { maybeShowPopup(evt); } private void mainPanelMouseReleased (java. awt.event.MouseEvent evt) { maybeShowPopup(evt); } private void maybeShowPopup (java. awt.event.MouseEvent