基本的 JavaFX 控件 · ZetCode 中文系列教程

# 基本的 JavaFX 控件 > 原文： [http://zetcode.com/gui/javafx/controls/](http://zetcode.com/gui/javafx/controls/) 控件是應用的基本構建塊。 `Control`是場景圖中的一個可由用戶操縱的節點。它以對用戶一致且可預測的方式支持常見的用戶交互。 JavaFX 具有廣泛的內置控件。在本章中，我們涵蓋五個控件：`Label`，`CheckBox`，`ChoiceBox`，`Slider`和`ProgressBar`。還簡要提到了`ImageView`和`TextField`控件。 ## `Label` `Label`是不可編輯的文本控件。標簽可以使用省略號或截斷符來調整字符串的大小以使其適合。 `LabelEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.layout.HBox; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program shows lyrics in a Label * control. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class LabelEx extends Application { String lyrics = "It's way too late to think of\n" + "Someone I would call now\n" + "And neon signs got tired\n" + "Red eye flights help the stars out\n" + "I'm safe in a corner\n" + "Just hours before me\n" + "\n" + "I'm waking with the roaches\n" + "The world has surrendered\n" + "I'm dating ancient ghosts\n" + "The ones I made friends with\n" + "The comfort of fireflies\n" + "Long gone before daylight\n" + "\n" + "And if I had one wishful field tonight\n" + "I'd ask for the sun to never rise\n" + "If God leant his voice for me to speak\n" + "I'd say go to bed, world\n" + "\n" + "I've always been too late\n" + "To see what's before me\n" + "And I know nothing sweeter than\n" + "Champaign from last New Years\n" + "Sweet music in my ears\n" + "And a night full of no fears\n" + "\n" + "But if I had one wishful field tonight\n" + "I'd ask for the sun to never rise\n" + "If God passed a mic to me to speak\n" + "I'd say stay in bed, world\n" + "Sleep in peace"; @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(); root.setPadding(new Insets(10)); Label lbl = new Label(lyrics); root.getChildren().add(lbl); Scene scene = new Scene(root); stage.setTitle("No sleep"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例顯示了 Cardigans 的歌曲的歌詞。 ```java String lyrics = "It's way too late to think of\n" + "Someone I would call now\n" + "And neon signs got tired\n" + "Red eye flights help the stars out\n" ... ``` 該字符串由多行文本組成。 ```java HBox root = new HBox(); root.setPadding(new Insets(10)); ``` 標簽控件放置在`HBox`中。我們在盒子周圍放了一些填充物。 ```java Label lbl = new Label(lyrics); ``` 創建一個`Label`控件。它以字符串作為唯一參數。 ```java root.getChildren().add(lbl); ``` 標簽已添加到容器中。 ## `labelFor`屬性 `labelFor`屬性指定在按下助記符時將鍵盤焦點發送到的節點。 `LabelForEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.geometry.HPos; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.TextField; import javafx.scene.layout.GridPane; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program uses the labelFor property to * send focus to a specified text field. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class LabelForEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { GridPane root = new GridPane(); root.setVgap(10); root.setHgap(5); root.setPadding(new Insets(10)); Label lbl1 = new Label("_Name:"); Label lbl2 = new Label("_Address:"); Label lbl3 = new Label("_Occupation:"); TextField field1 = new TextField(); TextField field2 = new TextField(); TextField field3 = new TextField(); lbl1.setLabelFor(field1); lbl1.setMnemonicParsing(true); lbl2.setLabelFor(field2); lbl2.setMnemonicParsing(true); lbl3.setLabelFor(field3); lbl3.setMnemonicParsing(true); root.add(lbl1, 0, 0); root.add(field1, 2, 0); root.add(lbl2, 0, 1); root.add(field2, 2, 1); root.add(lbl3, 0, 2); root.add(field3, 2, 2); GridPane.setHalignment(lbl1, HPos.RIGHT); GridPane.setHalignment(lbl2, HPos.RIGHT); GridPane.setHalignment(lbl3, HPos.RIGHT); Scene scene = new Scene(root); stage.setTitle("TextField"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例使用`labelFor`屬性和助記符將焦點轉移到指定的文本字段。 ```java GridPane root = new GridPane(); root.setVgap(10); root.setHgap(5); root.setPadding(new Insets(10)); ``` 我們的應用是一個典型的基于表單的程序。 `GridPane`非常適合此。我們在控件周圍以及控件之間設置了一些空間。 ```java Label lbl1 = new Label("_Name:"); Label lbl2 = new Label("_Address:"); Label lbl3 = new Label("_Occupation:"); ``` 創建了三個`Labels`。下劃線字符位于助記鍵之前。 ```java TextField field1 = new TextField(); TextField field2 = new TextField(); TextField field3 = new TextField(); ``` `TextField`是用于編輯單行未格式化文本的控件。每個文本字段都放置在一個標簽控件旁邊。 ```java lbl1.setLabelFor(field1); ``` `setLabelFor()`設置按下助記符時將焦點轉移到的目標節點。 ```java lbl1.setMnemonicParsing(true); ``` 默認情況下，未為標簽設置助記符。我們必須使用`setMnemonicParsing()`方法啟用它們。 ![The labelFor property](https://img.kancloud.cn/bb/db/bbdb707cce4fd0dbd74b2845abaa7b6f_288x144.jpg) 圖：`labelFor`屬性在某些平臺上，必須按無鼠標修飾符（通常為 `Alt` ）以顯示下劃線。在圖中，通過按 `Alt + A` 將焦點轉移到中間文本字段。 ## `CheckBox` `CheckBox`是三態選擇控制框，在選中時顯示對勾或勾號。默認情況下，控件具有兩種狀態：選中和未選中。 `setAllowIndeterminate()`使能第三種狀態：不確定。 `CheckBoxEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.event.ActionEvent; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.CheckBox; import javafx.scene.layout.HBox; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program presents the * CheckBox control. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class CheckBoxEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(); root.setPadding(new Insets(10, 0, 0, 10)); CheckBox cbox = new CheckBox("Show title"); cbox.setSelected(true); cbox.setOnAction((ActionEvent event) -> { if (cbox.isSelected()) { stage.setTitle("CheckBox"); } else { stage.setTitle(""); } }); root.getChildren().add(cbox); Scene scene = new Scene(root, 300, 200); stage.setTitle("CheckBox"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例根據是否選中該復選框來顯示或隱藏窗口的標題。 ```java CheckBox cbox = new CheckBox("Show title"); ``` 創建一個`CheckBox`控件。指定的文本為其標簽。 ```java cbox.setSelected(true); ``` 由于默認情況下窗口的標題是可見的，因此我們使用`setSelected()`方法檢查控件。 ```java cbox.setOnAction((ActionEvent event) -> { if (cbox.isSelected()) { stage.setTitle("CheckBox"); } else { stage.setTitle(""); } }); ``` 使用`setOnAction()`方法，設置復選框的操作，該操作在觸發復選框時被調用。我們用`isSelected()`方法確定其狀態。根據當前狀態，我們使用`setTitle()`方法顯示或隱藏窗口標題。 ![CheckBox](https://img.kancloud.cn/36/33/3633afdf5079b66a249c26e2d788339e_302x226.jpg) 圖：`CheckBox` 請注意復選框文本周圍的藍色矩形。它表示此控件具有鍵盤焦點。可以使用 `Space` 鍵選擇和取消選中該復選框。 ## 滑桿 `Slider`是一種控件，它使用戶可以通過在有限間隔內滑動旋鈕來以圖形方式選擇一個值。滑塊可以選擇顯示刻度線和標簽，以指示不同的滑塊位置值。 `SliderEx.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.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Slider; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.HBox; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program uses a Slider control to * manipulate the images of an ImageView. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class SliderEx extends Application { private ImageView iview; private Image muteImg; private Image minImg; private Image maxImg; private Image medImg; @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(10); root.setAlignment(Pos.CENTER); root.setPadding(new Insets(15)); loadImages(); iview = new ImageView(muteImg); Slider slider = new Slider(0, 100, 0); slider.valueProperty().addListener(new MyChangeListener()); Scene scene = new Scene(root); root.getChildren().addAll(slider, iview); stage.setTitle("Slider"); stage.setScene(scene); stage.show(); } private void loadImages() { muteImg = new Image("file:mute.png"); minImg = new Image("file:min.png"); maxImg = new Image("file:max.png"); medImg = new Image("file:med.png"); } private class MyChangeListener implements ChangeListener<Number> { @Override public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) { Double value = newValue.doubleValue(); if (value == 0) { iview.setImage(muteImg); } else if (value > 0 && value <= 30) { iview.setImage(minImg); } else if (value > 30 && value < 80) { iview.setImage(medImg); } else { iview.setImage(maxImg); } } } public static void main(String[] args) { launch(args); } } ``` 在代碼示例中，我們顯示了`Slider`和`ImageView`控件。通過拖動滑塊的旋鈕，我們可以更改標簽控件上的圖像。 ```java root.setAlignment(Pos.CENTER); ``` 滑塊和圖像視圖在行中居中。 ```java iview = new ImageView(muteImg); ``` `ImageView`顯示加載了`Image`類的圖像。 ```java Slider slider = new Slider(0, 100, 0); ``` 將使用指定的最小值，最大值和當前值創建一個`Slider`控件。 ```java slider.valueProperty().addListener(new MyChangeListener()); ``` 監聽器已添加到滑塊的值更改中。 ```java Double value = newValue.doubleValue(); if (value == 0) { iview.setImage(muteImg); } else if (value > 0 && value <= 30) { iview.setImage(minImg); } else if (value > 30 && value < 80) { iview.setImage(medImg); } else { iview.setImage(maxImg); } ``` 基于滑塊的當前值，我們將適當的圖像設置為圖像視圖。 ```java private void loadImages() { muteImg = new Image("file:mute.png"); minImg = new Image("file:min.png"); maxImg = new Image("file:max.png"); medImg = new Image("file:med.png"); } ``` `loadImages()`方法從磁盤加載圖像。 ![Slider](https://img.kancloud.cn/c3/6e/c36eb19a62deb712db74231101022394_206x80.jpg) 圖：`Slider` ## 選擇框 `ChoiceBox`用于向用戶顯示一小組預定義的選項。當用戶單擊該框時，將顯示一個選擇列表。一次只能選擇一個選項。未顯示此列表時，將顯示當前選擇的選項。 `ChoiceBox`項目選擇由`SelectionModel`處理。 `ChoiceBoxEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.beans.value.ObservableValue; import javafx.collections.FXCollections; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.ChoiceBox; import javafx.scene.control.Label; import javafx.scene.control.SingleSelectionModel; import javafx.scene.layout.VBox; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program uses a ChoiceBox. The chosen * item is shown in a label. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class ChoiceBoxEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { VBox root = new VBox(35); root.setPadding(new Insets(10)); Label lbl = new Label(); ChoiceBox chbox = new ChoiceBox(FXCollections.observableArrayList( "Ubuntu", "Redhat", "Arch", "Debian", "Mint")); SingleSelectionModel model = chbox.getSelectionModel(); model.selectedItemProperty().addListener((ObservableValue observable, Object oldValue, Object newValue) -> { lbl.setText(newValue.toString()); }); root.getChildren().addAll(chbox, lbl); Scene scene = new Scene(root, 300, 250); stage.setTitle("ChoiceBox"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 在我們的示例中，我們有一個選擇框和一個標簽。選擇框包含一個字符串列表，這些字符串表示 Linux 發行版的名稱。從選擇框中選擇的項目顯示在標簽中。 ```java Label lbl = new Label(); ``` 此`Label`顯示了從選擇框中選擇的當前項目。 ```java ChoiceBox chbox = new ChoiceBox(FXCollections.observableArrayList( "Ubuntu", "Redhat", "Arch", "Debian", "Mint")); ``` 創建了`ChoiceBox`。它以可觀察的數組列表作為參數。 ```java SingleSelectionModel model = chbox.getSelectionModel(); model.selectedItemProperty().addListener((ObservableValue observable, Object oldValue, Object newValue) -> { lbl.setText(newValue.toString()); }); ``` 要實現監聽器，我們需要使用`getSelectionModel()`方法獲得選擇模型。該模型包含可觀察的`selectedItem`屬性。在處理器方法內部，我們獲取選定的值并將其設置為標簽。 ![ChoiceBox](https://img.kancloud.cn/6c/76/6c76ee356279e534e32986aa11648c22_302x276.jpg) 圖：`ChoiceBox` ## 進度條 `ProgressBar`是一個控件，用于指示帶有完成條的特定任務的處理。 `ProgressBarEx.java` ```java package com.zetcode; import javafx.animation.KeyFrame; import javafx.animation.KeyValue; import javafx.animation.Timeline; import javafx.application.Application; import javafx.event.ActionEvent; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.ProgressBar; import javafx.scene.layout.HBox; import javafx.stage.Stage; import javafx.util.Duration; /** * ZetCode JavaFX tutorial * * This program presents the ProgressBar control. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class ProgressBarEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(15); root.setAlignment(Pos.CENTER); root.setPadding(new Insets(10)); ProgressBar pbar = new ProgressBar(0); pbar.setPrefWidth(150); KeyFrame frame1 = new KeyFrame(Duration.ZERO, new KeyValue(pbar.progressProperty(), 0)); KeyFrame frame2 = new KeyFrame(Duration.seconds(3), new KeyValue(pbar.progressProperty(), 1)); Timeline task = new Timeline(frame1, frame2); Button btn = new Button("Start"); btn.setOnAction((ActionEvent actionEvent) -> { task.playFromStart(); }); root.getChildren().addAll(pbar, btn); Scene scene = new Scene(root); stage.setTitle("ProgressBar"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例由進度條和按鈕組成。該按鈕將啟動進度條，并對其進行動畫處理幾秒鐘。 ```java ProgressBar pbar = new ProgressBar(0); ``` 構造器使用給定的進度值創建一個新的`ProgressBar`。 ```java KeyFrame frame1 = new KeyFrame(Duration.ZERO, new KeyValue(pbar.progressProperty(), 0)); KeyFrame frame2 = new KeyFrame(Duration.seconds(3), new KeyValue(pbar.progressProperty(), 1)); Timeline task = new Timeline(frame1, frame2); ``` 此代碼創建一個簡單的動畫任務。動畫由兩個幀組成。動畫屬性定義為`KeyValues`。 ```java Button btn = new Button("Start"); btn.setOnAction((ActionEvent actionEvent) -> { task.playFromStart(); }); ``` 觸發后，該按鈕調用`playFromStart()`方法，該方法從初始位置開始向前播放動畫。 ![ProgressBar](https://img.kancloud.cn/91/b5/91b507eb94c1e53889de313cbe362ede_237x72.jpg) 圖：`ProgressBar` 在 JavaFX 教程的這一部分中，我們介紹了基本的 JavaFX 控件。