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