LẬP TRÌNH JAVA Ch 4. THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG Giảng viên: Tạ Việt Phương E-mail: phuongtv@uit.vn Nội dung ➢ Giới thiệu ➢ Tổng quan về Graphical User Interface (GUI) ➢ Containment Hierarchy ➢ Layout Manager ➢ Swing components 2 2 GIỚI THIỆU 3 Giao diện ◂ Giao diện nghĩa là điểm giao tiếp giữa hai đối tượng. ◂ Giao diện là tất cả những gì xuất hiện trên phần mềm bao gồm hình ảnh, thông tin, video, các điều hướng người dùng trên website, liên kết trên web. hay đơn giản là tất cả những gì người dùng nhìn thấy, tương tác khi vào trong ứng dụng.
4 Giao diện ◂ Một thành phần (component) GUI là một đối tượng trực quan. Người dùng tương tác với đối tượng này thông qua con trỏ chuột hay bàn phím. Các thành phần như là button, label v.v… có thể được nhìn thấy trên màn hình. ◂ Gọi là Giao diện đồ họa người dùng – Graphical User Interface (GUI) 5 TỔNG QUAN GUI 6 Tổng quan GUI ➢ AWT: cung cấp các gói cơ bản để lập trình giao diện, được sử dụng trong các phiên bản trước jdk1.2 (java2) ➢ Swing: có nhiều chức năng hơn AWT, xây dựng chương trình dễ dàng mềm dẻo hơn.
Được đưa vào từ jdk1.2 ➢ Swt: được phát triển bởi IBM ➢ Swing Components thường có tên bắt đầu với 'J' o AWT có lớp Panel o Swing có lớp tương ứng là JPanel ➢ Có thể sử dụng plug-in để hỗ trợ: o Eclipse: WindowsBuilder Pro o Netbean: đã tích hợp Tổng quan GUI ➢ Thư viện hỗ trợ lập trình giao diện trong Java: tập hợp các lớp java cung cấp hỗ trợ thiết kế, xây dựng GUI ◂ AWT (Abstract Windows Toolkits) import java.*; ◂ Swing (Java Foundation Classes Package) import javax.*; ◂ Tất cả Swing component có tên bắt đầu với J… 8 Swing API ➢ Java Foundation Classes (JFC) cung cấp một tập các chức năng giúp xây dựng các ứng dụng GUI. ➢ Gói Swing là 1 thành phần của JFC ➢ Sử dụng lệnh: import javax.* ➢ Ưu điểm của Swing so với AWT: o Cung cấp thêm các đối tượng mới để xây dựng giao diện đồ họa o look-and-feel: tùy biến để các thành phần giao diện của Swing nhìn giống như các thành phần giao diện của HĐH o Hỗ trợ các thao tác sử dụng bàn phím thay chuột o Sử dụng tài nguyên hiệu quả hơn 9 Java GUI hierarchy AWT LayoutManager FontMetrics Panel Applet JApplet Graphics Object Component Container Window Frame JFrame Font Color Dialog JDialog Dimension JComponent Swing lightweight heavyweight 10 7 Java GUI hierarchy (tt) JMenuBar JMenuItem AbstractButton JButton JComboBox JScrollPane … JComponent JLabel JTextArea JTextComponent JTextField JPasswordField JPanel … etc. Swing lightweight heavyweight 11 Swing Components ➢ Swing Components có nhiều mức khác nhau: o frame, còn gọi main window (JFrame) o panel, hoặc pane (JPanel) o button (JButton) o label (JLabel) ➢ Các mức này quy định các Component trong 1 ứng dụng GUI kết hợp với nhau. ➢ Cách kết hợp này gọi là Swing Containment Hierarchy 12 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.
o Frame/JFrame, Panel/JPanel, Dialog/JDialog, ScrollPane/JScrollPane, … ➢ Gắn component vào khung chứa o containerObj.add(compObj); ➢ Lấy thông tin của component o objectName.get…( ); ➢ Gán thông tin cho component o objectName.set…( ); 13 Nguyên tắc xây dựng GUI ➢ Lựa chọn 1 container: Frame/JFrame, Window/JWindow, Dialog/JDialog, … ➢ Tạo các điều khiển(control): (buttons, text areas, list, choice, checkbox.) ➢ Đư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) 14 Containment Hierarchy 15 Containment Hierarchy Frame: Top-level container: JFrame, JDialog, JApplet 16 Containment Hierarchy Top Level Container Intermediate Container Atomic Component N Atomic Component N Atomic Component N 17 Containment Hierarchy Top Level (JFrame) Atomic (JButton) Intermediate (JPanel) Atomic (JLabel) 18 Containment Hierarchy ➢ Top Level Containers o Là nơi để hiển thị các Component khác o Ví dụ: ▪ JFrame: sử dụng cho các cửa sổ chính của chương trình ▪ JDialog: cửa sổ thông báo ▪ JApplet: sử dụng trên trình duyệt 19 Containment Hierarchy (tt) ➢ Top Level Containers: JFrame o Là cửa sổ chính, dùng để chứa các thành phần giao diện khác. Đóng vai trò là một container o Hàm khởi tạo • JFrame() • JFrame(String title) o Các thành phần đồ họa được đưa vào content pane, không đưa trực tiếp vào JFrame.add(b); o JFrame cung cấp 2 phương thức: • getContentPane() trả lại một đối tượng ContentPane thuộc lớp Container 15 • setContentPane(JPanel): thiết lập nội dung cho Content Pane 20 Ví Dụ JFrame import javax.*; class Frame1 extends JFrame { closing window /* Construction of the frame */ AppFrame1.java public Frame1() { this.setVisible(true); 350 } } 21 Containment Hierarchy (tt) ➢ Intermediate Containers o Dùng để xác định vị trí của các Atomic Components o Hoặc cung cấp cơ chế để tương tác với khung chứa. o Ví dụ: ▪ JPanel ▪ JScrollPane ▪ JTabbedPane 22 Containment Hierarchy (tt) ➢ Intermediate Containers: JPanel o Là container trung gian để chứa các Atomic Components o Thường dùng để chia các component trong ứng dụng o Hàm khởi tạo: ▪ JPanel(); ▪ JPanel(LayoutManager lm); 23 Containment Hierarchy (tt) ➢ Atomic Components o Không chứa các Components khác o Dùng để cung cấp thông tin đến người sử dụng o Hoặc lấy thông tin từ người sử dụng o Ví dụ: ▪ JButton ▪ JLabel ▪ JComboBox ▪ JTextField ▪ JTable 24 Containment Hierarchy (tt) ➢ Mọi Top Level Container có 1 intermediate Container gọi là Content Pane ➢ Các atomic component phải gắn vào content pane o Ví dụ JFrame frame = new JFrame(.); JPanel pane = new JPanel(); frame.add(pane); 25 LAYOUT MANAGER 26 Layout Manager ➢Khái niệm: được dùng điều khiển cách trình bày vật lý của các phần tử GUI như là button, textbox, option button ➢ Các loại layout khác nhau: o Flow Layout o Border Layout o Grid Layout o GridBag Layout o Null Layout o … ➢ Trình quản lý layout được thiết lập bằng cách gọi phương 21 thức ‘setLayout( )’ 27 Layout Manager: FlowLayout ➢ Là trình quản lý layout mặc định cho 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 hàm khởi tạo - constructor: o public FlowLayout(); o public FlowLayout(int align); // Canh lề bên phải o public FlowLayout(int align, int hgap, int vgap); ⚫align: có các giá trị FlowLayout.LEADING, hoặc FlowLayout.TRAILING ⚫hgap, vgap: khoảng trống giữa các thành phần 28 FlowLayout (tt) Flow Layout – Left and Right Aligned 29 Layout Manager: 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 JButton b1= new JButton(“North Button”); setLayout(new BorderLayout( )); add(b1, BorderLayout.NORTH); 30 BorderLayout (tt) public void showBorderLayout(){ JFrame frame = new JFrame("Border Layout Demo"); frame.setVisible(true); 25 } 31 BorderLayout (tt) 32 Layout Manager: 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.setVisible(true); } 34 Layout Manager: 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( ); ➢ 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 35 GridBagLayout 36 Layout Manager: NullLayout ➢ Tự do trong việc định vị trí và kích thước của các components ➢ Giải pháp này dùng để xác định hoàn toàn kích thước và và vị trí của component. Frame fr = new Frame("NullLayout Demo"); fr.setLayout(null); 37 SWING COMPONENTS 38 Swing Components • 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ụ: • Frame, Window, Dialog, Applet,… • TextFields, Labels, CheckBoxes, TextArea, Button, Choice, List, Scrollbars,… 39 Swing Components 40 Sử Dụng Swing Component 41 Sử dụng Swing Components ➢ Có các phương thức add, set, get ➢ Phương thức dùng để gắn components: o objectName.add(… ); ➢ Phương thức dùng để lấy thuộc tính: o objectName.getxxx( ); ➢ Phương thức dùng để gán thuộc tính: o objectName.setxxx( ); 42 JLabel ➢ Label dùng để hiển thị một chuỗi văn bản, hình ảnh nhằm mô tả thêm thông tin cho các đối tượng khác.
➢ Các constructor của JLabel: JLabel() JLabel(String text) JLabel(String text,int hAlignment) JLabel(Icon icon) JLabel(Icon icon, int hAlignment) JLabel(String text,Icon icon,int hAlignment) hAlignment: có các giá trị LEFT, CENTER, RIGHT,LEADING, hoặc TRAILING 43 Các thuộc tính JLabel o text o icon o horizontalAlignment o verticalAlignment 44 Ví Dụ 45 JTextComponent Đây là lớp cha của tất cả các lớp hiển thị văn bản trong Swing 46 JTextField ➢ Textfield là ô nhập dữ liệu dạng văn bản trên 1 dòng. ➢ Các constructor của JTextField: JTextField() o Tạo một text field trống có số cột xác định. JTextField(int columns) o Tạo một text field với văn bản có sẵn. JTextField(String text) o Tạo một text field với văn bản có sẵn và số cột xác định.
JTextField(String text, int columns) 47 Các thuộc tính JTextField o text o horizontalAlignment o editable o columns 48 Các phương thức JTextField o getText() Trả về chuỗi ký tự trong text field. o setText(String text) Đặt chuỗi ký tự trong text field. o setEditable(boolean editable) Cho phép hoặc vô hiệu hóa soạn thảo trong text field. Mặc định editable là true.
o setColumns(int) Thiết lập số cột trong textfield. Chiều dài của textfield có thể thay đổi. 49 JTextArea ➢ TextArea là khung cho phép người sử dụng nhập vào nhiều dòng văn bản. ➢ Các constructor của JTextArea: JTextArea() JTextArea(String s) JTextArea(int rows, int columns) JTextArea(String s, int rows, int columns) 50