Bài giảng Lập trình Java - Chương 5: Kỹ thuật lập trình giao diện người dùng (GUI) trong Java

 KỸ THUẬT LẬP TRÌNH 
GIAO DIỆN NGƯỜI DÙNG (GUI) 
TRONG JAVA 
Nội dung 
 Khái niệm, đặc điểm cơ bản 
 Tổng quan thư viện AWT 
 Tổng quan JFC Swing 
 Component 
 Container 
 Layout manager 
 Các bước xây dựng GUI 
 Ví dụ minh họa 
 Các component cơ bản 
 Các container 
 Các kiểu layout manager 
 Mô hình, cơ chế xử lý event 
 Ví dụ minh họa, bài tập 
Tài liệu đọc thêm 
[1] Kathy Walrath, Mary Campione, Alison Huml, Sharon Zakhour. The 
JFC Swing Tutorial, Second Edition. Copyright © 2004 Sun 
Microsystems, Inc. 
Thư viện GUI trong java 
• Thư viện hỗ trợ: tập hợp các lớp java cung cấp hỗ trợ thiết kế, 
xây dựng GUI. 
 awt (java.awt.*) Abstract Window Toolkit 
 swing (javax.swing.*) 
 Các components của các nhà cung cấp thứ 3 
Tổng quan về AWT 
AWTEvent
Font
FontMetrics
Component
Graphics
Object Color
Canvas
Button
TextComponent
Label
List
CheckBoxGroup
CheckBox
Choice
Container Panel Applet
Frame
Dialog FileDialog
Window
TextField
TextArea
MenuComponent MenuItem
MenuBar
Menu
Scrollbar
LayoutManager
Tổng quan về JFC Swing 
Tổng quan về JFC Swing 
Tổng quan về JFC Swing 
Tổng quan về JFC Swing 
Tổng quan về JFC Swing 
Tổng quan về JFC Swing 
Tổng quan về JFC Swing 
Tổng quan về JFC Swing 
Khái niệm component 
 Tất cả các thành phần cấu tạo nên chương trình GUI được gọi 
là component. 
 Ví dụ 
 Containers, 
 TextField, Label, Checkbox, TextArea 
 Scrollbars, Scrollpanes, Dialog 
 
Khái niệm container 
 Là thành phần mà có thể chứa các thành phần khác,có thể vẽ 
và tô màu. 
 Frame/JFrame, Panel/JPanel, Dialog/JDialog, 
ScrollPane/JScrollPane,  
 Gắn component vào khung chứa 
 containerObj.add(compObj); 
 Lấy thông tin của component 
 objectName.get( ); 
 Gán thông tin cho component 
 objectName.set( ); 
Khái niệm Layout Manager 
 Các loại layout khác nhau: 
 Flow Layout 
 Border Layout 
 Grid Layout 
 GridBag Layout 
 Null Layout 
  
 Trình quản lý layout được thiết lập bằng cách gọi phương thức 
„setLayout( )‟ 
Nguyên tắc xây dựng GUI trong java 
 Lựa chọn 1 container: Frame/JFrame, Window/JWindow, 
Dialog/JDialog,  
 Tạo các điều khiển: (buttons, text areas..) 
 Đưa các điều khiển vào vùng chứa 
 Sắp xếp các điều khiển(layout) 
 Thêm các xử lý sự kiện (Listeners) 
FlowLayout 
 Là trình quản lý layout mặc định cho các applet và các panel 
 Với FlowLayout các thành phần sẽ được xắp xếp từ góc trái trên 
đến góc phải dưới của màn hình 
 Các constructor: 
 FlowLayout layout = new FlowLayout(); 
 FlowLayout layout = new FlowLayout(FlowLayout.RIGHT); 
// Canh lề bên phải 
FlowLayout 
Flow Layout – Left and Right Aligned 
BorderLayout 
 Là trình quản lý layout mặc định cho Window, Frame và Dialog 
 Trình quản lý này có thể xắp xếp đến 5 thành phần trong 
container 
 Các thành phần có thể được đặt vào 5 hướng NORTH, EAST, 
SOUTH, WEST và CENTER của container 
 Ví dụ: Để thêm một thành phần vào vùng North của container 
 Button b1= new Button(“North Button”); 
 setLayout(new BorderLayout( )); 
 add(b1, BorderLayout.NORTH); 
BorderLayout 
GridLayout 
 Hỗ trợ việc chia container thành 
một lưới 
 Các thành phần được bố trí trong 
các dòng và cột 
 Một ô lưới nên chứa ít nhất một 
thành phần 
 Kiểu layout này được sử dụng 
khi tất cả các thành phần có 
cùng kích thước 
GridLayout layout = new GridLayout(no. of rows, no. of 
columns); 
containerObj.setLayout(layout); 
GridBagLayout 
 Bố trí các thành phần một cách chính xác 
 Các thành phần không cần có cùng kích thước 
 Các thành phần được xắp xếp trong một lưới chứa các dòng và 
các cột 
 Thứ tự đặt các thành phần không tuân theo hướng từ trái-sang-
phải và trên-xuống-dưới 
 Hàm constructor 
 GridBagLayout gb = new GridBagLayout( ); 
GridBagLayout 
 Lớp ‘GridBagLayoutConstraints’ 
