Wicket in Action
Martijn Dashorst
Topicus b.v.

Wicket in Action
Create web applications
with just Java and HTML
using Apache Wicket
www.javapolis.com

Martijn Dashorst
Software Engineer

 Committer
 Chair
 Co-author
 Eelco Hillenius
www.javapolis.com

Martijn Dashorst
Software Engineer

 Committer
 Chair
 Co-author
 Eelco Hillenius
www.javapolis.com

Agenda
What is Wicket?

 Wicket concepts
 Building a Wicket Application
 Q&A
www.javapolis.com 5

Wicket?
www.javapolis.com

Wicket?
www.javapolis.com 7

www.javapolis.com 8

Wicket Welcome to Apache Wicket
Home With proper mark-up/logic
separation, a POJO data mo
Introduction del, and a refreshing lack of
makes developing web -apps XML, Apache Wicket
simple and enjoyable again.
Swap the boilerplate, comple
Planet Wicket brittle code for powerful, reu x debugging and
sable components written wit
h plain Java and HTML.
Community
Check the feature list
News Read some Wicket buzz, som
e Wicket blogs or Planet Wic
ket
Find out why you should use
Wicket
Getting Started Check out some selected exa
mples in detail or see them
and many more in live action
Take a look at our live compon
Examples ent reference
Go and download Wicket .
Getting Wicket
Wicket is released under the
Components Apache License, Version 2.0
.
QuickStart
Community meetings
Documentation
The Wicket community is a
very active community. The
mailing lists and the irc cha
But for those that prefer fac nnel are proof of that.
Wiki e to face meetings, several com
munity members have organi
zed meetups.
Blogs
Country
Where
Reference
When
USA
San Francisco
Vision to be determined
Belgium
Antwerp
JavaDocs JavaPolis'07 (dec 12th-14th
)
The United Kingdom
London
The first Tuesday of every mo
Releases The Netherlands nth
Amsterdam
ApacheCon EU'08
Denmark
Copenhagen
Wicket 1.3-rc to be determined
Austria
Linz/Hagenberg
Wicket 1.2 to be determined
Sweden
Wicket 1.1 Stockholm
Januari
Brazil
Wicket 1.0 Rio de Janeiro
to be determined
USA
Minneapolis/Seattle
to be determined
Tool support
If you are interested in attendi
ng one of these events, please
add yourself to the appropriat
IDE plugins you want to organize such a e event, or if
meetup yourself, add it to the
community meetups page
News
Developers
www.javapolis.com 9

Apache Wicket
Component oriented

 Open source
 Web application framework
 Java+HTML
www.javapolis.com 10

Hello, World!

Hello, World!
www.javapolis.com 12

Hello, World!
<h1 wicket:id=”msg”>[text goes here]</h1>
www.javapolis.com 12

Hello, World!
<h1 wicket:id=”msg”>[text goes here]</h1>
+
add(new Label(“msg”, “Hello, World!”));
www.javapolis.com 12

Hello, World!
<h1 wicket:id=”msg”>[text goes here]</h1>
+
add(new Label(“msg”, “Hello, World!”));
=
<h1>Hello, World!</h1>
www.javapolis.com 12

Hello, World!
<h1 wicket:id=”msg”>[text goes here]</h1>
+
add(new Label(“msg”, “Hello, World!”));
=
<h1>Hello, World!</h1>
www.javapolis.com 13

Hello, World!
<h1 wicket:id=”msg”>[text goes here]</h1>
+
add(new Label(“msg”, “Hello, World!”));
=
<h1>Hello, World!</h1>
www.javapolis.com 13

A brief history of
Wicket
www.javapolis.com 14

• Discovery of the Hobbit
• Year of the monkey
• Milau bridge opens
2004

www.javapolis.com 16

2005
Airbus A380’s maiden flight

 Huygens lands on Titan
 Dr. Who returns
www.javapolis.com 17

2005
Airbus A380’s maiden flight

 Huygens lands on Titan
 Dr. Who returns
