Adding a Reference to a CSS or Javascript Page in Wicket 2.0


Assume that you were developing a site in Wicket that made heavy use of both the Protoype and the Scriptaculous libraries. Sometimes you’ll be using Prototype scripts directly in your HTML files, and at other times, you’ll be using prepackaged functionality like wicket-contrib-scriptaculous. You want to add a reference to the Prototype and Scriptaculous scripts to every single page on your site, how would you do that?

Page Inheritance
When you create a Wicket application you usually make liberal use of inheritance to give every page in your application a common set of components. You may also make use of abstract Section pages which are the super classe for every page in a given section. These section pages would take care of adding common sectional navigation and the top-most page would be responsible for setting up all common elemenets. Since Prototype and Scriptaculous are going to be universal elements, you will add IHeaderContributors somewhere in the AppPage class from the diagram below:


From the diagram: your application extends Wicket’s WebPage class with an AppPage class. This AppPage class adds a universal border to all pages on the site. A concrete HomePage class extends the AppPage class and, lastly, there are two sections (A and B) which each maintain a separate abtract section class to add section-specific navigation and components.

Where do we Add Prototype and Scriptaculous?
If you were going to add a reference to prototype.js and scriptaculous.js, you would do so in one of two places. A.) In the section of the AppPage.html. OR, B.) In the constructor of the AppPage.java class. Let’s look at both options. Adding these references to the constructor of AppPage means that the references will be available to every page which extends AppPage.

Adding a Reference to the AppPage.html

If you were going to add a reference to the AppPage.html file, you would add the following:

<script type=”text/javascript” src=”resource/js/prototype.js”></script>

In this scenario, you will need to make sure that “prototype.js” is available under the resource/js/prototype.js path in the web application. Wicket will take care of prepending the content path to this reference.

Adding a Reference to the AppPage Class
To add a reference to the AppPage class, add some HeaderContributors. A HeaderContriburor is an implementation of IBehavior and can be added with the add() command

public AppPage() {
new AppBorder(this, “border”);
new FeedbackPanel(this, “status”);

add( HeaderContributor.forJavaScript(ScriptaculousAjaxHandler.class,”prototype.js”) );
add( HeaderContributor.forJavaScript(ScriptaculousAjaxHandler.class,”scriptaculous.js”) );
}

There are two convenience methods provided by HeaderContributor – forJavascript and forCss. Boh functions take a Class and the name of a resource. When using this method, the Javascript resources is stored on the classpath as a resource in the same package as the ScriptaculousAjaxHandler. The ScriptaculousAjaxHandler is a class that is bundled with wicket-contrib-scriptaculous.