9 Replies Latest reply: Nov 24, 2012 12:45 PM by Celer RSS

    CSS background image not loading once deployed

    Celer
      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
          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
            Is there anyway to debug this?
            • 3. Re: CSS background image not loading once deployed
              David Grieve
              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
                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
                  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
                    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
                      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
                        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
                          Thanks for the post. So what is the structure of the jar with the css and images?