www.javapolis.com 17

JavaOne’05
Tapestry
guy
Bald Struts/Shale
guy guy
Wicket
JSF guy WebWork guy
guy
www.javapolis.com 18

JavaOne’05
Wicket 1.0
www.javapolis.com 18

2007
Joins Apache Software Foundation

 Releases 1.3
 User groups start spawning
www.javapolis.com 19

2007
Joins Apache Software Foundation

 Releases 1.3
 User groups start spawning
www.javapolis.com 19

Wicket uptake
www.javapolis.com 20

Wicket uptake
Wicket 1.0
released
www.javapolis.com 20

Wicket uptake
Wicket 1.2
released
Wicket 1.0
released
www.javapolis.com 20

Wicket uptake
Wicket 1.2
released
Wicket 1.0
released
Joined
Apache
www.javapolis.com 20

Popular?
Java Software
Apache Software Foundation
Web frameworks
www.javapolis.com 21

Projects
core

Wicket
Welcome to
Apache Wick
et
Home
With proper
Introduction mark-up/logic
extensions
separation, a
makes devel
Planet Wick POJO data mo
oping web-ap
et del, and a ref
ps simple an
brittle code

reshing lack
d enjoyable
for powerful,
Community again. Swap of XML, Apach
reusable comp the boilerplate e Wicket
onents writte , complex de
n with plain
Check the fea bugging and
News Java and HTML
ture list .
Read some Wi
cket buzz, so
Getting Star me Wicket blo
Find out why
ted gs or Planet
you should us Wicket
e Wicket
Check out so
me selected
examples in
Examples Take a look detail or see
at our live co them and ma
mponent ref
Getting Wick Go and down ny more in live
erence
et load Wicket. action
Components
Wicket is rel
eased under
ioc (spring, guice)
QuickStart the Apache Lic
ense, Version
2.0.
Commun

ity meetings
Documentatio
n
The Wicket co
mmunity is a
Wiki very active co
But for those mmunity. Th
that prefer fac e mailing list
e to face me
Blogs s and the irc
etings, severa channel are
l community proof of that.
Reference members ha
ve organized
Where meetups.
London, The
Vision United Kingd
om When
JavaDocs Amsterdam, The first Tuesd
The Netherla
nds ay of every mo
Antwerp, Belgi nth
date/time
Nov. 30th, 20
um
Releases 07
Copenhagen JavaPolis'07
, Denmark

(dec 12th-14
Wicket 1.3-r th)
Linz/Hagenbe
c to be determi
rg, Austria ned
Wicket 1.2 Stockholm, Sw to be determi
eden ned
Wicket 1.1 Rio de Janeir Januari
o, Brazil
Wicket 1.0 Minneapolis/ to be determi
Seattle, USA
ned
Tool suppor to be determi
If you are int ned
t erested in att
ending one of
you want to these events
organize such
IDE plugins , please add
a meetup yo yourself to the
urself, add it
velocity
appropriate
to the comm
News event, or if
unity meetups
Developers page
 Apache Wick
Reporting bu et 1.3.0-rc1
gs
is released!
Writing docs
Nov 11, 2007
Building
This release
is the first in
a series of rel
ease candidate
s until we fee
l confident to
finalize Wicke
t 1.3. This
auth-roles

www.javapolis.com 22

Getting Wicket
Everybody gets the ultimate edition

 Includes:
 sources
 projects
 examples
Currently 1.3-rc2

Or...

www.javapolis.com 23

Using maven to get Wicket
<dependency>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket</artifactId>
<version>1.3.0-rc2</version>
</dependency>
www.javapolis.com 24

Agenda
What is Wicket?

 Wicket concepts
 Building a Wicket Application
 Q&A
www.javapolis.com 25

Concepts
Application

Session

RequestCycle

Components

Behaviors

Models

www.javapolis.com 26

Application
Main entry point for your web application

Initialization

Configuration

Homepage

Factories

Configured in web.xml

www.javapolis.com 27

Concepts
Application

Session

