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

Tính tới thời điểm 03/06/2017 thì Kotlin hiện tại chưa phát triển GUI Framework riêng mà đang sử dụng JVM để thiết kế giao diện (dùng awt, swing, javafx). Công cụ IntelliJ IDEA có hỗ trợ Drag & Drop giúp Lập Trình Viên có thể kéo thả thiết kế giao diện lúc Design Time.

Ta tạo một Projec tên là HocGUIPhan1, sau đó New một GUI Form như cách sau:

Bấm chuột phải vào Project/ chọn New / rồi cọn GUI Form, màn hình New GUI Form sẽ xuất hiện như dưới đây:

Form Name: Đặt tên cho Lớp giao diện, ví dụ HelloWorldUI

Base layout manager: Chọn layout mặc định cho giao diện, dĩ nhiên ta có thể thay đổi sau đó. Layout chính là nơi tổ chức sắp xếp các Control trên giao diện. Tại màn hình này, Intelliz IDEA cung cấp một số Layout sau:

Vì lần đầu thử nghiệm, cứ để mặc định như IDEA chọn. Và Tui cũng không đi sâu vào giải thích từng thành phần, vì nó có sẵn trong Java Swing, các bạn muốn chi tiết thì đăng ký học tại đây:

Create bound class: Nên checked để nó tự động tạo ra lớp tương tác giao diện.

Sau đó bạn nhấn OK để tạo, giao diện sẽ như hình dưới đây:

Ở màn hình trên Tui đánh dấu 5 phần, mỗi phần có những chức năng và ý nghĩa khác nhau:

Mục 1: Là cấu trúc tổ chức các Lớp, thư viện

Mục 2: Cửa sổ Component Tree, là nơi cho ta biết cấu trúc layout của các control trên giao diện, nó cũng cho phép ta kéo thả control vào đây.

Mục 3: Cửa sổ Properties, là nơi cho phép ta cấu hình các thông số cho control như: Màu mè, chữ, kích thước, tên …

Mục 4: Là nơi thiết kế giao diện, cho phép ta kéo thả control vào đây

Mục 5: Cửa sổ Pallette, là màn hình lưu trữ danh sách các control, nó cho phép ta Drag các Control trong này và Drop ra mục 4.

Bây giờ Ta thử kéo thả đại một vài Control ra như sau:

Ta túm JLabel kéo thả vào mục 4, rồi trong mục 3 chỉnh Font (bấm vào nút …) nó sẽ ra màn hình Font ta tha hồ chọn, cấu hình sao giống như trên là OK. Các bạn muốn hiểu chi tiết ngọn ngành về Java Swing thì đăng ký học tại đây để dễ dàng học GUI cho Kotlin:

Bây giờ làm sao để chạy được màn hình này? Trước tiên ta cần đặt tên cho JPanel ở ngoài cùng trước, ví dụ đặt tên thành pnMain:

Lúc này bạn quan sát lớp HelloWorldUI sẽ tự động xuất hiện khai báo biến của control này:

Sau đó sửa lại coding như sau:


import javax.swing.*;

/**
* Created by cafe on 03/06/2017.
*/
public class HelloWorldUI {
private JPanel pnMain;
public JPanel getPnMain()
{
return pnMain;
}
}

Sau đó new 1 file Kotlin (app_test_gui.kt):

Bổ sung thêm các lệnh dưới đây để tải Giao diện:


import javax.swing.JFrame

/**
* Created by cafe on 03/06/2017.
*/
fun main(args: Array) {
//Tạo đối tượng màn hình loại JFrame
var helloGui:JFrame = JFrame("Chương trình Hello World")
//gán giao diện chính trong HelloWorldUI cho JFrame
helloGui.contentPane=HelloWorldUI().pnMain
//thiết lập cho phép bấm vào X để đóng cửa sổ
helloGui.defaultCloseOperation=JFrame.EXIT_ON_CLOSE
//thiết lập kích thước cửa sổ
helloGui.setSize(500,400)
//cho màn hình mặc định nằm giữa Desktop
helloGui.setLocationRelativeTo(null)
//hiển thị giao diện:
helloGui.isVisible=true
}

Chạy chương trình lên ta có giao diệ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, bài sau Tui sẽ làm thêm 1 ví dụ về giao diện Giải phương trình bậc 1, sử dụng layout FormLayout jgoodies cũng như cách gán sự kiện cho các control. Các bạn chú ý theo dõi nhé