GUI Programming with JAVA ThS. Hoàng Mạnh Hà hoangha84@gmail.com https://sites.google.com/site/hoangha84

Nội dung AWT Package Event-handlers Layout Managers Swing Package Lập trình giao diện với Swing SGU - CNTT - Lập Trình JAVA

AWT Package SGU - CNTT - Lập Trình JAVA

GUI Programming 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) SGU - CNTT - Lập Trình JAVA

AWT 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 SGU - CNTT - Lập Trình JAVA

Gói java.awt 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). SGU - CNTT - Lập Trình JAVA

Gói java.awt.event 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). SGU - CNTT - Lập Trình JAVA

Containers và Components 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) SGU - CNTT - Lập Trình JAVA

Frame 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ổ SGU - CNTT - Lập Trình JAVA

Panel 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) SGU - CNTT - Lập Trình JAVA

AWT Container Classes 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) SGU - CNTT - Lập Trình JAVA

AWT Container Classes Container cấp 2: Panel và ScrollPane SGU - CNTT - Lập Trình JAVA

AWT Component SGU - CNTT - Lập Trình JAVA

Một số phương thức thường dùng setSize(int width, int height) setVisible(true) setTitle(String title); SGU - CNTT - Lập Trình JAVA

Event-Handlers SGU - CNTT - Lập Trình JAVA

AWT Event-Handling 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. SGU - CNTT - Lập Trình JAVA

AWT Event-Handling SGU - CNTT - Lập Trình JAVA

AWT Event-Handling 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); } SGU - CNTT - Lập Trình JAVA

AWT Event-Handling 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) { } 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. SGU - CNTT - Lập Trình JAVA

AWT Event-Handling 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. SGU - CNTT - Lập Trình JAVA

WindowListener windowOpened: lần đầu tiên cửa sổ được hiện thị windowClosed: khi thoát bởi hàm dispose windowActivated windowDeactivated SGU - CNTT - Lập Trình JAVA

AWT Event-Handling 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) { } }); SGU - CNTT - Lập Trình JAVA

Layout Managers SGU - CNTT - Lập Trình JAVA

Layout Manager 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) SGU - CNTT - Lập Trình JAVA

Thiết lập layout cho container 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() SGU - CNTT - Lập Trình JAVA

FlowLayout 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. SGU - CNTT - Lập Trình JAVA

FlowLayout Constructors 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 SGU - CNTT - Lập Trình JAVA

GridLayout 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. SGU - CNTT - Lập Trình JAVA

GridLayout Constructors 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 SGU - CNTT - Lập Trình JAVA

BorderLayout 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 SGU - CNTT - Lập Trình JAVA

BorderLayout Constructors public BorderLayout(); public BorderLayout(int hgap, int vgap); // By default hgap=0, vgap=0 SGU - CNTT - Lập Trình JAVA

Panel trong container 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 SGU - CNTT - Lập Trình JAVA

Swing Package SGU - CNTT - Lập Trình JAVA

Giới thiệu 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. SGU - CNTT - Lập Trình JAVA

Tính năng Ở 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 SGU - CNTT - Lập Trình JAVA

Tính năng 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. … SGU - CNTT - Lập Trình JAVA

Swing components SGU - CNTT - Lập Trình JAVA

Swing components Các lớp component của Swing bắt đầu với kí tự “J”. VD: JLabel, JTextField, JPanel, JFrame… SGU - CNTT - Lập Trình JAVA

Swing containers 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 SGU - CNTT - Lập Trình JAVA

Content-Pane của Swing 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. SGU - CNTT - Lập Trình JAVA

Cách 1 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")); SGU - CNTT - Lập Trình JAVA

Cách 2 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); SGU - CNTT - Lập Trình JAVA

Một số phương thức thường dùng JFrame.setDefaultCloseOperation(JFrame.EXIT_ON _CLOSE); setToolTipText(String s) SGU - CNTT - Lập Trình JAVA

Lập trình Swing với NetBeans IDE http://docs.oracle.com/javase/tutorial/uiswing/learn/s ettingup.html SGU - CNTT - Lập Trình JAVA

Lập trình giao diện với Swing SGU - CNTT - Lập Trình JAVA

Thay đổi Look-and-Feel Thông qua phương thức của lớp UIManager và SwingUtilities. UIManager.setLookAndFeel(UIManager.getInstalledLookAndFe els()[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 SGU - CNTT - Lập Trình JAVA

Nhập xuất đơn giản với JOptionPane JOptionPane.showInputDialog() JOptionPane.showConfirmDialog() JOptionPane.showMessageDialog() JOptionPane.showOptionDialog() SGU - CNTT - Lập Trình JAVA

Nhập xuất đơn giản với JOptionPane messageType: ERROR_MESSAGE INFORMATION_MESSAGE WARNING_MESSAGE QUESTION_MESSAGE PLAIN_MESSAGE optionType: DEFAULT_OPTION YES_NO_OPTION YES_NO_CANCEL_OPTION OK_CANCEL_OPTION SGU - CNTT - Lập Trình JAVA

Các component phổ biến JTextField JButton JCheckBox JRadioButton JComboBox JList JTextArea SGU - CNTT - Lập Trình JAVA