RequestCycle

Components

Behaviors

Models

www.javapolis.com 28

Concepts
Application

Session

RequestCycle

Components

Behaviors

Models

www.javapolis.com 29

Concepts
Application

Session

RequestCycle

Components

Behaviors

Models

www.javapolis.com 30

Components
Encapsulate the programmatic manipulation

of markup
 Render content in the response
 Receive events in the request
 onClick, onSubmit
Lots of em:

 Label,
MultiLineLabel, TextField, PasswordTextField,
Image, Link, AjaxLink, AjaxFallbackLink, Tree,
BookmarkablePageLink, ListView, RepeatingView,
PagingNavigator, Button, ...
www.javapolis.com 31

Components
Component has wicket:id

 Markup has same wicket:id
 Hierarchy must match
<h1 wicket:id=“msg”>Gets replaced</h1>
new Label(“msg”, “Hello, World!”);
www.javapolis.com 32

Component: Link
<a href=”#” wicket:id=”link”>Click</a>
Link link = new Link(“link”);
add(link);
www.javapolis.com 33

Component: Link
<a href=”#” wicket:id=”link”>Click</a>
Link link = new Link(“link”) {
@Override public void onClick() {
// do something
setResponsePage(new NewPage());
}
};
add(link);
www.javapolis.com 34

Component: AjaxLink
<a href=”#” wicket:id=”link”>Click</a>
AjaxLink link = new AjaxLink(“link”) {
public void onClick(AjaxRequestTarget t) {
// do something
}
};
add(link);
www.javapolis.com 35

Component: AjaxLink
<a href=”#” wicket:id=”link”>Click</a>
someComponent.setOutputMarkupId(true);
AjaxLink link = new AjaxLink(“link”) {
public void onClick(AjaxRequestTarget t) {
// do something
t.addComponent(someComponent);
t.appendJavaScript(“Effects.fade(‘foo’);”);
}
};
www.javapolis.com 36

Component + Markup
Some components

have own markup file
 Page, Panel, Border
Put Java, markup

and supporting files
in same package on
class path
www.javapolis.com 37

Concepts
Application

Session

RequestCycle

Components

Behaviors

Models

www.javapolis.com 38

Behaviors
Plugins for components

 Change attributes of your component’s
markup
 Add javascript events
 Add Ajax behavior
component.setOutputMarkupId(true);
component.add(
new AjaxSelfUpdatingBehavior(Duration.seconds(5)));
www.javapolis.com 39

Behaviors
link.add(new AbstractBehavior() {
public void onComponentTag(
Component component, ComponentTag tag) {
tag.put(“onclick”, “return confirm(‘Are you sure?’);”);
}
});
Output:
<a href=”...” onclick=”return confirm(‘....’);”>...</a>
www.javapolis.com 40

Concepts
Application

Session

RequestCycle

Components

Behaviors

Models

www.javapolis.com 41

Models
Models bind your POJO’s to Wicket

components
Component Model
Component Model Domain
www.javapolis.com 42

Models
Models bind your POJO’s to Wicket

components
Label Model \"John\"
PropertyModel
Label Person
expression: \"name\"
www.javapolis.com 42

Java lazy binding sucks
Doesn’t update:

new Label(“name”, person.getName())
Null checks necessary:

new Label(“street”,
person.getAddress().getStreet())
www.javapolis.com 43

Models
PropertyModel:

 new PropertyModel(p, “name)
 new PropertyModel(p, “address.street”)
CompoundPropertyModel:

 setModel(newCompoundPropertyModel(p));
add(new Label(“name”));
add(new Label(“address.street”));
www.javapolis.com 44

Agenda
What is Wicket?

 Wicket concepts
 Building a Wicket Application
 Q&A
www.javapolis.com 45

DEMO

Cheese Store - front page
www.javapolis.com 47

Cheese store - check out
www.javapolis.com 48

Generating the skeleton
www.javapolis.com 49

