(翻譯)第十一回 JavaFX2.0開關按鈕ToggleButton

原文位址 http://download.oracle.com/javafx/2.0/ui_controls/toggle-button.htm

ToggleButton類代表了可以通過JavaFX API建立的另一類按鈕

。 2個或更多的這種按鈕被加入一個組中，但是每次隻能有一個被選中，或者一個都沒有。 Figure 5-1是在一個組中有3個開關按鈕的應用截圖。這個應用根據哪個開關按鈕别按下來決定繪制何種顔色的矩形。 Figure 5-1 Three Toggle Buttons Description of "Figure 5-1 Three Toggle Buttons"

建立Toggle Button

可以通過

ToggleButton類的3個構造方法的任意一個來建立開關按鈕。

見

Example 5-1

.

Example 5-1 Creating Toggle Buttons

//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類，因而你可以為其指定文本标題、圖像、文本加圖像。可以使用

Labeled

  類的

setText

和

setGraphic方法來給開關按鈕指定文本和圖像。

在代碼中定義了開關按鈕後，就可以把它們放進組中并指定特定的行為。

把Toggle Button加入組

ToggleButton類的實作和

RadioButton類實作相當類似。

不過和單選框不同的是，開關按鈕并不要求每次必須最少有一個按鈕被選中在組中。也就是說，點選選中的開關按鈕會使其取消選中，但是點選組中的單選按鈕沒任何反應。

t花點時間看下 Example 5-2中的代碼吧.

Example 5-2 Combining Toggle Buttons in a Group

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);
      

Example 5-2

建立了3個開關按鈕并把它們加入開關組中。tb1調用了

setSelected方法，是以

應用打開後它會被按下。但是，你也可以按起Minor按鈕使得沒有任何開關按鈕被按下。見 

Figure 5-2

Figure 5-2 Three Toggle Buttons in a Group

Description of "Figure 5-2 Three Toggle Buttons in a Group"

一般使用開關按鈕的組來為每個按鈕配置設定特定行為。下一部分将解釋如何使用這些開關按鈕改變矩形的顔色。

設定行為

ToggleButton類從

Node

 類繼承了

setUserData方法

，該方法可以讓你給任意選中的選項賦特定的值。在 Example 5-3中，使用者資料指明了要用什麼顔色來繪制矩形。

Example 5-3 Setting User Data for the Toggle Buttons

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>對象檢查了組中被按下的開關。如果沒有開關按鈕被按下，矩形就用白色繪制。如果某個按鈕被按下，

getSelectedToggle

getUserData方法會連續調用來傳回一種顔色繪制矩形。

比如使用者按下了tb2按鈕， 

setSelectedToggle().getUserData()的調用傳回

Color.LIGHTBLUE

結果如圖 

Figure 5-3

Figure 5-3 Using Toggle Buttons to Paint a Rectangle

Description of "Figure 5-3 Using Toggle Buttons to Paint a Rectangle"

檢視 ToggleButtonSample.java檔案檢查應用的完整代碼。

美化Toggle Button

可以通過為開關按鈕應用CSS來改善應用的視效。在JavaFX 2.0應用中使用CSS和在HTML中使用幾乎一樣，因為它們都基于相同的CSS規範。Example 5-4使用

setStyle方法改變了開關按鈕的

-fx-base

 CSS熟悉。

Example 5-4 Applying CSS Styles to Toggle Buttons

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

程式中加入這些代碼後開關按鈕的變化見 

Figure 5-4

Figure 5-4 Painted Toggle Buttons

Description of "Figure 5-4 Painted Toggle Buttons"

 你可以嘗試

ToggleButton類的其他CSS屬性，或者應用動畫、轉換、

 JavaFX API中的各種視效。