CODEWITHSUNDEEP
imagejavafxbackground
Alyona
Alyona

Reputation: 1792

Why is setStyle for -fx-background-image and -fx-image not working?

I can't understand why I cannot change picture (background of field and image of imageview) from this method:

private void loginCheck(String loginText){
    String login = loginText.trim();
    if(login == null || login.equals("")) {
        loginField.setStyle("-fx-background-image:url('images/registration_login_wrong.png');");
        logoTick.setStyle("-fx-image:url('images/registration_wrong.png');");
        logoTick.setVisible(true);
    }else{
        loginField.setStyle("-fx-background-image:url('images/registration_login_right.png');");
        logoTick.setVisible(false);
    }
}

CSS code for logoTick is:

.login_tick{
-fx-image:url("images/registration_tick.png");
visibility:false;}

Everything besides -fx-image and -fx-background-image seems to work fine. I also changed background image in another class(of a label) and didn't encounter any problems. That's why I can't understand what can be possibly wrong. I checked images location and name everything seems correct. If I manually replace the image path in CSS it is working, but from the code images just disappear.

Upvotes: 0

Views: 3545

Answers (1)

James_D
James_D

Reputation: 209553

The paths in the CSS url(...) function are treated as relative paths; the location to which they are relative is different in a stylesheet and in an inline style. From the CSS documentation:

If the style appears in a stylesheet, the path is relative to the base URI of the stylesheet. If the style appears in an inline style, the path is relative to the root of the classpath.

Without knowing your project layout, it's not possible to give you the correct paths for the images, but that should be enough to figure it out.

Alternative Solution

An alternative solution is to define all the styles in CSS, and to manipulate the style class in the Java code to select the appropriate style. I like to use JavaFX 8 CSS PseudoClasses to do this:

.login-field:login-incorrect {
    -fx-background-image: url('images/registration_login_wrong.png');
}
.login-field:login-correct {
    -fx-image:url('images/registration_login_right.png');
}
.login_tick {
    -fx-image:url("images/registration_tick.png");
    visibility:false;
}
.login_tick:login-incorrect {
    -fx-image:url('images/registration_wrong.png');
    visibility: true ;
}

And then the Java code looks like:

private void loginCheck(String loginText){
    String login = loginText.trim();
    boolean loginIncorrect = (login == null || login.equals("") ;

    PseudoClass loginIncorrectPsuedoClass = PseudoClass.getPseudoClass("login-incorrect");
    PseudoClass loginCorrectPsuedoClass = PseudoClass.getPseudoClass("login-correct");
    loginField.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorrect);
    loginField.pseudoClassStateChanged(loginCorrectPseudoClass, !loginIncorrect);
    logoTick.psuedoClassStateChanged(loginIncorrectPseudoClass, loginIncorret);
}

The advantage of this approach is that all style information is stored in the CSS file; the Java code just changes the selector used for the UI elements.

Upvotes: 2

Related Questions