Wicket & CSS resources

Asked 16/4, 2012 at 21:52 Answered 1/4, 2013 at 21:45

I've been looking around and I can't find a dummy's guide to adding my own CSS to a Wicket website project. But before I start... I'm fairly new to proper java development, so when I say "Dummy's guide" I really mean it! Simple and clear explanations for me here are very much appreciated!

I started with this guide here (http://wicket.apache.org/start/quickstart.html) and have that running fine. Next up, I want to add my own CSS and start messing about with it. And I'm getting nowhere fast. Mainly because I haven't got a clue how to do this in java (I come from a C#/asp.net background).

Anyway, those that know Apache Wicket will know this already, but the source for the quick start creates your code in a place like follows project/src/main/java/com/xyz

What I presumed I could do was add a CSS folder here... so I created a sample CSS and I stuck it here like this:

project/src/main/java/com/xyz/css/conor.css

(containing something real simple like the following)

h2 {
    font-family: tahoma;
}

Then I removed the Wicket default css in my homepage.html and changed it to reference mine as follows:

<link rel="stylesheet" href="css/conor.css" type="text/css" />

But my page doesn't take any heed of the conor.css... Obviously I'm doing something wrong, but cannot find a step by step guide for a java dummy (aka me!).

I have read things like you need to install web tools for eclipse. I did have no idea what use this is to me or why it will instruct my pages to use the CSS.

Any help is very much appreciated!

Quintessence answered 16/4, 2012 at 21:52 Comment(0)

While Wicket parses the markup and tries to come up with proper links, you have to help Wicket understand your markup.

In your case you try to link to a resource that is located in the Java class path. This is different from the web context root (located in src/main/webapp). The difference between class path resources and web context resources is that Wicket is responsible for and controls access to class path resources, and that your container (i.e. jetty, tomcat, glassfish, etc) is responsible for and controls access to web context resources.

For example, when a resource is under the purview of Wicket, we can do all kinds of things with it, such as variable substitution, compression, minification, aggregation. These things are part of Wicket.

Now to your problem at hand, since you didn't tell Wicket that the linked resources are under its control, Wicket assumes that you want the container to handle those. To mitigate this, you should add a <wicket:link> tag around your <link> tag(s).

<head>
    ...
    <wicket:link>
    <link rel="stylesheet" href="css/conor.css" type="text/css" />
    ...
    </wicket:link>
</head>

The <wicket:link> tags tell Wicket to look for the enclosed resources and try to resolve them on the Java class path.

Pudding answered 17/4, 2012 at 6:31 Comment(3)

Excellent, thanks for that. Both putting the wicket:links tag around it and adding it to webapp seems to work. Question though... what's the recommended way to do this? – Quintessence 17/4, 2012 at 8:38

Depends on your use case. For reusable components you'd want to put the js and css next to the component. For applications, you'd want just one big js file and one big css file. – Pudding 17/4, 2012 at 9:34

Excellent thanks. Think I'll go with the webapp folder as it's just an all over site css I'll require. – Quintessence 17/4, 2012 at 9:37

In general you should add your css in project/src/main/webapp/css and then it will be accessed by css/conor.css

Vassili answered 17/4, 2012 at 7:39 Comment(1)

Thanks for this answer. Between your contribution and Martijns I've figured out what I needed. – Quintessence 17/4, 2012 at 11:52

You can load your css files In your wicket java page like that:

@Override
public void renderHead(IHeaderResponse response) {
    response.render(CssHeaderItem.forReference(new CssResourceReference(myCssFile.class, "myCssFile.css")));
}

If you have a css files in your projects you can load initially.

Pleura answered 1/4, 2013 at 21:45 Comment(0)

Recommended topics

Hot tags