GUI Programming with JAVA - Hoàng Mạnh Hà

Click to edit Master title style Click to edit Master text styles Second level Third level Fourth level Fifth level 3/2/2014 SGU - CNTT - Lập Trình JAVA ‹#› GUI Programming with JAVA ThS. Hoàng Mạnh Hà hoangha84@gmail.com https://sites.google.com/site/hoangha84 Nội dung SGU - CNTT - Lập Trình JAVA 2 AWT Package Event-handlers Layout Managers Swing Package Lập trình giao diện với Swing AWT Package SGU - CNTT - Lập Trình JAVA 3 GUI Programming SGU - CNTT - Lập Trình JAVA 4 Graphical User Interface – GUI: Giao diện người dùng. GUI cho phép chương trình tương tác với người sử dụng một cách dễ dàng, thân thiện hơn. JAVA cung cấp 2 bộ thư viện hỗ trợ lập trình GUI: AWT (Abstract Window Toolkit): xuất hiện từ JDK 1.0. Hiện nay hầu hết được thay thế bởi Swing. Swing: một phần của Java Foundation Classes (JFC), là một add-on của JDK 1.1 sau đó được thêm vào từ JDK1.2. Một số thư viện GUI khác: Eclipse's Standard Widget Toolkit (SWT), Google Web Toolkit (GWT) AWT SGU - CNTT - Lập Trình JAVA 5 Bao gồm 12 gói, trong đó sử dụng phổ biến nhất là 2 gói: java.awt java.awt.event Platform-independent Device-independent Gói java.awt SGU - CNTT - Lập Trình JAVA 6 GUI Component classes (such as Button, TextField, and Label), GUI Container classes (such as Frame, Panel, Dialog and ScrollPane), Layout managers (such as FlowLayout, BorderLayout and GridLayout), Custom graphics classes (such as Graphics, Color and Font). Gói java.awt.event SGU - CNTT - Lập Trình JAVA 7 Event classes (such as ActionEvent, MouseEvent, KeyEvent and WindowEvent), Event Listener Interfaces (such as ActionListener, MouseListener, KeyListener and WindowListener), Event Listener Adapter classes (such as MouseAdapter, KeyAdapter, and WindowAdapter). Containers và Components SGU - CNTT - Lập Trình JAVA 8 Component: các đối tượng giao diện cơ bản (Button, label, textfield…) Container: các đối tượng dùng để chứa các component (Frame, Panel, Applet) Frame SGU - CNTT - Lập Trình JAVA 9 Frame: container mức cao nhất trong AWT. Thanh tiêu đề Thanh menu (tùy chọn) Phần hiện thị Thanh tiêu đề của frame: Icon Tiêu đề Bộ nút điều khiển cửa sổ Panel SGU - CNTT - Lập Trình JAVA 10 Là một vùng hình chữ nhật dùng để nhóm các thành phần giao diện khác theo một layout nhất định. Mọi component phải được đưa vào container. Tất cả container đều có phương thức: add(Component c) AWT Container Classes SGU - CNTT - Lập Trình JAVA 11 Top-level: Frame, Dialog, Applet Frame: cung cấp giao diện cửa sổ chính. Dialog: cửa sổ pop-up để tương tác với người dùng. Applet: top-level container cho applet (chương trình java nhúng trong trình duyệt) AWT Container Classes SGU - CNTT - Lập Trình JAVA 12 Container cấp 2: Panel và ScrollPane AWT Component SGU - CNTT - Lập Trình JAVA 13 Một số phương thức thường dùng SGU - CNTT - Lập Trình JAVA 14 setSize(int width, int height) setVisible(true) setTitle(String title); Event-Handlers SGU - CNTT - Lập Trình JAVA 15 AWT Event-Handling SGU - CNTT - Lập Trình JAVA 16 Source, listener, event object Source object: Button, TextField,… Tương tác với người dùng Khi có sự tương tác từ người dùng, phát sinh event object đến tất cả các listener. Listener object: Để bắt các event, phải đăng kí đối tượng listener cho đối tượng source tương ứng. Mỗi loại event sẽ được xử lý bởi phương thức event-handler của các listener tương ứng. AWT Event-Handling SGU - CNTT - Lập Trình JAVA 17 AWT Event-Handling SGU - CNTT - Lập Trình JAVA 18 Tất cả các XXXListener là những interface được xây dựng sẵn trong đó có các phương thức xử lý sự kiện tương ứng với từng loại sự kiện (event-handler). public interface MouseListener extends EventListener { public void mouseClicked(MouseEvent e); public void mousePressed(MouseEvent e); public void mouseReleased(MouseEvent e); public void mouseEntered(MouseEvent e); public void mouseExited(MouseEvent e); } AWT Event-Handling SGU - CNTT - Lập Trình JAVA 19 Khi muốn thực hiện một hành động ứng với một sự kiện nào đó, ta cần xử lý trong phương thức event-handler tương ứng. Để làm được điều này ta cần override event-handler tương ứng, thông thường bằng cách xây dựng lớp thực thi interface của Listener cần thiết. class MyMouseListener implements MouseListener { @Override public void mouseClicked(MouseEvent e) { } @Override public void mousePressed(MouseEvent e) { } … } Chú ý: Khi implements cần phải override tất cả các phương thức có sẵn trong interface. AWT Event-Handling SGU - CNTT - Lập Trình JAVA 20 Sau đó thông qua phương thức: srcObj.addXXXListener(XXXListener l) srcObj.removeXXXListener(XXXListener l) để đăng kí / hủy đăng kí Listener tương ứng cho đối tượng source phát sinh sự kiện. Khi đó khi người dùng tương tác với đối tượng source sẽ sinh ra event object tương ứng. Các event object này được tất cả các listener ghi nhận và gọi các phương thức xử lý event-handler tương ứng. WindowListener SGU - CNTT - Lập Trình JAVA 21 windowOpened: lần đầu tiên cửa sổ được hiện thị windowClosed: khi thoát bởi hàm dispose windowActivated windowDeactivated AWT Event-Handling SGU - CNTT - Lập Trình JAVA 22 Với cách sử dụng class thực thi interface gây phiền phức khi ta chỉ cần xử lý 1 sự kiện mà phải override tất cả các event-handler. Để khắc phục, sử dụng các lớp event listener adapter. tf.addKeyListener(new KeyAdapter() { @Override public void keyReleased(KeyEvent ke) { } }); Layout Managers SGU - CNTT - Lập Trình JAVA 23 Layout Manager SGU - CNTT - Lập Trình JAVA 24 Layout manager dùng để sắp xếp các component trong container. Các loại layout trong AWT: FlowLayout GridLayout BorderLayout GridBagLayout BoxLayout CardLayout Phương thức để thiết lập layout của container: public void setLayout(LayoutManager mgr) Thiết lập layout cho container SGU - CNTT - Lập Trình JAVA 25 Tạo đối tượng của layout cần thiết. FlowLayout flowLayout = new FlowLayout(); Gọi phương thức setLayout() của container muốn thay đổi layout: f.setLayout(flowLayout); Đưa các component vào container theo đúng thứ tự hoặc đúng vị trí (tùy theo loại layout). Lấy thông tin layout hiện tại của container: getLayout() FlowLayout SGU - CNTT - Lập Trình JAVA 26 Các component hiện thị theo thứ tự từ trái sang phải, từ trên xuống dưới bên trong container theo đúng thứ tự được add của chúng. Khi hết một dòng sẽ xuống dòng mới tiếp theo. Hiện thị phụ thuộc vào kích thước hiện thị của container. FlowLayout Constructors SGU - CNTT - Lập Trình JAVA 27 public FlowLayout(); public FlowLayout(int align); public FlowLayout(int align, int hgap, int vgap); // align: FlowLayout.LEFT (or LEADING), FlowLayout.RIGHT (or TRAILING), or FlowLayout.CENTER // hgap, vgap: horizontal/vertical gap between the components // By default: hgap=5, vgap=5, align=CENTER GridLayout SGU - CNTT - Lập Trình JAVA 28 Các component hiện thị theo từng ô được chia ra bởi các dòng và cột. Các component được thêm vào theo thứ tự từ trái qua phải, từ trên xuống dưới theo thứ tự đưa vào của chúng. GridLayout Constructors SGU - CNTT - Lập Trình JAVA 29 public GridLayout(int rows, int columns); public GridLayout(int rows, int columns, int hgap, int vgap); // By default: rows=1, cols=0, hgap=0, vgap=0 BorderLayout SGU - CNTT - Lập Trình JAVA 30 Container được chia làm 5 vùng. Component được thêm vào bởi phương thức aContainer.add(acomponent, aZone) aZone có thể là: BorderLayout.NORTH BorderLayout.SOUTH BorderLayout.WEST BorderLayout.EAST BorderLayout.CENTER Phương thức add(acomponent) sẽ thêm vào CENTER BorderLayout Constructors SGU - CNTT - Lập Trình JAVA 31 public BorderLayout(); public BorderLayout(int hgap, int vgap); // By default hgap=0, vgap=0 Panel trong container SGU - CNTT - Lập Trình JAVA 32 Ta có thể dùng panel như một container phụ để nhóm các component theo một layout nào đó. Panel có thể đưa vào panel khác hoặc đưa vào top-level container (Frame). VD: Frame – BorderLayout NORTH: panel – FlowLayout CENTER: panel – GridLayout Swing Package SGU - CNTT - Lập Trình JAVA 33 Giới thiệu SGU - CNTT - Lập Trình JAVA 34 Swing là một phần của Java Foundation Classes (JFC) JFC gồm: Swing API (Application Programming Interface) Accessibility API: công nghệ hỗ trợ người khiếm thị. Java 2D API: for high quality 2D graphics and images. Pluggable look and feel supports. Drag-and-drop support between Java and native applications. Tính năng SGU - CNTT - Lập Trình JAVA 35 Ở phiên bản JDK 1.7, Swing gồm 18 gói API Chủ yếu dùng javax.swing và javax.swing.event. Hỗ trợ pluggable look-and-feel Tính năng SGU - CNTT - Lập Trình JAVA 36 Dùng các lớp sự kiện của AWT trong java.awt.event và thêm 1 số lớp mới trong javax.swing.event nhưng ít khi dùng đến. Dùng layout của AWT đồng thời thêm một số mới trong javax.swing. … Swing components SGU - CNTT - Lập Trình JAVA 37 Swing components SGU - CNTT - Lập Trình JAVA 38 Các lớp component của Swing bắt đầu với kí tự “J”. VD: JLabel, JTextField, JPanel, JFrame… Swing containers SGU - CNTT - Lập Trình JAVA 39 Không dùng chung AWT với Swing. AWT component luôn hiện thị trên Swing component. Tương tự trong AWT, 3 top-level container trong Swing là: JFrame JDialog JApplet Secondary container: JPanel Content-Pane của Swing SGU - CNTT - Lập Trình JAVA 40 Khác với AWT, các JComponent không đưa vào container trực tiếp. JComponent phải được đưa vào thông qua content-pane của top-level container. Content-pane thực chất là một java.awt.container. Cách 1 SGU - CNTT - Lập Trình JAVA 41 Lấy đối tượng content-pane thông qua phương thức getContentPane() của top-level container, sau đó thêm các component vào đó. Container cp = this.getContentPane(); cp.setLayout(new FlowLayout()); cp.add(new JLabel("Hello, world!")); cp.add(new JButton("Button")); Cách 2 SGU - CNTT - Lập Trình JAVA 42 Chỉ định content-pane đến một JPanel thông qua phương thức setContentPane() của JFrame. JPanel mainPanel = new JPanel(new FlowLayout()); mainPanel.add(new JLabel("Hello, world!")); mainPanel.add(new JButton("Button")); // Set the content-pane of this JFrame to the main JPanel this.setContentPane(mainPanel); Một số phương thức thường dùng SGU - CNTT - Lập Trình JAVA 43 JFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setToolTipText(String s) Lập trình Swing với NetBeans IDE SGU - CNTT - Lập Trình JAVA 44 Lập trình giao diện với Swing SGU - CNTT - Lập Trình JAVA 45 Thay đổi Look-and-Feel SGU - CNTT - Lập Trình JAVA 46 Thông qua phương thức của lớp UIManager và SwingUtilities. UIManager.setLookAndFeel(UIManager.getInstalledLookAndFeels()[Số nguyên].getClassName()); SwingUtilities.updateComponentTreeUI(JComponent c); Số nguyên: 0: Metal Look and Feel 1: Nimbus Look and Feel 2: CDE/Motif Look and Feel 3: Windows Look and Feel 4: Windows Classic Look and Feel Nhập xuất đơn giản với JOptionPane SGU - CNTT - Lập Trình JAVA 47 JOptionPane.showInputDialog() JOptionPane.showConfirmDialog() JOptionPane.showMessageDialog() JOptionPane.showOptionDialog() Nhập xuất đơn giản với JOptionPane SGU - CNTT - Lập Trình JAVA 48 messageType: ERROR_MESSAGE INFORMATION_MESSAGE WARNING_MESSAGE QUESTION_MESSAGE PLAIN_MESSAGE optionType: DEFAULT_OPTION YES_NO_OPTION YES_NO_CANCEL_OPTION OK_CANCEL_OPTION Các component phổ biến SGU - CNTT - Lập Trình JAVA 49 JTextField JButton JCheckBox JRadioButton JComboBox JList JTextArea