An in depth look at Apache Wicket - Amazon Web …mysticweb-bucket.s3.amazonaws.com/presentations/october...An in depth look at Apache Wicket Andrew Lombardi Owner, Tech Evangelist

An in depth look atApache Wicket

Andrew LombardiOwner, Tech EvangelistMystic Coders, LLCandrew AT mysticcoders DOT com

kinabalu @ irc://irc.freenode.net - ##wicket, ##javakinabalu @ twitter

Tuesday, October 18, 11


10 Years in business


Software Consultants




International Speaker





Training





Training


Apache Wicket Contributor


To our success!



Training


Apache Wicket Contributor



What is a Wicket?






Wicket is a component-based web framework using Java and HTML.

Wicket is...


What we’ll cover


1. How to get started

What we’ll cover


1. How to get started2. Building your first app

What we’ll cover


1. How to get started2. Building your first app3. Further Resources

What we’ll cover


The Cooking show model


Why Wicket ?


Version 1.0 in June 2005


+

Top Level Project June 2007


(optional)


That’s it.

(optional)


And many more...Tuesday, October 18, 11

Who uses it?


Who uses it?


http://cwe.mitre.org/top25/

Security Best Practices

"Cross-site scripting is the practice of embedding malicious scriptinto a Web page that can execute when users visit the page. To wardoff such attacks, the report recommends using frameworks and librariesto control output, including "[...] Apache Wicket." Programmers should usestrong character encoding and set the browser cookie session toHttpOnly."




Community

• Part of the Apache Software Foundation• VERY active mailing list• ##wicket on irc.freenode.net


Wicket Components


Wicket Components


Wicket Components

+


Wicket Components

+


Wicket is just Java


• Components are objects (use extends)

Wicket is just Java


• Components are objects (use extends)• Sparse use of annotations

Wicket is just Java


• Components are objects (use extends)• Sparse use of annotations• Not framework managed (use new)

Wicket is just Java


Wicket is just HTML


• Designer friendly

Wicket is just HTML


• Designer friendly• No scriptlets in HTML

Wicket is just HTML


• Designer friendly• No scriptlets in HTML• Developers won’t ruin pixel perfection

Wicket is just HTML


• Designer friendly• No scriptlets in HTML• Developers won’t ruin pixel perfection• Designers won’t screw up your tags

Wicket is just HTML







No XML



wicket-quickstart or the Wicket maven archetype headstart


mvn archetype:create -DarchetypeGroupId=org.apache.wicket

-DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.4.1 -DgroupId=com.mycompany -DartifactId=myproject

or

wicket-quickstart module

http://wicket.apache.org/quickstart.html






Quickstart

DEMOTuesday, October 18, 11


Hello, World!


<h1>Hello, World!</h1>

Hello, World!


<h1 wicket:id=”message”>[label text]</h1>

Hello, World!



add(new Label(“message”, “Hello, World!”));

+

Hello, World!


+

=

<h1>Hello, World!</h1>


add(new Label(“message”, “Hello, World!”));

Hello, World!


<html xmlns:wicket=”http://wicket.apache.org”> <head> <title>Home Page</title> </head> <body> <h1 wicket:id=”message”>[label text]</h1> </body></html>

Hello, World!


http://wicket.apache.org

http://wicket.apache.org

import org.apache.wicket.markup.html.WebPage;import org.apache.wicket.markup.html.basic.Label;

