Globally accessible resources in Wicket application

Question

Currently, I have an Application which consists of a BasePage which as a header (panel), footer(panel) and in the center for inherited page content. The problem I am running into is with ResourceReferences (Perhaps this isn't even the right way). I am looking for a solution which will allow me to do the following:

1. Have a single directory for globally used images, js, css
2. Register (or not) those resources so that they can be accessible from any inherited page or sibling pages to BasePage I might create in the future
3. Allow those resources to be accessible within CSS and JS (e.g. urls to images)

So far I have read through several examples which show how to package resource for a component or application level scope, but none that seem to address all 3 issues I am looking for help with. It is critical that I don't have to copy globally used images (edit icon, logos, etc) into each component package for referencing, and it would be nice for maintenance reasons that these bindings be made in one place globally for easy reference and updating.

Answer 1

This has changed significantly since Wicket 1.4. Please see 'Adding Javascript or CSS using a Resource' in Wicket's Wiki

To make images and other resources globally accessible (especially from CSS and JS files), mount them in your Applications's init() method:

mountSharedResource("/images/submit.jpg", new ResourceReference(MyComponent.class, "foo.jpg").getSharedResourceKey());

There is absolutely no need to duplicate resources in any way. Resource don't have to be in the same packages as the component itself. In our applications, we put globally used resources into a dedicated packages (say com.example.myapp.images) and put a single class in it (e.g. ImagesScope.java) - same for JS and CSS.

For images, you won't need ResourceReference as you won't need those references rendered in your code (except for org.apache.wicket.markup.html.image.Image). For JS and CSS use

add(CSSPackageResource.getHeaderContribution(PanelOne.class, "PanelOne.css"));

By the way, I'm the author of a little library called wicketstuff-merged-resources available from GitHub. Using this library you may skip the manual mounting in your Application's init() and use annotations instead.

EDIT: updated link. unfortunately, documentation in the wicketstuff wiki seems to be gone now. There are some articles on our blog though.