Component Based Web Development with
Apache Wicket
Web Application Development with just JAVA and HTML
- Karthik Gurumurthy,
Architect, Symcon Global Technologies
Author Pro Wicket, Apress
Agenda
What is Wicket
Core concepts of Wicket
Developing a custom component
Q&A
POJO Based Web Development with Apache Wicket 2
The Java Ecosystem
When depressed, Women consume chocolates & go shopping while
men invade other countries
- An old chinese proverb
When depressed, Women (still) consume chocolates & go shopping
while men create yet another open source java web framework
- Karthik Gurumurthy ;-)
Luckily, Apache Wicket, by no means, gives an impression of having been
created when under depression unlike a few others ;-)
POJO Based Web Development with Apache Wicket 3
Quotes
Wicket is not a framework, its a candy bar and
everybody loves candy bars..
- Romain Guy, Lead Software Engineer, Java Swing
Team, Author, Filthy Rich Swing Clients
'Dude, where are my objects?! and then I saw Wicket!
POJO Based Web Development with Apache Wicket 4
Apache Wicket in a Nutshell
Open Source (ASF)
Component Based
Clean separation of Markup and Code
Plain Old Java and Plain old HTML
No new templating / expression language to learn
Minimum Configuration needs
Zero XML Framework ( No Annotations either )
If you know Java and HTML, you already know quite a
bit about Wicket!
POJO Based Web Development with Apache Wicket 5
Features
Page Composition
Panels, Borders and Markup Inheritance
Excellent Localization & Style Support
template and resource loading (_be.html, .xml)
localized models (e.g. for labels)
sophisticated resource bundle lookup (composition &
inheritance hierarchy)
POJO Based Web Development with Apache Wicket 6
Features
Integration
Spring
Guice
Hibernate
Jasper Reports
Fancy Components
sortable, filterable, pageable, data aware tables
date picker, rich text editor, Google Maps
tabbed panel, navigation, tree, wizard
POJO Based Web Development with Apache Wicket 7
Features
State management
type safe sessions
clustering support
back button support
Double submit strategies
render redirect/ redirect to buffered response/ none
Testing support
JUnit testing
extensive logging and error reporting
POJO Based Web Development with Apache Wicket 8
Features
Ajax support and components
Ajax without writing JavaScript, Dojo,
Scriptaculous, ...
Header contribution
Javascript & CSS
URL mounting
pretty URLs
Component level security
POJO Based Web Development with Apache Wicket 9
Apache Wicket in a Nutshell
Event based as opposed to Action based
Mission Statement
A Java Software Framework to enable component-
oriented, programmatic manipulation of markup
POJO Based Web Development with Apache Wicket 10
Model2 (Struts)
Action
request
Client push
push push
2
response
1 3
Hello.jsp
POJO Based Web Development with Apache Wicket 11
Component Oriented (Wicket)
Model
pull
Comp-1
request
Model
Comp-2
Client pull
response Comp-3
pull
HelloPage.java
Model
POJO Based Web Development with Apache Wicket 12
Agenda
What is Wicket
Core concepts of Wicket
Developing a custom component
Q&A
POJO Based Web Development with Apache Wicket 13
Wicket Concepts
Application
Session
RequestCycle
Components
Behaviors
Models
POJO Based Web Development with Apache Wicket 14
Application
Main entry point for your web application
Configuration
Output Wicket specific tags?
Watch for markup changes every ?
Defines homepage
Factories for
Session
RequestCycle
Security
POJO Based Web Development with Apache Wicket 15
Application
Configured in web.xml
<filter>
<filter-name>wicket</servlet-name>
<filter-class>
org.apache.wicket.protocol.http.WicketFilter
</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>
com.mycompany.MyApplication
</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</filter>
POJO Based Web Development with Apache Wicket 16
Wicket Concepts
Application
Session
RequestCycle
Components
Behaviors
Models
POJO Based Web Development with Apache Wicket 17
Session
Abstraction of a user session
Storage typically in HttpSession
Stores session specific data
Locale, Client info (browser vendor and version)
Your own data?
Logged in user
Shopping cart contents
Limited page history for back button support
POJO Based Web Development with Apache Wicket 18
Session
class ApplicationSession extends WebSession {
private User loggedInUser;
public User getLoggedInUser() { }
public void setLoggedInUser (User cart) { }
}
appSession.setLoggedInUser(new User());
User loggedInUser = mysession. getLoggedInUser();
Permission[] permissions = loggedInUser.getPermissions();
POJO Based Web Development with Apache Wicket 19
Wicket Concepts
Application
Session
RequestCycle
Components
Behaviors
Models
POJO Based Web Development with Apache Wicket 20
RequestCycle
Steps in a request cycle:
Create request cycle object
Decode the request
Identify request target (page, component, )
Process event (onClick, onSubmit, )
Respond (page, component, image, pdf, )
Clean up
POJO Based Web Development with Apache Wicket 21
RequestCycle
Two types of requests:
Stateful
Tied to specific user session
Not bookmarkable
Stateless
Not necessarily tied to specific user session
Bookmarkable
POJO Based Web Development with Apache Wicket 22
Wicket Concepts
Application
Session
RequestCycle
Components
Behaviors
Models
POJO Based Web Development with Apache Wicket 23
Component
Ultimate super class org.apache.wicket.Component
Label ListView
MultiLineLabel Loop
TextField PagingNavigator
PasswordTextField ImageMap
Image Button
Link Ajax
Tree Sorting, paging repeaters
BookmarkablePageLink Wizard
Panel DatePicker
POJO Based Web Development with Apache Wicket 24
Components and Markup
A component is identified in markup with wicket:id
Html:
<h1 wicket:id=msg>Gets replaced</h1>
Java:
new Label(msg, Hello, World!);
Final (wicket tags can be stripped):
<h1>Hello, World!</h1>
POJO Based Web Development with Apache Wicket 25
Convention over configuration
Component can have its own markup file
Page
Panel
Border
Put java, markup and supporting files in same package
on class path
Can also place localization properties file in the same
package
POJO Based Web Development with Apache Wicket 26
A Page: Hello, World!
POJO Based Web Development with Apache Wicket 27
Wicket Concepts
Application
Session
RequestCycle
Components
Behaviors
Models
POJO Based Web Development with Apache Wicket 28
Behaviors
Behaviors are plug-ins for Components
They can modify the components markup
item.add(new AbstractBehavior() {
public void onComponentTag(
Component component, ComponentTag tag) {
String css = (((Item)component).getIndex() % 2 == 0)
? "even" : "odd";
tag.put("class", css);
}
});
Output:
<tr class=odd></tr>
<tr class=even></tr>
POJO Based Web Development with Apache Wicket 29
Behaviors
Change attributes of your components markup
Add javascript events
Add Ajax behavior
component.add(
new AjaxSelfUpdatingBehavior(
Duration.seconds(1)));
POJO Based Web Development with Apache Wicket 30
Wicket Concepts
Application
Session
RequestCycle
Components
Behaviors
Models
POJO Based Web Development with Apache Wicket 31
Models
Models bind your POJOs to Wicket components
Label(name, model)
<<Person>>
PropertyModel
+name : String
+city : String
POJO Based Web Development with Apache Wicket 32
Models
Lazy binding in Java sucks
Doesnt update:
new TextField(txt, person.getName())
Gives null pointers:
new Label(street,
person.getAddress().getStreet())
Solution: OGNL/EL like expressions
POJO Based Web Development with Apache Wicket 33
Models
PropertyModel:
new PropertyModel(person, name)
new PropertyModel(person, address.street)
POJO Based Web Development with Apache Wicket 34
Advanced Models
StringResource
Internationalization & localization
LoadableDetachableModel
Keeps session state minimal
Store only entity ID in session
CompoundPropertyModel
Shared between components
Uses component ID for OGNL traversals
POJO Based Web Development with Apache Wicket 35
Compound Property Model
form.add(new Label(name, new PropertyModel(person, name));
form.add(new Label(birthdate, new PropertyModel(person, birthdate));
form.add(new TextField(street,
new PropertyModel(person, address.street)));
form.setModel(new CompoundPropertyModel(person));
form.add(new Label(name));
form.add(new Label(birthdate));
form.add(new TextField(address.street));
POJO Based Web Development with Apache Wicket 36
Ajax
Out-of-the-box
Dynamic updating of components in page
Update multiple components in one request
No JavaScript skills necessary
Several Ajax components and behaviors available
Other Projects
Dojo integration
Scriptaculous integration
Yahoo! UI library integration
POJO Based Web Development with Apache Wicket 37
Wicket Ajax Components
Wicket core Wicket extensions
AjaxLink IndicatingAjaxLink
AjaxFallbackLink AjaxEditableLabel
AjaxPagingNavigator AutoCompleteTextField
AjaxSubmitButton UploadProgressBar
AjaxSubmitLink AjaxTabbedPanel
AjaxCheckBox
POJO Based Web Development with Apache Wicket 38
Agenda
What is Wicket
Core concepts of Wicket
Developing a custom component
Q&A
POJO Based Web Development with Apache Wicket 39
Wicket Lead on Custom Components
Eelco Hillenius:
Imagine being told that you can use Java as your
programming language, but at the same time
being told not to create your own classes. [...]
I fail to understand why that has to be different
for UI development, and Wicket proves it doesn't
have to be so.
POJO Based Web Development with Apache Wicket 40
Wicket Lead on Custom Components
Creating custom component is as easy as
typing in extends
Extends wicket.Component down the line
Available on application classpath
POJO Based Web Development with Apache Wicket 41
Custom Components
Panels provide grouping
Have own markup file
Can be exchanged in pages for other components
Can contribute to header
Can contain any number of components, including
panels
POJO Based Web Development with Apache Wicket 42
TogglePane HTML Markup (Designer)
<div id="I_D" class="pane_border">
<div class="pane">
<div class="pane_header">
<span>Countries</span>
</div>
<div class="pane_content">
<span>India, Pakistan, Australia</span>
</div>
</div>
</div>
POJO Based Web Development with Apache Wicket 43
TogglePane JavaScript (toggle.js)
function init_toggle(){
Fetch all elements under a div with
var panes = $$('div#I_D .pane');
panes = $A(panes); id I_D having class pane
panes.each(
function(pane){ For each pane ,
var header = $A(pane.childNodes).find(
function(child){ look for header
return child.className == 'pane_header'; and content
} elements.
);
var content = $A(pane.childNodes).find(
function(child){ Attach a onclick
return child.className == 'pane_content'; listener to the
}
header to toggle
);
header.onclick = function(){ the content when
Effect.toggle(content,'blind'); clicked
};
} Scriptaculous for
);
} toggle effect
POJO Based Web Development with Apache Wicket 44
Add the required scripts to the <head>
<head>
<script src="toggle.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
</head>
POJO Based Web Development with Apache Wicket 45
TogglePane Custom Component
Designer ensures that the HTML+ JS
prototype works
POJO Based Web Development with Apache Wicket 46
Enter Wicket : Identifying Components
<div id="I_D" class="pane_border"> Repeating Block
<div class="pane">
<div class="pane_header">
<span>Countries</span>
</div>
<div class="pane_content"> Header
<span>India, Pakistan, Australia</span>
</div>
</div> Content
</div>
POJO Based Web Development with Apache Wicket 47
Identifying Components (attach wicket:id)
This is a group of components
<wicket:panel>
A Panel !
<div id="I_D" class="pane_border">
<div class="pane wicket:id=panes>
<div class="pane_header"> Repeating Block
<span wicket:id=header>Countries</span>
</div>
<div class="pane_content"> Header
<span wicket:id=content>India, Pakistan, Australia</span>
</div>
</div> Content
</div>
</wicket:panel>
POJO Based Web Development with Apache Wicket 48
Time to Code TogglePane Component
Add Dynamic Behavior to the markup
in Wicket
POJO Based Web Development with Apache Wicket 49
Identifying Components for Ajax Behavior
<div id="I_D" class="pane_border"> onclick of header
<div class="pane wicket:id=pane>
<div class="pane_header">
<span wicket:id=header>Countries</span>
</div> Repaint content
<div class="pane_content">
<span wicket:id=content>India,</span>
</div>
</div>
</div>
POJO Based Web Development with Apache Wicket 50
Add wicket:id in order to attach Ajax Behavior
<div id="I_D" class="pane_border"> On click of
<div class="pane wicket:id=panes> header
<div class="pane_header wicket:id=h>
<span wicket:id=header>Countries</span>
</div> Repaint Content
<div class="pane_content">
<span wicket:id=content>India, Pakistan, Australia</span>
</div>
</div>
</div>
POJO Based Web Development with Apache Wicket 51
Avoid FUD and illogical reasoning..
Q) Why is JSF better than Wicket ?
A) Well, uhhm because JSF is a standard
http://www.theserverside.com/news/thread.tss?thread_id=45345
I can stand brute force, but brute reason is
quite unbearable
- Oscar Wilde
POJO Based Web Development with Apache Wicket
Resources
http://wicket.apache.org
##wicket
irc.freenode.net
Books:
Pro Wicket, Karthik Gurumurthy
Wicket in Action , Eelco Hillenius & Martijn Dashorst
Enjoying Web Development with Wicket, Kent Tong
POJO Based Web Development with Apache Wicket
