Project Information

Project feeds
Code license
Apache License 2.0
Labels
jQuery, Wicket, Java, JavaScript, RIA, AJAX, Component

Members

3 committers

Featured

Downloads

Wiki pages

Links

Groups
Discussion group for jqwicket user

JQWicket provides a simple, intuitive but powerful bridge between the JQuery Javascript Library and Wicket Framework and gives developer the capability to build jquery-enabled wicket components with only few lines of code. Furthermore it offers a rich component library of "wicketized" jquery plugins implemented as wicket behaviors. For more information see jqwicket behaviors page.

News

29.12.2011 JQWicket 0.8 released. Download distribution here

- Wicket 1.5.3 / JQuery 1.7.1 support

- OSGi ready

- Bugfixing

24.09.2011 JQWicket 0.7 released. Download distribution here

- Wicket 1.5.x Support

- JQuery 1.6.3 / JQuery UI 1.8.16 Support

- Bugfixing

Older news

Quickstart for maven users

For maven users: To get the jqwicket artifact add following repository and dependency declarations to your POM-File

<repositories> 
 <repository> 
  <id>googlecode</id> 
  <url>http://jqwicket.googlecode.com/svn/m2-repo/releases/</url> 
 </repository> 
</repositories> 

<dependency> 
 <groupId>com.google.code.jqwicket</groupId> 
 <artifactId>jqwicket</artifactId> 
 <version>0.8</version> 
</dependency>

Getting started

1. Initialize jqwicket:

Add JQComponentOnBeforeRenderListener to your wicket application's #init() method. This will configure JQWicket with the default jquery url (currently: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js).

@Override
protected void init() {
   ...
   getComponentPreOnBeforeRenderListeners().add(new JQComponentOnBeforeRenderListener());
   ...
}

Alternatively you can configure jqwicket by passing the JQContributionConfig instance to the JQComponentOnBeforeRenderListener's constructor. Additionally to the jquery core library url / resource reference you can configure the location of the jquery ui library (required by JQWicket components implementing JQuery UI widgets).

@Override
protected void init() {
   ...
   JQContributionConfig config = new JQContributionConfig(
              new JavascriptResourceReference(WicketApplication.class, "jquery.js"))
      .withJQueryUiJs("http://www.mydomain.com/jquery-ui.js"))
      .withJQueryUiCss("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css");

   getComponentPreOnBeforeRenderListeners().add(new JQComponentOnBeforeRenderListener(config));
   ...
}

Now you are ready to use jqwicket in your application.

2. Using pre-implementet behaviors/webmarkup containers

JQWicket delivers a rich library of jquery plugins implemented as wicket behaviors. Enclosed you can see the usage example of pre-implemented AccordionBehavior. For more pre-built behaviors see jqwicket behaviors page.

Java-Code:

add(new WebMarkupContainer("accordion-behavior").add(new AccordionBehavior()));

HTML-Template

<div wicket:id="accordion-behavior">
	<h3><a href="#">Section 1</a></h3>
	<div><p>Section 1 contents</p></div>
	<h3><a href="#">Section 2</a></h3>
	<div><p>Section 2 contents</p></div>
	<h3><a href="#">Section 3</a></h3>
	<div><p>Section 3 contents</p></div>			
</div>

Rendered HTML-Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" 
             src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" 
             src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css"
             href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
<script type="text/javascript" id="e38d18b9-8608-4961-8ce5-da6bdb833572">
<!--/*--><![CDATA[/*><!--*/
$(document).ready(function(){$('#accordion_behavior4').accordion({});
});
/*-->]]>*/</script>
</head>
<body>
<div id="accordion_behavior4">
	<h3><a href="#">Section 1</a></h3>
	<div><p>Section 1 contents</p></div>
	<h3><a href="#">Section 2</a></h3>
	<div><p>Section 2 contents</p></div>
	<h3><a href="#">Section 3</a></h3>
	<div><p>Section 3 contents</p></div>		
</div>
</body>
</html>

Note: alternatively you can use AccordionWebMarkupContainer to achieve the same result.

3. Using generic jquery behavior

Adding JQBehavior instance to any wicket component renders desired javascript to the html-page head section within the jquery's "ready"-block:

Java-Code:

public class GenericJQBehaviorPage extends WebPage {
	public GenericJQBehaviorPage() {
		// add JQBehavior to the page itself
		add(new JQBehavior("alert('say hello on load from page!')"));
		
		// add JQBehavior to the label
		Label label = new Label("label", "Hello world!");
		label.add(new JQBehavior("alert('say hello on load from label!')"));
		add(label);
	}
}

Html-Template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:wicket="http://wicket.apache.org/" xml:lang="en" lang="en">
<head>
<title>Generic JQBehavior page</title>
</head>
<body>
<div class="demo">
	<span wicket:id="label" />
</div>
</body>
</html>

Rendered HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Generic JQBehavior page</title>
<script type="text/javascript" 
                   src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" 
                   src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" 
                   href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
<script type="text/javascript" id="97a00919-2c6b-4768-9378-514f55a52f53">
<!--/*--><![CDATA[/*><!--*/
$(document).ready(function(){alert('say hello on load from page!');
alert('say hello on load from label!');});
/*-->]]>*/</script>

</head>
<body>
<div class="demo">
	<span id="label1">Hello world!</span>
</div>
</body>
</html>

4. Using generic jquery behavior on components

JQWicket's JQuery and JQStatement classes wrap a lot of well-known JQuery API methods. Using them you are able to produce javascript code using pure java.

Example:

import static com.google.code.jqwicket.api.JQuery.$;

...
Label changeCssAndPulsate = new Label("mylabel", "change color and pulsate on page load");
changeCssAndPulsate.add(
    new JQBehavior($(changeCssAndPulsate).css("color", "green").effect(Effect.PULSATE))
);
add(changeCssAndPulsate);

5. Defining javascript event(s) with jqwicket

Java-Code:

Label label = new Label("label", "Hello world!");
label.add(
   JQBehaviors.mouseClick("alert('clicked!')"),
   JQBehaviors.mouseOver("alert('over!')"),
   JQBehaviors.mouseOut("alert('out!')")
);
add(label);

HTML-Template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:wicket="http://wicket.apache.org/" xml:lang="en" lang="en">
<head>
</head>
<body>
   <span wicket:id="label" />
</body>
</html>

Rendered HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" 
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" 
                src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" 
                href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
<script type="text/javascript" id="b77e07a3-e63b-47b5-b943-2eb94622153a"><!--/*-->
<![CDATA[/*><!--*/
$(document).ready(function(){
$('#label1').click(function(){alert('clicked!');});
$('#label1').mouseover(function(){alert('over!');});
$('#label1').mouseout(function(){alert('out!');});
});
/*-->]]>*/</script>

</head>
<body>
   <span id="label1">Hello world!</span>
</body>
</html>