Migrating to Apache Wicket

Peter Thomas Satyam Computer Services Ltd. Prelude

• Introduction • Expectations • Workshop (later today) – “Wicket, Spring & ” – 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 & 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 – becomes top-level Apache project • 2008: Currently at version 1.3.3

http://wicket.apache.org

6 Hello World!

7 Initial Architecture

JSP / JSTL

Presentation Spring MVC

Spring Spring WebFlow Security (Acegi)

POJO POJO POJO Spring Context Service (DI / IoC Spring AOP container)

Spring TX

Spring DAO / Hibernate Support

Persistence Hibernate 3

8 Database 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

Request

Framework Map URL to Not much to do Action configuration here for read- only views, just get data from Java code in Prepare Model, the DAO Controller / Action push to JSP

Render View What about JSP using Model here? data

Response 11 JSP include for common header)

JavaScript for AJAX wired to „onClick‟

JSP-EL + MVC Ajax response URL (another handler JSP & controller)

Replace HTML dom element (Prototype)

JSTL iterate

Hacking HTML DOM „id‟ for AJAX

Show AJAX „busy‟ indicator 12

JSTL conditional logic Wicket version - Java DashboardPage.java Iterate using Wicket repeater component

share data across Chunk of HTML modeled as components using a re-usable Java component normal Java and OO DashboardRowPanel.java

Wicket generates Special Link component HTML id for you shows AJAX „busy‟ indicator automatically

onClick event handler, (in this case for AJAX)

13 Replace self with another component over AJAX Wicket version – HTML panel

14 The JSP / Action MVC ‘full stack’

Markup HTML / CSS

AJAX / DOM Scripting Prototype / JS

Templating JSP / JSP-EL

Logic / Iteration JSTL Markup HTML / CSS Additional Logic TagLibs / Scriptlets Components Java Page Layout / Tiles / Sitemesh Composition

Security Acegi / Spring Sec.

URL mapping XML

Page Flow / Navigation WebFlow Action Handler / Controller Java 15 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 default 18 Side note: Wicket & Jetty

Jetty footprint with JSP support without JSP support

• 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 Wicket in development mode

• Detailed error reporting • Refresh changes to markup on the fly • AJAX debug window

20 Wicket Components

© Stefan Kanev http://spider.bg/~aquarius/dl/Wicket%20Components%200.1.png 21 Custom Components

• extend (yes, the Java keyword ;) • or group existing ones into Panels

22 What about page-flow / navigation?

Space yes user submit userForm == Allocate Handler null ? Flow

userForm no cancel call sub-flow userList View

return to submit choose allocate calling flow Space handler

cancel / done

23 Spring WebFlow 1.0 flow definition

Logical View Name (finally JSP)

State Transitions

backend logic invocation (Java method)

Flow Decision Logic

Re-usable Flow invocation

Input / output variables & ‘scope’ 24 Wicket - returning to ‘caller’ page e.g.

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

25 Page-Flow vs Partial-Update

26 Forms: when *you* manage state…

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)

27 Wicket Forms: POJO binding

WebPage

Model Form

“name” TextField

“description” TextField

bind to inherited model, re-use identifier as property expression

28 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

Component based manipulation of markup: red CSS border around fields with errors

31 Wicket ‘Behavior’s

• Ready-made behaviors for common needs • e.g. color alternate rows of an HTML table

32 JFreeChart Example

Spring MVC URL mapping

writing to raw HTTP response in controller

Dynamic Image Resource

33 Wicket Image YUI Integration (custom created)

Yahoo! UI date non-modal, resizable picker Javascript pop-up window 34 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

Presentation Apache Wicket

Spring Spring POJO POJO POJO Security Context Business (Acegi) (DI / IoC Spring AOP container)

Spring TX

Spring – Hibernate - DAO Data Access

Hibernate 3

Database 36 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