Phần 3 : Các thành phần giao diện người dùng
Trong
phần này, chúng ta sẽ tìm hiểu về các thành phần giao diện người dùng,
những thành phần này tương tự như các thành phần của Swing.
I. Label :
Label là 1 text control được sử dụng để hiển thị text hay 1 icon nào đó.
1. Tạo 1 label :
2. Một số phương thức dành cho Label :
kiểu trả về
|
Phương thức
|
Miêu tả
|
void
|
setAlignment(Pos value)
|
Canh chỉnh vị trí image và text của label
|
void
|
setFont(Font value)
|
Kiểu Font dành cho label.
Vd: label.setFont(new Font("Arial", 30));
|
void
|
setGraphic(Node value)
|
Bổ sung Image vào label
Vd: label.setGraphic(new ImageView("graphics/house.png")
|
void
|
setGraphicTextGap(double value)
|
Khoảng cách giữa Image và text
|
void
|
setText(String value)
|
Thiết lập giá trị text hiển thị trong label
|
string
|
getText()
|
Lấy ra giá trị text
|
void
|
setTextAlignment(Pos value )
|
Canh chỉnh vị trí text của lablel
|
void
|
setTextFill(Paint value)
|
Vẽ text:
- màu sắc cho text
label.setTextFill(Color.web("#4523AC"));
- Hình ảnh cho text
label.setTextFill(new ImagePattern(new Image("lab.png")));
|
void
|
setWrapText(boolean value)
|
Khi
text có nội dung quá dài so với chiều dài của label, value = true text
tự động xuống hàng, value = false (mặc định) ẩn đi 1 số ký tự.
|
void
|
setRotate(doube value)
|
Xoay text theo góc value.
Vd: label.setRotate(90); // xoay 90o
|
void
|
setTranslateX(double value)
|
Di chuyển label theo chiều ngang cách vị trí ban đầu value
|
void
|
setTranslateY(double value)
|
Di chuyển label theo chiều dọc cách vị trí ban đầu value
|
void
|
setScaleX(double value)
|
Mở rộng hay thu nhỏ kích cỡ label theo chiều ngang
|
void
|
setScaleY(double value)
|
Mở rộng hay thu nhỏ kích cỡ label theo chiều dọc
|
Lưu ý
: tất cả các thành phần giao diện đều có các event và cách sử dụng như
nhau, nên mình sẽ trình bày các event này trong những phần sau.
Ví dụ: tạo 1 label khi người dùng cho chuột đi vào label, text của lable sẽ xoay 90o và kích thích tăng lên 3 lần, ngược lại khi người dùng cho chuột rời khỏi lable, tất cả trở về bình thường.
II. Button:
1. Tạo 1 button:
2. Một số phương thức dành cho button :
kiểu trả về
|
Phương thức
|
Miêu tả
|
void
|
setAlignment(Pos value)
|
Canh chỉnh vị trí image và text của button
|
void
|
setFont(Font value)
|
Kiểu Font dành cho button.
Vd: button.setFont(new Font("Arial", 30));
|
void
|
setGraphic(Node value)
|
Bổ sung Image vào button.
Vd: button.setGraphic(new ImageView("graphics/house.png")
|
void
|
setGraphicTextGap(double value)
|
Khoảng cách giữa Image và text
|
void
|
setText(String value)
|
Thiết lập giá trị text hiển thị trong button
|
string
|
getText()
|
Lấy ra giá trị text
|
void
|
setTextAlignment(Pos value )
|
Canh chỉnh vị trí text của button
|
void
|
setTextFill(Paint value)
|
Vẽ text:
màu sắc cho text
button.setTextFill(Color.web("#4523AC"));
Hình ảnh cho text
button.setTextFill(new ImagePattern(new Image("search.png")));
|
void
|
setWrapText(boolean value)
|
Khi
text có nội dung quá dài so với chiều dài của button, value = true text
tự động xuống hàng, value = false (mặc định) ẩn đi 1 số ký tự.
|
void
|
setRotate(doube value)
|
Xoay text theo góc value.
Vd: label.setRotate(90); // xoay 90o
|
void
|
setTranslateX(double value)
|
Di chuyển button theo chiều ngang cách vị trí ban đầu value
|
void
|
setTranslateY(double value)
|
Di chuyển button theo chiều dọc cách vị trí ban đầu value
|
void
|
setScaleX(double value)
|
Mở rộng hay thu nhỏ kích cỡ button theo chiều ngang
|
void
|
setScaleY(double value)
|
Mở rộng hay thu nhỏ kích cỡ button theo chiều dọc
|
void
|
setCancelButton(boolean value)
|
Cancel Button là 1 button thông thường nhưng bạn có thể sử dụng phím ESC để thay thế hành động click chuột.
|
void
|
setDefaultButton(boolean value)
|
Default Button là 1 button thông thường nhưng bạn có thể sử dụng phím Enter để thay thế hành động click chuột.
|
boolean
|
isCancelButton()
|
Có phải là CancelButton
|
boolean
|
isDefaultButton()
|
Có phải là DefaultButton
|
III. Radio Button:
1. Tạo radio button:
2. Tạo nhóm các RadioButton :
3. Một số phương thức dành cho Radio button :
kiểu trả về
|
Phương thức
|
Miêu tả
|
void
|
setAlignment(Pos value)
|
Canh chỉnh vị trí image và text của Radio
|
void
|
setFont(Font value)
|
Kiểu Font dành cho Radio.
Vd: rb.setFont(new Font("Arial", 30));
|
void
|
setGraphic(Node value)
|
Bổ sung Image vào Radio
Vd: rb.setGraphic(new ImageView("graphics/house.png")
|
void
|
setGraphicTextGap(double value)
|
Khoảng cách giữa Image và text
|
void
|
setText(String value)
|
Thiết lập giá trị text hiển thị trong Radio
|
string
|
getText()
|
Lấy ra giá trị text
|
void
|
setTextAlignment(Pos value )
|
Canh chỉnh vị trí text của Radio
|
void
|
setTextFill(Paint value)
|
Vẽ text:
màu sắc cho text
rb.setTextFill(Color.web("#4523AC"));
Hình ảnh cho text
rb.setTextFill(new ImagePattern(new Image("lab.png")));
|
void
|
setWrapText(boolean value)
|
Khi
text có nội dung quá dài so với chiều dài của Radio, value = true text
tự động xuống hàng, value = false (mặc định) ẩn đi 1 số ký tự.
|
void
|
setRotate(doube value)
|
Xoay text theo góc value.
Vd: rb.setRotate(90); // xoay 90o
|
void
|
setTranslateX(double value)
|
Di chuyển Radio theo chiều ngang cách vị trí ban đầu value
|
void
|
setTranslateY(double value)
|
Di chuyển Radio theo chiều dọc cách vị trí ban đầu value
|
void
|
setScaleX(double value)
|
Mở rộng hay thu nhỏ kích cỡ radio theo chiều ngang
|
void
|
setScaleY(double value)
|
Mở rộng hay thu nhỏ kích cỡ radio theo chiều dọc
|
void
|
setSelected(boolean value)
|
Thiết lập radio được chọn hay không.
|
boolean
|
isSelected()
|
Kiểm tra xem radio có được chọn hay không.
|
IV. Toggle Button:
Toggle
Button là 1 dạng button đặc biệt , mang đặc tính của button và cả đặc
tính của Radio button. Các toggleButton có thể tạo thành 1 nhóm, thì
cùng 1 thời điểm chỉ duy nhất 1 ToggleButton được lựa chọn thôi. 
1. Tạo 1 Toggle Button:
2. Tạo nhóm các ToggleButton :
3. Một số phương thức dành cho ToggleButton :
kiểu trả về
|
Phương thức
|
Miêu tả
|
void
|
setAlignment(Pos value)
|
Canh chỉnh vị trí image và text của ToggleButton
|
void
|
setFont(Font value)
|
Kiểu Font dành cho ToggleButton.
|
void
|
setGraphic(Node value)
|
Bổ sung Image vào ToggleButton
|
void
|
setGraphicTextGap(double value)
|
Khoảng cách giữa Image và text
|
void
|
setText(String value)
|
Thiết lập giá trị text hiển thị trong ToggleButton
|
string
|
getText()
|
Lấy ra giá trị text
|
void
|
setTextAlignment(Pos value )
|
Canh chỉnh vị trí text của ToggleButton
|
void
|
setTextFill(Paint value)
|
Vẽ text: màu sắc cho text, hình ảnh cho text
|
void
|
setWrapText(boolean value)
|
Khi
text có nội dung quá dài so với chiều dài của ToggleButton, value =
true text tự động xuống hàng, value = false (mặc định) ẩn đi 1 số ký tự.
|
void
|
setRotate(doube value)
|
Xoay text theo góc value.
|
void
|
setTranslateX(double value)
|
Di chuyển ToggleButton theo chiều ngang cách vị trí ban đầu value
|
void
|
setTranslateY(double value)
|
Di chuyển ToggleButton theo chiều dọc cách vị trí ban đầu value
|
void
|
setScaleX(double value)
|
Mở rộng hay thu nhỏ kích cỡ ToggleButton theo chiều ngang
|
void
|
setScaleY(double value)
|
Mở rộng hay thu nhỏ kích cỡ ToggleButton theo chiều dọc
|
void
|
setSelected(boolean value)
|
ToggleButton được chọn hay không.
|
boolean
|
isSelected()
|
Kiểm tra xem ToggleButton được chọn hay không.
|
V. Checkbox :
Checkbox tương tự như radio button, nhưng không thể kết thành 1 nhóm và cho phép nhiều lựa chọn cùng 1 lúc.
1. Tạo 1 CheckBox:
2. Một số phương thức dành cho ToggleButton :
kiểu trả về
|
Phương thức
|
Miêu tả
|
void
|
setAlignment(Pos value)
|
Canh chỉnh vị trí image và text của checkbox
|
void
|
setFont(Font value)
|
Kiểu Font dành cho checkbox.
|
void
|
setGraphic(Node value)
|
Bổ sung Image vào checkbox
|
void
|
setGraphicTextGap(double value)
|
Khoảng cách giữa Image và text
|
void
|
setText(String value)
|
Thiết lập giá trị text hiển thị trong checkbox
|
string
|
getText()
|
Lấy ra giá trị text
|
void
|
setTextAlignment(Pos value )
|
Canh chỉnh vị trí text của checkbox
|
void
|
setTextFill(Paint value)
|
Vẽ text: màu sắc cho text , hình ảnh cho text,…
|
void
|
setWrapText(boolean value)
|
Khi
text có nội dung quá dài so với chiều dài của checkbox , value = true
text tự động xuống hàng, value = false (mặc định) ẩn đi 1 số ký tự.
|
void
|
setRotate(doube value)
|
Xoay text theo góc value.
|
void
|
setTranslateX(double value)
|
Di chuyển checkbox theo chiều ngang cách vị trí ban đầu value
|
void
|
setTranslateY(double value)
|
Di chuyển checkbox theo chiều dọc cách vị trí ban đầu value
|
void
|
setScaleX(double value)
|
Mở rộng hay thu nhỏ kích cỡ checkbox theo chiều ngang
|
void
|
setScaleY(double value)
|
Mở rộng hay thu nhỏ kích cỡ checkbox theo chiều dọc
|
void
|
setSelected(boolean value)
|
ToggleButton được chọn hay không.
|
boolean
|
isSelected()
|
Kiểm tra xem checkbox được chọn hay không.
|
Không có nhận xét nào:
Đăng nhận xét