Jetzt anmelden...

Login
Passwort
Registrieren
18.08.21 857 Views Kommentare [0] 0 0

credit: ©Darren/ adobe

JAVA Tutorial #53

JavaFX Bedienelemente

Im letzten Tutorial haben wir uns angesehen, wie das EventHandling funktioniert und wie wir einen Button programmieren können. Lernen wir jetzt weitere Bedienelemente kennen, die in JavaFX-Anwendungen regelmäßig zum Einsatz kommen.

Falconbyte unterstüzen

Betrieb und Pflege von Falconbyte brauchen viel Zeit und Geld. Um dir auch weiterhin hochwertigen Content anbieten zu können, kannst du uns sehr gerne mit einem kleinen "Trinkgeld" unterstützen.

Thema in Kurzform

  • JavaFX-Bedienelemente sind Teil des Pakets javafx.scene.control
  • Alle Bedienelemente sind Nodes, die dem SceneGraph hinzugefügt werden.
  • Da sie einer gemeinsamen Vererbungshierarchie entstammen, teilen sie sich mehrere Eigenschaften und Methoden.

    Inhaltsverzeichnis

  1. Label
  2. Button
  3. Hyperlink
  4. Checkbox
  5. ToggleButton
  6. RadioButton
  7. Slider

Label

Fangen wir mir dem einfachsten Element an, dem Label. Ein Label zeigt einen Text in der GUI. Da es keine Benutzerinteraktion bietet, ist es ganz streng genommen gar kein Bedienelement (gehört aber trotzdem zu javafx.scene.control).

Hier ein Beispiel:

@Override
public void start(Stage primaryStage){

Label label = new Label("Hello World!");

StackPane stack = new StackPane();
stack.getChildren().add(label);
Scene scene = new Scene(stack, 200,100);
primaryStage.setScene(scene);
primaryStage.show();
}            

Mit new Label("Hello World!") wird das Label erstellt. Der Text wird in diesem Beispiel direkt dem Konstruktor übergeben. Die Methode getChildren().add(), die wir auf der Layout-Referenz aufrufen, fügt das Label-Node schließlich dem StackPane-Container hinzu (ein StackPane ordnet Elemente übereinander gestapelt an).

Angezeigt wird ein Fenster mit dem Label dann so:

Java JavaFX Label

Mit der Methode setText() kann der Label-Text übrigens jederzeit nachträglich geändert werden:

label.setText("Hello Mars!");

Label mit Bild

Wir können dem Label neben dem Text auch noch ein zusätzliches Bild-Node hinzufügen.

Dazu erstellen wir zunächst ein neues Image. Danach packen wir dieses in ein ImageView-Objekt, das wir als Argument der Methode setGraphic() übergeben, die wir auf label ausführen:

@Override
public void start(Stage primaryStage){

    Image image = new Image(getClass().getResourceAsStream("bild.png"));

    Label label = new Label();
    label.setText("Hello World");
    label.setGraphic(new ImageView(image));

    StackPane stack = new StackPane();
    stack.getChildren().add(label);
    Scene scene = new Scene(stack, 250,200);
    primaryStage.setScene(scene);
    primaryStage.show();
}            

Hier das Ergebnis:

Java JavaFX Label Bild

Beachte, dass sich die Bild-Datei im selben Package (bzw. einem relativen Unterordner) wie die .class-Files befinden sollte.

Button

Selbstverständlich benötigt ein JavaFX-Programm Buttons. Hier gibt es einige ganz unterschiedliche Ausprägungen: Neben dem klassischen Standard-Button existieren nämlich noch Hyperlink, CheckBox, ToggleButton, RadioButton und ein paar weitere. Allen gemein ist, dass sie von derselben Superklasse ButtonBase abgeleitet sind. Entsprechend teilen sie sich die meisten Methoden.

Sehen wir uns zunächst die einfache Form eines Button an:

Java JavaFX Button

Hier der Code:

Button button = new Button("Klick mich!");
button.setOnAction(e-> {
    button.setText("Danke!");
});

Die Funktionalität des Buttons wird durch die Methode setOnAction() und dem dazugehörenden EventHandling in Form eines Lambda-Ausdrucks hergestellt.

