Image referencing in CSS with Wicket

Question

Per a great answer from another question I have begun mounting global resources (css/js/images) in the init() method of my WebApplication. Using the following:

mountSharedResource("/images/edit-btn.gif", new ResourceReference(GlobalResource.class, "edit-btn.gif").getSharedResourceKey());

This of course allows css in another package to do something like this:

background-image: url("/images/edit-btn.gif");

The problem I have run into is that this only works at runtime, the mounted path is virtual. One of the big benefits of Wicket (imo) were the features (<wicket:remove>, xml valid tags, head links, page inheritance) which allowed a page designer working with layout to be able to visualize the page with its images, js, css, etc without having to run within the wicket engine.

I am totally acceptant of the fact there is never a clear line between the designer/programmer roles in Web apps, but it seems odd to me the Wicket designers missed this. Is there any way to allow a globally used image to render stand-alone as well as work at runtime in Wicket?

Answer 1

I think the recommended way is to take html from your designers and turn in into wicket components - which means you'll split it into several files. Rendering those partial files won't work without any extra efforts. I'd recommend to setup a simple script, tool or anything along those lines that will start your webapp for your designers to work on. This way, they can modify the fragments and immediately see the updated rendering. You'll have to agree on a common structure and tell them how to use the <wicket:remove> and you should be fine.