Wicket from Designer to Developer

Wicket from Designer to Developer

Marcello [email protected] – JUG Milano

mailto:[email protected]

mailto:[email protected]


2

A few words about the speaker

• longtime JUG Leader, now only from “remote”, for JUG Milano• moderator for SpringFramework-IT and Groovy Italian User Group

mailing lists• 15y of Java development, from mobile to web• now based in London, working as Lead Engineer for Idea Plane, a

startup specialized in Enterprise Social Network solutions• more twitterer: http://twitter.com/magomarcelo

than blogger: http://magomarcelo.blogspot.com

http://www.jugmilano.it


http://www.ideaplane.com/

http://www.ideaplane.com/

http://twitter.com/magomarcelo

http://twitter.com/magomarcelo

http://magomarcelo.blogspot.com

http://magomarcelo.blogspot.com


A web application tale• no analysts vs. developers this time• it’s you, just the development team of a web

application– designers, from PSD to HTML/CSS/JavaScript– developers, Java (or your favorite server-side thing)

3

separated by the HTTP protocol...united by a template!


My problem• As a developer of a web application• I want to avoid spending time rewriting my

templates from scratch if the design changes• so that I can deliver on schedule• ...and the customer is happy!

4


Someone’s else problem• As a designer of a web application• I want to be free to make changes• so that my design meets requirements• ...and the customer is happy!

5


So happy together!Let’s try and define an iterative workflow which allows going back and forth from design to develop phase without frictions...

6

yes we can!


Context: the good ol’ JSP Model 2

7

maybe not just JSP anymore, but templates are still where design and development meet!


Templates Styles• Imperative or “pull”

– active, contain logic to retrieve data– the template pulls data from the controller

• Declarative or “push”– passive, do not contain logic,

they just describe the markup– the controller parses the template

and pushes data on placeholders8


pure JSP• logic in the template

can contain anything!• good for prototyping

very simple things• when viewing as static

html anything gets rendered

9

<h1>Sign Up</h1><form action="submit.html"> <% if (! errors.isEmpty()) { %> <div id="errors" class="error_messages"> <h2>Form is invalid</h2> <ul> <% for (String message : errors) { %> <li><%= message %></li> <% } %> </ul> </div> <% } %> <p> <label for="email"><%= email.getLabel() %></label><br/> <input type="text" value="<%= email.getValue() %>"/><br/> </p> <p> <label for="password"><%= password.getLabel() %></label><br/> <input type="password" value="<%= password.getValue() %>"/><br/> </p> <p class="button"><input type="submit" value="Create User" /></p></form>


JSP + JSTL• logic gets limited and

takes the shape of tags, which are not displayed as static html

• no default values for placeholders to display

• expressions are fragile• can still add scriptlets

10

<h1>Sign Up</h1><form action="submit.html"> <c:if test="${not empty errors}"> <div id="errors" class="error_messages"> <h2>Form is invalid</h2> <ul> <c:forEach var="message" items="${errors}"> <li>${message}</li> </c:forEach> </ul> </div> </c:if> <p> <label for="email">${email.label}</label><br/> <input type="text" value="${email.value}"/><br/> </p> <p> <label for="password">${password.label}</label><br/> <input type="password" value="${password.value}"/><br/> </p> <p class="button"><input type="submit" value="Create User" /></p></form>


Velocity• main Spring MVC

option from docs• not tied to servlet API• same as JSTL with

custom language• few good editors...

11

<h1>Sign Up</h1><form action="submit.html"> #if( $errors.size() > 0 ) <div id="errors" class="error_messages"> <h2>Form is invalid</h2> <ul> #foreach( $message in $errors ) <li>$message</li> #end </ul> </div> #end <p> <label for="email">$email.label</label><br/> <input type="text" value="$email.value"/><br/> </p> <p> <label for="password">$password.label</label><br/> <input type="password" value="$password.value"/><br/> </p> <p class="button"><input type="submit" value="Create User" /></p></form>


Off the Java track: Ruby on Rails and ERB• again imperative• fragments can be

called as partial vs. full page

• in the end not that different from JSP!

12

<h1>Sign Up</h1><%= form_for @user do |f| %> <% if @user.errors.any? %> <div id="errors" class="error_messages"> <h2>Form is invalid</h2> <ul> <% for message in @user.errors %> <li><%= message %></li> <% end %> </ul> </div> <p> <%= f.label :email %><br/> <%= f.text_field :email %><br/> </p> <p> <%= f.label :password %><br/> <%= f.text_field :password %><br/> </p> <p class="button"><input type="submit" value="Create User" /></p><% end %>


