Wicket 2010

Introducing
Apache Wicket
Martijn Dashorst

Agenda

• Introduction to Apache Wicket
• New and noteworthy in 1.5
• Questions

Martijn Dashorst

• Employee @ Topicus
• Chair for Apache Wicket
• Committer
• Apache Member
• Author Wicket in Action

Wicket is...
a component oriented web framework
using just HTML and Java

Apache Wicket

• Open Source: ASL 2.0
• Created in 2004
• Java web framework
• Component oriented
• http://wicket.apache.org

mobile.walmart.com supports three categories
of devices using the same Java code (only the html
is (very) different.)

Try doing that with JSP.
— Joachim Kainz

... We at Vegas.com have been able to re-
purpose our Wicket-based air/hotel search
application and purchase/checkout application.
This is the new mexico.com. [...]

The re-use of components and abstract pages
was tremendous.

—Scott Swank, chief architect vegas.com

Sign up form

Example from Railscast episode #250

Sign up form
<h1>Sign Up</h1>

<form>
<div class="error_messages">
<h2>Form is invalid</h2>
<ul>
<li>Some error message</li>
</ul>
</div>
<p>
<label for="email">E-Mail</label><br/>
<input type="email" id="email" />
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password" />
</p>
<p>
<label for="confirm">Password confirmat
<input type="password" id="confirm" />
</p>
<p class="button"><input type="submit" va

Sign up form
<h1>Sign Up</h1>

<%= form_for @user do |f| %>
  <% if @user.errors.any? %>
      <ul>
        <% for message in @user.errors.full
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <p>
    <%= f.label :email %><br />
    <%= f.text_ﬁeld :email %>
  </p>
  <p>
    <%= f.label :password %><br />
    <%= f.password_ﬁeld :password %>
  </p>
  <p>

Sign up form
<h1>Sign Up</h1>

<form>
<div wicket:id="feedback" class="error_me
<ul>
<li>Some error message</li>
</ul>
</div>
<p>
<label for="email">E-Mail</label><br/>
<input wicket:id="email" type="email" i
</p>
<p>
<label for="password">Password</label>
<input wicket:id="password" type="passw
</p>
<p>
<label for="confirm">Password confirmat
<input wicket:id="confirm" type="passwo
</p>
<p class="button"><input type="submit" va

<tag wicket:id="foo">
Instructs Wicket to work on this tag

Imperative markup
<h1>Sign Up</h1>

• Used by Ruby on Rails, <%= form_for @user do |f| %>
JSP, Play, Velocity, ...     <div class="error_messag
      <h2>Form is invalid</h

•
      <ul>
Great for web developers         <% for message in @u
          <li><%= message %>
• Great for hacking on a         <% end %>
      </ul>
web site     </div>
  <% end %>
  <p>
• Code and markup are     <%= f.label :email %><br
    <%= f.text_ﬁeld :email
not separated   </p>
  <p>

Declarative markup
<h1>Sign Up</h1>

• Used by Wicket, Tapestry, <form wicket:id="form">
<div class="error_message
Facelets <p>
<label for="email">E-Ma

• Great for web designers
<input type="email" id=
</p>
<p>
• Go from PSD → HTML → <label for="password">P
<input type="password"
Page → Component </p>
<p>
<label for="conﬁrm">Pa
• Code and markup are <input type="password"
</p>
strictly separated <p class="button"><input
</form>

Sign up form
<h1>Sign Up</h1>

<%= form_for @user do |f| %>
      <ul>
        <% for message in @user.errors.full_messages %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <p>
    <%= f.label :email %><br />
    <%= f.text_field :email %>
  </p>
  <p>
    <%= f.label :password %><br />
    <%= f.password_field :password %>
  </p>
  <p>
    <%= f.label :password_confirmation %>

Sign up form
Form form = new Form("signup") {
@Override
public void onSubmit() {
// ...
}
}
add(form);

Sign up form
@Override
// ...
}
}
add(form);

FeedbackPanel feedback = new FeedbackPanel("feedback");
feedback.setVisible(form.hasFeedbackMessages());
form.add(feedback);

Sign up form
@Override
// ...
}
}
add(form);

form.add(feedback);

form.add(new EmailTextField("email", Model.of(""))
.setRequired(true));

Sign up form
@Override
// ...
}
}
add(form);

form.add(feedback);


form.add(new PasswordField("password", Model.of(""))

Sign up form
@Override
// ...
}
}
add(form);

form.add(feedback);