Die Aktion, die dann beim Klick durchgeführt wird, ist die Änderung des Buttontexts von "Klick mich!" zu "Danke!". Das Ändern des Texts geschieht mittels der Methode setText(), die auf der Button-Referenz aufgerufen wird.

Der Button muss schließlich natürlich noch dem Layout hinzugefügt werden. Das haben wir im Code aus Platzgründen weggelassen.

Default Button

Mit setDefaultButton() kann ein Button als Default festgelegt werden. Er reagiert dann auch auf das Drücken der ENTER-Taste:

button.setDefaultButton(true);                

Hyperlink

Hyperlinks kennst du aus HTML und sie werden auch gerne in JavaFX-Anwendungen eingesetzt. Sie unterscheiden sich vom "normalen" Button primär optisch:

Hyperlink hyperlink = new Hyperlink("falconbyte.net");
hyperlink.setOnAction(e-> {
    hyperlink.setText("Danke!");
}); 

Java JavaFX Hyperlink

Wie in HTML haben bereits geklickte Links eine andere Farbe als ungeklickte. Über die Methode setVisited() lässt sich die boolesche Eigenschaft visited aber entsprechend zurücksetzen:

hyperlink.setVisited(false); // als ungeklickt markieren   

Checkbox

Das Bedienelement Checkbox erlaubt das Erstellen von "Kontrollkästchen" 😉

Eine Checkbox kennt drei Zustände:

  • checked = true, wenn Häkchen gesetzt
  • unchecked = false, wenn Häkchen nicht gesetzt
  • indeterminate = true, wenn unbestimmt markiert

Hier ein Beispielcode für drei Checkboxen:

@Override
public void start(Stage primaryStage){

    CheckBox cb1 = new CheckBox("Auto");
    CheckBox cb2 = new CheckBox("Flugzeug");
    CheckBox cb3 = new CheckBox("what?");
    cb3.setAllowIndeterminate(true);

    cb1.setOnAction(e-> {
        System.out.println(cb1.isSelected());
    });
    cb2.setOnAction(e-> {
        System.out.println(cb2.isSelected());
    });
    cb3.setOnAction(e-> {
        System.out.println(cb3.isIndeterminate());
    });

    VBox vbox = new VBox(); // Nodes vertikal anordnen
    vbox.getChildren().addAll(cb1, cb2, cb3); // Alle Checkboxen hinzufügen

    Scene scene = new Scene(vbox, 200,100);
    primaryStage.setScene(scene);
    primaryStage.show();
}                

Java JavaFX Checkbox

Standardmäßig kennen Checkboxen nur zwei Zustände: Häkchen oder kein Häkchen, true oder false. Ob ein Häkchen gesetzt ist, kann mit der Methode isSelected() geprüft werden.

Den dritten Zustand siehst du im Bild bei der dritten Checkbox. Damit eine Checkbox neben der Häkchen-Auswahl auch "indeterminate" (= unbestimmt) sein kann, muss das entsprechend gesetzt werden:

cb3.setAllowIndeterminate(true); // CheckBox mit 3 Optionen!                

Die Methode isIndeterminate() fragt diesen Wert dann ab und liefert true zurück, wenn die Checkbox entsprechend markiert wurde.

Wenn wir mit unseren Checkboxen zufrieden sind, können wir sie in einem Schritt dem Layout-Container mit addAll() hinzufügen.

ToggleButton

Ein ToggleButton ist ein Button, der zwei Zustände kennt: ausgewählt und nicht ausgewählt. Ist ein ToggleButton ausgewählt, wird das auch graphisch angezeigt. Hier ein Beispiel, wie das aussieht:

Java JavaFX ToggleButton

Der zweite ToggleButton ist ausgewählt und sieht entsprechend "eingedrückt" aus. Klickt man nochmnal aus denselben Button, wird er wieder deselektiert und "angehoben".

In der Regel möchte man mehrere ToggleButtons zu einer logischen Gruppen zusammenfassen. Eine solche Gruppe wird durch die Klasse ToggleGroup repräsentiert. In einer ToggleGroup kannn immer nur ein ToggleButton ausgewählt sein. Wird einer der ToggleButtons ausgewählt, werden die anderen automaitsch deselektiert:

// ToggleButtons erstellen
ToggleButton toggleButton1 = new ToggleButton("Option 1");
ToggleButton toggleButton2 = new ToggleButton("Option 2");
ToggleButton toggleButton3 = new ToggleButton("Option 3");

