Migrating to Apache Wicket

Peter Thomas

Satyam Computer Services Ltd.

Prelude

• Introduction

• Expectations

• Workshop (later today)

– “Wicket, Spring & Hibernate”

– Code, Demos

– Hall B

– 2:40 PM

2

Session Outline

• Subject Application

• Wicket Overview

• Architecture (before)

• Migration

• Architecture (after)

• Comparison / Benefits

• Parting Thoughts

• Q & A

3

The Subject Application

• Open Source issue-management

• SourceForge Project: http://jtrac.info

• 40,000 downloads till date

• Localized into 15 languages

• FOSS India Award Winner 2008

4

Wicket Highlights

• Web application framework

• Component based & Object Oriented

• Just Java & HTML

• Clean separation of Code and Markup

• Easy to create and re-use custom components

• Transparent state & session management

• Built-in AJAX without needing to write Javascript

• No XML config

5

Wicket - History

• 2004: project started

• 2005: version 1.0

• 2006: version 1.2

• 2007

– graduates from Apache incubator

– becomes top-level Apache project

• 2008: Currently at version 1.3.3

6

http://wicket.apache.org

Hello World!

7

Initial Architecture

8

Presentation

Service

Persistence

Database

Hibernate 3

Spring DAO / Hibernate Support

Spring TX

Spring

Security

(Acegi)

Spring AOP

Spring

Context(DI / IoC

container)

POJO POJO POJO

Spring WebFlow

Spring MVC

JSP / JSTL

Dashboard AJAX ‘drill-down’ example

9

Controller Code

• Just returns a Model with 2 objects

– a collection loaded from the database

– session user

• All the action is in “dashboard.jsp” …

10

Typical JSP / Action MVC flow

11

Map URL to

Action

Prepare Model,

push to JSP

Render View

using Model

data

Request

Response

Framework

configuration

Java code in

Controller / Action

JSP

Not much to do

here for read-

only views, just

get data from

the DAO

What about

here?

12

JSP include for

common header)

JavaScript for AJAX

wired to <A> „onClick‟

Replace HTML dom

element (Prototype)

JSTL iterate

Hacking HTML DOM

„id‟ for AJAX

Ajax response

handler

JSP-EL + MVC

URL (another

JSP & controller)

JSTL conditional logic

Show AJAX „busy‟ indicator

Wicket version - Java

13

DashboardPage.java

DashboardRowPanel.java

Iterate using Wicket

repeater component

Chunk of HTML modeled as

a re-usable Java component

share data across

components using

normal Java and OO

Wicket generates

HTML id for you

Replace self with another

component over AJAX

Special Link component

shows AJAX „busy‟

indicator automatically

onClick event handler,

(in this case for AJAX)

Wicket version – HTML panel

14

The JSP / Action MVC ‘full stack’

15

HTML / CSS

Prototype / JS

JSP / JSP-EL

JSTL

TagLibs / Scriptlets

Markup

AJAX /

DOM Scripting

Templating

Logic / Iteration

Additional Logic

Tiles / SitemeshPage Layout /

Composition

XMLURL mapping

JavaAction Handler

/ Controller

Acegi / Spring Sec.Security

WebFlowPage Flow /

Navigation

HTML / CSSMarkup

JavaComponents

Common header / footer in JSP

• have to remember to „include‟ for all pages

• or use something like Tiles / Sitemesh

16

Markup Inheritance

17

Wicket compared to JSP

• True separation of concerns

• „Preview-ability‟ in a browser or HTML editor

• Absolutely no logic or code in the markup

• Work in pure Java and not in EL / JSTL / taglibs

• IDE support for Java

– Syntax highlighting, autocomplete

– Refactor safely and freely

– Debug and step through your code with ease

• Markup inheritance for common header / footer etc.

• Panels: Composition and reuse

• OO and not procedural „request-response‟ controller code

• XHTML compliant by default18

Side note: Wicket & Jetty

• Not really a big deal but

• Nice if you want to embed a web-app-server

• No more JSPC

• Makes you see all those app-servers in a new light ;)19

Jetty footprint with JSP support without JSP support

Wicket in development mode

• Detailed error reporting

• Refresh changes to markup on the fly

• AJAX debug window

20

Wicket Components

21

© Stefan Kanev

http://spider.bg/~aquarius/dl/Wicket%20Components%200.1.png

Custom Components

• extend (yes, the Java keyword ;)

• or group existing ones into Panels

22

What about page-flow / navigation?

23

userForm

userList

View

cancel

submit userForm

Handler

Space ==

null ?

yes

no

choose

Space

cancel / done

allocate

handler

submit

user

Allocate

Flow

call

sub-flow

return to

calling flow

