javacsswicketsprite-sheet

How to load Wicket CSS and Icon resources correctly?

I am looking for a best practice way on how to load a CSS file and an icon spritesheet with Wicket (version 9). I have several Java projects and the CSS and icon spritesheet is part contained in my-resources.jar.

Previously, the folder structure was as follows:

The CSS was included in my page using:

@Override
public void renderHead(IHeaderResponse response) {
  super.renderHead(response);
  response.render(CssHeaderItem.forReference(new MyCssResourceReference()));
}

where the Reference class is:

package com.example.myapp.resources;

public class MyCssResourceReferenceextends CssResourceReference {
  public MyCssResourceReference()
  {
    // number of .. corresponds to package this class is located in
    super(MyCssResourceReference.class, "../../../../META-INF/resources/css/my.css");
  }
}

Inside the CSS, the spritesheet is referenced like this:

.button {
  background: url(../icons/spritesheet.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}

.button-close {
  background-position: -40px 0px;
}

This had the advantage that the icon spritesheet was found implicitly without the need to mount it as a resource for it. But it also has several drawbacks:

Therefore, I now want to restructure how the CSS and icon spritehseet resources are delivered. What's the preferred way of doing this in Wicket?

I want to keep a separate JAR file for my resources, but I'm free to move the resources to a different folder/package. Does it make sense to use Wicket's shared resource mechanism?

Solution

  • need to adjust the number of .. used in the path if the class MyCssResourceReference is moved in a different package

    super(MyCssResourceReference.class, "../../../../META-INF/resources/css/my.css");

    Since you want to point to the root you can just do:

     super(MyCssResourceReference.class, "/META-INF/resources/css/my.css");

    Wicket uses java.lang.Class#getResource() to load the classpath resources.

    "magic" that the icon spritesheet is being found without explicit mention in any Wicket code

    I wouldn't say it is magic! This is how relative paths work! The browser calculates the absolute path and makes an HTTP request that Wicket processes without issues.

    undertow had trouble serving contents in the META-INF directory

    You can use /static instead of /META-INF! Or any other custom name you like