QuickStart
Create your own plugins

Core

QuickStart

This page describes how to start a project with WiQuery 1.2.3
Featured

Updated Apr 13, 2011 by hielke.hoeve

Introduction

This tutorial will teach you how to install and use WiQuery 1.2.3 in 5 minutes, with a classic "Hello world" example.

Tools

To begin this tutorial, you'll need the following components to be installed:

Maven 2.x or 3.x
Java JDK1.5+

Version of Wicket

Each WiQuery version is built with the latest Wicket version: 1.4.17.

Starting a Wicket project

First of all, we need to start a Wicket project. To do this quickly, we'll use maven archetypes, already ready to use with your Maven 2 installation.

Create the project with Maven 2

Go to your home directory (or in any directory you want to work in) and type the command below:

mvn archetype:create -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.4.17 -DgroupId=org.odlabs -DartifactId=quickstart -DinteractiveMode=false

You should see the following output:

[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------------------------------

Check that your Wicket project works well

Change to the quickstart directory.

Before adding WiQuery to this project, let's check that the created project works by typing the command below:

mvn jetty:run

Maven 2 should output some logs and the message:

[INFO] Started Jetty Server

Then, connect to localhost:8080/quickstart. The following contents should appear:

Use WiQuery

Add WiQuery repository

You must add the following server repository link into your pom.xml file:

<repositories>
     <repository>
         <id>wiquery-maven-repo</id>
         <name>WiQuery repository</name>
         <url>https://wiquery.googlecode.com/svn/repo/</url>
     </repository>
</repositories>

Add a dependency to the quickstart application

To do this, get back in the quickstart application and edit the pom.xml file to add the following lines:

<dependency>
     <groupId>org.odlabs.wiquery</groupId>
     <artifactId>wiquery</artifactId>
     <version>1.2.3</version>
</dependency>

Then, restart the jetty server to check that everything worked fined:

mvn jetty:run

The Hello World example

Let's do the HelloWorld example with WiQuery's modal window.

Enable WiQuery

Since the 1.0.2, wiQuery uses the IInitializer to register itself into your Wicket application

Add markup for the modal window

In this tutorial, we will use the inline modal window (e.g., a modal window displaying content already loaded in the current page). This modal window will be opened when the "dblclick" event happends on a button.

Edit the markup file HomePage.html to have the following code:

<html>
    <head>
        <title>WiQuery Quickstart Archetype Homepage</title>
    </head>
    <body>
        <button wicket:id="open-dialog">Open dialog !</button>
             
        <p wicket:id="dialog">
        	Hello world, yes we can !
        </p>
    </body>
</html>

Add the modal window in HomePage.java:

import org.apache.wicket.PageParameters;
import org.apache.wicket.markup.html.WebPage;
import org.odlabs.wiquery.ui.dialog.Dialog;

public class HomePage extends WebPage {

	public HomePage(final PageParameters parameters) {

            final Dialog dialog = new Dialog("dialog");
            add(dialog);

        }
}

Add the event to trigger the modal window:

import org.apache.wicket.PageParameters;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Button;
import org.odlabs.wiquery.ui.dialog.Dialog;
import org.odlabs.wiquery.core.events.WiQueryEventBehavior;
import org.odlabs.wiquery.core.events.Event;
import org.odlabs.wiquery.core.events.MouseEvent;
import org.odlabs.wiquery.core.javascript.JsScope;
public class HomePage extends WebPage {

	public HomePage(final PageParameters parameters) {

        final Dialog dialog = new Dialog("dialog");
        add(dialog);
        
        Button button = new Button("open-dialog");
        button.add(new WiQueryEventBehavior(new Event(MouseEvent.DBLCLICK) {
		
			@Override
			public JsScope callback() {
				return JsScope.quickScope(dialog.open().render());
			}
		
		}));
        add(button);
    }
}

You should see a button. If you double click on this button, a modal window should open:

That's it, you have coded your first WiQuery application !

How does it works ?

WiQuery eases jQuery / jQuery UI JavaScript integration:

WiQuery imports needed JavaScript / CSS resources
WiQuery wrapps all jQuery events, that's why we are able to detect a double click event
You just have to extend WiQueryWebApplication or to add a listener to your application.

Let's check the generated source:

<html>
    <head>
        <title>Wicket Quickstart Archetype Homepage</title>
    <script type="text/javascript" src="resources/org.odlabs.wiquery.core.commons.CoreJavaScriptResourceReference/jquery/jquery-1.4.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/org.odlabs.wiquery.ui.themes.WiQueryCoreThemeResourceReference/fusion/ui.all.css" />
<script type="text/javascript" src="resources/org.odlabs.wiquery.ui.core.CoreUIJavaScriptResourceReference/ui.core.js"></script>
<script type="text/javascript" src="resources/org.odlabs.wiquery.ui.dialog.Dialog/ui.dialog.js"></script>
<script type="text/javascript" src="resources/org.odlabs.wiquery.ui.draggable.DraggableJavaScriptResourceLocator/ui.draggable.js"></script>
<script type="text/javascript" src="resources/org.odlabs.wiquery.ui.resizable.ResizableJavaScriptResourceReference/ui.resizable.js"></script>
<script type="text/javascript">$(document).ready(function() {
			$('#dialog1').dialog({autoOpen:false,
position:'center'});
});</script><script type="text/javascript">$(document).ready(function() {
			$('#open_dialog2').bind('dblclick', function() {
	$('#dialog1').dialog('open');
});
});</script></head>
    <body>
        <button wicket:id="open-dialog" name="open-dialog" id="open_dialog2">Open dialog !</button>
             
        <p wicket:id="dialog" id="dialog1">
        	Hello world, yes we can !
        </p>
    </body>
</html>

WiQuery automatically generates a "dom ready" event with your code inside. As you can see, the JavaScript code needed to create a modal window is generated:

$(document).ready(function() {
  $('#dialog1').dialog({autoOpen:false, position:'center'});
});

To manage events, WiQuery defines JsScope, a class to represent a JavaScript closure (e.g. an anonymous function with its own scope). Think that when your write:

JsScope.quickScope("alert('foo')");

... you generate the following JavaScript code:

function() {
alert('foo');
}

Comment by project member altuga, Nov 4, 2009

Great !

Comment by rickq...@gmail.com, Nov 19, 2009

i'm failed when i attempt to Add markup for the modal window. In HomePage?.java file, i added event with coding "Button button = new Button(...) ....", but when i execute the command "mvn jetty:run" again, mvn return msg saying that missing Button symbol. I also checked the API of wiquery, but got nothing useful for this problem. I'm wondering what the Button is.

Comment by shravann...@gmail.com, Nov 29, 2009

The Button used here is part of the Wicket framework.Plus you also need to refer other packages to make that work.

You need to -

import org.apache.wicket.markup.html.form.Button import org.odlabs.wiquery.ui.dialog.Dialog; import org.odlabs.wiquery.core.events.WiQueryEventBehavior?; import org.odlabs.wiquery.core.events.Event; import org.odlabs.wiquery.core.events.MouseEvent?; import org.odlabs.wiquery.core.javascript.JsScope;

cheers

Comment by zhang_yu...@yahoo.de, Dec 23, 2009

Hello, i have downloaded the wiquery 1.0, after unzip i have only seen a 'ui.all.css' file under the 'org.odlabs.wiquery.ui.themes.base' and a 'jquery-ui-1.7.2.custom.css' under the 'org.odlabs.wiquery.ui.themes.fusion' for theme type "fusion", if i would like to use theme "vader" or other themes, how can i make it? thank's and merry Christmas!

Comment by project member roche....@gmail.com, Dec 23, 2009

Hi,

In the wiquery-examples, we have imported the themes into the resources folder (src/ main/ resources/ org/ odlabs/ wiquery/ ui/ themes/), create the resources references (example new WiQueryCoreThemeResourceReference?("black-tie")) and set it like this : ((WicketApplication?) Application.get()).setTheme(themeSelect.getModelObject());

However, you can create your own ResourceReference?, place it anywhere in your packages and set it to wiQuery

Here the example link : http://code.google.com/p/wiquery/source/browse/examples/wiquery-examples/src/main/java/org/odlabs/wiquery/examples/themeroller/ThemeRollerPage.java

Than you and merry christmas

Julien

Comment by thompson...@gmail.com, Dec 26, 2009

I'm trying to get wiquery to work, as shown in the Hello World example, but even though I have copied/pasted the HelloWorld? java/html over, when I render the page I simply get a button with the 'Hello world, yes we can !' text below it, and no amount of clicking brings up a dialog.

Looking at the page source, it is clear that wiquery did not add all of the javascript mentioned above. My source is as follows:

<html>

<head>
<title>WiQuery? Quickstart Archetype Homepage</title>
<script type="text/javascript" src="resources/org.odlabs.wiquery.core.commons.CoreJavaScriptResourceReference/jquery/jquery-1.3.2.js"></script>

<body>
<button wicket:id="open-dialog" name="open-dialog" id="open_dialog1">Open dialog !</button>

<p wicket:id="dialog" id="dialog2">
Hello world, yes we can !
</p>

</body>

</html>

I should add that the version of wiquery that I'm using is the latest (Nov 18).

Any ideas/suggestions?

Thanks and happy holidays,

Steve

Comment by project member roche....@gmail.com, Jan 2, 2010

Humm, that's really odd. Can you send me an Eclipse project with your example to see where is the problem (roche.jul@gmail.com). I will test it as soon as possible.

Thanks for your feedback

Julien

Comment by sb2swif...@gmail.com, Jan 7, 2010

I had this issue with the example as well. Adding the listener solved this for me.

Comment by zdmyt...@gmail.com, Jan 19, 2010

Can anybody post an example how to use wiquery autocomplete? It throws me an exception when I'm trying to add AutocompleteBehaviour? to TextField?.

Thanks

Comment by project member lionel.armanet@gmail.com, Jan 23, 2010

Hi,

Autocomplete is not yet supported, while jQuery UI's component is still in a development state.

Comment by shravann...@gmail.com, Mar 11, 2010

Hi,

This is in regards to the example project that did NOT work for some of us and other components that did not render because the JS was not included in the UI.

I noticed that using this example in a brand NEW Wicket Quickstart application works without any changes. That is because the super web application configures the Listener and our brand new Quickstart WebApplication? does not have any custom init() implementation.

If we wanted to include Wiquery into our existing web application just add super.init() in the custom webapplication's init(), that way it allows the application to configure the Listener via WiQueryWebApplication?.

Cheers

Comment by sselvar...@gmail.com, Mar 15, 2010

REALLY REALLY SUPERB!.... IT'S NOT AN EASY WORK!...VERY VERY USEFUL!...WICKET DEVELOPERS EVERYONE SHOULD NEED THIS!...SALUTE TO THIS GOOD WORK!...WiQUERY TEAM ROCKS!...

Comment by markfred...@gmail.com, Jun 23, 2010

I am trying to customize the wiQuery Tabs CSS, but the Tabs will automatically import css to the head. Is there any way to disable the css import? What I need is only the javascript.

Thanks

Comment by project member roche....@gmail.com, Jun 23, 2010

Hi,

Maybe you can use a WiQueryCoreThemeResourceReference? where you specify the theme tos use (with your override) and use IThemableApplication in your Wicket Application to set it.

Comment by josh.gor...@gmail.com, Aug 11, 2010

To customize the theme that wiquery uses do the following:

add 'implements IThemableApplication' to your web application class
create your own them resource reference (code below)
in your application class constructor, set your theme, or, add a setTheme method in your application and then access your application object from any component and set the theme there.

	public class MyThemeResourceReference extends ResourceReference
	{
		/**
		 * {@link java.io.Serializable} version identifier.
		 */
		private static final long serialVersionUID = 1L;
		
		public MyThemeResourceReference()
		{
			super(MyThemeResourceReference.class, "inc/mytheme.css");
		}
	}

Comment by tommytastic, Oct 17, 2010

Hi, is there documentation, instructions, example code for the wiquery effects shown at this page: http://wiquery-plugins-demo.appspot.com/demo/?wicket:bookmarkablePage=:com.wiquery.plugins.demo.UIEffectsPage.

Im trying to add some effects - fades etc to my application.

Comment by chandran...@gmail.com, Feb 5, 2011

Awesome guys. Awesome work.

► Sign in to add a comment