Wicket In Action

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

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

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!
<h1 wicket:id=”msg”>[text goes here]</h1>


Hello, World!
+
add(new Label(“msg”, “Hello, World!”));


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


A brief history of
Wicket


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

2004

2005
Airbus A380’s maiden flight


 Huygens lands on Titan

 Dr. Who returns


JavaOne’05
Tapestry
guy

Bald Struts/Shale
guy guy

Wicket
JSF guy WebWork guy
guy


JavaOne’05

Wicket 1.0

2007
Joins Apache Software Foundation


 Releases 1.3

 User groups start spawning


Wicket uptake


Wicket uptake

Wicket 1.0
released


Wicket uptake

Wicket 1.2
released
Wicket 1.0
released


Wicket uptake

Wicket 1.2
released
Wicket 1.0
released

Joined
Apache


Popular?
Java Software

Apache Software Foundation

Web frameworks


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



Getting Wicket

Everybody gets the ultimate edition


 Includes:

 sources

 projects

 examples

Currently 1.3-rc2


Or...



Using maven to get Wicket

<dependency>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket</artifactId>
<version>1.3.0-rc2</version>
</dependency>


Agenda
What is Wicket?


 Wicket concepts


 Q&A


Concepts
Application


Session


RequestCycle


Components


Behaviors


Models



Application

Main entry point for your web application


Initialization


Configuration


Homepage


Factories


Configured in web.xml



Concepts
Application


Session


RequestCycle


Components


Behaviors


Models



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, ...


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!”);


Component: Link

<a href=”#” wicket:id=”link”>Click</a>

Link link = new Link(“link”);

add(link);


Component: Link


Link link = new Link(“link”) {
@Override public void onClick() {
// do something
setResponsePage(new NewPage());
}
};
add(link);


Component: AjaxLink


AjaxLink link = new AjaxLink(“link”) {
public void onClick(AjaxRequestTarget t) {
// do something

}
};
add(link);

Component: AjaxLink


someComponent.setOutputMarkupId(true);
AjaxLink link = new AjaxLink(“link”) {
public void onClick(AjaxRequestTarget t) {
// do something
t.addComponent(someComponent);
t.appendJavaScript(“Effects.fade(‘foo’);”);
}
};


Component + Markup

Some components


have own markup file
 Page, Panel, Border

Put Java, markup


and supporting files
in same package on
class path


Concepts
Application


Session


RequestCycle


Components


Behaviors


Models



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)));


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>


Concepts
Application


Session


RequestCycle


Components


Behaviors


Models



Models

Models bind your POJO’s to Wicket


components

Component Model

Component Model Domain


Models

Models bind your POJO’s to Wicket


components

Label Model quot;Johnquot;

PropertyModel
Label Person
expression: quot;namequot;


Java lazy binding sucks

Doesn’t update:


new Label(“name”, person.getName())
Null checks necessary:


new Label(“street”,
person.getAddress().getStreet())


Models

PropertyModel:


 new PropertyModel(p, “name)
 new PropertyModel(p, “address.street”)

CompoundPropertyModel:


 setModel(newCompoundPropertyModel(p));
add(new Label(“name”));
add(new Label(“address.street”));


Agenda
What is Wicket?


 Wicket concepts


 Q&A


Cheese Store - front page


Cheese store - check out


Generating the skeleton


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


Import project into Eclipse


Start application

Embedded Jetty


 Start.java in src/test/java


Add stylesheet and images to webapp

Copy design to context root



Apply mock markup to home page


Refresh page in browser


Add domain objects to project

Cheese


 name, description, price
Cart


 name,street, zipcode, city, state,
contents:list<cheese>


Implement Cheese list

<div class=quot;cheesequot;>
<h3>Gouda</h3>
<p>Named after.....</p>
<p>
<span>$1.99</span>
<a href=quot;#quot;>Add to cart</a>
</p>
</div>


Implement Cheese list

<div class=quot;cheesequot; wicket:id=”cheeses”>
<h3 wicket:id=”name”>Gouda</h3>
<p wicket:id=”description”></p>
<p>
<span wicket:id=”price”></span>
<a href=quot;#quot;>Add to cart</a>
</p>
</div>


Implement cheese list

add(new ListView(quot;cheesesquot;, Cheese.getCheeses()) {
@Override
protected void populateItem(ListItem item) {
Cheese cheese = (Cheese) item.getModelObject();
item.add(new Label(quot;namequot;, cheese.getName()));
item.add(new Label(quot;descriptionquot;, cheese.get...()));
item.add(new Label(quot;pricequot;, quot;$quot;+cheese.getPrice()));
}
});


