...
In general terms, when you create a panel and want to contribute something to the page head, you would use this type of structure:
Code Block | ||||
---|---|---|---|---|
| ||||
| ||||
Panel | ||||
<wicket:head>panel header</wicket:head> <wicket:panel> panel panel </wicket:panel> |
So, assuming that your page output looks something like this:
Code Block | ||
---|---|---|
| ||
| ||
<html> <body> ... </body> </html>
<html>
<body>
...
</body>
</html>
|
The output generated, including the contribution to head made by the panel above, will look something like:
Code Block | ||
---|---|---|
| ||
| ||
<html><html> <head><wicket:head>panel header</wicket:head></head> <body> <span <body> <span wicket:id="panel"><wicket:panel> panel panel </wicket:panel></span> </body> </html> |
Panel |
---|
Note: since the head of a "normal" page is automatically |
...
If we are able to use the <wicket:head> section above to contribute to the page model, then we can certainly use it to reference a CSS resource!
First, the html:
Code Block | ||||
---|---|---|---|---|
Panel | ||||
| ||||
<html>
<wicket:head>
<link <html><wicket:head> <link wicket:id="mycss" rel="Stylesheet" type="text/css" href="styles/main.css"/> </wicket:head> <wicket:panel> panel panel </wicket:panel> </html> |
And now, the java:
Panelcode |
---|
import wicket.markup.html.WebMarkupContainer; ...WebMarkupContainer css = new WebMarkupContainer( WebMarkupContainer css = new WebMarkupContainer( "mycss" ); add( css ); |
That's it!
Customizing CSS output based on some parameters
You can customize CSS output based on various parameters, such as local, browser agent, etc. The easiest way is to use an anonymous class as follows.
In your html:
Code Block | ||
---|---|---|
| ||
| ||
<link wicket:id="mycss" rel="Stylesheet" type="text/css" href="styles/main.css"/> |
In your java:
Code Block |
---|
import wicket.markup.html.WebComponent; import wicket.model.IModel; import wicket.model.Model; import wicket.AttributeModifier; import wicket.Component; ... WebComponent c = new WebComponent( "mycss" ); IModel model = new Model() { public Object getObject( Component c ) { if ( someConditionIsTrue ) return "stylesheetx.css"; else return "stylesheety.css"; } }; c.add( new AttributeModifier( "href", model ) ); add( c ); |
...
There is one more thing to mention. The onLoad attribute of <body> is sometimes used to initialize certain functionality. E.g.
Code Block | ||
---|---|---|
| ||
| ||
<wicket:head>panel header</wicket:head> <body onload="function()"> <wicket:panel> panel panel </wicket:panel> </body> |
Wicket will not only inject the <wicket:head> region into the output, it will also append the <body> onLoad attribute to the Page's onLoad attribute. The output generated may look like:
Code Block | ||
---|---|---|
| ||
| ||
<html xmlns:wicket> <head> <head> <!-- insert header even though no <wicket:head> is given --> <wicket:head>panel header</wicket:head> </head> <body onload="function()"> <span <span wicket:id="panel"> <wicket:panel> panel panel </wicket:panel> </span> </body> </html> |
Linking directly to a CSS page
...
To the CSS file(s), insert something like this in your markup:
Code Block | ||||
---|---|---|---|---|
| ||||
<link | ||||
Panel | ||||
<link wicket:id="pageCSS" rel="Stylesheet" type="text/css" href="css/page.css"/> |
and this in your Page Java file for Wicket 1.1:
...