Bài giảng Lập trình hướng đối tượng - Bài 6: Ứng dụng đồ họa, liệt kê các số nguyên tố - Lê Hồng Phương

Bài 6: Ứng dụng đồ họa – Liệt kê các số nguyên tố Lê Hồng Phương phuonglh@gmail.com Khoa Toán-Cơ-Tin học Trường ĐH Khoa học Tự nhiên, ĐHQG Hà Nội 2012-2013 Object-Oriented Programming: Introduction to Swing 2 Nội dung ● Liệt kê các số nguyên tố ● Các thành phần đồ họa ● Quản lí sự kiện ● Sử dụng lớp nội 2012-2013 Object-Oriented Programming: Introduction to Swing 3 Liệt kê các số nguyên tố ● Sử dụng thư viện Swing để phát triển một ứng dụng với giao diện đồ họa cho phép liệt kê các số nguyên tố. ● Sử dụng lại lớp PrimeNumbers (Bài giảng 1) 2012-2013 Object-Oriented Programming: Introduction to Swing 4 Liệt kê các số nguyên tố ● Cửa sổ ứng dụng có tên “Prime Numbers”, gồm hai panô. ● Panô Input chứa 3 thành phần: – Một nhãn (JTextLabel) – Một trường văn bản (JTextField) – Một nút bấm (JButton) ● Panô Result chứa 2 thành phần: – Một vùng văn bản (JTextArea) – Một khung cuộn (JScrollPane) 2012-2013 Object-Oriented Programming: Introduction to Swing 5 Liệt kê các số nguyên tố ● Khi nhập một số n vào trường văn bản và bấm phím Ok hoặc gõ Enter thì vùng văn bản hiển thị các số nguyên tố nhỏ hơn n. – Mỗi số nguyên tố nằm trên một dòng – Nếu có nhiều số nguyên tố, vượt quá số dòng của màn hình thì thanh cuộn tự động xuất hiện. 2012-2013 Object-Oriented Programming: Introduction to Swing 6 Các thành phần đồ họa ● Chương trình sử dụng các thành phần đồ họa sau của thư viện Swing: – JFrame (cửa sổ ứng dụng) – JPanel (hai panô Input và Result) – JLabel – JButton – JTextField – JTextArea – JScrollPane – BorderLayout, TitledBorder 2012-2013 Object-Oriented Programming: Introduction to Swing 7 Chương trình ● Các lớp của chương trình: – PrimeNumbers – PrimeNumberFrame (là một JFrame) – PrimeNumberApp (chứa hàm main) ● PrimeNumbers không chứa các thành phần đồ họa, chỉ cài đặt thuật toán kiểm tra và liệt kê số nguyên tố. 2012-2013 Object-Oriented Programming: Introduction to Swing 8 Chương trình: PrimeNumberApp public class PrimeNumberApp { public static void main(String[] args) { PrimeNumberFrame app = new PrimeNumberFrame(); app.setVisible(true); } } 2012-2013 Object-Oriented Programming: Introduction to Swing 9 Chương trình: PrimeNumberFrame public class PrimeNumberFrame extends JFrame { private JTextField nTextField; private JButton okButton; private JTextArea resultTextArea; private PrimeNumbers pn; public PrimeNumberFrame() { setTitle("Prime Numbers"); setSize(200, 400); setDefaultCloseOperation(EXIT_ON_CLOSE); initialize(); } // more code goes here... } Các phương thức kế thừa từ JFrame 2012-2013 Object-Oriented Programming: Introduction to Swing 10 Chương trình: PrimeNumberFrame ● Một lớp vật chứa (JFrame, JPanel...) dùng để chứa các thành phần đồ họa (nút bấm – JButton, trường văn bản – JTextField, nhãn văn bản – JLabel...) ● Swing sử dụng lớp LayoutManager để quản lí việc bài trí các thành phần đồ họa. ● Có nhiều kiểu bài trí khác nhau: – BorderLayout – BoxLayout, CardLayout, FlowLayout, GridBagLayout, GridLayout, GroupLayout, SpringLayout 2012-2013 Object-Oriented Programming: Introduction to Swing 11 Chương trình: PrimeNumberFrame ● BorderLayout cho phép đặt đối tượng vào một trong 5 vị trí: – NORTH – SOUTH – EAST – WEST – CENTER ● Kích thước của các đối tượng thường được co dãn tự động theo kích thước của thành phần vật chứa. NORTH WEST CENTER EAST SOUTH 2012-2013 Object-Oriented Programming: Introduction to Swing 12 Chương trình: PrimeNumberFrame private void initialize() { pn = new PrimeNumbers(); // prepare the input panel JPanel inputPanel = new JPanel(); inputPanel.setBorder(new TitledBorder("Input")); inputPanel.setLayout(new BorderLayout()); inputPanel.add(new JLabel("Enter n = "), BorderLayout.WEST); nTextField = new JTextField(); inputPanel.add(nTextField); okButton = new JButton("Ok"); inputPanel.add(okButton, BorderLayout.EAST); // add the input panel to the frame getContentPane().add(inputPanel, BorderLayout.NORTH); // more code goes here } 2012-2013 Object-Oriented Programming: Introduction to Swing 13 Chương trình: PrimeNumberFrame private void initialize() { // ... // prepare the result panel JPanel resultPanel = new JPanel(new BorderLayout()); resultPanel.setBorder(new TitledBorder("Result")); resultTextArea = new JTextArea(); resultPanel.add(new JScrollPane(resultTextArea), BorderLayout.CENTER); // add the output panel to the frame getContentPane().add(resultPanel, BorderLayout.CENTER); // more code goes here } Gọi một hàm tạo khác của lớp JPanel 2012-2013 Object-Oriented Programming: Introduction to Swing 14 Chương trình: PrimeNumberFrame class EnumeratePrimeNumbersListener implements ActionListener { @Override public void actionPerformed(ActionEvent event) { int n = Integer.parseInt(nTextField.getText()); String primes = pn.listPrimeNumbers(n); resultTextArea.setText(primes); } } ● Quản lí sự kiện: – Viết một bộ nghe sự kiện (bấm phím, kích chuột...), là một lớp cài đặt giao diện ActionListener – Giao diện này có một phương thức duy nhất. public void actionPerformed(ActionEvent event) 2012-2013 Object-Oriented Programming: Introduction to Swing 15 Chương trình: PrimeNumberFrame class EnumeratePrimeNumbersListener implements ActionListener { @Override public void actionPerformed(ActionEvent event) { int n = Integer.parseInt(nTextField.getText()); String primes = pn.listPrimeNumbers(n); resultTextArea.setText(primes); } } ● Lớp EnumeratePrimeNumbersListener là lớp nội, nằm trong lớp PrimeNumberFrame. ● Vì sao sử dụng lớp nội? – Tiện lợi trong việc truy nhập các dữ liệu của lớp chứa nó (Ví dụ, sử dụng các trường pn, resultTextArea của lớp PrimeNumberFrame). 2012-2013 Object-Oriented Programming: Introduction to Swing 16 Chương trình: PrimeNumberFrame ● Gắn bộ nghe sự kiện bấm phím Enter (hoặc kích chuột trái) cho trường văn bản và nút bấm: private void initialize() { // ... // add an action listener to the Ok button EnumeratePrimeNumbersListener listener = new EnumeratePrimeNumbersListener(); okButton.addActionListener(listener); // add the same action listener to the text field nTextField.addActionListener(listener); } 2012-2013 Object-Oriented Programming: Introduction to Swing 17 Tham khảo thêm ● Graphical User Interfaces – ● Creating GUI with JFC/Swing – ● API Documentation: – – Browse javax.swing.* packages