Apache Wicket: web applications with just Java

Xavier HaninJavaZone ‘07

Who is Xavier Hanin

• Independent Java Consultant

• Customers

• Open Source

Renault

Agenda

• What is Wicket

• Core concepts of Wicket

• Developing a custom component

• Q&A

Wicket in a Nutshell

• Open Source (Apache Software Foundation)• Component based • Pure Java + Pure HTML• Simple• Enthusiastic community

What is Wicket?

• The technology: enabling component-oriented, programmatic manipulation of markup

• The mission: bringing object oriented programming to the web application view layer

• The reward: have a fun job and be good friends with your manager again

Achieving these goals through

• Keeping simple things simple• Utilizing an object-oriented component model

where components are truly self contained• Re-applying the Model View Controller pattern

on components instead of requests, with models as first class citizens

• Having a clean separation of concerns between HTML and Java

Achieving these goals through

• Providing transparent, fully automated state management

• Keeping configuration needs to the minimum

• No more XML!

• Making using & creating custom components easier than any framework out there

Component versus ‘traditional’

• Traditional– Struts, WebWork, Spring MVC, etc.– Proven for web– A lot of web developers available

• Components– JSF, Wicket, Tapestry, etc.– Traditional model for UI development on thick

clients– A lot of developers available

Features

• Page composition– panels, borders and markup inheritance

• Excellent localization and style support– template and resource loading

(_be.html, .xml)– localized models (e.g. for labels)– sophisticated resource bundle lookup

(composition & inheritance hierarchy)– automatic client capabilities detection

Features

• Integration– Spring– Guice– Hibernate– JasperReports– OSGi

• Fancy components– sortable, filterable, pageable, data aware tables– date picker, rich text editor, Google Maps– tabbed panel, navigation, tree, wizard

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

Features

• Ajax support and components– Ajax without writing JavaScript, Dojo,

Scriptaculous, ...

• Header contribution– Javascript & CSS

• URL mounting– pretty URLs

• Component level security

Agenda

• What is Wicket

• Core concepts of Wicket

• Developing a custom component

• Q&A

Wicket’s concepts

• Application

• Session

• RequestCycle

• Components

• Behaviors

• Models

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

– …

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>example.MyApplication</param-value> </init-param> <load-on-startup>1</load-on-startup></filter>

Wicket’s concepts

• Application

• Session

• RequestCycle

• Components

• Behaviors

• Models

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

Session

class MySession extends WebSession {

private ShoppingCart cart;

public ShoppingCart getCart() { … }

public void setCart(ShoppingCart cart) { … }

}

mysession.setCart(new ShoppingCart());

…

ShoppingCart cart = mysession.getCart();

cart.add(quantity, selectedProduct);

Wicket’s concepts

• Application

• Session

• RequestCycle

• Components

• Behaviors

• Models

RequestCycle

• Steps in a request cycle:1.Create request cycle object

2.Decode the request

3.Identify request target (page, component, …)

4.Process event (onClick, onSubmit, …)

5.Respond (page, component, image, pdf, …)

6.Clean up

RequestCycle

• Two types of requests:– Stateful

• Tied to specific user session• Not bookmarkable

– Stateless• Not necessarily tied to specific user session• Bookmarkable

Wicket’s concepts

• Application

• Session

• RequestCycle

• Components

• Behaviors

• Models

Components

• encapsulate the programmatic manipulation of markup

• can receive an event– onClick, onSubmit

• know how and where to render itself

Component

• Ultimate super class wicket.Component– Label– MultiLineLabel– TextField– PasswordTextField– Image– Link– Tree– BookmarkablePageLink– JasperReports

– ListView– Loop– PagingNavigator– ImageMap– Button– Ajax…– Sorting, paging repeaters– Wizard– DatePicker

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>

Components and markup

• Component can have its own markup file– Page– Panel– Border

• Put java, markup and supporting files in same package on class path

A page: Hello, World!

Wicket’s concepts

• Application

• Session

• RequestCycle

• Components

• Behaviors

• Models

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>

Behaviors

• Change attributes of your component’s markup• Add javascript events• Add Ajax behavior

component.add( new AjaxSelfUpdatingBehavior( Duration.seconds(1)));

Wicket’s concepts

• Application

• Session

• RequestCycle

• Components

• Behaviors

• Models

Models

• Models bind your POJO’s to Wicket components

Label(“name”, model)

<<Person>>

+name : String+city : String

PropertyModel

Models

• Lazy binding in Java sucks– Doesn’t update:

new TextField(“txt”, person.getName())

– Gives null pointers:new Label(“street”, person.getAddress().getStreet())

• Solution: OGNL/EL like expressions

Models

• PropertyModel:– new PropertyModel(person, “name”)– new PropertyModel(person, “address.street”)

• Be aware for nulls when using updates:Person p = new Person();

new TextField(“street”, new PropertyModel(p, “address.street”));

Agenda

• What is Wicket

• Core concepts of Wicket

• Developing a custom component

• Q&A

Why a custom component?

• 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. »

Custom components for all

464 pages

20 minutes

Example: Password strength

weak

medium

strong

Components

• Creating custom component is as easy as typing in ‘extends’

• Extends wicket.Component down the line

• Available on application classpath

Example: Password strength

• 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

Example: Password strength

Example: Password strength

Example: Password strength

Components are reusable

• Put them in a JAR

• Package all necessary resources:– HTML, JavaScript, Images, CSS– class file

• Put JAR on classpath

• Ready for (re)use

Conclusion

• Smart component oriented web framework

• Easy creation and use of custom components

• Enthustiatic community

Join in!http://wicket.apache.org/

users@wicket.apache.org

Agenda

• What is Wicket

• Core concepts of Wicket

• Developing a custom component

• Q&A