1. 程式人生 > >JavaFX UI控制元件教程(六)之Toggle Button

JavaFX UI控制元件教程(六)之Toggle Button

在本章中,您將瞭解ToggleButton該類,這是通過JavaFX API提供的另一種型別的按鈕。

可以將兩個或多個切換按鈕組合成一個組,其中一次只能選擇一個按鈕,或者不需要選擇。圖5-1是組合了三個切換按鈕的應用程式的截圖。應用程式根據選擇的切換按鈕繪製具有特定顏色的矩形。

5-1三個切換按鈕

建立切換按鈕

您可以使用ToggleButton該類的三個建構函式中的任何一個在應用程式中建立一個切換按鈕,如例5-1所示。

示例5-1建立切換按鈕

//A toggle button without any caption or icon
ToggleButton tb1 = new ToggleButton();
//A toggle button with a text caption
ToggleButton tb2 = new ToggleButton("Press me");
//A toggle button with a text caption and an icon
Image image = new Image(getClass().getResourceAsStream("icon.png"));
ToggleButton tb3 = new ToggleButton ("Press me", new ImageView(image));

ToggleButton班是的擴充套件Labeled類,因此你可以指定一個文字標題,影象,或兩者圖片和文字。您可以使用類的setTextsetGraphic方法Labeled為切換按鈕指定文字和圖形內容。

在程式碼中定義了切換按鈕後,可以將它們組合在一個組中並設定特定的行為。

將切換按鈕新增到組

在實施ToggleButton類是非常相似的實現RadioButton類。但是,與單選按鈕不同,切換組中的切換按鈕不會嘗試強制選擇組中的至少一個按鈕。也就是說,單擊所選的切換按鈕會使其取消選中,單擊組中所選的單選按鈕無效。

花點時間研究程式碼片段例5-2

示例5-2組合組中的切換按鈕

final ToggleGroup group = new ToggleGroup();

ToggleButton tb1 = new ToggleButton("Minor");
tb1.setToggleGroup(group);
tb1.setSelected(true);

ToggleButton tb2 = new ToggleButton("Major");
tb2.setToggleGroup(group);

ToggleButton tb3 = new ToggleButton("Critical");
tb3.setToggleGroup(group);

例5-2

建立了三個切換按鈕並將它們新增到切換組。setSelected為tb1切換按鈕呼叫該方法,以便在應用程式啟動時選擇該方法。但是,您可以取消選擇“輕微”切換按鈕,以便在啟動時不在組中選擇切換按鈕,如圖5-2所示。

圖5-2組中的三個切換按鈕

通常,您使用一組切換按鈕為每個按鈕指定特定行為。下一節將介紹如何使用這些切換按鈕來更改矩形的顏色。

設定行為

該類從類setUserData繼承的方法可幫助您將任何選定的選項與特定值相關聯。在示例5-3中,使用者資料指示應使用哪種顏色來繪製矩形。ToggleButtonNode

示例5-3設定切換按鈕的使用者資料

tb1.setUserData(Color.LIGHTGREEN);
tb2.setUserData(Color.LIGHTBLUE);
tb3.setUserData(Color.SALMON);

final Rectangle rect = new Rectangle(145, 50);

final ToggleGroup group = new ToggleGroup();
group.selectedToggleProperty().addListener(new ChangeListener<Toggle>(){
    public void changed(ObservableValue<? extends Toggle> ov,
        Toggle toggle, Toggle new_toggle) {
            if (new_toggle == null)
                rect.setFill(Color.WHITE);
            else
                rect.setFill(
                    (Color) group.getSelectedToggle().getUserData()
                );
         }
});

ChangeListener<Toggle>物件檢查組中的選定切換。如果未選擇任何切換按鈕,則矩形將塗上白色。如果選擇了其中一個切換按鈕,則連續呼叫getSelectedTogglegetUserData方法將返回一種顏色以繪製矩形。

例如,如果使用者選擇tb2切換按鈕,則setSelectedToggle().getUserData()呼叫返回Color.LIGHTBLUE。結果如圖5-3所示。

圖5-3使用切換按鈕繪製矩形

請參閱ToggleButtonSample.java檔案以檢查應用程式的完整程式碼。

造型切換按鈕

您可以通過將CSS樣式應用於切換按鈕來增強此應用程式。在JavaFX 2應用程式中使用CSS類似於在HTML中使用CSS,因為每種情況都基於相同的CSS規範。示例5-4使用該setStyle方法更改-fx-base切換按鈕的CSS屬性。

示例5-4將CSS樣式應用於切換按鈕

tb1.setStyle("-fx-base: lightgreen;");
tb2.setStyle("-fx-base: lightblue;");
tb3.setStyle("-fx-base: salmon;");

當新增到應用程式程式碼中時,這些行會更改切換按鈕的可視外觀,如圖5-4所示。

圖5-4繪製的切換按鈕

您可能希望嘗試ToggleButton該類的其他CSS屬性,或應用JavaFX API中提供的動畫,轉換和視覺效果。

相關的API文件