Apache Wicket: web applications with just Java

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

2. Who is Xavier Hanin • Independent Java Consultant • Customers • Open Source Renault

3. Agenda • What is Wicket • Core concepts of Wicket • Developing a custom component • Q&A

4. Wicket in a Nutshell • Open Source (Apache Software Foundation) • Component based • Pure Java + Pure HTML • Simple • Enthusiastic community

5. What is Wicket? • The technology: enabling component-oriented, programmatic manipulation of markup • The mission: bringing object oriented programming to the web application view layer • The reward: have a fun job and be good friends with your manager again

6. Achieving these goals through • Keeping simple things simple • Utilizing an object-oriented component model where components are truly self contained • Re-applying the Model View Controller pattern on components instead of requests, with models as first class citizens • Having a clean separation of concerns between HTML and Java

7. Achieving these goals through • Providing transparent, fully automated state management • Keeping configuration needs to the minimum • No more XML! • Making using & creating custom components easier than any framework out there

8. Component versus ‘traditional’ • Traditional • Struts, WebWork, Spring MVC, etc. • Proven for web • A lot of web developers available • Components • JSF, Wicket, Tapestry, etc. • Traditional model for UI development on thick clients • A lot of developers available

9. Features • Page composition • panels, borders and markup inheritance • Excellent localization and style support • template and resource loading (_be.html, .xml) • localized models (e.g. for labels) • sophisticated resource bundle lookup (composition & inheritance hierarchy) • automatic client capabilities detection

10. Features • Integration • Spring • Guice • Hibernate • JasperReports • OSGi • Fancy components • sortable, filterable, pageable, data aware tables • date picker, rich text editor, Google Maps • tabbed panel, navigation, tree, wizard

11. Features • State management • type safe sessions • clustering support • back button support • Double submit strategies • render redirect/ redirect to buffered response/ none • Testing support • JUnit testing • extensive logging and error reporting

12. Features • Ajax support and components • Ajax without writing JavaScript, Dojo, Scriptaculous, ... • Header contribution • Javascript & CSS • URL mounting • pretty URLs • Component level security

13. Agenda • What is Wicket • Core concepts of Wicket • Developing a custom component • Q&A

14. Wicket’s concepts • Application • Session • RequestCycle • Components • Behaviors • Models

15. Application • Main entry point for your web application • Configuration • Output Wicket specific tags? • Watch for markup changes every …? • Defines homepage • Factories for • Session • RequestCycle • Security • …

16. Application • Configured in web.xml: <filter> <filter-name>wicket</servlet-name> <filter-class> org.apache.wicket.protocol.http.WicketFilter </filter-class> <init-param> <param-name>applicationClassName</param-name> <param-value>example.MyApplication</param-value> </init-param> <load-on-startup>1</load-on-startup> </filter>

17. Wicket’s concepts • Application • Session • RequestCycle • Components • Behaviors • Models

18. Session • Abstraction of a user session • Storage typically in HttpSession • Stores session specific data • Locale, Client info (browser vendor and version) • Your own data? • Logged in user • Shopping cart contents • Limited page history for back button support

19. Session class MySession extends WebSession { private ShoppingCart cart; public ShoppingCart getCart() { … } public void setCart(ShoppingCart cart) { … } } mysession.setCart(new ShoppingCart()); … ShoppingCart cart = mysession.getCart(); cart.add(quantity, selectedProduct);

20. Wicket’s concepts • Application • Session • RequestCycle • Components • Behaviors • Models

21. RequestCycle • Steps in a request cycle: • Create request cycle object • Decode the request • Identify request target (page, component, …) • Process event (onClick, onSubmit, …) • Respond (page, component, image, pdf, …) • Clean up

22. RequestCycle • Two types of requests: • Stateful • Tied to specific user session • Not bookmarkable • Stateless • Not necessarily tied to specific user session • Bookmarkable

23. Wicket’s concepts • Application • Session • RequestCycle • Components • Behaviors • Models

24. Components • encapsulate the programmatic manipulation of markup • can receive an event • onClick, onSubmit • know how and where to render itself

25. Component • Ultimate super class wicket.Component • Label • MultiLineLabel • TextField • PasswordTextField • Image • Link • Tree • BookmarkablePageLink • JasperReports • ListView • Loop • PagingNavigator • ImageMap • Button • Ajax… • Sorting, paging repeaters • Wizard • DatePicker

26. Components and markup • A component is identified in markup with wicket:id Html: <h1 wicket:id=“msg”>Gets replaced</h1> Java:new Label(“msg”, “Hello, World!”); Final (wicket tags can be stripped): <h1>Hello, World!</h1>

27. Components and markup • Component can have its own markup file • Page • Panel • Border • Put java, markup and supporting files in same package on class path

28. A page: Hello, World!

29. Wicket’s concepts • Application • Session • RequestCycle • Components • Behaviors • Models

30. Behaviors • Behaviors are plug-ins for Components • They can modify the components markup item.add(new AbstractBehavior() { public void onComponentTag( Component component, ComponentTag tag) { String css = (((Item)component).getIndex() % 2 == 0) ? "even" : "odd"; tag.put("class", css); } }); Output:<tr class=“odd”>…</tr><tr class=“even”>…</tr>

31. Behaviors • Change attributes of your component’s markup • Add javascript events • Add Ajax behavior component.add(new AjaxSelfUpdatingBehavior( Duration.seconds(1)));

32. Wicket’s concepts • Application • Session • RequestCycle • Components • Behaviors • Models

33. Models • Models bind your POJO’s to Wicket components Label(“name”, model) <<Person>> +name : String +city : String PropertyModel

34. Models • Lazy binding in Java sucks • Doesn’t update: new TextField(“txt”, person.getName()) • Gives null pointers: new Label(“street”, person.getAddress().getStreet()) • Solution: OGNL/EL like expressions

35. Models • PropertyModel: • new PropertyModel(person, “name”) • new PropertyModel(person, “address.street”) • Be aware for nulls when using updates: Person p = new Person(); new TextField(“street”, new PropertyModel(p, “address.street”));

36. Agenda • What is Wicket • Core concepts of Wicket • Developing a custom component • Q&A

37. Why a custom component? • Eelco Hillenius: « Imagine being told that you can use Java as your programming language, but at the same time being told not to create your own classes. [...] I fail to understand why that has to be different for UI development, and Wicket proves it doesn't have to be so. »

38. Custom components for all 464 pages 20 minutes

39. Example: Password strength weak medium strong

40. Components • Creating custom component is as easy as typing in ‘extends’ • Extends wicket.Component down the line • Available on application classpath

41. Example: Password strength • Panels provide grouping • Have own markup file • Can be exchanged in pages for other components • Can contribute to header • Can contain any number of components, including panels

42. Example: Password strength

43. Example: Password strength

44. Example: Password strength

45. Components are reusable • Put them in a JAR • Package all necessary resources: • HTML, JavaScript, Images, CSS • class file • Put JAR on classpath • Ready for (re)use

46. Conclusion • Smart component oriented web framework • Easy creation and use of custom components • Enthustiatic community Join in! http://wicket.apache.org/ users@wicket.apache.org

47. Agenda • What is Wicket • Core concepts of Wicket • Developing a custom component • Q&A