Hướng dẫn lập trình giao diện trong java năm 2024
1. Khởi tạo giao diện màn hình chínhBước 1: Tạo một JFrame trong gói view Show Đặt tên là MainJFrame.java Tại MainJFrame.java nếu như đang ở mục Source thì bạn chuyển qua mục Design để tiến hành thiết kế bố cục cho giao diện chương trình. Bên góc phải tại mục Palette chứa các Swing Containers, Swing Controls… dùng để thiết kế giao diện như nút nhấn, khung nhập dữ liệu. Mục Properties dùng để thay đổi các thuộc tính của đối tượng như chỉnh màu sắc, kiểu chữ, kích thước… Bạn chỉ cần chọn Swing Containers, Swing Controls… phù hợp sau đó kéo thả vào mục Design. 2. Tạo danh mục quản lýBây giờ chúng ta sẽ thiết kế giao diện cho phần menu bên trái màn hình, khi người dùng nhấn vào menu nào sẽ hiển thị dữ liệu ở nội dung tương ứng bên phải màn hình. Như hình trên chúng ta cần tạo 2 Panel, Panel số 1 sẽ hiển thị danh mục và Panel số 2 sẽ hiển thị dữ liệu. Phần dấu mũi tên sẽ giúp bạn canh chỉnh kích thước tự co dãn có thể ngang hay dọc theo kích thước màn hình. Với mỗi danh mục bạn cần tạo một Panel trong đó sẽ chứa một Label. Label chúng ta sẽ thiết lập các thuộc tính như là màu sắc, kích thước chữ, hình ảnh. 3. Xử lý sự kiệnBạn cần tạo một số Panel như TrangChuPanel , HocVienPanel, LopHocPanel, ThongKePanel trong gói view bằng cách chuột phải chọn mục New > JPanel Form… Trong gói bean bạn tạo lớp DanhMucBean.java gồm một số trường sau để nhằm hỗ trợ xử lý bắt sự kiện khi nhấn vào mỗi Label. Lớp DanhMucBean.java
Tiếp theo bạn cần tạo mới lớp ChuyenManHinhController.java trong gói controller để xử lý chuyển qua lại các màn hình với nhau. Khi vào ứng dụng thì sẽ hiển thị mặc định TrangChinhPanel
Hàm xử lý sự kiện khi nhấn vào Label bao gồm sự kiện nhấn chuột, di chuyển chuột vào và ra khỏi Label sẽ thay đổi màu nền của Panel. ); pane.add(hi);pane.add(reg);pane.add(nhap);pane.add(txt); btn=new JButton("OK"); btn.setActionCommand("btn"); btn.setMnemonic(KeyEvent.VK_O); //Su dung phim tat Alt+C btn.addActionListener(new ButtonListener()); // nut btn dang ky xu ly su kien btn1 = new JButton("Cancel"); // Tao nut "Cancel" btn1.setActionCommand("btn1"); btn1.setMnemonic(KeyEvent.VK_C); //Su dung phim tat Alt+C btn1.addActionListener(new ButtonListener()); // nut btn1 dang ky xu ly su kien pane.add(btn); pane.add(btn1); fr = new JFrame("Thu nghiem"); fr.setContentPane Swing là thư viện các đối tượng để lập trình giao diện đồ hoạ trong Java. Trước đây thư viện AWT là thư viện tiêu chuẩn cho lập trình giao diện, sau này Swing được phát triển kế thừa một số lớp của AWT, hoạt động nhẹ hơn và độc lập với nền tảng thiết bị, và bổ sung thêm nhiều lớp hiển thị mạnh mẽ hơn. Mỗi thành phần trong Swing được gọi là component. Component được chia làm 2 loại:
Cách tổ chức code khi lập trình giao diện :Các bạn xem các ví dụ mẫu trên mạng thấy rằng ngta đều tống hết code vào trong 1 file. Điều này giúp bạn dễ nhìn, dễ tiếp cận ở những ví dụ đầu, nhưng cách làm này ko tốt cho sự phát triển về sau, khi mà số lượng component tăng. Sau đây là cách tổ chức code mà mình thường làm: | src |– gui | — | — panel | — | — | — MainPanel.java | — | — Gui.java | — | — ICommon.java | — logic | — | — Logic.java | — main | — | — Main.java trong đó “ICommon” là interface định nghĩa 3 phương thức initComponent(), addComponent() và addEvent(). Sau này các Panel và Frame sẽ implement interface này để chúng ta thuận tiện cài đặt và thêm các component bên trong, tránh viết lộn xộn. public interface ICommon { void initComp(); void addComp(); void addEvent(); } “Gui” là lớp định nghĩa Frame và thêm Panel vào trong Frame đó. public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}“MainPanel” là lớp định nghĩa Panel trong Frame và thêm các component hiển thị trong nó. public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}Còn “Main” chỉ đơn giản là chứa phương thức main() để tạo đối tượng Frame. public class Main { public static void main(String[] args) { }
}Cách sử dụng một số component :Các component đều có các phương thức cơ bản sau: public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}1 : cài đặt kích thước. public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}2 : cài đặt vị trí (lấy vị trí góc trên bên trái làm gốc). public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}3 : là phương thức ghép chung cả setLocation và setSize. public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}4 : cài đặt màu nền. Có 2 cách truyền tham số màu: hoặc là dùng màu được quy ước sẵn trong lớp Color, ví dụ như “Color.white”, hoặc tạo một đối tượng Color, ví dụ “new Color(255, 0, 0)”. Có nhiều cách truyền tham số để khởi tạo đối tượng Color, các bạn tham khảo thêm. public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}5 : cài đặt màu chữ. public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}6 : cài đặt ẩn hay hiện. Thường thì chỉ Frame hay Window bắt buộc phải thiết lập “setVisible(true)”, còn các component khác thì mặc định thiết lập này true rồi. JFrame :public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}7 : cài đặt tên tiêu đề. public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}8 : đặt cho cửa sổ xuất hiện ở giữa màn hình. public class Gui extends JFrame implements ICommon { private MainPanel mainPanel; public Gui { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}9 : cài đặt ko cho phép kéo thả thay đổi kích thước cửa sổ. public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}0 : lựa chọn ko làm gì khi bạn nhấn nút đóng cửa sổ (nút chéo đỏ). Bạn có thể đặt giá trị “EXIT_ON_CLOSE” để thoát chương trình khi nhấn nút đóng, tuy nhiên cách này ko nên dùng vì ko phải lúc nào nó cũng thoát hoàn toàn. Cách tốt nhất là chúng ta viết xử lý sự kiện riêng (mình sẽ trình bày sau). public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}1 : cài đặt cách bố trí các component trong container. Về các loại Layout mình sẽ trình bày sau. public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}2 : sau khi khởi tạo component thì chúng ta thêm component đó vào container, ví dụ “add(mainPanel)”. Lưu ý phải thêm vào khung chứa thì component đó mới được hiển thị. JPanel :public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}1 : tương tự JFrame. public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}2 : tương tự JFrame. JLabel :public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}5 : đặt nội dung text cần hiển thị. public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}6 : cài đặt font. public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}7 : mặc định màu nền của Label là trong suốt, đó là bạn phải cài đặt tính đục bằng true thì phương thức cài đặt màu nền setBackground mới có hiệu lực. public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}8 : căn text vào giữa Label theo hàng ngang. public class MainPanel extends JPanel implements ICommon { private JButton btnCount; private JLabel lbCount; private int count; public MainPanel { }
@Override
public void initComp() { }
@Override
public void addComp() { }
@Override
public void addEvent() { }
}9 : căn text vào giữa Label theo hàng dọc. Bạn có thể truyền giá trị public class Main { public static void main(String[] args) { }
}0 để căn sang lề phải. JButton :public class Main { public static void main(String[] args) { }
}1 : đặt nội dung text cần hiển thị. public class Main { public static void main(String[] args) { }
}2 : tương tự. JTextField :public class Main { public static void main(String[] args) { }
}3 : tương tự. public class Main { public static void main(String[] args) { }
}4 : tương tự. public class Main { public static void main(String[] args) { }
}5 : ngăn ko cho chỉnh sửa nội dung text từ bên ngoài. JTextArea :public class Main { public static void main(String[] args) { }
}3 : tương tự. public class Main { public static void main(String[] args) { }
}4 : tương tự. public class Main { public static void main(String[] args) { }
}8 : tương tự. public class Main { public static void main(String[] args) { }
}9 : cài đặt xuống dòng khi tràn chiều dài khung text, tuy nhiên nó ko cắt nguyên vẹn từ xuống dòng mới đâu. private DefaultListModel lstModelStudent; private JList lstStudent; private JScrollPane scroll; .... lstStudent = new JList(); scroll = new JScrollPane(lstStudent); add(scroll); updateDataListModelStudent(); .... private void updateDataListModelStudent() { ArrayList listStudent = manager.getListStudent(); lstModelStudent = new DefaultListModel(); for (Student item : listStudent) { }
lstStudent.setModel(lstModelStudent);
}0 : cho phép cắt nguyên vẹn từ xuống dòng mới. JList :JList là một component hiển thị danh sách các đối tượng, cho phép người dùng chọn được item. Bản thân JList chỉ là thành phần hiển thị. Để nạp dữ liệu cho JList hiển thị, cần có đối tượng model để chứa dữ liệu đó là DefaultListModel. Thông thường để truyền dữ liệu vào model cần có mảng dữ liệu, mảng đó là kết quả của các quá trình tìm kiếm, sắp xếp. Con đường dữ liệu được hiển thị ra JList như sau: ArrayList –> DefaultListModel –> JList Ngoài ra JList thường phải đặt trong một loại component khung chứa là JScrollPane, vì JList ko hỗ trợ thanh cuộn, thanh cuộn là do JScrollPane cung cấp. private DefaultListModel lstModelStudent; private JList lstStudent; private JScrollPane scroll; .... lstStudent = new JList(); scroll = new JScrollPane(lstStudent); add(scroll); updateDataListModelStudent(); .... private void updateDataListModelStudent() { ArrayList listStudent = manager.getListStudent(); lstModelStudent = new DefaultListModel(); for (Student item : listStudent) { }
lstStudent.setModel(lstModelStudent);
}JList ko có khả năng hiển thị nhiều trường (thuộc tính) của đối tượng trên cùng một hàng. Muốn hiển thị được nhiều trường, bạn chuyển qua dùng component JTable. JTable :Tương tự JList, con đường hiển thị dữ liệu ra màn hình như sau: ArrayList –> DefaultTableModel –> JTable private static final String COLUMN_NAME = {"Mã HS", "Tên", "Tuổi"}; private DefaultTableModel tbModelStudent; private JTable tbStudent; private JScrollPane scroll; .... tbStudent = new JTable(); scroll = new JScrollPane(tbStudent); add(scroll); updateDataTableModelStudent(); .... private void updateDataTableModelStudent() { ArrayList listStudent = manager.getListStudent(); tbModelStudent = new DefaultTableModel(COLUMN_NAME, 0); for (Student item : listStudent) { }
tbStudent.setModel(tbModelStudent);
}JTable chỉ có khả năng hiển thị dữ liệu dạng String, nên với dữ liệu kiểu số hay boolean thì các bạn nhớ chuyển đổi thành chuỗi nhé. JComboBox :Tương tự JList, chỉ khác là nó hiển thị danh sách dạng sổ xuống và có thuộc tính lựa chọn. ArrayList –> DefaultComboBoxModel –> JComboBox private DefaultComboBoxModel cbbModelStudent; private JComboBox cbbStudent; .... cbbStudent = new JComboBox(); add(cbbStudent); updateDataComboBoxModelStudent(); .... private void updateDataComboBoxModelStudent() { ArrayList listStudent = manager.getListStudent(); cbbModelStudent = new DefaultComboBoxModel(); for (Student item : listStudent) { }
cbbStudent.setModel(cbbModelStudent);
}JComboBox ko cần JScrollPane làm khung. private DefaultListModel lstModelStudent; private JList lstStudent; private JScrollPane scroll; .... lstStudent = new JList(); scroll = new JScrollPane(lstStudent); add(scroll); updateDataListModelStudent(); .... private void updateDataListModelStudent() { ArrayList listStudent = manager.getListStudent(); lstModelStudent = new DefaultListModel(); for (Student item : listStudent) { }
lstStudent.setModel(lstModelStudent);
}1 : trả về chỉ số của lựa chọn. JCheckBox :Một số phương thức tương tự như Label. JRadioButton :JProgressBar :private DefaultListModel lstModelStudent; private JList lstStudent; private JScrollPane scroll; .... lstStudent = new JList(); scroll = new JScrollPane(lstStudent); add(scroll); updateDataListModelStudent(); .... private void updateDataListModelStudent() { ArrayList listStudent = manager.getListStudent(); lstModelStudent = new DefaultListModel(); for (Student item : listStudent) { }
lstStudent.setModel(lstModelStudent);
}2 : đặt giá trị cực đại của thanh tiến trình. Lưu ý giá trị cực đại cực tiểu này ko liên quan gì đến kích thước width, height của đối tượng JProgressBar. private DefaultListModel lstModelStudent; private JList lstStudent; private JScrollPane scroll; .... lstStudent = new JList(); scroll = new JScrollPane(lstStudent); add(scroll); updateDataListModelStudent(); .... private void updateDataListModelStudent() { ArrayList listStudent = manager.getListStudent(); lstModelStudent = new DefaultListModel(); for (Student item : listStudent) { }
lstStudent.setModel(lstModelStudent);
}3 : đặt giá trị cực tiểu. private DefaultListModel lstModelStudent; private JList lstStudent; private JScrollPane scroll; .... lstStudent = new JList(); scroll = new JScrollPane(lstStudent); add(scroll); updateDataListModelStudent(); .... private void updateDataListModelStudent() { ArrayList listStudent = manager.getListStudent(); lstModelStudent = new DefaultListModel(); for (Student item : listStudent) { }
lstStudent.setModel(lstModelStudent);
}4 : đặt giá trị hiện tại. private DefaultListModel lstModelStudent; private JList lstStudent; private JScrollPane scroll; .... lstStudent = new JList(); scroll = new JScrollPane(lstStudent); add(scroll); updateDataListModelStudent(); .... private void updateDataListModelStudent() { ArrayList listStudent = manager.getListStudent(); lstModelStudent = new DefaultListModel(); for (Student item : listStudent) { }
lstStudent.setModel(lstModelStudent);
}5 : khi đặt tham số true, chữ thông báo tiến trình sẽ hiển thị ở giữa thanh tiến trình. Mặc định chữ là phần trăm tiến độ. |