Hướng dẫn và ví dụ JavaFX Spinner
1. JavaFX Spinner
Spinner tương tự với ComboBox hoặc List, nó cho phép người dùng lựa chọn từ một tập giá trị. Giống với ComboBox có thể hiệu chỉnh, Spinner cũng cho phép người dùng thêm các giá trị. Không giống với ComboBox, Spinner không có danh sách sổ xuống, nó không hiển thị danh sách các giá trị có thể, tại một thời điểm nó chỉ hiển thị một giá trị hiện thời. Nó thường sử dụng thay thế cho ComboBox hoặc List khi tập hợp các giá trị có thể là rất lớn.
Cấu trúc của Spinner:
2. Ví dụ với Spinner
Ví dụ đơn giản dưới đây minh họa một Spinner với các giá trị số.
SpinnerDemo.java
package org.o7planning.javafx.spinner;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Spinner;
import javafx.scene.control.SpinnerValueFactory;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class SpinnerDemo extends Application {
@Override
public void start(Stage stage) {
Label label = new Label("Select Level:");
final Spinner<Integer> spinner = new Spinner<Integer>();
final int initialValue = 3;
// Nhà máy tạo ra tập các giá trị.
SpinnerValueFactory<Integer> valueFactory = //
new SpinnerValueFactory.IntegerSpinnerValueFactory(1, 5, initialValue);
spinner.setValueFactory(valueFactory);
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(10);
root.setPadding(new Insets(10));
root.getChildren().addAll(label, spinner);
Scene scene = new Scene(root, 400, 200);
stage.setTitle("JavaFX Spinner (o7planning.org)");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}Ví dụ 2:
SpinnerDemo2.java
package org.o7planning.javafx.spinner;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Spinner;
import javafx.scene.control.SpinnerValueFactory;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class SpinnerDemo2 extends Application {
@Override
public void start(Stage stage) {
Label label = new Label("Select Month:");
ObservableList<String> months = FXCollections.observableArrayList(//
"January", "February", "March", "April", //
"May", "June", "July", "August", //
"September", "October", "November", "December");
final Spinner<String> spinner = new Spinner<String>();
// Nhà máy tạo ra tập các giá trị.
SpinnerValueFactory<String> valueFactory = //
new SpinnerValueFactory.ListSpinnerValueFactory<String>(months);
// Giá trị mặc định.
valueFactory.setValue("February");
spinner.setValueFactory(valueFactory);
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(10);
root.setPadding(new Insets(10));
root.getChildren().addAll(label, spinner);
Scene scene = new Scene(root, 400, 200);
stage.setTitle("JavaFX Spinner (o7planning.org)");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}3. Spinner và Styles
JavaFX Spinner có thể sét đặt vị trí và hướng cho các nút mũi tên, nếu không được chỉ định, mặc định là bên phải và hướng thẳng đứng.
SpinnerStyleDemo.java
package org.o7planning.javafx.spinner;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Spinner;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class SpinnerStyleDemo extends Application {
@Override
public void start(Stage stage) {
String[] styleClasses = new String[] { "", // Default.
Spinner.STYLE_CLASS_ARROWS_ON_RIGHT_HORIZONTAL, //
Spinner.STYLE_CLASS_ARROWS_ON_LEFT_VERTICAL, //
Spinner.STYLE_CLASS_ARROWS_ON_LEFT_HORIZONTAL, //
Spinner.STYLE_CLASS_SPLIT_ARROWS_VERTICAL, //
Spinner.STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL
};
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(10);
root.setPadding(new Insets(10));
for (String styleClass : styleClasses) {
Spinner<Integer> spinner = new Spinner<Integer>(1, 20, 10);
spinner.getStyleClass().add(styleClass);
root.getChildren().add(spinner);
}
Scene scene = new Scene(root, 400, 200);
stage.setTitle("JavaFX Spinner (o7planning.org)");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}4. Spinner và ChangeEvent
Thông thường các Spinner sử dụng để hiển thị các giá trị số. Tuy nhiên bạn cũng có thể sử dụng để hiển thị một Object bất kỳ. Ví dụ dưới đây Spinner chứa tập hợp các đối tượng Language, và xử lý sự kiện khi giá trị của Spinner thay đổi.
SpinnerChangeEventDemo.java
package org.o7planning.javafx.spinner;
import java.util.ArrayList;
import java.util.List;
import org.o7planning.javafx.model.Language;
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Spinner;
import javafx.scene.control.SpinnerValueFactory;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class SpinnerChangeEventDemo extends Application {
@Override
public void start(Stage stage) {
Language vietnamese = new Language("vi", "Vietnamese", "Xin Chao");
Language english = new Language("en", "English", "Hello");
Language russian = new Language("ru", "Russian", "привет");
List<Language> languages = new ArrayList<Language>();
languages.add(vietnamese);
languages.add(english);
languages.add(russian);
//
Label label = new Label("Select Language:");
final Spinner<Language> spinner = new Spinner<Language>();
Label labelMessage = new Label("?");
// Nhà máy tạo ra tập các giá trị.
SpinnerValueFactory<Language> valueFactory = //
new SpinnerValueFactory<Language>() {
@Override
public void decrement(int steps) {
Language current = this.getValue();
int idx = languages.indexOf(current);
int newIdx = (languages.size() + idx - steps) % languages.size();
Language newLang = languages.get(newIdx);
this.setValue(newLang);
}
@Override
public void increment(int steps) {
Language current = this.getValue();
int idx = languages.indexOf(current);
int newIdx = (idx + steps) % languages.size();
Language newLang = languages.get(newIdx);
this.setValue(newLang);
}
};
// Giá trị mặc định cho Spinner.
valueFactory.setValue(vietnamese);
spinner.setValueFactory(valueFactory);
// Sư kiện khi Spinner thay đổi giá trị.
spinner.valueProperty().addListener(new ChangeListener<Language>() {
@Override
public void changed(ObservableValue<? extends Language> observable,//
Language oldValue, Language newValue) {
labelMessage.setText("Greeting: "+ newValue.getGreeting());
}
});
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(10);
root.setPadding(new Insets(10));
root.getChildren().addAll(label, spinner, labelMessage);
Scene scene = new Scene(root, 400, 200);
stage.setTitle("JavaFX Spinner (o7planning.org)");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}Language.java
package org.o7planning.javafx.model;
public class Language {
private String code;
private String name;
private String greeting;
public Language() {
}
public Language(String code, String name) {
this.code = code;
this.name = name;
}
public Language(String code, String name, String greeting) {
this.code = code;
this.name = name;
this.greeting = greeting;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGreeting() {
return greeting;
}
public void setGreeting(String greeting) {
this.greeting = greeting;
}
@Override
public String toString() {
return this.name;
}
}5. Spinner có thể hiệu chỉnh
Người dùng có thể nhập thêm các giá trị mới vào cho Spinner, ví dụ sau đây người dùng nhập giá trị và nhấn Enter, giá trị sẽ được bổ xung vào tập hợp các giá trị có sẵn của Spinner.
SpinnerEditDemo.java
package org.o7planning.javafx.spinner;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Spinner;
import javafx.scene.control.SpinnerValueFactory;
import javafx.scene.control.SpinnerValueFactory.ListSpinnerValueFactory;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
import javafx.util.StringConverter;
public class SpinnerEditDemo extends Application {
@Override
public void start(Stage stage) {
Label label = new Label("Select Level:");
final Spinner<Integer> spinner = new Spinner<Integer>();
// Cho phép hiệu chỉnh
spinner.setEditable(true);
// Danh sách các phần tử.
ObservableList<Integer> items = FXCollections.observableArrayList(1, 2, 3);
// Value Factory:
SpinnerValueFactory<Integer> valueFactory = //
new SpinnerValueFactory.ListSpinnerValueFactory<>(items);
// Bộ chuyển đổi giữa text hiển thị trên Spinner
// và đối tượng item.
MyConverter converter = new MyConverter();
valueFactory.setConverter(converter);
spinner.setValueFactory(valueFactory);
spinner.getEditor().setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
String text = spinner.getEditor().getText();
SpinnerValueFactory.ListSpinnerValueFactory<Integer>//
valueFactory = (ListSpinnerValueFactory<Integer>) spinner.getValueFactory();
StringConverter<Integer> converter = valueFactory.getConverter();
Integer enterValue = converter.fromString(text);
// Nếu danh sách không chứa giá trị người dùng nhập vào.
if (!valueFactory.getItems().contains(enterValue)) {
// Thêm phần tử mới vào danh sách
valueFactory.getItems().add(enterValue);
// Sét thành hiện thời.
valueFactory.setValue(enterValue);
} else {
// Sét thành hiện thời.
valueFactory.setValue(enterValue);
}
}
});
//
FlowPane root = new FlowPane();
root.setHgap(10);
root.setVgap(10);
root.setPadding(new Insets(10));
root.getChildren().addAll(label, spinner);
Scene scene = new Scene(root, 400, 200);
stage.setTitle("JavaFX Spinner (o7planning.org)");
stage.setScene(scene);
stage.show();
}
class MyConverter extends StringConverter<Integer> {
@Override
public String toString(Integer object) {
return object + "";
}
@Override
public Integer fromString(String string) {
return Integer.parseInt(string);
}
}
public static void main(String[] args) {
Application.launch(args);
}
}Các hướng dẫn lập trình JavaFX
- Cài đặt e(fx)clipse cho Eclipse (Bộ công cụ lập trình JavaFX)
- Cài đặt JavaFX Scene Builder cho Eclipse
- Hướng dẫn lập trình JavaFX cho người mới bắt đầu - Hello JavaFX
- Hướng dẫn và ví dụ JavaFX FlowPane Layout
- Hướng dẫn và ví dụ JavaFX TilePane Layout
- Hướng dẫn và ví dụ JavaFX HBox, VBox Layout
- Hướng dẫn và ví dụ JavaFX BorderPane Layout
- Hướng dẫn và ví dụ JavaFX AnchorPane Layout
- Hướng dẫn và ví dụ JavaFX GridPane Layout
- Hướng dẫn và ví dụ JavaFX StackPane Layout
- Hướng dẫn và ví dụ JavaFX TitledPane
- Hướng dẫn và ví dụ JavaFX ScrollPane
- Hướng dẫn và ví dụ JavaFX Accordion
- Hướng dẫn và ví dụ JavaFX ListView
- Hướng dẫn và ví dụ JavaFX Group
- Hướng dẫn và ví dụ JavaFX ComboBox
- Hướng dẫn và ví dụ JavaFX WebView và WebEngine
- Hướng dẫn và ví dụ JavaFX HTMLEditor
- Hướng dẫn và ví dụ JavaFX TableView
- Hướng dẫn và ví dụ JavaFX TreeView
- Hướng dẫn và ví dụ JavaFX TreeTableView
- Hướng dẫn và ví dụ JavaFX Menu
- Hướng dẫn và ví dụ JavaFX ContextMenu
- Hướng dẫn và ví dụ JavaFX Image và ImageView
- Hướng dẫn và ví dụ JavaFX Label
- Hướng dẫn và ví dụ JavaFX Hyperlink
- Hướng dẫn và ví dụ JavaFX Button
- Hướng dẫn và ví dụ JavaFX ToggleButton
- Hướng dẫn và ví dụ JavaFX RadioButton
- Hướng dẫn và ví dụ JavaFX MenuButton và SplitMenuButton
- Hướng dẫn và ví dụ JavaFX TextField
- Hướng dẫn và ví dụ JavaFX PasswordField
- Hướng dẫn và ví dụ JavaFX TextArea
- Hướng dẫn và ví dụ JavaFX Slider
- Hướng dẫn và ví dụ JavaFX Spinner
- Hướng dẫn và ví dụ JavaFX ProgressBar và ProgressIndicator
- Hướng dẫn và ví dụ JavaFX ChoiceBox
- Hướng dẫn và ví dụ JavaFX Tooltip
- Hướng dẫn và ví dụ JavaFX DatePicker
- Hướng dẫn và ví dụ JavaFX ColorPicker
- Hướng dẫn và ví dụ JavaFX FileChooser và DirectoryChooser
- Mở một cửa sổ (window) mới trong JavaFX
- Hướng dẫn và ví dụ JavaFX Alert Dialog
- Hướng dẫn và ví dụ JavaFX TextInputDialog
- Hướng dẫn và ví dụ JavaFX ChoiceDialog
- Hướng dẫn và ví dụ JavaFX PieChart
- Hướng dẫn và ví dụ JavaFX AreaChart và StackedAreaChart
- Hướng dẫn và ví dụ JavaFX BarChart và StackedBarChart
- Hướng dẫn và ví dụ JavaFX Line
- Hướng dẫn và ví dụ JavaFX Rectangle và Ellipse
- Các hiệu ứng (effects) trong JavaFX
- Hướng dẫn sử dụng các phép biến hình (Transformations) trong JavaFX
Show More