going declarative: JSF with Facelets• an HTML which validates as XHTML

but is not really your HTML, try displaying it!

• lots of ready made component libraries which turn into html/css/js like magic

• good for developers who cannot afford to take care of frontend code

• deadly for designers who have to adapt to the output

• creating custom componentsis not that easy

13

<html xmlns:h="http://java.sun.com/jsf/html"><body><h:form> <h:messages/> <p> <label for="email">Email: </label><br/> <h:inputText value="#{user.email}"/><br/> </p> <p> <label for="password">Password: </label><br/> <h:inputText value="#{user.password}"/><br/> </p> <p> <label for="confirm">Password confirmation: </label><br/> <h:inputText value="#{user.confirmPassword}"/><br/> </p> <p class="button"> <h:commandButton action="#{user.create()}" value="Create User" </p></form>

http://java.sun.com/jsf/html

http://java.sun.com/jsf/html


enter Wicket for designer friendly templates• HTML wicket templates still render

properly as static HTML• placeholders display actual text

instead of expressions, which is useful for prototyping

• custom elements and attributes from the wicket namespace are not recognized and ignored by the browser, at least most of them...

• custom components are easy to create

14

<html xmlns:wicket="http://wicket.apache.org"><body><h1>Sign Up</h1><form wicket:id="form"> <div wicket:id="errors" id="errors" class="error_messages"> <ul> <li>Input is incorrect</li> </ul> </div> <p> <label for="email">Email: </label><br/> <input wicket:id="username" type="email" id="email" value="" />< </p> <p> <label for="password">Password: </label><br/> <input wicket:id="password" type="password" id="password" value= </p> <p> <label for="confirm">Password confirmation: </label><br/> <input wicket:id="confirmPassword" type="password" id="confirm" </p> <p class="button"><input type="submit" value="Create User" id="submit"</form>

http://wicket.apache.org



What’s behind the HTML template? Just Java! 1/2• a custom SignUpPage class

extending WebPage• added to our page, with same

wicket id as in the template a signup Form component

– 3 text fields for email, passwordand confirm

– 1 FeedbackPanel component– onSubmit override

• wicket component tree in Javaclass and template must match!

15