Generate skeleton
mvn archetype:create
-DarchetypeGroupId=org.apache.wicket
-DarchetypeArtifactId=wicket-archetype-quickstart
-DarchetypeVersion=1.3.0-rc1
-DgroupId=com.cheesr
-DartifactId=cheesr
cd cheesr
mvn eclipse:eclipse
www.javapolis.com 50

Import project into Eclipse
www.javapolis.com 51

www.javapolis.com 52

Start application
Embedded Jetty

 Start.java in src/test/java
www.javapolis.com 53

Add stylesheet and images to webapp
Copy design to context root

www.javapolis.com 54

Apply mock markup to home page
www.javapolis.com 55

Refresh page in browser
www.javapolis.com 56

Add domain objects to project
Cheese

 name, description, price
Cart

 name,street, zipcode, city, state,
contents:list<cheese>
www.javapolis.com 57

Implement Cheese list
<div class=\"cheese\">
<h3>Gouda</h3>
<p>Named after.....</p>
<p>
<span>$1.99</span>
<a href=\"#\">Add to cart</a>
</p>
</div>
www.javapolis.com 58

Implement Cheese list
<div class=\"cheese\" wicket:id=”cheeses”>
<h3 wicket:id=”name”>Gouda</h3>
<p wicket:id=”description”></p>
<p>
<span wicket:id=”price”></span>
<a href=\"#\">Add to cart</a>
</p>
</div>
www.javapolis.com 59

