1. GUI Programming with JAVA
ThS. Hoàng Mạnh Hà

2. 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

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

4. 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 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

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

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

14. 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

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

16. 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

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

18. 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

19. 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

20. 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

21. 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

22. 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

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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

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

32. 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

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

34. 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

35. 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

36. 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

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

38. 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

39. 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

40. 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

41. 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

42. 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

43. 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

44. Lập trình Swing với NetBeans IDE
ettingup.html
SGU - CNTT - Lập Trình JAVA

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

46. 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

47. 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

48. 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

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