Our Blog

Let us find tech solutions together

Jul 20

Add Javascript or CSS using a Resource

By kinabalu | Comments

 

A quick howto (via wicket wiki) on adding Javascript or CSS to your pages, and having them compressed during the “deployment” cycle automatically by Wicket. So to start with, we need to copy or Javascript or CSS file somewhere in our package hierarchy that we can reference in our Page. For simplicity, we can copy it right next to the HTML file like so:

1
2
3
4
MyPage.java
MyPage.html
MyPage.js
MyPage.css

Then in our Page, we need to reference these items based on the path of our Java file, like so:

1
2
3
private static final CompressedResourceReference MYPAGE_JS = new CompressedResourceReference(MyPage.class, "MyPage.js");

private static final CompressedResourceReference MYPAGE_CSS = new CompressedResourceReference(MyPage.class, "MyPage.css");

This code gives us a ResourceReference that we can add to our page, most use cases to the HTML head element block. To do that in your page:

1
2
3
add(HeaderContributor.forJavaScript( MYPAGE_JS ));

add(HeaderContributor.forCss( MYPAGE_CSS ));

In Wicket 1.4 HeaderContributor.forJavaScript() and HeaderContributor.forCss() are deprecated, you can use the code below:

1
2
3
add(JavascriptPackageResource.getHeaderContribution(MYPAGE_JS));

add(CSSPackageResource.getHeaderContribution(MYPAGE_CSS));