form.add(new PasswordField("password", Model.of(""))

form.add(new PasswordField("conﬁrm", Model.of(""))

Just Java

• No logic in markup
• Components are objects (use new and extends)
• Use OO techniques in your programming
• No XML

Components
• Manipulate markup
• Render content
• Receive events (onClick, onSubmit)

• Examples:
Label, Link, Form, TextField, PagingNavigator, Panel,
Page, ClientSideImageMap

Models

• Provide data to components
• Store data for components
• Transform data
• Retrieve data from persistent storage

• Examples: Model<T>, PropertyModel<T>

Behaviors

• Decorator/Adapter for Component
• Can manipulate markup of Component
• Can receive events (onClick)
• Add Ajax functionality to components
• Example: AjaxSelfUpdatingTimerBehavior

Wicket projects
• Apache Wicket • Leg before Wicket
(extensions, spring, guice, velocity, etc) (Maven archetypes)

• Wicket stuff • Apache Isis
(grand collection of projects) (incubating, DDD framework)

• Seam for Apache • Jolira Tools
Wicket (powers mobile.walmart.com)

• WiQuery • Visural Wicket
(standalone Wicket components)
(JQuery integration library)

Apache Wicket projects
• Core • Velocity
• Extensions • Auth/Roles
• Quick start • JMX
• IoC • Dev utils
• Spring
• Guice • Examples

• DateTime

Wicket Stuff projects
• progressbar • shiro-security • theme

• datatable-autocomplete • gae-initializer • yav

• ﬂot • push-jdk-1.5 • maven-support

• googlecharts • jasperreports • plugin

• scala-extensions • mbeanview • input-events

• openlayers • jsr303 • javaee-inject

• gmap2 • client-and-server-validation • push

• inmethod-grid • multi-text-input • wicket-html5

• minis • prototype • wicket-servlet3

• phonebook • simile-timeline

Running quickstart
$ mvn -o archetype:generate -DarchetypeGroupId=org.apache.wicket -
DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.5-
SNAPSHOT -DgroupId=com.mycompany -DartifactId=myproject -
DarchetypeRepository=https://repository.apache.org/content/repositories/
snapshots/ -DinteractiveMode=false _

Running quickstart
$ mvn -o archetype:generate -DarchetypeGroupId=org.apache.wicket -
DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.5-
SNAPSHOT -DgroupId=com.mycompany -DartifactId=myproject -
DarchetypeRepository=https://repository.apache.org/content/repositories/
snapshots/ -DinteractiveMode=false
[INFO] Scanning for projects...
[INFO] -----------------------------------------------------------
[INFO] Building Maven Stub Project (No POM) 1
[INFO] -----------------------------------------------------------
[INFO] >>> maven-archetype-plugin:2.0:generate (default-cli) >>>
[INFO] <<< maven-archetype-plugin:2.0:generate (default-cli) <<<
[INFO] --- maven-archetype-plugin:2.0:generate (default-cli) ---
[INFO] Generating project in Batch mode
[INFO] Archetype deﬁned by properties
[INFO] -----------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] -----------------------------------------------------------
[INFO] Total time: 1.279s
[INFO] Finished at: Fri Feb 04 22:04:14 CET 2011
[INFO] Final Memory: 9M/81M
[INFO] -----------------------------------------------------------

Running quickstart
$ mvn jetty:run_

Running quickstart
$ mvn jetty:run
[INFO] -----------------------------------------------------------
[INFO] Building quickstart 1.0-SNAPSHOT
[INFO] -----------------------------------------------------------
[INFO] Starting jetty 7.2.2.v20101205 ...
2011-02-04 22:04:34.969:INFO::jetty-7.2.2.v20101205
2011-02-04 22:04:35.198:INFO::No Transaction manager found - if yo
INFO - WebXmlFile - web.xml: found ﬁlter with na
INFO - Application - [wicket.myproject] init: Wick
INFO - RequestListenerInterface - registered listener interface
INFO - WebApplication - [wicket.myproject] Started Wi
******************************************************************
*** WARNING: Wicket is running in DEVELOPMENT mode. ***
*** ^^^^^^^^^^^ ***
*** Do NOT deploy to your live server(s) without changing this.***
*** See Application#getConﬁgurationType() for more information***
******************************************************************
2011-02-04 22:04:35.464:INFO::Started SelectChannelConnector@0.0.0.0:8080
[INFO] Started Jetty Server

Quick start alternative
Leg up
• Spring
• Guice
• JDBC
• JPA
• Hibernate
• Scala

http://jweekend.com/dev/LegUp

Want to learn more?

http://wicket.apache.org/learn/books.html

Hello, World!
<h1>Hello, World</h1>

Hello, World!
<h1>[Replaced text]</h1>

Hello, World!
<h1 wicket:id="msg">[Replaced text]</h1>

Hello, World!

+

add(new Label("msg", "Hello, World!"));

Hello, World!

+

add(new Label("msg", "Hello, World!"));

=

<h1>Hello, World!</h1>

This link has been clicked 123 times


This link has been clicked 123 times!


This <a href="#">link</a> has been clicked 123
times!


This <a href="#">link</a> has been clicked
<span>123</span> times!


This <a wicket:id="link" href="#">link</a> has been
clicked <span>123</span> times!


This <a wicket:id="link" href="#">link</a> has been
clicked
<span wicket:id="clicks">123</span> times!


public class ClickCountPage extends WebPage {
}


public ClickCountPage() {
}
}


