Wicket - jQuery UI

jQuery UI integration in Wicket 1.5 & Wicket 6

Welcome!

Welcome to the demo site of the Wicket - jQuery UI API.

The goal of this API is to provide a bridge between Apache Wicket and jQuery UI.
The 'core' provides all jQuery UI built-in components.

Useful links:

About this demo site

This demo site aims to present all behaviors & widgets (components) the API provides, including all jQuery UI components you may find on the jQuery UI demo site.

For each main component class in the left's list, you may find several other related components (or other samples), including wicket-jquery-ui original ones (like message dialog-boxes or secured-button).

Getting started

In order to get started using this API, you may download appropriate jar(s) or set a maven dependency.

Download jar(s)

If you are not using maven, you need to download the core jar here:
http://central.maven.org/maven2/com/googlecode/wicket-jquery-ui/

You may also download other jars as required (ie: wicket-kendo-ui). Once done, just include the jar(s) in your project's build path.

Using Maven

<dependency>
    <groupId>com.googlecode.wicket-jquery-ui</groupId>
    <artifactId>wicket-jquery-ui</artifactId>
    <version>6.14.0</version> <!-- or 1.5.10 -->
</dependency>
                
If the version you specified is 'snapshot', you may define this repository:
<repositories>
	<repository>
		<id>sonatype-snapshots</id>
		<name>Sonatype Snapshots Repository</name>
		<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
		<snapshots>
			<enabled>true</enabled>
		</snapshots>
	</repository>
</repositories> 
				

Setting up the HTML markup

jQuery UI needs a CSS to work. No jQuery UI CSS has been shipped in the API, so you are free to use the one you wish.
You can get your own CSS at http://jqueryui.com/themeroller/, and put it (the CSS folder only) into your website.

The base template page is the following: (you might change the CSS href accordingly)
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <!-- jQuery UI -->
    <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css" />
</head>
<body>
</body>
</html>
                
It is highly recommended to strip wicket tags from the HTML rendering.
/**
 * @see org.apache.wicket.Application#init()
 */
@Override
public void init()
{
	super.init();

	this.getMarkupSettings().setStripWicketTags(true); //IMPORTANT!
}
                

Setting up the HTML markup, for Kendo UI

Kendo UI also needs CSSs to work. You need to download your own copy of Kendo UI: http://www.kendoui.com/get-kendo-ui.aspx.

Once done, you have to copy kendo.common.min.css and kendo.choosen_theme.min.css in into you webapp, as well as the corresponding theme folder and the "texture" folder.

The base template page is then the following: (you might change the CSS href accordingly)
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
    <!-- Kendo UI -->
    <link rel="stylesheet" type="text/css" href="css/kendo/kendo.common.min.css" media="all" />
    <link rel="stylesheet" type="text/css" href="css/kendo/kendo.default.min.css" media="all" />
</head>
<body>
</body>
</html>
                

You are now ready to use wicket-jquery-ui!

Look at the samples provided here to get started with the code...