Implement cheese list
add(new ListView(\"cheeses\", Cheese.getCheeses()) {
@Override
protected void populateItem(ListItem item) {
Cheese cheese = (Cheese) item.getModelObject();
item.add(new Label(\"name\", cheese.getName()));
item.add(new Label(\"description\", cheese.get...()));
item.add(new Label(\"price\", \"$\"+cheese.getPrice()));
}
});
www.javapolis.com 60

Implement cheese list
www.javapolis.com 61

Make the list pageable
<div>
<a href=\"#\">&lt;&lt;</a>
<a href=\"#\">&lt;</a>
<a href=\"#\">1</a>
<a href=\"#\">2</a>
<a href=\"#\">3</a>
<a href=\"#\">4</a>
<a href=\"#\">&gt;</a>
<a href=\"#\">&gt;&gt;</a>
</div>
www.javapolis.com 62

Make the list pageable
<div wicket:id=”navigator”>
<a href=\"#\">&lt;&lt;</a>
<a href=\"#\">&lt;</a>
<a href=\"#\">1</a>
<a href=\"#\">2</a>
<a href=\"#\">3</a>
<a href=\"#\">4</a>
<a href=\"#\">&gt;</a>
<a href=\"#\">&gt;&gt;</a>
</div>
www.javapolis.com 63

Make the list pageable
add(new ListView(\"cheeses\", Cheese.getCheeses()) {
@Override
protected void populateItem(ListItem item) {
Cheese cheese = (Cheese) item.getModelObject();
item.add(new Label(\"name\", cheese.getName()));
item.add(new Label(\"description\", cheese.get...()));
item.add(new Label(\"price\", \"$\"+cheese.getPrice()));
}
});
www.javapolis.com 64

Make the list pageable
PageableListView lv = null;
lv = new PageableListView(\"cheeses\", cheeses, 2) {
@Override
protected void populateItem(ListItem item) {
Cheese cheese = (Cheese) item.getModelObject();
item.add(new Label(\"name\", cheese.getName()));
item.add(new Label(\"description\", cheese.getD...()));
item.add(new Label(\"price\", \"$\"+cheese.getPrice()));
}
});
add(lv);
add(new PagingNavigator(\"navigator\", lv));
www.javapolis.com 65

Implement cheese list
www.javapolis.com 66

Add shopping cart to page
<div>
<h3>Your Selection</h3>
<table><tbody>
<tr>
<td>Gouda</td>
<td>$1.99</td>
<td><a href=\"#\">remove</a></td>
</tr>
</tbody><tfoot>
<tr class=\"total\">
<th>Total</th>
<td>$1.99</td>
<td>&nbsp;</td>
</tr>
www.javapolis.com 67

Add shopping cart to page
<div>
<h3>Your Selection</h3>
<table><tbody>
<tr wicket:id=”contents”>
<td wicket:id=”name”>Gouda</td>
<td wicket:id=”price”>$1.99</td>
<td><a href=\"#\">remove</a></td>
</tr>
</tbody><tfoot>
<tr class=\"total\">
<th>Total</th>
<td wicket:id=”total”>$1.99</td>
<td>&nbsp;</td>
</tr>
www.javapolis.com 68

Add shopping cart to page
add(new ListView(\"contents\", cart.getContents()) {
@Override
protected void populateItem(ListItem item) {
Cheese cheese = (Cheese) item.getModelObject();
item.add(new Label(\"name\", cheese.getName()));
item.add(new Label(\"price\", \"$\"+cheese.getPrice()));
}
});
add(new Label(“total”, cart.getTotal()));
www.javapolis.com 69

Add shopping cart to page
www.javapolis.com 70

Add add + remove links
<div class=\"cheese\" wicket:id=”cheeses”>
<h3 wicket:id=”name”>Gouda</h3>
<p wicket:id=”description”></p>
<p><span wicket:id=”price”></span>
<a wicket:id=”add” href=\"#\">Add to cart</a>
</p>
</div>
<!-- cart: -->
<tr wicket:id=”contents”>
<td wicket:id=”name”>Gouda</td>
<td wicket:id=”price”>$1.99</td>
<td><a wicket:id=”remove” href=\"#\">remove</a></td>
</tr>
www.javapolis.com 71

Add add + remove links
item.add(new Link(“add”, item.getModel()) {
@Override public void onClick() {
Cheese cheese = (Cheese)getModelObject();
cart.getContents().add(cheese);
}
});
// shopping cart:
item.add(new Link(“remove”, item.getModel()) {
@Override public void onClick() {
Cheese cheese = (Cheese)getModelObject();
cart.getContents().remove(cheese);
}
}); www.javapolis.com 72

Add add + remove links
www.javapolis.com 73

Fix shopping cart total
add(new Label(“total”, cart.getTotal()));
add(new Label(“total”, new PropertyModel(cart, “total”)));
www.javapolis.com 74

Fix shopping cart total
www.javapolis.com 75

Add checkout link
<input type=\"button\" value=\"Check out\" />
<input type=\"button\" value=\"Check out\"
wicket:id=”checkout”/>
add(new Link(“checkout”) {
@Override public void onClick() {
setResponsePage(new CheckoutPage(cart));
}
});
www.javapolis.com 76

Add checkout page
Create CheckOutPage.html

 Create CheckOutPage.java
www.javapolis.com 77

Apply mock markup to check out page
www.javapolis.com 78

Apply mock markup to check out page
www.javapolis.com 79

Reuse the shopping cart
Create ShoppingCartPanel.html

 Create ShoppingCartPanel.java
 Move cart markup to
ShoppingCartPanel.html
 Move cart Java code to
ShoppingCartPanel.java
 Use panel in home page and checkout page
www.javapolis.com 80

Reuse the shopping cart
www.javapolis.com 81

Reuse the shopping cart
<wicket:panel>
<h3>Your Selection</h3>
<table><tbody>
<tr wicket:id=\"contents\">
<td wicket:id=\"name\">Gouda</td>
<td wicket:id=\"price\">$1.99</td>
<td><a href=\"#\" wicket:id=\"remove\">remove</a></td>
</tr>
</tbody><tfoot>
<tr class=\"total\">
<th>Total</th>
<td wicket:id=\"total\">$1.99</td>
</tr></tfoot></table>
</wicket:panel>
www.javapolis.com 82

Make remove link Ajax enabled
// let panel write a dom identifier
setOutputMarkupId(true);
item.add(
new AjaxFallbackLink(\"remove\", item.getModel()) {
@Override
public void onClick(AjaxRequestTarget target) {
Cheese cheese = (Cheese) getModelObject();
cart.getContents().remove(cheese);
if(target != null ) {
target.addComponent(ShoppingCartPanel.this);
}
}
});
www.javapolis.com 83

CheckOutPage: add feedback panel
<div>
<ul>
<li>Name is required</li>
</ul>
</div>
<div wicket:id=”feedback”>
<ul>
<li>Name is required</li>
</ul>
</div>
add(new FeedbackPanel(\"feedback\"));
www.javapolis.com 84

CheckOutPage: add Form
<form>
<h3>Check out</h3>
<p>Please enter your billing address.</p>
<form wicket:id=”form”>
<h3>Check out</h3>
<p>Please enter your billing address.</p>
add(new Form(\"form\") {
@Override public void onSubmit() {
// do something with the order
setResponsePage(FrontPage.class);
}
}); www.javapolis.com 85

CheckOutPage: add fields
<tr><td>Name:</td>
<td><input type=”text” wicket:id=”name” /></td></tr>
<tr><td>Street:</td>
<td><input type=”text” wicket:id=”street” /></td></tr>
<tr><td>City:</td>
<td><input type=”text” wicket:id=”city” /></td></tr>
…
form.setModel(new CompoundPropertyModel(cart));
form.add(new TextField(“name”));
form.add(new TextField(“street”));
form.add(new TextField(“city”));
…
www.javapolis.com 86

CheckOutPage: add validation
form.add(new TextField(“name”).setRequired(true));
form.add(new TextField(“street”).setRequired(true));
form.add(new TextField(“city”).setRequired(true));
…
www.javapolis.com 87

CheckOutPage: add state selection box
<th>State</th>
<td><select>
<option>Alabama</option>
<option>Nebraska</option>
</select></td>
<th>State</th>
<td><select wicket:id=”state”>
<option>Alabama</option>
<option>Nebraska</option>
</select></td>
form.add(new DropDownChoice(\"state\",
Arrays.asList(\"Alabama\", \"Alaska\", \"Arkansas\",
\"Florida\")));
www.javapolis.com 88

Create unit test for shopping cart
public void testRemove() {
WicketTester tester = new WicketTester();
final Cart cart = new Cart();
cart.getContents().add(Cheese.getCheeses().get(0));
cart.getContents().add(Cheese.getCheeses().get(1));
List<Cheese> expected = new ArrayList<Cheese>();
expected.add(Cheese.getCheeses().get(0));
expected.add(Cheese.getCheeses().get(1));
tester.startPanel(new TestPanelSource() {
public Panel getTestPanel(String panelId) {
return new ShoppingCartPanel(panelId, cart);
}
});
tester.assertListView(\"panel:contents\", expected);
tester.clickLink(\"panel:contents:0:remove\");
expected.remove(0);
tester.assertListView(\"panel:contents\", expected);
}
www.javapolis.com 89

Agenda
What is Wicket?

 Wicket concepts
 Building a Wicket Application
 Q&A
www.javapolis.com 90

Wicket in Action
Wicket in Action

 Eelco Hillenius
 Martijn Dashorst
 ISBN: 1-932394-98-2
 ~375 pages
 MEAP + E-book: $27.50
 MEAP + Dead tree: $49.90
0% ! Use coupon code
3f
f HC230 at checkout
o
www.javapolis.com 91

Summary
Apache Wicket is:

a furry animal
 three sticks with stumps
 a component oriented web application framework
Just Java and HTML

 Easy Ajax
 Good testing support
 Great community
www.javapolis.com

Conclusion
“Wicket is good for my sex life”
“Seriously, I also have a wife and kid. And the
productivity gained from implementing in
Wicket is unsurpassed. The extraordinary
diagnostics available is worth it alone.
OOP isn't bastardized within this framework, it
is embraced...” – n n
http://www.theserverside.com/news/thread.tss?thread_id=34725#175612
www.javapolis.com

Q&A
View JavaPolis talks @ www.parleys.com

Thank you for your
attention