[JavaFX 8] Phần 3 (tt) : Các thành phần giao diện người dùng

Phần 3 (tt) : Các thành phần giao diện người dùng

XX. Color Picker :

1. Tạo ColorPicker  :

2.  Một số phương thức dành cho ColorPicker:

kiểu trả về	Phương thức	Miêu tả
void	setValue(Color  value)	Thiết lập màu được chọn cho ColorPicker.
Color	getValue()	Trả về màu hiện được chọn của ColorPicker.
void	setOnAction( EventHandler<ActionEvent> value )	Bổ sung event khi ColorPicker thay đổi màu lựa chọn.
ObservableList <String>	getStyleClass()	Trả về đối tượng ObservableList chứa  danh sách các kiểu định dạng ColorPicker dưới dạng String.  2 giá trị mặc định là : combo-box-base ,  color-picker . Dựa vào đối tượng ObservableList này, chúng ta có thể tạo các định dạng khác: - Định dạng kiểu button Vd : cPicker.getStyleClass().add("button"); - Định dạng kiểu split-button Vd : cPicker.getStyleClass().add("split-button"); - Xóa 1 kiểu định dạng nào đó Vd: colorPicker.getStyleClass().remove(1); -Xóa tất cả định dạng, ColorPicker hiển thị dưới dạng label. Vd : colorPicker.getStyleClass().clean(); ..

XXI. Date Picker :

1. Tạo DatePicker  :

2.  Một số phương thức dành cho DatePicker:

kiểu trả về	Phương thức	Miêu tả
void	setValue(LocalDate  value)	Thiết lập ngày được chọn cho DatePicker.
LocalDate	getValue()	Trả về ngày hiện được chọn của DatePicker.
void	setOnAction( EventHandler<ActionEvent> value )	Bổ sung event khi DatePicker  thay đổi ngày lựa chọn.
TextField	getEditor()	Định dạng textField hiển thị ngày được chọn. Như canh lề, phông chữ, màu sắc, cho phép chỉnh sửa trực tiếp,… Vd: dPicker.getEditor().setAlignment(Pos.CENTER); dPicker.getEditor().setVisible(false);  dPicker.getEditor().setDisable(true);
void	setShowWeekNumbers(boolean value)	Cho phép hiển thị cột số tuần trong năm
void	setDayCellFactory(Callback <DatePicker, DateCell> value )	Phương thức này được sử dụng để định dạng các DateCell trong DatePicker.

Hướng dẫn sử dụng phương thức setDayCellFactory(). Ví dụ, bạn muốn  ô date cell ngày 20-06-2014 hiển thị khác với các ô khác bởi đó là ngày sinh nhật của bạn và ngày 15-06-2014 là đám cưới của bạn. datePicker.setDayCellFactory(new Callback<DatePicker, DateCell>() {            @Override            public DateCell call(DatePicker param) {                return new DateCell() {                    @Override                    public void updateItem(LocalDate item, boolean empty) {                        super.updateItem(item, empty);                        if (item.equals(LocalDate.of(2014, 6, 20))) {                            setStyle("-fx-background-color: #ff4444");                            setTooltip(new Tooltip("My's bridthday"));                        }                                                 if (item.equals(LocalDate.of(2014, 6, 15))) {                            setStyle("-fx-background-color: #ffff44");                            setTooltip(new Tooltip("the wedding of my friend !"));                        }                    }                };            };        });

XXII. FileChooser:

1 FileChooser được sử dụng để mở hộp thoại “file open” (mở file) hoặc “file save” (lưu file). Hộp thoại “file open” có 2 loại :  chỉ được chọn 1 file và được chọn nhiều file.

Hộp thoại “file open” cho phép chọn nhiều file cùng lúc để mở

Hộp thoại “file open” chỉ cho phép chọn1  file để mở

Hộp thoại “file save” cho phép chọn 1 file để lưu.

1. Tạo FileChooser  :

