# 基本 JavaFX 控件 II > 原文： [http://zetcode.com/gui/javafx/controlsII/](http://zetcode.com/gui/javafx/controlsII/) 在本章中，我們將繼續介紹基本的 JavaFX 控件。 我們提出了`DatePicker`，`MenuBar`，`ColorPicker`，`RadioButton`和`TabPane`控件。 ## 日期選擇器 `DatePicker`是用于選擇日期的控件。 `DatePickerEx.java` ```java package com.zetcode; import java.time.LocalDate; import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.DatePicker; import javafx.scene.control.Label; import javafx.scene.layout.VBox; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program shows a date chosen from * a DatePicker in a label. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class DatePickerEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { VBox root = new VBox(15); root.setPadding(new Insets(10)); Label lbl = new Label("..."); DatePicker datePicker = new DatePicker(); datePicker.setOnAction(e -> { LocalDate date = datePicker.getValue(); lbl.setText(date.toString()); }); root.getChildren().addAll(datePicker, lbl); Scene scene = new Scene(root, 350, 200); stage.setTitle("Date picker"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例使用`DatePicker`控件選擇和顯示日期。 日期顯示在標簽控件中。 ```java DatePicker datePicker = new DatePicker(); ``` 創建一個`DatePicker`控件的實例。 ```java datePicker.setOnAction(e -> { LocalDate date = datePicker.getValue(); lbl.setText(date.toString()); }); ``` `getValue()`方法將選擇的日期作為`LocalDate`返回。 所選日期通過`setText()`方法設置到標簽控件。  圖：`DatePicker` ## 菜單欄 `MenuBar`由`Menu`對象組成，這些對象包含`MenuItem`對象，即應用的命令。 傳統上，它位于應用窗口的頂部。 `MenuBarEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.application.Platform; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.Alert; import javafx.scene.control.Alert.AlertType; import javafx.scene.control.Menu; import javafx.scene.control.MenuBar; import javafx.scene.control.MenuItem; import javafx.scene.control.SeparatorMenuItem; import javafx.scene.layout.HBox; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program creates a MenuBar with one * menu and four menu items. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class MenuBarEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(); MenuBar mbar = new MenuBar(); mbar.prefWidthProperty().bind(stage.widthProperty()); MyMenuHandler handler = new MyMenuHandler(); Menu fileMenu = new Menu("File"); mbar.getMenus().add(fileMenu); MenuItem nmi = new MenuItem("New"); nmi.setOnAction(handler); fileMenu.getItems().add(nmi); MenuItem omi = new MenuItem("Open"); omi.setOnAction(handler); fileMenu.getItems().add(omi); MenuItem smi = new MenuItem("Save"); smi.setOnAction(handler); fileMenu.getItems().add(smi); fileMenu.getItems().add(new SeparatorMenuItem()); MenuItem emi = new MenuItem("Exit"); emi.setOnAction((ActionEvent event) -> { Platform.exit(); }); fileMenu.getItems().add(emi); root.getChildren().add(mbar); Scene scene = new Scene(root, 300, 250); stage.setTitle("MenuBar"); stage.setScene(scene); stage.show(); } private class MyMenuHandler implements EventHandler<ActionEvent> { @Override public void handle(ActionEvent event) { doShowMessageDialog(event); } private void doShowMessageDialog(ActionEvent event) { MenuItem mi = (MenuItem) event.getSource(); String item = mi.getText(); Alert alert = new Alert(AlertType.INFORMATION); alert.setTitle("Information dialog"); alert.setHeaderText("Menu item selection information"); alert.setContentText(item + " menu item selected"); alert.showAndWait(); } } public static void main(String[] args) { launch(args); } } ``` 該示例在菜單欄中包含一個菜單。 菜單包含四個菜單項和一個分隔符。 ```java MenuBar mbar = new MenuBar(); mbar.prefWidthProperty().bind(stage.widthProperty()); ``` `MenuBar`控件已創建。 在水平框內，它足夠大以顯示其單個菜單。 通過將其綁定到舞臺的`widthProperty`，菜單欄從左向右拉伸。 ```java MyMenuHandler handler = new MyMenuHandler(); ``` 將創建一個菜單處理器。 它由三個菜單項共享。 ```java Menu fileMenu = new Menu("File"); mbar.getMenus().add(fileMenu); ``` 文件`Menu`已創建并添加到菜單欄。 ```java MenuItem nmi = new MenuItem("New"); nmi.setOnAction(handler); fileMenu.getItems().add(nmi); ``` 新建`MenuItem`已創建并添加到“文件”菜單中。 菜單項的處理器是通過`setOnAction()`方法設置的。 ```java fileMenu.getItems().add(new SeparatorMenuItem()); ``` `SeparatorMenuItem`是水平分隔符，用于在視覺上分隔相關菜單項。 ```java emi.setOnAction((ActionEvent event) -> { Platform.exit(); }); ``` 退出菜單項通過`Platform.exit()`方法調用終止應用。 ```java private class MyMenuHandler implements EventHandler<ActionEvent> { @Override public void handle(ActionEvent event) { doShowMessageDialog(event); } ... } ``` 選擇帶有此處理器的菜單項時，將調用`EventHandler`的`handle()`方法。 該方法調用`doShowMessageDialog()`方法，該方法顯示一個消息對話框。 ```java private void doShowMessageDialog(ActionEvent event) { MenuItem mi = (MenuItem) event.getSource(); String item = mi.getText(); Alert alert = new Alert(AlertType.INFORMATION); alert.setTitle("Information dialog"); alert.setHeaderText("Menu item selection information"); alert.setContentText(item + " menu item selected"); alert.showAndWait(); } ``` `doShowMessageDialog()`方法使用`Alert`控件創建一個信息對話框。 從事件源，我們確定菜單項的名稱，該菜單項用于創建內容文本。  圖：`MenuBar` ## 顏色選擇器 `ColorPicker`是用于選擇顏色值的內置對話框。 它允許用戶從標準調色板中選擇一種顏色或定義一種自定義顏色。 `ColorPickerEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.event.ActionEvent; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.ColorPicker; import javafx.scene.layout.HBox; import javafx.scene.text.Font; import javafx.scene.text.Text; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program uses the ColorPicker * dialog to choose a colour value. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class ColorPickerEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(25); root.setAlignment(Pos.BASELINE_CENTER); root.setPadding(new Insets(10)); Text txt = new Text("ZetCode"); Font font = Font.font(20); txt.setFont(font); ColorPicker cp = new ColorPicker(); cp.setOnAction((ActionEvent event) -> { txt.setFill(cp.getValue()); }); root.getChildren().addAll(cp, txt); Scene scene = new Scene(root, 300, 250); stage.setTitle("ColorPicker"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 在示例中，我們有一個`ColorPicker`和一個`Text`控件。 從顏色選擇器中選擇的顏色用于設置文本控件的前景色。 ```java Text txt = new Text("ZetCode"); Font font = Font.font(20); txt.setFont(font); ``` 創建一個`Text`控件。 我們擴大其字體以獲得更好的可見性。 ```java ColorPicker cp = new ColorPicker(); cp.setOnAction((ActionEvent event) -> { txt.setFill(cp.getValue()); }); ``` 創建`ColorPicker`并設置事件處理器。 使用`ColorPicker`的`getValue()`方法檢索當前選擇的顏色。 使用`setFill()`方法可以更改文本控件的前景色。  圖：`ColorPicker` ## `RadioButton` `RadioButton`通常用于創建互斥的項目系列。 當放置在`ToggleGroup`中時，只能選擇一個`RadioButton`。 選擇`RadioButton`時，將發送`ActionEvent`。 `RadioButtonEx.java` ```java package com.zetcode; 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.RadioButton; import javafx.scene.control.Toggle; import javafx.scene.control.ToggleGroup; import javafx.scene.layout.AnchorPane; import javafx.scene.layout.VBox; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program presents the RadioButton * control. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class RadioButtonEx extends Application { private final double BORDER = 10d; private Label lbl2; @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { AnchorPane root = new AnchorPane(); VBox vbox = new VBox(10); vbox.setPadding(new Insets(10)); Label lbl1 = new Label("Difficulty"); lbl2 = new Label(""); lbl2.setStyle("-fx-background-color:wheat; -fx-padding: 0 0 0 5"); lbl2.prefWidthProperty().bind(stage.widthProperty().subtract(2*BORDER)); ToggleGroup tg = new ToggleGroup(); tg.selectedToggleProperty().addListener(new MyToggleListener()); RadioButton rb1 = new RadioButton("Easy"); rb1.setToggleGroup(tg); rb1.setSelected(true); RadioButton rb2 = new RadioButton("Medium"); rb2.setToggleGroup(tg); RadioButton rb3 = new RadioButton("Hard"); rb3.setToggleGroup(tg); vbox.getChildren().addAll(lbl1, rb1, rb2, rb3); root.getChildren().addAll(vbox, lbl2); AnchorPane.setTopAnchor(vbox, BORDER); AnchorPane.setBottomAnchor(lbl2, BORDER); AnchorPane.setLeftAnchor(lbl2, BORDER); Scene scene = new Scene(root, 300, 250); stage.setTitle("RadioButton"); stage.setScene(scene); stage.show(); } private class MyToggleListener implements ChangeListener<Toggle> { @Override public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) { RadioButton rb = (RadioButton) newValue; String txt = rb.getText(); lbl2.setText(txt); } } public static void main(String[] args) { launch(args); } } ``` 該示例具有三個單選按鈕。 通過將它們放在切換組中，一次只能選擇其中之一。 ```java Label lbl1 = new Label("Difficulty"); ``` 此標簽提供對單選按鈕的描述。 ```java lbl2 = new Label(""); lbl2.setStyle("-fx-background-color:wheat; -fx-padding: 0 0 0 5"); lbl2.prefWidthProperty().bind(stage.widthProperty().subtract(2*BORDER)); ``` 該標簽顯示當前選中的單選按鈕的文本標簽。 其樣式是使用`setStyle()`方法定制的。 標簽將被放大以達到舞臺寬度減去指定邊框的寬度。 ```java ToggleGroup tg = new ToggleGroup(); tg.selectedToggleProperty().addListener(new MyToggleListener()); ``` 創建`ToggleGroup`并將監聽器添加到其`selectedToggleProperty`。 ```java RadioButton rb1 = new RadioButton("Easy"); ``` 創建一個`RadioButton`控件。 ```java rb1.setToggleGroup(tg); ``` `setToggleGroup()`方法將單選按鈕設置為切換組。 ```java rb1.setSelected(true); ``` `setSelected()`選擇單選按鈕。 ```java private class MyToggleListener implements ChangeListener<Toggle> { @Override public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) { RadioButton rb = (RadioButton) newValue; String txt = rb.getText(); lbl2.setText(txt); } } ``` 在監聽器對象內部，我們使用`getText()`方法獲取單選按鈕的文本標簽，并使用`setText()`方法將其設置為標簽。  圖：`RadioButton` ## `TabPane` `TabPane`是允許在一組`Tabs`之間切換的控件。 一次只顯示一個標簽。 `TabPane`中的選項卡可以位于窗口的四個側面中的任何一個。 默認面是頂面。 `TabPaneEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Tab; import javafx.scene.control.TabPane; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.scene.shape.Line; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program presents the TabPane control. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class TabPaneEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { StackPane root = new StackPane(); TabPane tabPane = new TabPane(); Tab tab1 = new Tab(); tab1.setText("Rectangle"); tab1.setContent(new Rectangle(100, 100, Color.LIGHTSTEELBLUE)); Tab tab2 = new Tab(); tab2.setText("Line"); tab2.setContent(new Line(0, 0, 100, 100)); Tab tab3 = new Tab(); tab3.setText("Circle"); tab3.setContent(new Circle(0, 0, 50)); tabPane.getSelectionModel().select(1); tabPane.getTabs().addAll(tab1, tab2, tab3); root.getChildren().add(tabPane); Scene scene = new Scene(root, 300, 250); stage.setTitle("TabPane"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例包含帶有三個選項卡的`TabPane`控件。 每個選項卡均包含幾何形狀。 應用啟動時，將選擇第二個選項卡。 ```java TabPane tabPane = new TabPane(); ``` 創建一個`TabPane`控件。 ```java Tab tab1 = new Tab(); tab1.setText("Rectangle"); tab1.setContent(new Rectangle(100, 100, Color.LIGHTSTEELBLUE)); ``` 創建了`Tab`。 它的文本標簽是用`setText()`方法設置的。 內容通過`setContent()`方法設置。 ```java tabPane.getSelectionModel().select(1); ``` `TabPane's`選擇模型處理選項卡的選擇。 模型的`select()`方法選擇第二個選項卡。 ```java tabPane.getTabs().addAll(tab1, tab2, tab3); ``` 選項卡將插入選項卡窗格。 使用`getTabs()`方法檢索選項卡的內部列表。  圖：`TabPane` 在本章中，我們將繼續介紹基本的 JavaFX 控件。