Bài 39-Thiết kế giao diện trong Kotlin – phần 5

[polldaddy poll=9764234]

Chúc mừng các bạn đã vượt qua 4 cửa ải GUI trong Kotlin, đây là cửa ải cuối cùng Tui muốn các bạn vượt qua. Phần này Tui sẽ nói về JTree, một trong những Control phổ biến được dùng rất nhiều trong các dự án để hiển thị dữ liệu dạng phân cấp cây thư mục:

Bài học này các bạn sẽ biết cách tạo 1 JTree, đưa được DefaultMutableTreeNode vào JTree. Đặc biệt sử dụng lập trình Hướng Đối Tượng để đưa dữ liệu lên Cây cối này, cũng như biết cách xử lý sự kiện khi người dùng nhấn vào từng Node trên Cây.

Bạn tạo một Project có cấu trúc như sau:

Lớp Nhân Viên (NhanVien) có cấu trúc (Mã, tên):

[code language=”groovy”]

package communityuni.com.model

/**
* Created by cafe on 04/06/2017.
*/
class NhanVien {
var Ma:Int=0
var Ten:String=””
constructor()
constructor(Ma: Int, Ten: String) {
this.Ma = Ma
this.Ten = Ten
}

override fun toString(): String {
return Ten
}
}

[/code]

Lớp Phòng Ban (PhongBan) có cấu trúc (mã, tên, danh sách nhân viên):

[code language=”groovy”]

package communityuni.com.model

/**
* Created by cafe on 04/06/2017.
*/
class PhongBan {
var Ma:Int=0
var Ten:String=””
var NhanViens:MutableList<NhanVien> = mutableListOf()
constructor()
constructor(Ma: Int, Ten: String) {
this.Ma = Ma
this.Ten = Ten
}

override fun toString(): String {
return Ten
}
}

[/code]

Tiếp theo thiết kế màn hình NhanSuPanel.form như hình dưới:

Chỉnh pnMain có layout manager là BorderLayout, kéo JScrollPane vào phần Center => sau đó kéo JTree vào bên trong JScrollPane.

Nhớ chọn JTree rồi checked Custom Create để nó ra hàm createUIComponents()

Sau đó Chỉnh sửa source code của NhanSuPanel, giả lập một số dữ liệu:

[code language=”java”]

package communityuni.com.ui;

import communityuni.com.model.NhanVien;
import communityuni.com.model.PhongBan;

import javax.swing.*;

import javax.swing.tree.DefaultMutableTreeNode;
import java.util.ArrayList;
import java.util.List;

/**
* Created by cafe on 04/06/2017.
*/
public class NhanSuPanel {
private JPanel pnMain;
private JTree treePhongBan;
DefaultMutableTreeNode root;
List<PhongBan>database=null;

private void loadSampleDatabaseToGUI()
{
root=new DefaultMutableTreeNode(“http://communityuni.com”);
treePhongBan=new JTree(root);
for (int i=0;i<database.size();i++)
{
PhongBan pb=database.get(i);
DefaultMutableTreeNode pbNode=new DefaultMutableTreeNode(pb);
root.add(pbNode);
for (int j=0;j<pb.getNhanViens().size();j++)
{
NhanVien nv=pb.getNhanViens().get(j);
DefaultMutableTreeNode nvNode=new DefaultMutableTreeNode(nv);

pbNode.add(nvNode);
}
}
}
private void createSampleDatabase()
{
database=new ArrayList<>();
PhongBan pns=new PhongBan(1,”Phòng tổ chức hành chánh”);
PhongBan phc=new PhongBan(2,”Phòng Kế hoạch tài chính”);
PhongBan pkhcn=new PhongBan(3,”Phòng Khách hàng cá nhân”);
PhongBan pkhdn=new PhongBan(4,”Phòng Khách hàng doanh nghiệp”);
database.add(pns);database.add(phc);database.add(pkhcn);database.add(pkhdn);
pns.getNhanViens().add(new NhanVien(1,”Trần Thị Giải”));
pns.getNhanViens().add(new NhanVien(2,”Nguyễn Thị Thoát”));
pns.getNhanViens().add(new NhanVien(3,”Hồ Văn Hạnh”));
pns.getNhanViens().add(new NhanVien(4,”Đinh Thị Phúc”));
phc.getNhanViens().add(new NhanVien(5,”Trần Văn Yên”));
phc.getNhanViens().add(new NhanVien(6,”Hoàng thị Giấc”));
phc.getNhanViens().add(new NhanVien(7,”Nguyễn Ngọc Ngàn”));
phc.getNhanViens().add(new NhanVien(8,”Ma Văn Thu”));
}

public JPanel getPnMain()
{
return pnMain;
}

private void createUIComponents() {
createSampleDatabase();
loadSampleDatabaseToGUI();
}
}

[/code]

Chạy chương trình lên ta sẽ có giao diện như Tui cung cấp ở trên.

Bây giờ để gán sự kiện cho JTree ta bấm chuột phải vào JTree rồi chọn Create Listener:

Sau đó chọn TreeSelectionListener:

Chọn valueChanged trong màn hình Select Methods to Implement:

Nhấn OK ta thấy sự kiện xuất hiện:

[code language=”java”]

public NhanSuPanel() {
treePhongBan.addTreeSelectionListener(new TreeSelectionListener() {
@Override
public void valueChanged(TreeSelectionEvent e) {

}
});
}

[/code]

Bổ sung coding để kiểm tra Node nào được nhấn:

[code language=”java”]

public NhanSuPanel() {
treePhongBan.addTreeSelectionListener(new TreeSelectionListener() {
@Override
public void valueChanged(TreeSelectionEvent e) {
DefaultMutableTreeNode node= (DefaultMutableTreeNode) treePhongBan.getLastSelectedPathComponent();
switch (node.getLevel())
{
case 0:
JOptionPane.showMessageDialog(null,”Bạn nhấn Root=”+node.getUserObject());
break;
case 1:
PhongBan pb= (PhongBan) node.getUserObject();
JOptionPane.showMessageDialog(null,pb.getTen());
break;
case 2:
NhanVien nv= (NhanVien) node.getUserObject();
JOptionPane.showMessageDialog(null,nv.getTen());
break;
}
}
});
}

[/code]

Như vậy ta dùng treePhongBan.getLastSelectedPathComponent(); để biết được Node nào được chọn, dùng node.getLevel() để lấy chính xác cấp (thực ra là lấy đối tượng), ứng với mỗi level ta sẽ kiểm tra để lấy Đối tượng.