Login mit CSS Style

[MiMa]

In Sachen JavaFX GUI Programmierung versuche ich ein Tutorial um zu setzen welches ein FXML Login mit CSS Style eingesetzt wird.
Das Login funktioniert soweit, aber es wird der Hintergrund welches im CSS Style definiert ist nicht angezeigt.

Fehlermeldungen werden keine ausgegeben.
Vielleicht sieht ja jemand wo das Problem liegen könnte.

Vielen Dank

LoginApplication

package com.example.logindms;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

import java.io.IOException;

public class LoginApplication extends Application {

    Stage loginFenster;
    @Override
    public void start(Stage primaryStage) throws IOException {
        this.loginFenster = primaryStage;
        login();

    } // start

    public void login(){
        try {
            FXMLLoader fxmlLoader = new FXMLLoader(LoginApplication.class.getResource("login-fenster.fxml"));
            AnchorPane pane = fxmlLoader.load();
            Scene scene = new Scene(pane);
            scene.getStylesheets().addAll(LoginApplication.class.getResource("loginstyle.css").toExternalForm());
            loginFenster.setResizable(true);
            loginFenster.setTitle("Login - Fenster");
            loginFenster.setScene(scene);2
            loginFenster.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    } // loginFenster


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

FXML

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="960.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" />

CSS

#rootPane{
    -fx-background-image: url("loginhintergrund.jpg");
}

 

[krgewb]

In Zeile 29 steht eine Zwei am Ende:

 loginFenster.setScene(scene);2

 

[MiMa]

Ja hatte ich im Code auch gefunden und entfernet, da es eine entsprechende Fehlermeldung gab.
Hab es hier im Forum vergessen zu korrigieren. Sorry.

Die Anwendung läuft, aber ohne Hintergrundbild.
Ich habe auch mal anstatt das Bild eine Hintergrundfarbe definiert was ebenfalls nicht funktionierte!
Kann man überhaupt kontrollieren ob das CSS überhaupt ausgeführt wird?
Sind denn die Pfade und die Lagerung der Dateien so korrekt bei IntelliJ?

 

[KonradN]

Sind denn die Pfade und die Lagerung der Dateien so korrekt bei IntelliJ?

Da bin ich mir nicht sicher. Ich kenne die Angabe von Dateien auf dem classpath so:
url('classpath😛ath/to/image.png').

Deine Art das anzugeben sucht im gleichen Pfad wie die css Datei, und da du die mit URL angibst, hätte ich erst einmal erwartet, dass es so funktionieren würde. Aber da dies nicht der Fall ist, würde ich Dir raten, einmal die Angabe mit der url Syntax anzugeben. Und gibt den Pfad komplett an, also classpath:/com/example/logindms/loginhintergrund.jpg

Das wäre zumindest einen Versuch wert.


Ansonsten paar Anmerkungen (Keine Fehler von Deiner Seite - das sind nur Hinweise von meiner Seite!)
Das andere, das mir auffällt: Du nutzt addAll - Du willst ein Stylesheet hinzu fügen, daher wäre meine Erwartung ein add Aufruf (statt dem addAll). Das solölte aber ok sein, dass addAll ein varargs Argument nimmt und daher ist die Angabe von einem Stylesheet auch ok. Das muss man also nicht anpassen.

Generell arbeitest Du mit fxml - Du kannst das stylesheet auch in der fxml mit angeben: <fx:style source="style.css"/>

 

[mihe7]

mit CSS Style

Kein Beitrag zur Lösung aber weils grad passt:

 

[MiMa]

Mit CSS habe ich noch nicht gearbeitet und mit IntelliJ und Maven habe ich noch keine so Erfahrungen gemacht.
Ich weiß nur das JavaCode in das Verzeichnis java kommt und alles andere in das Verzeichnis Ressourcen.
Deshalb habe ich es auch so in dem Beispiel angelegt.
In dem Udemy Kurs für JavaFX war die Vorlage keine Maven Application und deshalb waren alle Dateien in einem Ordner.
Ob "com/example/logindms" für beide Verzeichnis der ausgangspunkt sind ist mir noch nicht ganz klar.

Wie das css eingebunden wird weis ich nicht daher mache ich ja den Kurs um GUI Programmierung in JavaFX zu erlernen.
Ich denke das ich mir eine andere Lernunterlage suchen werde. Warscheinlich baut das auf eine ältere Java Version?!?

@mihe7
Der Song ist ja echt nice 🙂

 

[KonradN]

Das was Du da gemacht hast, sieht korrekt aus. Die Aufteilung ist so auch genau richtig. Du hast die Dateien da, wo ich sie auch erwarten würde. Ich hätte da auch erwartet, dass es angezeigt wird. Daher: Mach den Kurs ruhig weiter.

Ich denke, ich habe den Fehler jetzt auch gefunden (hatte gestern nicht gut genug geschaut):
Im CSS hast du #rootPane. Du nutzt also den id selector.

Die id ist aber nicht gesetzt. Daher wird das Bild nicht angezeigt. Das Bild soll bei dem Element mit der id rootPane angezeigtg werden und da es so ein Element nicht gibt, wird es nicht angezeigt.

In der AnchorPane musst Du noch ein fx:id="rootPane" Attribut hinzu fügen. Dann wird das Bild vermutlich auch angezeigt.

Nur noch einmal zu der Erklärung: Es gibt im CSS 3 Selektoren:
a) Elemente. Wenn Du nur ein Element angibst, dann bezieht es sich auf alle Element. Das wäre also etwas wie:
AnchorPane { ... }
Das würde dann bei allen AnchorPane Elementen benutzt.

b) Class: mit .class gibst Du eine Klasse an. In dem fxml kannst Du bei Elementen also etwas setzen wie styleClass="my-cool-style" um dann im css zu haben .my-cool-style { ... }

c) id: mit #id gibst Du die Id an, auf die sich etwas beziehen soll. Das ist ja das, was Du da verwendet hast.

 

[MiMa]

Danke, nun hat es geklappt.

 

[krgewb]

Was ist rootPane?

 

[KonradN]

Was ist rootPane?

Jetzt vermutlich die id seiner Pane - da er geschrieben hat, dass es nun klappt und das in erster Linie mein Vorschlag war (zusammen mit paar Erläuterungen zu CSS Grundlagen).