Wicket In Action - oredev2008

Wicket in Action
Martijn Dashorst
Øredev 2008
Malmö

Martijn Dashorst
• Employee @ Topicus
• VP Apache Wicket
• Committer
• Apache Member
• Author Wicket in Action

4 Parts
I. Getting started with Wicket
II. Ingredients for your Wicket applications
III. Preparing for the real world
IV. The future of Wicket

Getting started with
Wicket
Part I

Apache Wicket is a component oriented
open source web application framework
using just Java and HTML.

Apache Wicket is a component oriented
open source web application framework
using just Java and HTML.
(XML not included)

“Writing a Wicket app is rather more like writing
an event-based desktop application than a
web application.”
- Michael Porter (LShift)

Top 5 features
1. Just Java and HTML™

Top 5 features
2. No XML conﬁguration

Top 5 features
3. Object Oriented Programming for the Web

Top 5 features
4. Easy custom component creation

Top 5 features
4. Easy custom component creation
5. Community

Just Java™
• Components are objects (just use extends)
• No annotation hunting
• Not managed by the framework (just use new)

Just Java™
public class EditPersonLink extends Link {
private ﬁnal Person person;
public EditPersonLink(String id, Person person) {
super(id);
this.person = person;
}
public void onClick() {
setResponsePage(new EditPersonPage(person));
}
}

Just HTML™
• Designer friendly

Just HTML™
• No new language to learn

Just HTML™
• No serverside scripting in markup

Just HTML™
• Developers won’t $#$#% up your design

Just HTML™
• Developers won’t $#$#% up your design
• Designers won’t $*&#$# up your code

Just HTML™
<table>
<tr>
<c:forEach var="item" items="${sessionScope.list}">
<td>
<c:out value="item.name" />
</td>
</c:forEach>
</tr>
</table>

Just HTML™
<h:dataTable value="#{list}" var="item">
<h:column>
<h:outputText value="#{item.name}"/>
</h:column>
</h:dataTable>

Just HTML™
<table>
<tr wicket:id="list">
<td wicket:id="ﬁrstname">John</td>
<td wicket:id="lastname">Doe</td>
</tr>
</table>

No XML
• Page navigation is done in Java:
setResponsePage(new MyPage());

No XML
• Page navigation is done in Java:
setResponsePage(new MyPage());
• Conﬁguration is done in Java:
protected void init() {
getDebugSettings()
.setAjaxDebugModeEnabled(true);
}

Object Oriented Programming
for the web

Wicket is the ﬁrst truly modern
framework [...] to fully realize
the promise of object oriented
development.
“
”—James McLaughlin

Embrace encapsulation
public class PersonLink extends Link {
private Person person;
public PersonLink(String id, Person p) {
this.person = p;
}
person.someOperation();
}
}

Use the right abstractions
public abstract class PersonEditPanel extends Panel {
public PersonEditPanel(String id, Person p) {
add(new Button("save") {
public void onSubmit() {
onSave(person);
}
});
add(new Button("delete") { ... });
}
protected abstract void onSave(Person p);
protected abstract void onDelete(Person p);
}

Easy custom
component creation

public class PersonLink extends Link { ... }
public class PersonEditPanel extends Panel { ... }
public class NationalitySelect extends
DropDownChoice { ... }
just use extends

The Wicket community is by far the most
vibrant and helpful open source
community that I have been a part of.
—JeremyThomerson
“
”

Community
• Part of The Apache Software Foundation
“not simply a group of projects sharing a
server, but rather a community of
developers and users.”

Community
• Part of The Apache Software Foundation
• User list: >800 subscribers, 59 messages/day
• Meetups around the world
• ##wicket on irc.freenode.net

Community Projects
• Wicket Stuff
jquery, dojo, scriptaculous, google maps,
hibernate, minis, prototip, etc.
• databinder.net
• Wicket Web Beans
• Tons of other projects at googlecode,
sourceforge, etc.

http://cafepress.com/apachewicket

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>

