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

Trong bài 35 Tui đã hướng dẫn các bạn cách làm thế nào để tạo được giao diện trong Kotlin. Trong bài này Tui tiếp tục làm thêm một ví dụ về thiết kế giao diện Giải Phương Trình Bậc 1, sử dụng layout FormLayout (Jgoodies) và cách gán sự kiện cho các Control. Giao diện đơn giản như sau:

Bạn vào link sau để tải thư viện http://www.java2s.com/Code/JarDownload/jgoodies/jgoodies-forms.jar.zip , giải nén ra và lấy thư viên jgoodies-forms.jar (khoảng 86kb) rồi tham chiếu nào vào Project giống như bài 32 mà Tui đã hướng dẫn, sau đó thiết kế giao diện theo cấu trúc dưới đây (Ngay màn hình đầu tiên tạo Giao diện thì nhớ chọn Layout manager là FormLayout(jGoodies):

Sau đó các dòng JPanel của Hệ số a, hệ số b, kết quả, các button bạn chọn Layout Manager là FLowLayout (tức là chỉ có pnMain mặc định là FormLayout(JGoodies).

Đặt tên các Control giống như hình trên (chọn field name trong cửa sổ Property để đặt tên cho Control):

Tiếp theo gán sự kiện cho các Button:

1) Sự kiện cho Button Thoát:

Bấm chuột phải vào Button Thoát/ chọn Create Listener:

Sau đó chọn Action Listener:

Rồi chọn actionPerformed:

Lúc này chương trình sẽ tự động xuất hiện sự kiện cho Button thoát (nó tự tạo trong Constructor):

import javax.swing.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

/**
* Created by cafe on 03/06/2017.
*/
public class PTB1UI {
private JTextField txtA;
private JTextField txtB;
private JTextField txtKetQua;
private JButton btnThoat;
private JButton btnGiai;
private JButton btnTiep;
private JPanel pnMain;

public PTB1UI() {
btnThoat.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
System.exit(0);
}
});

}

}

Tương tự như vậy ta lặp gán sự kiện cho Button  Giải, Button Tiếp, Đồng thời bổ sung thêm getpnMain để truy suất panel pnMain. Cuối cùng coding sẽ như sau:

import javax.swing.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

/**
* Created by cafe on 03/06/2017.
*/
public class PTB1UI {
private JTextField txtA;
private JTextField txtB;
private JTextField txtKetQua;
private JButton btnThoat;
private JButton btnGiai;
private JButton btnTiep;
private JPanel pnMain;

public PTB1UI() {
btnThoat.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
System.exit(0);
}
});
btnGiai.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
double a=Double.parseDouble(txtA.getText());
double b=Double.parseDouble(txtB.getText());
if(a==0 && b==0)
txtKetQua.setText("Vô số nghiệm");
else if(a==0 && b!=0)
txtKetQua.setText("Vô nghiệm");
else
txtKetQua.setText("x="+(-b/a));
}
});
btnTiep.addActionListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent e) {
txtA.setText("");
txtB.setText("");
txtKetQua.setText("");
txtA.requestFocus();
}
});
}

public JPanel getPnMain()
{
return pnMain;
}
}

Cuối cùng ta tạo một Kotlin File để chạy phần mềm (TestPhuongTrinhBac1UI.kt):

import javax.swing.JFrame

/**
* Created by cafe on 03/06/2017.
*/
fun main(args: Array) {
var frm:JFrame = JFrame("Trần Duy Thanh")
frm.contentPane= PTB1UI().pnMain
frm.defaultCloseOperation=JFrame.EXIT_ON_CLOSE
frm.setSize(300,250)
frm.setLocationRelativeTo(null)
frm.isVisible=true
}

Chạy chương trình lên ta sẽ có giao diện như 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 trong Kotlin, cách gán sự kiện, cách bố trí giao diện cũng như sử dụng Form Layout JGoodies. Bài sau Tui sẽ hướng dẫn các bạn bài JTable để hiển thị 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/066jaszvy7oo5up/HocGUIPhan2.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/)