JavaFX von der IDE bis zur Auslieferung Teil 6: Das Auge isst mit

 Im letzte Teil haben wir unsere Anwendung auch für das internationale Publikum startklar gemacht. Nun wollen wir das Design der Anwendung ein wenig anpassen.

JavaFX-Anwendungen lassen sich über CSS beliebig verändern. Hierzu gibt es online von Oracle ein Referenz. Um ein neues Stylesheet zu erstellen legen Sie in den resources ein Ordner styles und darin eine neue CSS-Datei mit dem Name style.css an.

Diese hat folgenden Inhalt:

.button {
    -fx-background-color: #708090;
    -fx-border-color: #000;
    -fx-text-fill: #fff;
    -fx-font-family: "Arial";
}

Um nun aber auch noch die Anwendung mit der CSS-Datei zu verknüpfen, müssen wir noch ein bisschen coden.

Wir fügen folgenden Code in die Datei HalloJavaFX.java in die Methode start ein: 

String stylesheet = Objects.requireNonNull(
        HalloJavaFX.class.getResource("/styles/style.css")
).toExternalForm();

scene.getStylesheets().add(stylesheet);

So schnell können Sie sämtliche Buttons vom Design her anpassen.

Nun wollen wir auch noch ein Icon hinterlegen.

Hierzu gestalten Sie ein Bild oder nehmen ein Icon aus dem Internet zum Beispiel von dieser Seite. Erstellen Sie im Ordner resources einen neuen Ordner images und kopieren Sie es dort hinein.

Fügen Sie nun folgenden Code in die Datei HalloJavaFX.java:

InputStream inputStream = 
        HalloJavaFX.class.getResourceAsStream("/images/icon.png");

if(inputStream != null) {
    stage.getIcons().add(new Image(inputStream));
    inputStream.close();
}

Hat alles geklappt, so sollte die Anwendung nun wie folgt aussehen:

Falls irgendetwas nicht so geklappt haben sollte, wie Sie es gerne hätten, können Sie gerne im Github-Repository nachschauen oder über einen Kommentar fragen. 

Fortsetzung folgt...