private int clicks = 0;

}
}



add(new Link<Void>("link") {
public void onClick() {
clicks++;
}
});
}



add(new Link<Void>("link") { ... });
add(new Label("clicks",
new PropertyModel<Integer>(this,
"clicks")));
}
}

2 modes for your app
Development and Deployment

Development mode
$ mvn jetty:run
[INFO] -----------------------------------------------------------
[INFO] Building quickstart 1.0-SNAPSHOT
[INFO] -----------------------------------------------------------
[INFO] Starting jetty 7.2.2.v20101205 ...
2011-02-04 22:04:34.969:INFO::jetty-7.2.2.v20101205
2011-02-04 22:04:35.198:INFO::No Transaction manager found - if yo
INFO - WebXmlFile - web.xml: found ﬁlter with na
INFO - Application - [wicket.myproject] init: Wick
INFO - RequestListenerInterface - registered listener interface
INFO - WebApplication - [wicket.myproject] Started Wi
******************************************************************
*** WARNING: Wicket is running in DEVELOPMENT mode. **
*** ^^^^^^^^^^^ **
*** Do NOT deploy to your live server(s) without changing this. **
*** See Application#getConﬁgurationType() for more information **
******************************************************************
2011-02-04 22:04:35.464:INFO::Started SelectChannelConnector@0.0.0.0:8080
[INFO] Started Jetty Server

Development mode
• exceptional error pages
• dynamic markup reloading
• no caching
• no javascript/css optimizations
• discover mistakes early (serialization, missing
components, ...)
• Wicket debugger visible

Deployment mode

• Cache markup resources
• No checks
• Don’t display stack traces to users
• Minimize/compress JavaScript
• Don’t generate wicket tags
• Wicket debugger not visible

FREE PRO TIP:

Don’t perform your performance tests
in development mode!

Ajax envelope
<?xml version="1.0" encoding="UTF-8"?>
<ajax-response>
<component id="count2">
<![CDATA[<span wicket:id="count" id="count2">1</span>]]>
</component>
</ajax-response>

Error message
Unable to ﬁnd component with id 'count'
in HomePage.
This means that you declared
wicket:id=count in your markup, but that
you either did not add the component to
your page at all, or that the hierarchy does
not match.

WicketTester

• Test components directly, or their markup
• Runs tests without starting server
• Ajax testing (server side)
• Runs in IDE, ant, maven builds
• Achieves high code coverage

Testing Hello, World!
@Test
public void rendersWelcomeMessage() {
}

@Test
WicketTester tester = new WicketTester();
}

@Test
tester.startPage(HelloWorldPage.class);
}

@Test
tester.startPage(HelloWorldPage.class);
tester.assertLabel("msg", "Hello, World!");
}

Testing Click Count
@Test
public void clicksIncreaseCount() {
}

Testing Click Count
@Test
}

Testing Click Count
@Test
tester.startPage(ClickCountPage.class);
}

Testing Click Count
@Test
tester.assertModelValue("clicks", 0);
}

Testing Click Count
@Test
tester.clickLink("link");
}

Other test frameworks

• PageTest (by Kent Tong)
• JDave (BDD framework)

Summary

• Widely used
• Component oriented
• Java
• Open Source (ASL 2.0)

Wicket 1.5

• EmailTextField
• NumberTextField
• UrlTextField
• RangeTextField

Split up core library
• Old:
• wicket.jar

Split up core library
• Old:
• wicket.jar
• New:
• wicket-requests.jar
• wicket-util.jar
• wicket-core.jar