public class HomePage extends WebPage {public HomePage() {

add(new Label(“message”, “Hello, World!”);}

}

Hello, World!


Application class


•Mount bookmarkable pages

Application class


•Mount bookmarkable pages•Spring/Guice Integration

Application class


•Mount bookmarkable pages•Spring/Guice Integration•Custom WebSession implementation

Application class


•Mount bookmarkable pages•Spring/Guice Integration•Custom WebSession implementation•Authentication strategies

Application class


•Mount bookmarkable pages•Spring/Guice Integration•Custom WebSession implementation•Authentication strategies•Custom URL mounts

Application class


•Mount bookmarkable pages•Spring/Guice Integration•Custom WebSession implementation•Authentication strategies•Custom URL mounts•Resource mounting

Application class


•Mount bookmarkable pages•Spring/Guice Integration•Custom WebSession implementation•Authentication strategies•Custom URL mounts•Resource mounting•Refactorable

Application class


•Mount bookmarkable pages•Spring/Guice Integration•Custom WebSession implementation•Authentication strategies•Custom URL mounts•Resource mounting•Refactorable•Debuggable

Application class


Page layout in Wicket allows you to inherit and use composition for markup


* Username

Login

* Password

Login


* Username

Login

* Password

Login


* Username

Login

* Password

Login


Markup inheritance



Markup Inheritance


• Easy templating

Markup Inheritance


• Easy templating• Smart header contribution

Markup Inheritance


• Easy templating• Smart header contribution• Mix and match components and panel

Markup Inheritance


• Easy templating• Smart header contribution• Mix and match components and panel• Usable with Panel’s as well

Markup Inheritance


Forms in Wicket allow you to accept, process and validate user input.


Button

TextField, TextArea

CheckBox, CheckGroup, Check

Form Components

DropDownChoice

ListChoice

RadioGroup

RadioChoice


Start onSubmit

onError

required check

pushinput

validate input

convertinput

fail fail fail

Form Processing Flow


Form



“Computer Science is a science of abstraction - creating the right model for a problem and devising the appropriate mechanizable techniques to solve it.”

-A Aho & J. Ullman


A Model in Wicket allows components to retrieve and store data.


idComponent

getObject():TsetObject(T)

<<interface>>IModel<T>

Label TextField<T> Page


Flow of Model DataMystic Paste

Paste

Controller

View

TextArea

Locator

IModel

Model

PasteItemcontent

Receives

Sets

Sets

Gets

Gets

Renders


Not using models?

new Label("street", ! ! customer.getAddress().getStreet());

•Label doesn’t get notified if address / street / customer changes•Possible NullPointerException if customer or address is null


PropertyModel saves the day

new Label("street", ! ! new PropertyModel(customer, “address.street”));


PropertyModel saves the day

new Label("street", ! ! new PropertyModel(customer, “address.street”));

•Safe from NullPointerException’s•Dynamic


PropertyModel



Model Description

Model Simple model used to store static content, or used as a base class for dynamic behavior.

PropertyModel Uses a property expression to dynamically access a property of your domain objects.

CompoundPropertyModel Uses component identifiers as property expressions to bind components to its domain objects.

LoadableDetachableModel Abstract model for quickly creating detachable models.

ResourceModel Easy-to-use model for retrieving messages from resource bundles.

StringResourceModel Advanced model for retrieving messages from resource bundles; supports property expressions and MessageFormat substitutions.

Wicket Core Models


Session usage in Wicket is managed by detaching unnecessary objects.


detach()

<<Interface>>IDetachable

value : SerializableModel<T>

getObject():TsetObject(T)

<<Interface>>IModel


LoadableDetachableModelnew ViewPaste(new Model(pasteItem)) new ViewPaste(new DetachablePasteModel

(pasteItem))

Session

PasteItem ObjectLarge

ViewPaste

Session

IdentifierSmall

ViewPaste


private class DetachedPasteModel extends LoadableDetachableModel<PasteItem> {

!! String id;!! public DetachedPasteModel(String id) {! ! this.id = id;! }!! protected PasteItem load() {! ! try {! ! ! return pasteService.getItem("web", Long.parseLong(id));! ! } catch (InvalidClientException e) {! ! ! e.printStackTrace();! ! }! ! return null;! }}


Nested Modelspublic class DefaultWhenNullModel<T> implements IModel<T> {! private static final long serialVersionUID = 1L;

! private final IModel<T> nestedModel; ! private final T defaultValue;

! public DefaultWhenNullModel(IModel<T> nestedModel, T defaultValue) { ! ! this.nestedModel = nestedModel; ! ! this.defaultValue = defaultValue; ! }

! public T getObject() { ! ! T val = nestedModel.getObject(); ! ! return val == null ? defaultValue : val; ! }

! public void setObject(T object) { ! ! nestedModel.setObject(object); ! }

! public void detach() { ! ! nestedModel.detach(); ! } }


Nested Models

Form form = new Form( new CompoundPropertyModel<Profile>( new ProfileDetachableModel()));

form.add(new TextField("firstName"));


StringResourceModel

Profile profile = new Profile();profile.setFirstName("Werner");profile.setLastName("Brandis");

add(new Label("verifyMessage",! ! new StringResourceModel("verify.message", this, new Model(profile)));

MyPage.java

MyPage.properties

verify.message=Hi. My name is ${firstName} ${lastName}. My voice is my passport. Verify me.


Form Validation in Wicket is attached to components or the form.


NumberValidator - Validate’s max, min, range for a Number

StringValidator - Validate’s max, min, length for a String

PatternValidator - Validate’s the String input matches theregex pattern

Wicket Validators

EmailAddressValidator - Validate’s field contains a valid email

EqualPasswordInputValidator - Form validation of twopassword fields being equal


Form Validation



FeedbackMessages


• Page class

FeedbackMessages


• Page class• Component class

FeedbackMessages


• Page class• Component class• Application class

FeedbackMessages


• Page class• Component class• Application class• Application base class

FeedbackMessages


ComponentFeedbackMessageFilter - Gives only messages for a specific component

ContainerFeedbackMessageFilter - Gives only messages for a specific container component and its children

ErrorLevelFeedbackMessageFilter - Gives only messages at a certain level (or higher)

FeedbackPanel


Repeaters in Wicket allow you to show blocks of markup multiple times.


Repeaters


• RepeatingView

Repeaters


• RepeatingView• RefreshingView

Repeaters


• RepeatingView• RefreshingView• ListView

Repeaters


• RepeatingView• RefreshingView• ListView• DataView

Repeaters


• RepeatingView• RefreshingView• ListView• DataView• GridView

Repeaters


• RepeatingView• RefreshingView• ListView• DataView• GridView• DataTable

Repeaters


DataTable is an example of an easily reusable and customizable component



Pageable


Pageable

Sortable


Pageable

Sortable

Searchable


Pageable

Sortable

Searchable

Easy to Style


Pageable

Sortable

Searchable

Easy to Style

Filterable


ListView



Behaviors in Wicket are decorators for components.


Behavior



Behaviors


• Can manipulate component tags

Behaviors


• Can manipulate component tags• Add custom Javascript to components

Behaviors


• Can manipulate component tags• Add custom Javascript to components• Add AJAX behavior to components

Behaviors


Adding Javascript to a component



Using WicketTester and FormTester to unit test our Wicket application.


WicketTester


•Test Pages and components outside of container

WicketTester


•Test Pages and components outside of container•Test Forms

WicketTester


•Test Pages and components outside of container•Test Forms•Test AJAX interactions

WicketTester


•Test Pages and components outside of container•Test Forms•Test AJAX interactions•Can run against any build tool that supports JUnit or TestNG

WicketTester


Simple page test



Click counter test



Search Form test



Search Form testw/ error



“Our team has been able to cut the LOC count by a factor of about 10 (!) moving from a JSP Based Framework to Wicket...”

-Leo Erlandsson


Quick framework comparison


GWT


GWT• Pro


GWT• Pro

• Use Java for client-side Javascript


GWT• Pro

• Use Java for client-side Javascript• Can send complex Java objects to client from server


GWT• Pro

• Use Java for client-side Javascript• Can send complex Java objects to client from server• Scalable since state is on server


GWT• Pro

• Use Java for client-side Javascript• Can send complex Java objects to client from server• Scalable since state is on server• Rich widget library


GWT• Pro

• Use Java for client-side Javascript• Can send complex Java objects to client from server• Scalable since state is on server• Rich widget library• Simple for AJAX


GWT• Pro


• Con


GWT• Pro


• Con• SEO unfriendly


GWT• Pro


• Con• SEO unfriendly• Difficult to test


GWT• Pro


• Con• SEO unfriendly• Difficult to test• Data security problems (client-side state)


GWT• Pro


• Con• SEO unfriendly• Difficult to test• Data security problems (client-side state)• GWT compiler is slow


GWT• Pro


• Con• SEO unfriendly• Difficult to test• Data security problems (client-side state)• GWT compiler is slow• Front-end design in Java


GWT• Pro


• Con• SEO unfriendly• Difficult to test• Data security problems (client-side state)• GWT compiler is slow• Front-end design in Java• Maven support is flaky


GWT• Pro


• Con• SEO unfriendly• Difficult to test• Data security problems (client-side state)• GWT compiler is slow• Front-end design in Java• Maven support is flaky• Not easily bookmarkable


JSF


JSF• Pro


JSF• Pro

• Commercial support


JSF• Pro

• Commercial support• Sun standard


JSF• Pro

• Commercial support• Sun standard• Advanced tooling


JSF• Pro

• Commercial support• Sun standard• Advanced tooling• Rich widget / component library


JSF• Pro


• Con


JSF• Pro


• Con• Sun standard


JSF• Pro


• Con• Sun standard• JSP tag soup


JSF• Pro


• Con• Sun standard• JSP tag soup• Library jarhell


JSF• Pro


• Con• Sun standard• JSP tag soup• Library jarhell• Painful without Facelets


JSF• Pro


• Con• Sun standard• JSP tag soup• Library jarhell• Painful without Facelets• Multiple implementations to choose from


Wicket


Wicket• Pro


Wicket• Pro

• True separation of layout and code


Wicket• Pro

• True separation of layout and code• Component based (true reusability)


Wicket• Pro

• True separation of layout and code• Component based (true reusability)• Simple AJAX support with existing components


Wicket• Pro

• True separation of layout and code• Component based (true reusability)• Simple AJAX support with existing components• Rich community support mailing list and widget library


Wicket• Pro

• True separation of layout and code• Component based (true reusability)• Simple AJAX support with existing components• Rich community support mailing list and widget library• Just Java and Just HTML


Wicket• Pro

• True separation of layout and code• Component based (true reusability)• Simple AJAX support with existing components• Rich community support mailing list and widget library• Just Java and Just HTML• Easy to refactor and debug


Wicket• Pro

• True separation of layout and code• Component based (true reusability)• Simple AJAX support with existing components• Rich community support mailing list and widget library• Just Java and Just HTML• Easy to refactor and debug• Object oriented by design


Wicket• Pro


• Con


Wicket• Pro


• Con• Documentation and examples


Wicket• Pro


• Con• Documentation and examples• More initial Java code


Wicket• Pro


• Con• Documentation and examples• More initial Java code • AJAX support requires server round-trip


Wicket• Pro


• Con• Documentation and examples• More initial Java code • AJAX support requires server round-trip• Wicket internals difficult to grok


Wicket• Pro


• Con• Documentation and examples• More initial Java code • AJAX support requires server round-trip• Wicket internals difficult to grok• Object oriented by design



Wicket: HTML and Java


Wicket: HTML and Java

Typical MVC: JSP, HTML, taglibs, Java, and XML


More websites for Wicket knowledge

RESOURCES


By Andrew Lombardi

ABOUT APACHE WICKET

ww

w.d

zone

.co

m

G

et M

ore

Ref

card

z! V

isit

ref

card

z.co

m

#61

Getting Started with Apache Wicket

Apache Wicket is a Java-based web application framework that has rapidly grown to be a favorite among many developers. It features a POJO data model, no XML, and a proper mark-up / logic separation not seen in most frameworks. Apache Wicket gives you a simple framework for creating powerful, reusable components and offers an object oriented methodology to web development while requiring only Java and HTML.

Hot Tip

Depending on your configuration needs, you can set this parameter in the web.xml as either: a context-param or init-param to the filter a command line parameter wicket.configuration by overriding Application.getConfigurationType()

PROJECT LAYOUT

The project layout most typical of Apache Wicket applications is based on the default Maven directories. Any Wicket component that requires view markup in the form of HTML needs to be side-by-side with the Java file. Using Maven however, we can separate the source directories into java/ and resources/ to give some distinction. To get started, download either the wicket-quickstart project and modify it to your needs, or use the maven archetype here:

mvn archetype:create \-DarchetypeGroupId=org.apache.wicket \-DarchetypeArtifactId=wicket-archetype-quickstart \-DarchetypeVersion=1.3.5 \

�� <param-value>/refcard</param-value> </init-param> �� <url-pattern>/*</url-pattern> �� </web-app>

Apache Wicket offers a development and deplyoment mode that can be configured in the web.xml file:

<context-param> �� <param-value>development</param-value> </context-param>

MODELS

Apache Wicket uses models to separate the domain layer from the view layer in your application and to bind them together. Tuesday, October 18, 11

http://www.mysticcoders.com/blog/2009/03/09/5-days-of-wicket/






http://wicketbyexample.com





Latest examples:





•Customized Clustering options

Latest examples:





•Customized Clustering options•Integrating HTML5 and Wicket

Latest examples:





•Customized Clustering options•Integrating HTML5 and Wicket•Ajax-based Confirmation Modal window

Latest examples:





Wicket Rocks!!


Q&AThanks for listening!

Andrew LombardiOwner, Tech EvangelistMystic Coders, LLCandrew AT mysticcoders DOT com

kinabalu @ irc://irc.freenode.net - ##wicket, ##java


Documents

An in depth look at Apache Wicket - Amazon Web …mysticweb-bucket.s3.amazonaws.com/presentations/october...An in depth look at Apache Wicket Andrew Lombardi Owner, Tech Evangelist