Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wicket from Designer to Developer


Published on

Presentation from Codemotion 2012, Rome, Italy, 2012-03-24.

Published in: Technology, Business
  • Be the first to comment

Wicket from Designer to Developer

  1. 1. Wicket from Designer to DeveloperMarcello – JUG Milano
  2. 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: than blogger: Marcello Teodori 2 – JUG Milano
  3. 3. 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) separated by the HTTP protocol... united by a template! Marcello Teodori 3 – JUG Milano
  4. 4. 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! Marcello Teodori 4 – JUG Milano
  5. 5. 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! Marcello Teodori 5 – JUG Milano
  6. 6. So happy together!Let’s try and definean iterative workflowwhich allows goingback and forth fromdesign to developphase without yes we can!frictions... Marcello Teodori 6 – JUG Milano
  7. 7. Context: the good ol’ JSP Model 2 maybe not just JSP anymore, but templates are still where design and development meet! Marcello Teodori 7 – JUG Milano
  8. 8. 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 placeholders Marcello Teodori 8 – JUG Milano
  9. 9. pure JSP <h1>Sign Up</h1>• logic in the template <form action="submit.html"> <% if (! errors.isEmpty()) { %> can contain anything! <div id="errors" class="error_messages"> <h2>Form is invalid</h2> <ul>• good for prototyping <% for (String message : errors) { %> <li><%= message %></li> <% } %> very simple things </ul> </div> <% } %>• when viewing as static <p> <label for="email"><%= email.getLabel() %></label><br/> html anything gets <input type="text" value="<%= email.getValue() %>"/><br/> </p> rendered <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 Teodori 9 – JUG Milano
  10. 10. JSP + JSTL <h1>Sign Up</h1>• logic gets limited and <form action="submit.html"> <c:if test="${not empty errors}"> <div id="errors" class="error_messages"> takes the shape of tags, <h2>Form is invalid</h2> <ul> which are not displayed <c:forEach var="message" items="${errors}"> <li>${message}</li> as static html </ul> </c:forEach> </div>• no default values for </c:if> <p> placeholders to display <label for="email">${email.label}</label><br/> <input type="text" value="${email.value}"/><br/> </p>• expressions are fragile <p> <label for="password">${password.label}</label><br/> <input type="password" value="${password.value}"/><br/>• can still add scriptlets </p> <p class="button"><input type="submit" value="Create User" /></p </form> Marcello Teodori 10 – JUG Milano
  11. 11. Velocity <h1>Sign Up</h1>• main Spring MVC <form action="submit.html"> #if( $errors.size() > 0 ) <div id="errors" class="error_messages"> option from docs <h2>Form is invalid</h2> <ul> #foreach( $message in $errors )• not tied to servlet API <li>$message</li> #end </ul>• same as JSTL with </div> #end custom language <p> <label for="email">$email.label</label><br/> <input type="text" value="$email.value"/><br/> </p>• few good editors... <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 Teodori 11 – JUG Milano
  12. 12. Off the Java track: Ruby on Rails and ERB <h1>Sign Up</h1>• again imperative <%= form_for @user do |f| %> <% if @user.errors.any? %> <div id="errors" class="error_messages">• fragments can be <h2>Form is invalid</h2> <ul> called as partial vs. <% for message in @user.errors %> <li><%= message %></li> <% end %> full page </ul> </div> <p>• in the end not that <%= f.label :email %><br/> <%= f.text_field :email %><br/> </p> different from JSP! <p> <%= f.label :password %><br/> <%= f.text_field :password %><br/> </p> <p class="button"><input type="submit" value="Create User" /></p> <% end %> Marcello Teodori 12 – JUG Milano
  13. 13. going declarative: JSF with Facelets• an HTML which validates as XHTML <html xmlns:h=""> <body> but is not really your HTML, try <h:form> displaying it! <h:messages/> <p>• lots of ready made component <label for="email">Email: </label><br/> <h:inputText value="#{}"/><br/> libraries which turn into html/css/js </p> like magic <p> <label for="password">Password: </label><br/>• good for developers who cannot <h:inputText value="#{user.password}"/><br/> </p> afford to take care of frontend code <p> <label for="confirm">Password confirmation: </label><br• deadly for designers who have to <h:inputText value="#{user.confirmPassword}"/><br/> </p> adapt to the output <p class="button"> <h:commandButton action="#{user.create()}" value="Creat• creating custom components </p> is not that easy </form> Marcello Teodori 13 – JUG Milano
  14. 14. enter Wicket for designer friendly templates <html xmlns:wicket=""> <body>• HTML wicket templates still render <h1>Sign Up</h1> properly as static HTML <form wicket:id="form"> <div wicket:id="errors" id="errors" class="error_messages"> <ul>• placeholders display actual text <li>Input is incorrect</li> instead of expressions, which is </ul> </div> useful for prototyping <p> <label for="email">Email: </label><br/>• custom elements and attributes from <input wicket:id="username" type="email" id="email" value="" </p> the wicket namespace are not <p> recognized and ignored by the <label for="password">Password: </label><br/> <input wicket:id="password" type="password" id="password" val browser, at least most of them... </p> <p>• custom components are easy to <label for="confirm">Password confirmation: </label><br/> <input wicket:id="confirmPassword" type="password" id="confir create </p> <p class="button"><input type="submit" value="Create User" id=" </form> Marcello Teodori 14 – JUG Milano
  15. 15. What’s behind the HTML template? Just Java! 1/2• a custom SignUpPage class public class SignUpPage extends WebPage { private User user = new User(); extending WebPage private TextField<String> usernameTextField, passwordTextField, confirmPass• added to our page, with same public SignUpPage() { wicket id as in the template a Form<User> form = new Form<User>("form") { @Override signup Form component protected void onSubmit() { // validate password and confirm match if (Strings.isEqual(password, confirmPassword)) { – 3 text fields for email, password // user creation and confirm } else { error("password do not match"); – 1 FeedbackPanel component } } – onSubmit override }; form.add(usernameTextField = new EmailTextField("username", Model.of("" form.add(passwordTextField = new PasswordTextField("password", Model.of• wicket component tree in Java form.add(confirmPasswordTextField = new PasswordTextField("confirmPassw class and template must match! form.add(new FeedbackPanel("errors")); add(form); } } Marcello Teodori 15 – JUG Milano
  16. 16. What’s behind the HTML template? Just Java! 2/2 package ...; A custom WicketApplication class public class WicketApplication extends WebApplication { extending WebApplication: @Override • must be configured in web.xml public Class<HomePage> getHomePage() { return HomePage.class; • should contain as a minimum: } • pointer to home page class @Override public void init() { • our application settings super.init(); // add your configuration here • mount point for our page mountPage("/SignUpPage.html", SignUpPage.class); } } Marcello Teodori 16 – JUG Milano
  17. 17. What is Wicket? a web framework which providesa stateful object-oriented programming model on top of the stateless HTTP protocol ...with just Java and HTML! Marcello Teodori 17 – JUG Milano
  18. 18. Quickstart, everything you need to start! .myproject | pom.xml |Creating the project - with Maven ---src +---mainTo create your project, copy and paste the command | +---java | | ---comline generated after typing in the groupId, artifactId and | | ---mycompanyversion. | | HomePage.html | | | | | | | +---resources | | | | | ---webapp | ---WEB-INF | web.xml | ---test ---java ---com ---mycompany Marcello Teodori 18 – JUG Milano
  19. 19. in Wicket everyone works in their comfort zone – 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 Teodori 19 – JUG Milano
  20. 20. Digging a little deeper into Wicket classes Marcello Teodori 20 – JUG Milano
  21. 21. 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 Marcello Teodori 21 – JUG Milano
  22. 22. 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.: • • •• 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 Marcello Teodori – JUG Milano 22
  23. 23. 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 Marcello Teodori 23 – JUG Milano
  24. 24. Demo Time Marcello Teodori 24 – JUG Milano
  25. 25. A Wicket Timeline Wicket 6.0 b1? Wicket Wicket 1.0 ... Wicket Wicket Wicket JSP @ Apache 0.x 1.4 1.5 1.5.5 1997 2003 2004 2005 2009 2011 2012 WicketServlet JSF 1.0 1.4.20 Marcello Teodori 25 – JUG Milano
  26. 26. 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!!! Marcello Teodori 26 – JUG Milano
  27. 27. 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 jQuery Marcello Teodori 27 – JUG Milano
  28. 28. 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! Marcello Teodori 28 – JUG Milano
  29. 29. 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 Marcello Teodori 29 – JUG Milano
  30. 30. Thymeleaf• <table> <thead>• HTML template engine with <tr> <th th:text="#{}">Name</th> similar designer friendly <th th:text="#{msgs.headers.price}">Price</th> </tr> approach to Wicket </thead> <tbody>• works with stateless <tr th:each="prod : ${allProducts}"> <td th:text="${}">Oranges</td> frameworks like Spring MVC <td th:text="$ {#numbers.formatDecimal(prod.price,1,2)}">0.99</td> or Play </tr> </tbody> </table>• can work standalone with no web dependency (e.g. to generate HTML emails) Marcello Teodori 30 – JUG Milano
  31. 31. Some Useful References• The Apache Wicket web site• The Wicket user mailing list – on nabble:• Wicket in Action – essential book – wicket 1.3 but still very relevant• example code for this presentation – https://github/mteodori/d2d-wicket-webapp Marcello Teodori 31 – JUG Milano
  32. 32. Some Thank Yous• - JUG Milano & yet another discussion on the best web framework on our mailing list!• - for giving me some spare time to prepare this and meet friends in Rome• - startup friends support!• - pictures from the wonderful world of Liludori, courtesy of Mauro Gandini and Eloisa Scichilone Marcello Teodori 32 – JUG Milano
  33. 33. 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 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! Marcello Teodori 33 – JUG Milano
  34. 34. Questions & (hopefully) Answers Marcello Teodori 34 – JUG Milano