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

[polldaddy poll=9764234]

Ở bài 35, bài 36 Các bạn đã biết thiết kế giao diện cũng như xử lý sự kiện trong Kotlin. Trong bài này Tui tiếp tục trình bày một số control nâng cao đó là JTable để các bạn có thể hiển thị dữ liệu dạng danh sách cũng nhằm củng cố thêm các kiến thức đã học.

Chúng ta sẽ làm bài Quản Lý sản phẩm có giao diện như dưới đây:

Bài trên sẽ có JTable để lưu trữ danh sách sản phẩm. Khi nhấn vào Sản phẩm nào thì thông tin chi tiết của nó sẽ được hiển thị vào mục chi tiết bên dưới.

Chức năng các nút:

Lưu: Đưa Sản phẩm vào JTable

Tiếp: Xóa trắng dữ liệu trong mục chi tiết và đưa con trỏ văn bản về ô nhập mã Sản phẩm

Xóa: Xóa sản phẩm nào đang chọn trên JTable

Thoát: Bấm vào để thoát phần mềm

Bài này Tui tập trung vào việc hướng dẫn cách thiết kế giao diện, gán sự kiện để các bạn thật rành về giao diện. Tui chưa tập trung vào xử lý hướng đối tượng. Bài sau Tui sẽ làm tổng hợp các kiến thức trong khóa học Kotlin từ cơ bản cho tới Lưu/đọc file trên giao diện có Menu và các Control đã học…

Và Tui nhắc lại là Kotlin đang dùng thư viện JVM, nên các bạn muốn thực sự hiểu sâu về Java để hỗ trợ cho Kotlin thì các bạn có thể đăng ký học khóa Lập trình Java nâng cao tại đây hoặc tại đây . Kotlin có thể gọi Java và Java có thể gọi được Kotlin , Android cũng dùng cả 2 ngôn ngữ này để lập trình nên các bạn cần biết cả 2.

Ta tạo 1 Project tên là HocGUIPhan3 có, đưa thư việt Jgoodies, tạo package như hình dưới đây:

Các giao diện sẽ nằm trong package: communityuni.com.ui . Chú ý là giao diện SanPhamPanel khi bạn tạo ra thì nó tự động chia làm 2 Lớp (Lớp SanPhamPanel.form là nơi chúng ta thiết kế kéo thả giao diện, lớp SanPhamPanel là nơi cho ta xử lý các nghiệp vụ cũng như khởi tạo thêm các custom component)

Tập tin chứa hàm main để chạy phần mềm nằm trong package: communityuni.com.test

trong package communityuni.com.ui bạn tạo một Form có tên SanPhamPanel để thiết kế giao diện như dưới đây (khoan hãy để ý tới lớp SanPhamUI, Tui sẽ trình bày sau):

Bạn nhìn vào màn hình Component Tree để biết cách bố trí các Control trên giao diện, cũng như đặt tên chính xác cho chúng.

Chú ý là Jpanel pnMain bạn chọn layout manager là FormLayout Jgoodies, các Jpanel còn lại chọn Layout manager là FlowLayout hết nhé các bạn.

Bây giờ bạn chọn Jtable (tblSanPham) rồi checked vào Custom Create:

Lúc này chương trình sẽ tự động phát sinh ra hàm createUIComponents() trong lớp xử lý nghiệp vụ:

Ta sẽ khởi tạo và hiệu chỉnh giao diện bằng coding trong hàm này, Control nào muốn được thay đổi bằng coding thì cứ checked vào Custom Create.

Có rất nhiều cách tạo bảng, ở đây ta dùng DefaultTableModel , để tạo bảng ta có thể chỉnh như sau:

[code language=”java”]

private JTable tblSanPham;
private DefaultTableModel tableModelSanPham;
private void createUIComponents() {
tableModelSanPham=new DefaultTableModel();
tableModelSanPham.addColumn(“Mã Sản Phẩm”);
tableModelSanPham.addColumn(“Tên Sản Phẩm”);
tableModelSanPham.addColumn(“Đơn giá Sản Phẩm”);
tblSanPham=new JTable(tableModelSanPham);
}

[/code]

Ở trên là tạo 1 JTable  có 3 cột (mã, tên và đơn giá).

Để gán sự kiện cho Jtable ta làm tương tự như gán sự kiện cho JButton mà Tui đã hướng dẫn ở bài 36 (do đó Tui không có nói lại cách gán sự kiện của các JButton, các bạn tự xử): Ta bấm chuột phải vào Jtable rồi chọn Create Listener:

Sau đó chọn Mouse listener:

Sau đó chọn Mouse pressed hoặc mouse click:

Bấm Ok để tạo, lúc này ta có sự kiện Mouse click:

[code language=”java”]

tblSanPham.addMouseListener(new MouseAdapter() {
@Override
public void mousePressed(MouseEvent e) {
super.mousePressed(e);

}
});

[/code]

