Toggle Buttons in JavaFX Java 8 GUI

In diesem Artikel lernst du die Verwendung des Toggle Buttons in JavaFX Java 8 GUI. Dazu werden wir ein kleines Programm schreiben, bei dem der Nutzer angeben soll, welche Augenfarbe er hat. Du kannst versuchen das Programm selbst zu schreiben, dazu musst du nur kurz recherchieren, wie man einen Toggle Button anlegt und einen Changelistener verwendet. Ich werde dich jedoch hier durch die einzelnen Schritte führen.

Anlegen von Toggle Buttons Toggle Buttons in JavaFX Java 8 GUI


final ToggleGroup group = new ToggleGroup();

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

ToggleButton tb2 = new ToggleButton("Grün");
tb2.setToggleGroup(group);

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

Dabei können wir grundsätzlich einen ToggleButton in JavaFX mit keinem, einem oder zwei Parametern anlegen. Bei keinem, hat er keinen Text, bei einem einen Text und bei zweien einen Text und ein Icon. In diesem Beispiel sehen wir drei ToggleButtons mit Text. Außerdem haben wir hier eine ToggleGroup angelegt, welcher wir die einzelnen ToggleButtons zuweisen. Innerhalb einer ToggleGroup kann nur ein ToggleButton aktiv sein. Wenn man einen anderen Aktiviert, wird der vorher aktive, deaktiviert.

Daten zu einem Toggle Button zuweisen

Wir können einem Toggle Button auch Daten zuweisen. Das machen wir mit der setUserData() Methode


tb1.setUserData(Color.BLUE);
tb2.setUserData(Color.GREEN);
tb3.setUserData(Color.BROWN);

Nun brauchen wir noch ein Viereck, in welchem wir die Farbe anzeigen wollen, die ausgewählt wurde. Außerdem fügen wir auch noch den Code ein, der die Farbe umsetzt.


final Rectangle rect = new Rectangle(180,50);
rect.setFill(Color.WHITE);
			
group.selectedToggleProperty().addListener(new ChangeListener(){

	@Override
	public void changed(ObservableValue<? extends Toggle> ov, Toggle old_toggle, Toggle new_toggle) {
		if(new_toggle== null){
				rect.setFill(Color.WHITE);
		}else{
			rect.setFill((Color) group.getSelectedToggle().getUserData());
		}
					
	}
						
});

Wir verwenden hier ähnlich wie bei einem Button einen Listener, nur handelt es sich hierbei um einen ChangeListener, welcher darauf wartet, dass ein “change” also eine Veränderung durchgeführt wurde. Darin fangen wir den Fall ab, dass das arg2 leer ist, wenn das der Fall ist, soll die Farbe auf Weiß gesetzt werden. Ansonsten auf die Farbe die wir als UserData festgelegt haben.

Nun brauchen wir nur noch das Label, welches die Frage anzeigt und müssen die einzelnen Elemente zu unserem GridPane hinzufügen.


Label fragenLabel = new Label("Welche Augenfarbe hast du?");

GridPane.setConstraints(tb1, 0,1);
GridPane.setConstraints(tb2, 1,1);
GridPane.setConstraints(tb3, 2,1);
GridPane.setConstraints(rect, 0,2);
GridPane.setColumnSpan(rect, 3);
GridPane.setConstraints(fragenLabel, 0,0);
GridPane.setColumnSpan(fragenLabel, 3);


grid.getChildren().add(tb1);
grid.getChildren().add(tb2);
grid.getChildren().add(tb3);
grid.getChildren().add(rect);
grid.getChildren().add(fragenLabel);

Das Ganze muss wie gewohnt in einer Scene sein und das Grid müssen wir vorher natürlich angelegt haben. Das haben wir jedoch bereits ausreichend in den vorherigen Artikeln bearbeitet, dort findest du den Code, falls du ihn brauchst.