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 - Đại học công nghệ thông tin

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.