An in depth look at Apache Wicket - Amazon Web...

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

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?

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

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!

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

* Password

* Username

* Password

* Username

* Password

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

“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

Controller

TextArea

Locator

IModel

PasteItemcontent

Receives

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

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

• 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

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

More websites for Wicket knowledge

RESOURCES

By Andrew Lombardi

ABOUT APACHE WICKET

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

An in depth look at Apache Wicket - Amazon Web...

Documents

Apache Wicket and Java EE sitting in a tree

General Wicket Patterns - Packt

Migrating to Apache Wicket - WordPress.com...URL mapping XML Java Action Handler / Controller Security Acegi / Spring Sec. WebFlow Page Flow / Navigation ... •Easy integration with

Sticky Wicket VI

Component Based Web Development with Apache Wicket

The State of Wicket

Sticky Wicket October 2012

DOSUG Wicket 101

Apache Wicket: web applications with just Java Xavier Hanin JavaZone ‘07

Apache Wicket Web Framework

Industrial Sectional Doors · NEW Doors and wicket doors with thermal break, depth 67 mm Industrial Sectional Doors With the innovative wicket door with trip-free threshold

Sticky Wicket March 2013

Apache Wicket: 10 jaar en verder - Martijn Dashorst

Wicket and Scala

Wicket Security Presentation

Wicket Presentation

Develop a simple Web application with Apache Wicket · PDF fileDevelop a simple Web application with Apache Wicket and Apache Geronimo Combine Wicket, Geronimo, and Apache Derby to

Web Technologies - Alexandru Ioan Cuza Universitybusaco/teach/courses/web/presentations/... · Web Technologies microservices & Web interaction ... Java –Apache Wicket, DWR, OpenXava,

Apache Wicket: web applications with just Java

Apache Wicket: 10 years and beyond