public class SignUpPage extends WebPage { private User user = new User();

private TextField<String> usernameTextField, passwordTextField, confirmPasswordTextField

public SignUpPage() { Form<User> form = new Form<User>("form") { @Override protected void onSubmit() { // validate password and confirm match if (Strings.isEqual(password, confirmPassword)) { // user creation } else { error("password do not match"); } } }; form.add(usernameTextField = new EmailTextField("username", Model.of(""))); form.add(passwordTextField = new PasswordTextField("password", Model.of(""))); form.add(confirmPasswordTextField = new PasswordTextField("confirmPassword", Model.of(""))); form.add(new FeedbackPanel("errors")); add(form); }}


A custom WicketApplication class extending WebApplication:• must be configured in web.xml• should contain as a minimum:

• pointer to home page class• our application settings

• mount point for our page

16

What’s behind the HTML template? Just Java! 2/2package ...;

public class WicketApplication extends WebApplication {

@Override public Class<HomePage> getHomePage() { return HomePage.class; }

@Override public void init() { super.init();

// add your configuration here mountPage("/SignUpPage.html", SignUpPage.class); }

}


What is Wicket?a web framework which provides

a stateful object-oriented programming modelon top of the stateless HTTP protocol

...with just Java and HTML!

17

– developers work with Java only• no XML configurations beyond the wicket filter in web.xml• creation of components via new, extension via extend or

adding “behaviors”• pages are built following the composite pattern

– designers work in HTML only• no scriptlets• no expression language• CSS and JS included, obviously ;)


in Wicket everyone works in their comfort zone

19

http://web.xml

http://web.xml

http://en.wikipedia.org/wiki/Composite_pattern

http://en.wikipedia.org/wiki/Composite_pattern


Digging a little deeper into Wicket classes

20


some additional useful wicket elements• wicket:extend and wicket:child

– provide markup inheritance

• wicket:head– provide content for HTML header

• wicket:remove– exclude from rendering markup useful only at design time

• wicket:enclosure– ties the visibility of a block of markup to the one of a specific component

• wicket:container– allow dynamic rendering outside an HTML element

• wicket:message (also available as attribute)– allows string replacement from localized messages

21


Localization in Wicket• typical messages implemented by default as properties files

– extended also to XML properties version and or also utf8– placeholders bean expressions beyond javax.text.MessageFormat– lookup follows the hierarchy, i.e.:

• MyApplication.properties• MyPage.properties• MyComponent.properties

• one step beyond– also full templates can be localized! HomePage.html => HomePage_it.html– additional options for template selection: template_variation_style_locale.html

• style set on session• variation set on component

22


Providing a mobile version of a template• using style and variation we can

detect and use a different template for a mobile browser

• a specific mobile style on the session can be set for example using simple browser sniffing

• better yet, Wicket provides a ClientInfo object for detecting browser capabilities

23


Demo Time

24


A Wicket Timeline

25

1997 2012

JSP

2003

Wicket6.0 b1?

Wicket1.5.5

Servlet

Wicket 1.0@ Apache

Wicket1.4.20JSF 1.0

2011

Wicket1.5

...

2004

Wicket0.x

2009

Wicket1.4

2005


My personal Wicket story• I thought I had tried anything in the Java web framework space...• 2005 overlooked wicket at a presentation of JavaPolis (now Devoxx)

as yet another interesting approach but without proper mindshare• friends at JUG Milano using it and praising it for its clean object-

oriented approach on the java “developer” side of things• 2010 bumped into wicket as the insourcing of a wicket code base

was my first activity in my current job as lead engineer at Idea Plane• 2011 engineering the prototype code, I was impressed by the

resilience to bugs, I discovered a new friend• 2012 don’t ever name JSP to me again!!!

26


AJAX, the elephant in the roomHow Wicket deals with AJAX?• developer friendly approach:

– Button => AjaxButton => AjaxFallbackButton– AjaxDefaultTarget => add modified components– AjaxDefaultBehaviour & wicket-ajax.js

• designer friendly approach:– AjaxBehaviour produces json– direct AJAX call via JavaScript,

e.g. using jQuery27


There’s more than HTML templates!Wicket as a web framework provides a lot more:• form processing• type-safe access to session• conversation support via page serialization• data binding via model classes• resource (CSS/JS) optimization• integration with popular dependency injection frameworks• but most of all, pluggable hooks to customize any feature it

provides, you’re never left alone!28


But that’s too much for me!• as good as it is, Wicket is not everyone’s

cup of tea• Wicket can be stateless, but it’s not its

main use case• even when stateless, Wicket relies on the

Servlet session• you have already a big code base maybe

on another framework like Spring MVC

29


Thymeleaf• http://www.thymeleaf.org/• HTML template engine with

similar designer friendly approach to Wicket

• works with stateless frameworks like Spring MVC or Play

• can work standalone with no web dependency (e.g. to generate HTML emails)

30

<table> <thead> <tr> <th th:text="#{msgs.headers.name}">Name</th> <th th:text="#{msgs.headers.price}">Price</th> </tr> </thead> <tbody> <tr th:each="prod : ${allProducts}"> <td th:text="${prod.name}">Oranges</td> <td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td> </tr> </tbody></table>

http://www.thymeleaf.org

http://www.thymeleaf.org


Some Useful References• The Apache Wicket web site http://wicket.apache.org/• The Wicket user mailing list

– on nabble: http://apache-wicket.1842946.n4.nabble.com/• Wicket in Action http://wicketinaction.com/

– essential book– wicket 1.3 but still very relevant

• example code for this presentation– https://github/mteodori/d2d-wicket-webapp

31



http://apache-wicket.1842946.n4.nabble.com

http://apache-wicket.1842946.n4.nabble.com

http://wicketinaction.com

http://wicketinaction.com

https://github/mteodori/d2d-wicket-webapp

https://github/mteodori/d2d-wicket-webapp


Some Thank Yous

• http://www.jugmilano.it/ - JUG Milano & yet another discussion on the best web framework on our mailing list!

• http://www.ideaplane.com - for giving me some spare timeto prepare this and meet friends in Rome

• http://www.gitenterprise.com - startup friends support!• http://www.liludori.com/ - pictures from the wonderful world

of Liludori, courtesy of Mauro Gandini and Eloisa Scichilone

32



http://www.ideaplane.com

http://www.ideaplane.com

http://www.gitenterprise.com

http://www.gitenterprise.com

http://www.liludori.com

http://www.liludori.com


shameless plug: IdeaPlane is hiring!Work on our leading Enterprise Social Network platform in our London officeWe’re looking for a talented

• Technical Director/Lead

• Scrum Master

• Java Developerand more…check out our website at http://ideaplane.com for additional details.What we offer:

• an opportunity to work in the social media space

• new technology

• bike rack, foosball table and an office in central London

• free snacks

• great people!

33

http://ideaplane.com

http://ideaplane.com


Questions & (hopefully) Answers

34

Wicket from Designer to Developer

Technology

Transcript of Wicket from Designer to Developer