Make the list pageable

<div>
<a href=quot;#quot;><<</a>
<a href=quot;#quot;><</a>
<a href=quot;#quot;>1</a>
<a href=quot;#quot;>></a>
<a href=quot;#quot;>>></a>
</div>



add(new ListView(quot;cheesesquot;, Cheese.getCheeses()) {
@Override
item.add(new Label(quot;descriptionquot;, cheese.get...()));
}
});



PageableListView lv = null;
lv = new PageableListView(quot;cheesesquot;, cheeses, 2) {
@Override
item.add(new Label(quot;descriptionquot;, cheese.getD...()));
}
});
add(lv);
add(new PagingNavigator(quot;navigatorquot;, lv));


Add shopping cart to page

<div>
<h3>Your Selection</h3>
<table><tbody>
<tr>
<td>Gouda</td>
<td>$1.99</td>
<td><a href=quot;#quot;>remove</a></td>
</tr>
</tbody><tfoot>
<tr class=quot;totalquot;>
<th>Total</th>
<td>$1.99</td>
<td> </td>
</tr>


<div>
<table><tbody>
<tr wicket:id=”contents”>
<td wicket:id=”name”>Gouda</td>
<td wicket:id=”price”>$1.99</td>
<td><a href=quot;#quot;>remove</a></td>
</tr>
</tbody><tfoot>
<th>Total</th>
<td wicket:id=”total”>$1.99</td>
<td> </td>
</tr>


add(new ListView(quot;contentsquot;, cart.getContents()) {
@Override
}
});
add(new Label(“total”, cart.getTotal()));


Add add + remove links

<div class=quot;cheesequot; 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=quot;#quot;>Add to cart</a>
</p>
</div>

<tr wicket:id=”contents”>
<td wicket:id=”name”>Gouda</td>
<td wicket:id=”price”>$1.99</td>
<td><a wicket:id=”remove” href=quot;#quot;>remove</a></td>
</tr>


item.add(new Link(“add”, item.getModel()) {
Cheese cheese = (Cheese)getModelObject();
cart.getContents().add(cheese);
}
});

// shopping cart:
item.add(new Link(“remove”, item.getModel()) {
Cheese cheese = (Cheese)getModelObject();
cart.getContents().remove(cheese);
}
}); www.javapolis.com 72

Fix shopping cart total

add(new Label(“total”, cart.getTotal()));

add(new Label(“total”, new PropertyModel(cart, “total”)));


Fix shopping cart total


Add checkout link

<input type=quot;buttonquot; value=quot;Check outquot; />
<input type=quot;buttonquot; value=quot;Check outquot;
wicket:id=”checkout”/>

add(new Link(“checkout”) {
setResponsePage(new CheckoutPage(cart));
}
});


Add checkout page

Create CheckOutPage.html


 Create CheckOutPage.java


Apply mock markup to check out page


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



<wicket:panel>
<table><tbody>
<tr wicket:id=quot;contentsquot;>
<td wicket:id=quot;namequot;>Gouda</td>
<td wicket:id=quot;pricequot;>$1.99</td>
<td><a href=quot;#quot; wicket:id=quot;removequot;>remove</a></td>
</tr>
</tbody><tfoot>
<th>Total</th>
<td wicket:id=quot;totalquot;>$1.99</td>
</tr></tfoot></table>
</wicket:panel>

Make remove link Ajax enabled

// let panel write a dom identifier
setOutputMarkupId(true);

item.add(
new AjaxFallbackLink(quot;removequot;, item.getModel()) {
@Override
public void onClick(AjaxRequestTarget target) {
Cheese cheese = (Cheese) getModelObject();
cart.getContents().remove(cheese);
if(target != null ) {
target.addComponent(ShoppingCartPanel.this);
}
}
});

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(quot;feedbackquot;));

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(quot;formquot;) {
@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”));
…

CheckOutPage: add validation

form.add(new TextField(“name”).setRequired(true));
form.add(new TextField(“street”).setRequired(true));
form.add(new TextField(“city”).setRequired(true));
…


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(quot;statequot;,
Arrays.asList(quot;Alabamaquot;, quot;Alaskaquot;, quot;Arkansasquot;,
quot;Floridaquot;)));

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(quot;panel:contentsquot;, expected);
tester.clickLink(quot;panel:contents:0:removequot;);
expected.remove(0);
tester.assertListView(quot;panel:contentsquot;, expected);
}


Agenda
What is Wicket?


 Wicket concepts


 Q&A


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


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

Wicket In Action

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Martijn Dashorst

Mehr von Martijn Dashorst (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Wicket In Action