lưu trữ tất cả các thông tin mà lớp 
GridLayout yêu cầu: Vị trí và kích 
thuớc mỗi thành phần 
NullLayout 
• Tự do trong việc định vị trí và kích thước của các components 
Frame fr = new Frame("NullLayout Demo"); 
fr.setLayout(null); 
Mô hình xử lý sự kiện 
Source Object
Trigger an event
Listener Object
Register a listener object
EventObject
Event Handler
Notify listenerGenerate
an event
User
action
Có 3 yếu tố quan trọng trong mô hình xử lý sự kiện: 
 Nguồn phát sinh sự kiện (event source) 
 Sự kiện (event object) 
 Bộ lắng nghe sự kiện (event listener) 
Mô hình xử lý sự kiện 
Nguồn phát sinh sự kiện 
cần phải đăng ký “bộ lắng 
nghe” để xử lý khi người 
dùng tác động 
class MyMenuItemListener implements ActionListener 
{ 
} 
Hành động, sự kiện, lắng nghe 
Đối tượng Sự kiện Bộ lắng nghe 
Window, Frame,  WindowEvent WindowListener 
Button, MenuItem,  ActionEvent ActionListener 
TextComponent,  TextEvent TextListener 
List,  ActionEvent ActionListener 
 ItemEvent ItemListener 
ComponentEvent ComponentListener 
MouseEvent MouseListener 
MouseMotionListener 
KeyEvent KeyListener 
Tổng quan về event của AWT, Swing 
java.awt.event.* 
javax.swing.event.* 
AWTEvent EventObject 
AdjustmentEvent 
ComponentEvent 
TextEvent 
ItemEvent 
ActionEvent 
InputEvent 
WindowEvent 
MouseEvent 
KeyEvent 
ContainerEvent 
FocusEvent 
PaintEvent 
ListSelectionEvent 
 LẬP TRÌNH JFC SWING 
(JAVA FOUNDATION CLASS) 
Nội dung 
 Một số Component Swing phổ biến 
 JFrame, JPanel, JDialog, 
 JMenuBar, JMenu, JMenuItem, JToolBar, 
JRadioButtonMenuItem 
 Jcomponent, JButton, JComboxBox, JList, ButtonGroup, 
JCheckBox, JTextComponent, JTextField, JTextArea, 
 JTablePane, JFileChooser, JSplitPane, JTable, JTree, 
  
 Các ví dụ minh họa 
JFrame 
JFrame 
JMenuBar, JMenu, JMenuItem, 
JRadioButtonMenuItem 
JMenuBar, JMenu, JMenuItem, 
JRadioButtonMenuItem 
JMenuBar, JMenu, JMenuItem, 
JRadioButtonMenuItem 
JMenu 
JMenuItem 
JMenuBar 
JMenuBar, JMenu, JMenuItem, 
JRadioButtonMenuItem 
JMenu 
JMenuItem 
JMenuBar 
fileMenu.addSeparator(); 
exitMenuItem.setMnemonic('X'); 
JRadioButtonMenuItem, ButtonGroup 
• Tham khảo thêm về Look and Feel trong tài liệu JFC Swing Tutorial phần “How to Set the 
Look and Feel” trong chương 9 “Other Swing Features Reference” 
JRadioButtonMenuItem, ButtonGroup 
JRadioButtonMenuItem, ButtonGroup 
JToolBar, Icon, ImageIcon 
JButton, 
ImageIcon 
JToolBar, Icon, ImageIcon 
• Đặt tooltip cho Icon trên thanh toolbar 
Các ví dụ về Swing components 
Rất nhiều các ví dụ, demos về các swing component cơ bản có thể tìm thấy tại 
JTabbedPane 
JTablePane 
JTabbedPane 
• Tạo mới đối tượng JTabbedPane 
 JTabbedPane tabbedPane = new JTabbedPane(); 
• Gắn thêm 1 Tab mới vào đối tượng JTabbedPane 
 tabbedPane.addTab(“Tab name”, icon, component, “Tooltip”); 
JTabbedPane 
JSplitPane 
JSplitPane 
JSplitPane, JScrollPane, JList 
JSplitPane, JScrollPane, JList 
JTree 
JTree 
 Tạo một node trên cây làm root 
DefaultMutableTreeNode top = new DefaultMutableTreeNode("The Java Series"); 
 Tạo các node bên dưới 
 DefaultMutableTreeNode category = null; 
 DefaultMutableTreeNode book = null; 
 category = new DefaultMutableTreeNode("Books for Java Programmers"); 
 top.add(category); 
 book = new DefaultMutableTreeNode( “Core Java”); 
 category.add(book); 
 JTree tree = new JTree(top); 
 ... 
 JScrollPane treeView = new JScrollPane(tree); 
JTree 
 Xử lý sự kiện chọn node trên cây 
JTree 
Bài thực hành 
 Viết chương trình minh họa việc sử dụng các đối tượng 
components, đối tượng khung chứa container, bộ quản lý trình 
bày Layout Manager. 
 Viết chương trình xây dựng giao diện chương trình máy tính cá 
nhân tương tự chương trình Calculator trên windows. 
 Viết chương trình xây dựng giao diện tương tự giao diện của 
trình ứng dụng MS. WordPad trên Windows. 
 Viết chương trình xây dựng giao diện chương trình tương tự 
Windows Explorer.