Versions Compared

Old Version 2

changes.mady.by.user Confluence Administrator

Saved on

compared with

New Version 3

changes.mady.by.user Confluence Administrator

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

JavaScript and CSS support

Overview

There are two ways of adding CSS/JavaScript support to a Wicket page. The first is by using the <wicket:head> section, while the other is by simply providing a link to a CSS/JavaScript page.

Contributing to the page head

The output of a Wicket html page is composed by assembling various things (borders, panels, page extensions, and of course pages themselves). Anything in a "normal" page is automatically contributed to the output. The same cannot be said, however, for borders, panels, or page extensions.

...

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.

Using <wicket:head> to contribute CSS

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!

...

Panel

import wicket.markup.html.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.

...

Panel
Wiki Markup
  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 );

A word of caution about the <body> tag

There is one more thing to mention. The onLoad attribute of <body> is sometimes used to initialize certain functionality. E.g.

...

Panel

<html xmlns:wicket>
<head>
<!-- insert header even though no <wicket:head> is given -->
<wicket:head>panel header</wicket:head>
</head>
<body onload="function()">
<span wicket:id="panel">
<wicket:panel>
panel
</wicket:panel>
</span>
</body>
</html>

Linking directly to a CSS page

If, for some reason, you want to directly link to your CSS/JavaScript page, this is also possible with Wicket. The CSS/JavaScript file should be in the same source directory as the component's Java class and its HTML template.

...