JavaFX: Stylizacja przycisków (Button)

JavaFX – Stylizacja przycisków (Button)

Pokazujemy tutaj stylizację przycisku. Przycisk ma trzy stany (normal, hover i pressed).
Przyciski mogą mieć trzy wielkości (big, small, middle).
Każdy przycisk ma napis i grafikę. Wielkość napisu i grafiki jest dostosowywana przy użyciu CSS.

Klasa BigButton

Klasy SmallButton oraz MiddleButton różnią się tylko wielkością przycisku i klasą CSS.

package dragonbutton;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BigButton extends Application {

    public static void main(String[] args) {
        Application.launch(args);
    }

    @Override
    public void init() {
    }

    @Override
    public void start(Stage stage) {
        try {
            VBox root = new VBox();
            //
            Button big = new Button("Liczby \nrzeczywiste");
            big.getStyleClass().add("bbutton");
            big.setOnAction(e -> System.out.println(
                    "Kliknąłeś przycisk 'Liczby rzeczywiste'"));
            big.setMaxWidth(200);
            big.setMinWidth(200);
            big.setPrefWidth(200);
            //
            root.getChildren().add(big);
            Scene scene = new Scene(root, 300, 300);
            scene.getStylesheets().add("zasoby/vademecum.css");
            stage.setScene(scene);
            stage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public void stop() {
    }
}

Plik vademecum.css

.button{
-fx-text-fill: #238E3E;
-fx-text-alignment: center;
-fx-content-display: left;
-fx-background-color: white;
-fx-border-width: 1;
-fx-border-color: black;
}
.button:hover{
-fx-background-color: #BBBBBB;
}
.button:pressed{
-fx-background-color: #666666;
}
.bbutton{
-fx-font-size: 21px;
-fx-graphic-text-gap: 10;
-fx-graphic: url(/zasoby/samsmok48.png);
-fx-background-radius: 10;
-fx-border-radius:10;
}
.mbutton{
-fx-font-size: 17px;
-fx-graphic-text-gap: 7.5;
-fx-graphic: url(/zasoby/samsmok32.png);
-fx-background-radius: 7.5;
-fx-border-radius: 7.5;
}
.sbutton{
-fx-font-size: 13px;
-fx-graphic-text-gap: 5;
-fx-graphic: url(/zasoby/samsmok24.png);
-fx-background-radius: 5;
-fx-border-radius: 5;
}

Po uruchomieniu klasy zobaczymy przycisk.

Gdy najedziemy na niego myszą i klikniemy zobaczymy pozostałe stany.

Pliki do ściągnięcia

Ściągnij moduł rozdzial29c.zip