This discussion is archived
9 Replies Latest reply: Nov 24, 2012 10:45 AM by Celer RSS

CSS background image not loading once deployed

Celer Newbie
Currently Being Moderated
All

We have the following in our CSS
.loginPanel {
    -fx-background-color:-toolbar-background-color;
    -fx-background-image: url("images/company_logo_blue_80x240px.png");
    -fx-padding: 10 20 10 20; 
       -fx-background-repeat: no-repeat;
       -fx-background-position: top;
    -fx-effect: dropshadow(two-pass-box,black,5,.2,0,0);
    
}
When packaged and run on the same machine the images shows up. When deployed to another desktop the image is not shown.
  • 1. Re: CSS background image not loading once deployed
    Celer Newbie
    Currently Being Moderated
    The setup we have has the images and css in another jar that is on the classpath. The reason for this is to allow themes to be built outside of the main application.
  • 2. Re: CSS background image not loading once deployed
    Celer Newbie
    Currently Being Moderated
    Is there anyway to debug this?
  • 3. Re: CSS background image not loading once deployed
    David Grieve Pro
    Currently Being Moderated
    Paths are relative to the location of the .css file. Is the .css file in the same jar as the images directory?
    Another possible problem, if you are using binary css files, is http://javafx-jira.kenai.com/browse/RT-21964
  • 4. Re: CSS background image not loading once deployed
    Celer Newbie
    Currently Being Moderated
    Hi David,

    So we have our main application jar file application_client.jar then we have a css jar called application_client_styles.jar

    The styles jar has the same package structure as application jar so it look like
    com.application.jfx.app.client.themes
                                                      application_style.css
                                                      images.
                                                                image_1.png
                                                                image_2.png
    The application jar has the same package structure.

    The way we load the CSS is by called a Factory class within the style jar that just calls .class.getResource("style.css") and loads it into the scene.
    So I think that should be correct.

    But the images don't show up. If I build a label and load the image using ImageView with the class.getResource("image.png") then it will work.
  • 5. Re: CSS background image not loading once deployed
    Celer Newbie
    Currently Being Moderated
    What is strange. If I package on a machine that has the icons. And then install and launch it works. If I take that installer and move it to a machine that did not build the package the icons don't work.
  • 6. Re: CSS background image not loading once deployed
    David Grieve Pro
    Currently Being Moderated
    Even so, finding the css resource is not the same as finding a class resource. In other words, the css implementation doesn't go looking at everything in the classpath to find the resource. When the css file is parsed, the parser grabs the file url and uses that to resolve relative urls.

    This follows http://www.w3.org/TR/CSS21/syndata.html#uri, which states
    In order to create modular style sheets that are not dependent on the absolute location of a resource, authors may use relative URIs. Relative URIs (as defined in [RFC3986]) are resolved to full URIs using a base URI. RFC 3986, section 5, defines the normative algorithm for this process. For CSS style sheets, the base URI is that of the style sheet, not that of the source document.
    Let's say your css file is in Foo.jar and your image is in Bar.jar. The URL, then, for application_style.css is going to be
    jar:file:/some/arbitrary/path/Foo.jar!/com/application/jfx/app/client/themes/application_style.css
    and url(images/image_1.png) is going to resolve as
    jar:file:/some/arbitrary/path/Foo.jar!/com/application/jfx/app/client/themes/images/image_1.png
    where really you want Bar.jar

    I'm afraid at this point, all you can do is reorganize your jar file so the .css file is in the same jar as the images. There has been some discussion in the past about adding a "classpath" function so you'd be able to do
    -fx-background-image: classpath("images/image_1.png");
    I can't find anything in JIRA for it, but you are welcome to create a request.

    FWIW, calling
    ImageView imageView = new ImageView();
    imageView.setImage(new Image("images/image_1.png"))
    is equivalent to
    ImageView imageView = new ImageView();
    imageView.setStyle("-fx-image: 'images/image_1.png';");
  • 7. Re: CSS background image not loading once deployed
    Celer Newbie
    Currently Being Moderated
    Well that is what my jars look like. I think the only way to test this is create a JIRA and upload a theme jar.
  • 8. Re: CSS background image not loading once deployed
    David Grieve Pro
    Currently Being Moderated
    Well now, that is interesting. I created this little test:
    package fxtest;
    
    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.image.ImageView;
    import javafx.scene.layout.StackPane;
    import javafx.stage.Stage;
    
    /**
     *
     * @author dgrieve
     */
    public class TestApp extends Application {
    
        public static void main(String[] args) {
            launch(args);
        }
    
        @Override
        public void start(Stage stage) throws Exception {
            
            StackPane sp = new StackPane();
            sp.setPrefSize(100, 100);
            sp.getStyleClass().add("sp");
    
            Scene scene = new Scene(sp);
            scene.getStylesheets().add("fxtest/testapp.css");
            stage.setScene(scene);
            stage.show();
        }
    }
    With this css
    .sp { -fx-background-color: dodgerblue; -fx-background-image: url("images/duke.png"); }
    In NetBeans, I created two projects. One with just the .java file. The other with the .css file and the images directory. I set the project properties to self-sign the jars and set the first project up to run in a browser and to include the jar from the other project. With this configuration, the applet ran just fine.
  • 9. Re: CSS background image not loading once deployed
    Celer Newbie
    Currently Being Moderated
    Thanks for the post. So what is the structure of the jar with the css and images?

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points