Wicket from Designer to Developer
-
Upload
marcello-teodori -
Category
Technology
-
view
5.380 -
download
1
description
Transcript of Wicket from Designer to Developer
Wicket from Designer to Developer
Marcello [email protected] – JUG Milano
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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!
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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!
Marcello [email protected] – JUG Milano
Context: the good ol’ JSP Model 2
7
maybe not just JSP anymore, but templates are still where design and development meet!
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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>
Marcello [email protected] – JUG Milano
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>
Marcello [email protected] – JUG Milano
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>
Marcello [email protected] – JUG Milano
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 %>
Marcello [email protected] – JUG Milano
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>
Marcello [email protected] – JUG Milano
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>
Marcello [email protected] – JUG Milano
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); }}
Marcello [email protected] – JUG Milano
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); }
}
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
18
.\myproject | pom.xml | \---src +---main | +---java | | \---com | | \---mycompany | | HomePage.html | | HomePage.java | | WicketApplication.java | | | +---resources | | log4j.properties | | | \---webapp | \---WEB-INF | web.xml | \---test \---java \---com \---mycompany Start.java
Quickstart, everything you need to start!
Creating the project - with Maven
To create your project, copy and paste the command line generated after typing in the groupId, artifactId and version.
– 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 ;)
Marcello [email protected] – JUG Milano
in Wicket everyone works in their comfort zone
19
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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>
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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
Marcello [email protected] – JUG Milano
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