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

Independent Java Consultant Customers Who is Xavier Hanin Independent Java Consultant Customers Open Source Renault

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

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

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

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

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

Component versus ‘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

Excellent localization and style support 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

Features Integration Fancy components 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

Features State management clustering support back button support 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

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

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

Wicket’s concepts Application Session RequestCycle Components Behaviors Models

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 …

Configured in web.xml: Application <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>

Wicket’s concepts Application Session RequestCycle Components Behaviors Models

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

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

Wicket’s concepts Application Session RequestCycle Components Behaviors Models

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

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

Wicket’s concepts Application Session RequestCycle Components Behaviors Models

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

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

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>

Component can have its own markup file 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

A page: Hello, World!

Wicket’s concepts Application Session RequestCycle Components Behaviors Models

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>

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

Wicket’s concepts Application Session RequestCycle Components Behaviors Models

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

Lazy binding in Java sucks 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

Be aware for nulls when using updates: 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”));

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

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

Custom components for all 464 pages 20 minutes

Example: Password strength weak medium strong

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

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

Example: Password strength

Example: Password strength

Example: Password strength

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

Smart component oriented web framework 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

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