Page History

...

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

	html
	html

Panel

<wicket:head>panel header</wicket:head>


  <wicket:panel>

panel


      panel
  </wicket:panel>

So, assuming that your page output looks something like this:

panel

Code Block

	html

	html


  <html>
      <body>
          ...
      </body>
  </html>

The output generated, including the contribution to head made by the panel above, will look something like:

panel

Code Block

	html

	html

<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 contributed to the output, and therefore the <wicket:head> tag would be redundant, use of this tag on a "normal" page will throw an exception.

...

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
	html


  <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:

panel

Code Block

	html

	html


  <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.

panel

Code Block

	html

	html


  <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:

panel

Code Block

	html

	html


  <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

	html
	html


  <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:

...

Child pages

Versions Compared

Old Version 4

New Version 5

Key

Customizing CSS output based on some parameters

Linking directly to a CSS page