Maven users
<dependency>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket-core</artifactId>
<version>1.5-RC1</version>
</dependency>

Wicket < 1.5

• Decoding request and handling in state machine
• Debugging ‘interesting’
• Designed for ﬂexibility
• Served its purpose—took on 4 years of engineering

Wicket 1.5

• Request cycle processing completely rewritten
• Rendering code has been improved and simpliﬁed
• URL rendering simpliﬁed: now in one place

Wicket < 1.5

• Custom request cycle: subclass WebRequestCycle
• Problematic with add-ons:
• HibernateRequestCycle
• SecureRequestCycle
• ActivityRequestCycle

New: RequestCycleListener
public interface IRequestCycleListener {

void onBeginRequest(RequestCycle cycle);

void onEndRequest(RequestCycle cycle);

void onDetach(RequestCycle cycle);

IRequestHandler onException(RequestCycle cycle, Exception ex);
}

RequestCycleListener
public class SomeWebApplication extends WebApplication {
@Override
protected void init() {
}

@Override
public Class<? extends Page> getHomePage() {
return SomePage.class;
}
}

RequestCycleListener
public class SomeWebApplication extends WebApplication {
@Override
protected void init() {
addRequestCycleListener(new IRequestCycleListener() {
public void onBeginRequest() {
// do something at the beginning of the request
}

public void onEndRequest() {
// do something at the end of the request
}

public void onException(Exception ex) {
// do something here when there's an exception
}
});
}

@Override
public Class<? extends Page> getHomePage() {
return SomePage.class;
}
}

Switching to HTTPS
public SecurePage extends WebPage {
...
}

public MyApplications extends WebApplication {
@Override
public void init() {
super.init();

}
}

Switching to HTTPS
@RequireHttps
...
}

@Override
super.init();

}
}

Switching to HTTPS
@RequireHttps
...
}

@Override
super.init();
setRootRequestMapper(
new HttpsMapper(getRootRequestMapper(),
new HttpsConﬁg());
}
}

Component event bus

• IEventSource: objects that send events
<T> void send(IEventSink sink,
Broadcast broadcast, T payload);
• IEventSink: objects that receive events
void onEvent(IEvent<?> event);
• Participants: Components, RequestCycle, Session and
Application

Event bus example
Ajax link counter


public ClickCount() {
@Override
count++;
}
});
new PropertyModel<Integer>(this, "clicks")));
}
}


@Override
count++;
}
});
new PropertyModel<Integer>(this, "clicks"))
.setOutputMarkupId(true));
}
}


add(new AjaxLink<Void>("link") {
@Override
public void onClick(AjaxRequestTarget target) {
count++;
}
});
}
}


@Override
count++;
target.add(getPage().get("count"));
}
});
add(new Label("count",
}
}

Pre-event bus

• Link needs to know the updatable components
• Makes code brittle, hard to maintain

• Better:
• Let the label refresh itself with each Ajax request


@Override
count++;
target.add(getPage().get("count"));
}
});
}
}


@Override
count++;
send(getPage(), Broadcast.BREADTH, target);
}
});
}
}


@Override
count++;
send(getPage(), Broadcast.BREADTH, target);
}
});
add(new CountLabel("count", new PropertyModel<Integer>(this,
}
}


add(new AjaxLink<Void>("link") { ... });
}

public class CountLabel extends Label {
}
}


}

public CountLabel(String id, IModel<Integer> model) {
super(id, model);
}
}
}


}

super(id, model);
setOutputMarkupId(true);
}
}
}


}

super(id, model);
}

@Override
public void onEvent(IEvent<?> event) {
super.onEvent(event);
}
}
}


}

super(id, model);
}

@Override
public void onEvent(IEvent<?> event) {
super.onEvent(event);

if (event.getPayload() instanceof AjaxRequestTarget) {
AjaxRequestTarget target =
(AjaxRequestTarget) event.getPayload();
target.add(this);
}
}
}
}

Post-event bus

• A bit more code
• Updates are now completely decoupled
• Make the payload type safe and meaningful:
no AjaxRequestTarget, but CountEvent
• AJAX requests trigger a default event with an
AjaxRequestTarget as payload

And much, much more:
http://cwiki.apache.org/WICKET/
migration-to-wicket15.html

Thank you!
Questions? Ask!

Wicket 2010

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Wicket 2010 (20)

More from Martijn Dashorst (20)

Recently uploaded (20)

Wicket 2010

Editor's Notes