Spring WebFlow 1.0 flow definition

24

Logical

View Name

(finally JSP)

State

Transitions

backend logic

invocation

(Java method)

Flow Decision Logic

Re-usable

Flow invocation

Input / output

variables & ‘scope’

Wicket - returning to ‘caller’ page e.g.

25

UserListPage: navigate to UserFormPage after setting self as ‘caller’

UserFormPage: ‘cancel’ returns to previous page (or OptionsPage if no previous page)

a WebPage instance

is just a normal Java

object :)

Page-Flow vs Partial-Update

26

Forms: when *you* manage state…

27

Hidden Form Fields

Controller code to load form backing object

You may even need code to bind drop-downs / multi-selects to domain

objects (or collections of them)

Wicket Forms: POJO binding

28

WebPage

Form

TextField

TextField

“name”

“description”

Model

bind to inherited model,

re-use identifier as

property expression

Wicket Forms: some highlights

• File-Upload supported out of the box

• Easy to have multiple submit buttons on a form

• Redirect after POST by default

• Nested forms are possible

• Unlimited possibilities for feedback / validation

messages

– e.g. using Ajax

29

Wicket Form Validators

• Wide variety of built-in validators

• Easy to implement your own

30

Form Validation Feedback example

31

Component based

manipulation of

markup: red CSS

border around fields

with errors

Wicket ‘Behavior’s

• Ready-made behaviors for common needs

• e.g. color alternate rows of an HTML table

32

JFreeChart Example

33

Spring MVC

URL mapping

Dynamic Image

Resource

Wicket Image

writing to raw

HTTP response

in controller

YUI Integration (custom created)

34

Yahoo! UI date

pickernon-modal, resizable

Javascript pop-up window

using Yahoo! UI

(lazy-loads over Ajax)

Other Wicket features worth noting

• Secure URLs by default

• Support for REST-ful or „friendly‟ URLs

• Subclass and use custom (type-safe) session

• Transparent browser back-button support

• Comprehensive i18n

• Easy integration with Spring

• WicketTester: UI component unit-testing support

35

Final Architecture

36

Presentation

Business

Data Access

Database

Hibernate 3

Spring – Hibernate - DAO

Spring TX

Spring

Security

(Acegi)Spring AOP

Apache Wicket

Spring

Context(DI / IoC

container)

POJO POJO POJO

Parting thoughts

• Surprisingly many Java web-frameworks move

developers towards non-Java, non-OO work

• Most development time is spent on the UI

• DSL based / declarative approaches have limits

• Java == power and expressiveness

37

Thank You

38

Wicket IDE Support

• Eclipse Plugin

– Wicket Bench

– http://www.laughingpanda.org/mediawiki/inde

x.php/Wicket_Bench

• NetBeans Module

– Wicket 1.3.3 Support

– http://plugins.netbeans.org/PluginPortal/faces

/PluginDetailPage.jsp?pluginid=3586

39

Books• Wicket in Action

– Martijn Dashorst, Eelco Hillenius

– http://manning.com/dashorst

– http://www.amazon.com/exec/obidos/tg/detail/-/1932394982/apachesoftwar-20/

• Enjoying Web Development with Wicket

– Kent Tong

– http://www.agileskills2.org/EWDW/

• Pro Wicket

– Karthik Gurumurthy

– http://apress.com/book/view/1590597222

– http://www.amazon.com/exec/obidos/tg/detail/-/1590597222/apachesoftwar-20/

40

Links / References

• Wicket home:

– http://wicket.apache.org

• Wicket wiki

– http://cwiki.apache.org/WICKET/

• Wicket examples:

– http://www.wicketstuff.org/wicket13/

• Wicket impressions (blog post):

– http://ptrthomas.wordpress.com/2007/03/02/wicket-

impressions-moving-from-spring-mvc-webflow/

41

Wicket vs JSF• JSF in comparison:

– Not really OO components, more of XML tags than Java

– Added complexity of JSF-EL and mixing JSP-EL if applicable

– faces-config.xml : synchronize multiple files for navigation, page-centric, string

expressions not type-safe

– Poor separation of concerns / „preview-ability‟ (in core JSF spec)

– General consensus that for practical use you have to supplement with non-standard

extensions - e.g. Facelets, Spring WebFlow etc.

– Hard to unit test

– Hard to debug / step-through

– More dependence on tooling / IDE support

– Mixing components from multiple vendors problematic especially with AJAX

– Generated HTML is typically verbose

– Creating custom components is much harder

– Slow evolution as it is a specification, now JSF 2.0 is being discussed…

• More details, discussion and side-by-side comparison (with code):

– http://ptrthomas.wordpress.com/2007/05/14/a-wicket-user-tries-jsf/42