//tạo 1 FileChooser FileChooser fileChooser = new FileChooser(); // Chọn kiểu file, trong phần dưới có 2 kiểu file là Image Files và text Files. fileChooser.getExtensionFilters().addAll(           new FileChooser.ExtensionFilter("Image Files", "*.png","*.jpg","*.gif"),           new FileChooser.ExtensionFilter("Text  Files", "*.doc") ); // hộp thoại “Open file” chỉ cho phép chọn 1 file File file = fileChooser.showOpenDialog(new  Stage()); // hộp thoại “Open file” cho phép chọn nhiều file để mở List<File> listfile = fileChooser.showOpenMultipleDialog(new  Stage()); // hộp thoại “Save file” cho phép tạo file để lưu File fileSave = fileChooser.showSaveDialog(new  Stage());

2.  Một số phương thức dành cho FileChooser :

kiểu trả về	Phương thức	Miêu tả
ObservableList <FileChooser. ExtensionFilter>	getExtensionFilter()	Trả về các đối tượng ExtensionFilter được lưu trong đối tượng ObservableList. Đối tượng ExtensionFilter được sử dụng để lọc các file được lựa chọn trong FileChooser dựa trên kiểu file.
void	setSelectedExtensionFilter(FileChooser.ExtensionFilter filter)	Thêm 1 ExtensionFilter mới để lọc file trong FileChooser .
void	setTitle (String  value )	Thiết lập tiêu đề cho FileChooser.
File	showOpenDialog(Window ownerWindow)	Hiển thị hộp thoại “ open file” nhưng chỉ được chọn duy nhất 1 file
List<File>	showOpenMultipleDialog(Window ownerWindow)	Hiển thị hộp thoại “open file” cho phép chọn nhiều file cùng lúc
File	showSaveDialog(Window ownerWindow)	Hiển thị hộp thoại “ save file”.

XXIII. Pagination :

Pagination được sử dụng để chia nội dung của page thành nhiều phần nhỏ, mỗi phần chỉ được  hiển thị duy nhất  ở  thời điểm lựa chọn. Kỹ thuật này chúng ta thường dùng trong thiết kế web gọi là “Phân Trang”.

Pagination gồm 2 vùng :

- Page content : hiển thị phần nội dung của page.

- Page Navigator Area : hiển thị thanh điều hướng phần nội dung page. Page Navigator chứa các thành phần sau:

+ Previous page button: click vào để xem phần nội dung trước đó.

+ Next page button : click vào để xem phần nội dung kế tiếp.

+ Page indicator : page được chia bao nhiêu phần thì có bấy nhiêu page indicator.

+ Selected page label : hiển thị số page indicator được chọn.

+ Selected page Indicator : cho biết  page indicator được lựa chọn.

1. Tạo Pagination  :

// tạo 1 Pagination rỗng: Pagination pagination = new Pagination(); // tạo 1 Pagination có 8 page indicator Pagination pagination = new Pagination(8); // tạo 1 Pagination có 8 page indicator và selected page indicator là 2 Pagination pagination = new Pagination(8, 2); // Sử dụng phương thức setPageFactory(..) để định nghĩa page content pagination.setPageFactory(new Callback<Integer, Node>() {            @Override            public Node call(Integer   pageIndex) {                // định nghĩa mỗi page content là 1 Vbox chứa 1 ImageView                VBox box = new VBox(5);                ImageView iv= new ImageView("chart_" + (pageIndex + 1) + ".png");                box.getChildren().add(iv);                box.setAlignment(Pos.CENTER);                                return box;            }        });

2.  Một số phương thức dành cho Pagination:

kiểu trả về	Phương thức	Miêu tả
void	setValue(LocalDate  value)	Thiết lập ngày được chọn cho DatePicker.
LocalDate	getValue()	Trả về ngày hiện được chọn của DatePicker.
void	setOnAction( EventHandler<ActionEvent> value )	Bổ sung event khi DatePicker  thay đổi ngày lựa chọn.
TextField	getEditor()	Định dạng textField hiển thị ngày được chọn. Như canh lề, phông chữ, màu sắc, cho phép chỉnh sửa trực tiếp,… Vd: dPicker.getEditor().setAlignment(Pos.CENTER); dPicker.getEditor().setVisible(false);  dPicker.getEditor().setDisable(true);
void	setShowWeekNumbers(boolean value)	Cho phép hiển thị cột số tuần trong năm
void	setDayCellFactory(Callback <DatePicker, DateCell> value )	Phương thức này được sử dụng để định dạng các DateCell trong DatePicker.