Hello,World!
<html>
<head>
<title>Home page</title>
</head>
<body>
<h1 wicket:id="msg">Gets replaced</h1>
</body>
</html>

Hello,World!
package com.example;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
public class HomePage extends WebPage {
public HomePage() {
add(new Label("msg", "Hello,World!"));
}
}

Click counter
This link has been clicked 123 times.

Click counter
This <a href="#">link</a> has been clicked
123 times.

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

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

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

Click counter
public class ClickCounter extends WebPage {
}

Click counter
public ClickCounter() {
}
}

Click counter
private int clicks = 0;
}
}

Click counter
add(new Link("link") {
protected void onClick() {
clicks++;
}
});
}
}

Click counter
add(new Link("link") { ... });
add(new Label("clicks",
new PropertyModel(this, "clicks")));
}
}

Ajax Click counter
add(new Link("link") { ... });
add(new Label("clicks",
new PropertyModel(this, "clicks")));
}
}

Ajax Click counter
ﬁnal Label label = new Label(...);
add(label);
label.setOutputMarkupId(true)
add(new Link("link") {
clicks++;
}
});
}

Ajax Click counter
ﬁnal Label label = new Label(...);
add(label);
label.setOutputMarkupId(true)
add(new AjaxLink("link") {
public void onClick(AjaxRequestTarget t) {
clicks++;
t.addComponent(label);
}
});
}

Handling requests
RequestSessionApplication
cheese store
Mary
John
search 'leerdammer'
browse 'goat cheeses'
place order

Handling requests
decode
request
determine
target
process
events
respond clean up

Handling requests
decode
request
determine
target
process
events
respond
parameters
page
component
version
interface
clean up

Handling requests
decode
request
determine
target
process
events
respond
event listener
ajax listener
page
resource
...
clean up

Handling requests
decode
request
determine
target
process
events
respond
onClick
onSubmit
...
clean up

Handling requests
decode
request
determine
target
process
events
respond
render page
components
resource
redirect
clean up

Handling requests
decode
request
determine
target
process
events
respond clean up
detach
store page

Handling requests
• Access to page is single threaded
• No multithreading issues in UI code
• Session is not single threaded

Ingredients for your
Wicket application
Part II

• Components
• Behaviors
• Models
• Page Composition
4 ingredients

Components
• Label
• Link
• AjaxLink
• ListView
• Form
• TextField
• DropDownChoice
• Tree
• DataTable
• DatePicker
• CustomerLink
• NationalityDropDownChoice
• ShoppingCartPanel

Component
•Can handle events
(onClick, onSubmit, ...)
•Writes its markup to
the response
•May or may not have
a Model
Component
M
arkup
M
odel

Component
• Component has identiﬁer (wicket:id)
new Label("msg", "Hello,World!");
• Markup has same identiﬁer (wicket:id)
<h1 wicket:id="msg">Gets replaced</h1>

Component
• Components can be nested inside one another
<a href="#" wicket:id="link">
<span wicket:id="label">replaced</span>
</a>
Link link = new Link("link") {...};
add(link);
link.add(new Label("label", "Some text"));

Component
• Components can receive events
public class EditPersonForm extends Form {
public EditPersonForm(String id, Person p) {
super(id, new Model(p));
}
public void onSubmit() {
person.save();
setResponsePage(new ListPage());
}
}

Component
• Can manipulate markup

Component
• Directly
protected void onComponentTag(ComponentTag tag) {
tag.put("class", "error");
}
<td class="error">some text</td>

Component
• Directly
protected void onComponentTag(ComponentTag tag) {
tag.put("class", "error");
}
• With AttributeModiﬁer
label.add(new SimpleAttributeModiﬁer("class", "error"));

Behaviors are decorators
for components

Behaviors
• Manipulate component tags
• Add JavaScript to components
• Add Ajax behavior to components

Adding JavaScript to a
component
link.add(new AbstractBehavior() {
public void onComponentTag(Component component,
ComponentTag tag) {
tag.put("onclick",
"return conﬁrm('Are you sure?');");
}
});
<a href="..." onclick="return conﬁrm('Are you sure?');">
Play thermonuclear war
</a>