Ta bổ sung coding cho sự kiện này để lấy hiển thị thông tin chi tiết lên các JTextField:

[code language=”java”]

tblSanPham.addMouseListener(new MouseAdapter() {
@Override
public void mousePressed(MouseEvent e) {
super.mousePressed(e);
int row= tblSanPham.getSelectedRow();
String ma=tblSanPham.getValueAt(row,0).toString();
String ten=tblSanPham.getValueAt(row,1).toString();
double gia=Double.parseDouble(tblSanPham.getValueAt(row,2).toString());
txtMa.setText(ma);
txtTen.setText(ten);
txtDonGia.setText(gia+””);
}
});

[/code]

Cuối cùng ta bổ sung cho toàn bộ các sự kiện của các JButton trên giao diện trong lớp xử lý nghiệp vụ như sau:

[code language=”java”]

package communityuni.com.ui;

import javax.swing.*;
import javax.swing.table.DefaultTableModel;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.Vector;

/**
* Created by cafe on 04/06/2017.
*/
public class SanPhamPanel {
private JPanel pnMain;
private JTable tblSanPham;
private DefaultTableModel tableModelSanPham;
private JButton btnLuu;
private JButton btnTiep;
private JButton btnXoa;
private JButton btnThoat;
private JTextField txtMa;
private JTextField txtTen;
private JTextField txtDonGia;

public SanPhamPanel() {
btnTiep.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
txtMa.setText(“”);
txtTen.setText(“”);
txtDonGia.setText(“”);
txtMa.requestFocus();
}
});
btnThoat.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
System.exit(0);
}
});
btnLuu.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
Vectorvector=new Vector();
vector.add(txtMa.getText());
vector.add(txtTen.getText());
vector.add(txtDonGia.getText());
tableModelSanPham.addRow(vector);
}
});
tblSanPham.addMouseListener(new MouseAdapter() {
@Override
public void mousePressed(MouseEvent e) {
super.mousePressed(e);
int row= tblSanPham.getSelectedRow();
String ma=tblSanPham.getValueAt(row,0).toString();
String ten=tblSanPham.getValueAt(row,1).toString();
double gia=Double.parseDouble(tblSanPham.getValueAt(row,2).toString());
txtMa.setText(ma);
txtTen.setText(ten);
txtDonGia.setText(gia+””);
}
});
tblSanPham.addMouseListener(new MouseAdapter() {
});
btnXoa.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
if(tblSanPham.getSelectedRow()>=0)
tableModelSanPham.removeRow(tblSanPham.getSelectedRow());
}
});
}

private void createUIComponents() {
tableModelSanPham=new DefaultTableModel();
tableModelSanPham.addColumn(“Mã Sản Phẩm”);
tableModelSanPham.addColumn(“Tên Sản Phẩm”);
tableModelSanPham.addColumn(“Đơn Giá Sản Phẩm”);
tblSanPham=new JTable(tableModelSanPham);
}
public JPanel getPnMain()
{
return pnMain;
}
}

[/code]

Bây giờ trong package communityuni.com.ui ta tạo một lớp giao diện tên SanPhamUI kế thừa JFrame có coding như sau:

[code language=”java”]

package communityuni.com.ui;

import javax.swing.*;

/**
* Created by cafe on 04/06/2017.
*/
public class SanPhamUI extends JFrame {
public SanPhamUI(String title)
{
super(title);
setContentPane(new SanPhamPanel().getPnMain());
}
public void showWindow()
{
setSize(500,500);
setLocationRelativeTo(null);
setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
setVisible(true);
}
}

[/code]

Cuối cùng trong package communityuni.com.test ta tạo 1 file Kotlin AppTestSanPhamUI.kt để chạy phần mềm:

[code language=”groovy”]

package communityuni.com.test

import communityuni.com.ui.SanPhamUI

/**
* Created by cafe on 04/06/2017.
*/
fun main(args: Array) {
var gui:SanPhamUI= SanPhamUI(“Trần Duy Thanh- Chương trình quản lý Sản phẩm”)
gui.showWindow()
}

[/code]

Chạy chương trình lên ta sẽ có giao diện như Tui đã yêu cầu ở trên.

Như vậy Tui đã hướng dẫn xong cách làm thế nào để tạo ra một giao diện có JTable trong Kotlin, cách gán sự kiện cho JTable, cách bố trí giao diện cũng như sử dụng Form Layout JGoodies,  Flow Layout. Bài sau Tui sẽ hướng dẫn các bạn bài tổng hợp Kotlin từ cơ bản tới Hướng đối tượng, lưu file, đọc file, Menu trong Kotlin để hiển thị và lưu trữ danh sách dữ liệu, Các bạn chú ý theo dõi nhé.

Các bạn có thể tải source code bài này ở đây: http://www.mediafire.com/file/ko320gej2mkl737/HocGUIPhan3.rar

Hẹn gặp các bạn ở những bài tiếp theo

Chúc các bạn thành công!

Trần Duy Thanh (http://communityuni.com/)