第十一回 JavaFX2.0開關按鈕ToggleButton

文本來自我的翻譯文章http://somefuture.iteye.com/blog/1198707

原文地址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 iconToggleButton tb1 = new ToggleButton();//A toggle button with a text captionToggleButton tb2 = new ToggleButton("Press me");//A toggle button with a text caption and an iconImage 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中的各種視效。