Create a Label that changes
color with a click using Ajax

Label label = new Label("label", "Click me");

label.setOutputMarkupId(true);

label.add(new AjaxEventBehavior("onclick") {
});

private boolean isRed = false;
protected void onComponentTag(...) {
super.onComponentTag(component, tag);
if(isRed) { tag.put("style", "color:red"); }
}
});

protected void onEvent(AjaxRequestTarget target) {
isRed = !isRed;
}
}
});

protected void onEvent(AjaxRequestTarget target) {
isRed = !isRed;
target.addComponent(getComponent());
}
}
});

Ajax behaviors
• Can re-render components
target.addComponent(...);

Ajax behaviors
• Can execute JavaScript
target.appendJavaScript("$('foo').explode();");

Ajax behaviors
• Can throttle the client side events
behavior.setThrottleDelay(Duration.seconds(10));

Ajax behaviors
• Can throttle the client side events
behavior.setThrottleDelay(Duration.seconds(10));
• Can add new header related resources
JavaScript, stylesheets, etc.

Ajax Components
• Links, Forms, Buttons, CheckBoxes
• Ajax fallback components
• Indicating components
• Tree, DataTable, PagingNavigator

Understanding models
Component
M
arkup
M
odel

Wicket models allow
components to retrieve and
store data.
Component
M
arkup
M
odel

Models
Controller
View
TextField
Locator
gets
Model
Cheese
cheese.age
gets
sets
Name Gouda
Age 3 months
OK
Cheese Store
receives
renders
sets
IModel

Simple Model usage
new Label("name", customer.getName())
new Label("street",
customer.getAddress().getStreet())
newTextField("username", new Model("<username>"))

What’s wrong with this?
new Label("street",

new Label("street",
• Label isn’t notiﬁed of street/address/
customer changes

new Label("street",
• Label isn’t notiﬁed of street/address/
customer changes
• NullPointerException: customer, address
could be null

PropertyModel usage
new Label("street",
new PropertyModel(customer, "address.street"))

PropertyModel usage
new Label("street",
new PropertyModel(customer, "address.street"))
setModel(new CompoundPropertyModel(customer));
add(new Label("address.street"));
add(new Label("address.zipcode"));
add(new Label("address.city"));

PropertyModel
+null safe
+dynamic
–not rename safe

Page composition:
creating a consistent layout

BasePage
PageWithMenu
VivamusPage BlanditPage PretiumPage

Java inheritance
public class BasePage extends WebPage {
public BasePage() {
add(new HeaderPanel("header"));
add(new FooterPanel("footer"));
}
}

Java inheritance
public class PageWithMenu extends BasePage {
public PageWithMenu() {
add(new Menu("menu"));
}
}

Java inheritance
public classVivamusPage extends PageWithMenu {
publicVivamusPage() {
add(new Label("vivamus", "..."));
add(new Link("link"){...});
}
}

Markup inheritance
<html>
<body>
<div id="bd">
<div wicket:id="header"></div>
<wicket:child />
<div wicket:id="footer"></div>
</div>
</body>
</html>

Markup inheritance
<wicket:extend>
<div wicket:id="menu"></div>
<div id="main">
<wicket:child />
</div>
</wicket:extend>

Markup inheritance
<wicket:extend>
<table>
<tr>
<td wicket:id="name"></td>
<........>
</tr>
</table
</wicket:extend>

Markup inheritance
• Inherit markup from child pages
• Includes <wicket:head> sections
• Works for Panels too
• Very easy to create consistent layout

Preparing for the real
world
Part III

Getting at Spring
public class CheesesPage extends WebPage {
private CheesesDao dao;
public CheesesPage() {
List<Cheese> = dao.getCheeses();
...
}
}

Getting at Spring
@SpringBean
...
}
}

Make Application Spring
aware
addComponentInstantiationListener(
new SpringComponentInjector(this));
}