// Buttons der ToggleGruppe hinzufügen
ToggleGroup toggleGroup = new ToggleGroup();
toggleButton1.setToggleGroup(toggleGroup);
toggleButton2.setToggleGroup(toggleGroup);
toggleButton3.setToggleGroup(toggleGroup);

// Alle Buttons dem Layout hinzufügen
VBox layout = new VBox();
layout.getChildren().addAll(toggleButton1, toggleButton2, toggleButton3);                

Wenn man bei einem Wechsel des ausgewählten ToggleButtons eine Aktion durchführen will, fügt man der ToggleGroup einen EventListener hinzu:

toggleGroup.selectedToggleProperty().addListener((v, oldValue, newValue) -> {
    System.out.println(newValue); // Printed den neu ausgewählten Button
});                

RadioButton

RadioButton ist eine Unterklasse von ToggleButton und verhält sich bis auf zwei Unterschiede praktisch identisch:

  1. Andere Darstellung ("runde Auswahlkreise"), wie sie für Formulare gebräuchlich sind.
  2. Bei einem zweiten Klick auf einen RadioButton wird dieser nicht deselektiert.

Auch das logische Zusammenführen von einzelnen RadioButtons zu einer ToggleGroup funktioniert nach bekanntem Prinzip. Hier vollständigkeitshalber ein Beispiel:

// RadioButtons erstellen
RadioButton radioButton1 = new RadioButton("Option 1");
RadioButton radioButton2 = new RadioButton("Option 2");
RadioButton radioButton3 = new RadioButton("Option 3");

// Buttons der ToggleGruppe hinzufügen
ToggleGroup toggleGroup = new ToggleGroup();
radioButton1.setToggleGroup(toggleGroup);
radioButton2.setToggleGroup(toggleGroup);
radioButton3.setToggleGroup(toggleGroup);

// Alle Buttons dem Layout hinzufügen
VBox layout = new VBox();
layout.getChildren().addAll(radioButton1, radioButton2, radioButton3);

// Aktion bei Button-Wechsel
toggleGroup.selectedToggleProperty().addListener((v, oldValue, newValue) -> {
    System.out.println(newValue);
});                

Java JavaFX RadioButton

Slider

Ein Slider ist ein "Schiebregler", mit dem der Benutzer einen numerischen Wert innerhalb einer vorgegebenen Skala (Minimum und Maximum) auswählen kann:

Java JavaFX Slider

Nun zum Code, der dahintersteckt:

Slider slider = new Slider(0, 10, 0); // Minimal, Maximal, aktueller Wert
slider.valueProperty().addListener((v, oldValue, newValue)  -> {
    slider.setValue(newValue.intValue());
    System.out.println(slider.getValue());
});  

Dem Konstruktor übergeben wir drei int-Werte: Die ersten beiden für die mögliche Range und den dritten für den "Startwert". Danach setzen wir auf der valueProperty() des Sliders mit entsprechender Lambda-Syntax einen Listener, der reagiert, wenn der Nutzer an der Skala dreht.

Slider basieren in JavaFX auf Double-Werten. Die Anweisung setValue(newValue.intValue()) sorgt dafür, dass der Slider in ganzzaligen Schritten "einrastet" - wenn du lieber eine freie Skala mit Dezimalzahlen haben möchtest, lass die Anweisung einfach weg.

Damit unterhalb des Sliders auch die Werteskala angezeigt wird, rufst du auf dem Slider schließlich noch diese beiden Methoden auf:

slider.setShowTickLabels(true); // Min-Zahl und Max-Zahl anzeigen
slider.setMajorTickUnit(1); // 1er-Schritte anzeigen               

Falconbyte unterstützen

Kommentar schreiben

Alle Kommentare

Es gibt bislang noch keine Kommentare zu diesem Thema.

Operatoren einsetzen

Es gibt eine Vielzahl an Operatoren. Wir haben eine Übersicht erstellt

Objektinteraktion

Wie interagieren Objekte in einem Programm miteinander?

Die Klasse Object

Erfahren Sie alles über die Mutter aller Klassen

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2021 Stefan E. Heller

Impressum | Datenschutz

Falconbyte GitHub facebook programmieren lernen twitter programmieren lernen discord programmieren lernen