Make Wicket Guice aware
addComponentInstantiationListener(
new GuiceComponentInjector(this,
getModule()));
}
private Module getModule() {
return new Module() {
public void conﬁgure(Binder binder) {
binder.bind(CheesesDao.class)
.to(CheesesDaoImpl.class);
}};

Getting at Guice
...
}
}

Getting at Guice
@Inject
...
}
}

Putting your application
into production

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

HelloWorld test
@Test
public void labelContainsHelloWorld() {
}

HelloWorld test
@Test
WicketTester tester =
new WicketTester();
}

HelloWorld test
@Test
WicketTester tester = new WicketTester();
tester.startPage(HelloWorld.class);
}

HelloWorld test
@Test
tester.startPage(HelloWorld.class);
tester.assertLabel("message",
"Hello, World!");
}

Link test
@Test
public void countingLinkClickTest() {
}

Link test
@Test
WicketTester tester =
new WicketTester();
}

Link test
@Test
tester.startPage(LinkCounter.class);
}

Link test
@Test
tester.assertModelValue("label", 0);
}

Link test
@Test
tester.clickLink("link");
}

Link test
@Test
}

Navigation test
@Test
public void navigateToSecondPage() {
tester.startPage(new FirstPage());
tester.assertRenderedPage(SecondPage.class);
}

Navigation test
@Test
public void navigateToSecondPage() {
tester.startPage(new FirstPage());
tester.assertRenderedPage(
SecondPage.class);
}

UGLY url
http://cheesr.com/shop?wicket:bookmarkablePage=
%3Acom.cheesr.shop.CheeseDetailsPage&cheese=edam

Prettier urls
http://cheesr.com/cheeses?cheese=edam
http://cheesr.com/cheeses/cheese/edam
http://cheesr.com/cheeses/edam

Mount pages for prettiness
mount(new IndexedParamUrlCodingStrategy("cheeses",
CheeseDetailsPage.class));
http://cheesr.com/cheeses/edam

2 conﬁguration modes
1. Development
maximize developer happiness
2. Deployment
maximize end-user happiness

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

Production 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

Default setting
INFO - WebApplication - [WicketInActionApplication] Started Wicket
version 1.3.0 in
development mode
********************************************************************
*** WARNING: Wicket is running in DEVELOPMENT mode. ***
*** ^^^^^^^^^^^ ***
*** Do NOT deploy to your live server(s) without changing this. ***
*** See Application#getConfigurationType() for more information. ***
********************************************************************

Go to production
• System property:
java -Dwicket.configuration=deployment
• Servlet/filter initialization parameter (web.xml)
• Context initialization parameter (web.xml)
<init-param>
<param-name>configuration</param-name>
<param-value>deployment</param-value>
</init-param>

• Java 5 all the way
CustomerLink(String id, IModel model)
Wicket 1.4

CustomerLink(String id, IModel<Customer>)
Wicket 1.4

• Mostly code compatible with Wicket 1.3
Wicket 1.4

• Mostly code compatible with Wicket 1.3
• Improved OSGi awareness
Wicket 1.4

Wicket 1.5
• New Ajax implementation
• Improved unit test support
• Simpliﬁed resources
• Improved multi-window support
• and much more...

More information
• http://wicket.apache.org
• blog: http://wicketinaction.com
• irc: ##wicket @ irc.freenode.net
• User list: users@wicket.apache.org

Wicket in Action
• Martijn Dashorst and
Eelco Hillenius
• August, 2008 | 392 pages
• ISBN: 1932394982
• $44.99 Softbound print
book - (includes free
ebook)
• $27.50 PDF ebook

Questions?
Ask!
the ﬁrst 6 persons asking a question will receive a
free E-Book of Wicket in Action

Thank you
for your attention...

Wicket In Action - oredev2008

More Related Content

Similar to Wicket In Action - oredev2008 (20)

More from Martijn Dashorst (17)

Recently uploaded (20)

Wicket In Action - oredev2008