Wicket Explained Ease your way into Ease your way into Component Based Web Application Component Based Web Application Development Development
Goals • Explain why CBD is a good fit for the web tier • Show the basics of a Wicket application: pages, components and models • See how web application development doesn’t have to be difficult
Agenda • Introduction • Java web frameworks • Applications, pages, components & models • 10 minute workout • Processing Input • Summary & Questions
What is Wicket? • Open Source (Apache 2 license) • Started in 2004 by Jonathan Locke • Component Oriented • Clean separation of Markup and Code • If you know Java and HTML, then you already know a lot about Wicket • Programmer freedom
Agenda • Introduction • Java web frameworks • Applications, pages, components & models • 10 minute workout • Processing Input • Summary & Questions
Java web frameworks • CGI/ Servlets; • Servlets combined with templating – Webmacro, Velocity • JSP (‘model 1’ – usebean) • ‘Model 2’ a.k.a. ‘Web MVC’ – Struts, WebWork, SpringMVC, Maverick, etc. – Request oriented • Component based
Keeping state? • Wicket has stateful components • REST (Representational State Transfer) vs Stateful programming – Stateless service layers: are we back to procedural programming once again? – Cost of development hours – Processor & bandwidth vs memory – Do your pages really just do one thing? • Keeping state gets you: – Self contained components – Easy and elegant programming
Wicket's Goals • Bring OO back to the web tier – Let developers focus on structure instead of operation • Make reuse (using and providing) easy • Separate concerns – HTML for presentation • Minimal or no scripting – Java for state and Model/ Control • Strongly typed • Use your Java IDE • Easy = productive and maintainable
Agenda • Introduction • Java web frameworks • Applications, pages, components & models • 10 minute workout • Processing Input • Summary & Questions
Applications • Application defines: – Pages: • home page • error/stale page – Settings • development mode • deployment mode – Request Cycle strategy – Factories for: • resources • sessions • converters
Pages • Pages group your components Page <h1> name telnr f/f rows (<tr>) <table> link (<a href>) • Pages can inherit from other pages – The markup as well -> template base page!
Pages • Markup and Java can be next to each other – Default: in same directory on classpath • allows packaging of components (jar drop-ins) • easy access while developing page class page markup
Components • Everything is a component in Wicket – A component has a wicket:id – A component has markup associated – A component is a Java class • in markup: wicket:id • in Java: Component.id Markup Java <span wicket:id=“foo”> new Label(“foo”, “bar”); </span>
Components • Everything is a component in Wicket – A component has a wicket:id – A component has markup associated • Components can be nested listview ‘col’ col col col col col row col col col col col row
Components • Everything is a component in Wicket – A component has a wicket:id – A component has markup associated • Components can be nested col col col col col row listview ‘row’ col col col col col row
Components • Wicket supports all basic HTML tags – <a href> – <input type=“XXX”> – <form> – <img>, <map> – <frame> • Components support JavaScript, CSS – contribute to header – local
Components • Components are reusable – address input form, – search panel, – paging navigator for listview, – date picker
Components • Components are reusable – address input form, – search panel, – paging navigator for listview, – date picker • Components are JAR-able – package Java, HTML, CSS, images, JavaScript – put JAR in classpath – use component in your application
Component Examples (1/3) Simple Simple label component label component HTML markup: <span wicket:id=“message”>contents go here</span> Java code: new Label(“message”, “Hello, World!”);
Component Examples (2/3) Simple Simple input input field component field component HTML markup: <input wicket:id=“name” type=“text” value=“xxxx” /> Java code: new TextField(“name”)
Component Examples (3/3) Form with nested field Form with nested field HTML markup: <form wicket:id=“customerForm”> <input wicket:id=“zipCode” type=“text” value=“xxxx” /> </form> Java code: Form form = new Form(“customerForm”, customer); form.add(new TextField(“zipcode”, new PropertyModel(customer, “zipCode”));
Models • Models bind your POJO’s to Wicket components • Models are the ‘brains’ of your app wicket POJO’s <<Person>> Label() + name : String + city : String <<Model>>
Models • Basic models: – Model – PropertyModel – AbstractDetachableModel • ‘Advanced’ models: – LoadableDetachableModel – CompoundPropertyModel – BoundCompoundPropertyModel – StringResourceModel
Model examples Simple model: Simple model: add(new Label("message", "Hello World!"));
Model examples Binding to POJO: Binding to POJO: add(new Label(“name”, new PropertyModel(person, “name”))); <span wicket:id=“name”>will be replaced</span>
Model examples Using ID’s to bind components to properties: Using ID’s to bind components to properties: form = new Form(“person”, new CompoundPropertyModel(person)); form.add(new TextField(“name”)); form.add(new TextField(“city”));
Agenda • Introduction • Java web frameworks • Applications, pages, components & models • 10 minute workout • Processing Input • Summary & questions
10 minute workout
10 minute workout
Mocking Markup Page <h1> <table> link (<a href>)
Mocking Markup Page <h1> rows (<tr>) <table> link (<a href>)
Mocking Markup Page <h1> name telnr f/f rows (<tr>) <table> link (<a href>)
Mocking Markup <html> ... <body> <h1>Addresses</h1> <table> <!-- heading --> <tr> <td><span>John Doe</span></td> <td><span>555-5555</span></td> Page <td><span>friend</span></td> <h1> </tr> </table> name telnr f/f </body> rows (<tr>) <table> </html> link (<a href>)
Mocking Markup <html> ... <body> <h1>Addresses</h1> <table> <!-- heading --> <tr wicket:id=“rows”> <td><span>John Doe</span></td> <td><span>555-5555</span></td> <td><span>friend</span></td> Page </tr> <h1> </table> </body> name telnr f/f </html> rows (<tr>) <table> link (<a href>)
Mocking Markup <html> ... <body> <h1>Addresses</h1> <table> <!-- heading --> <tr wicket:id=“rows”> <td><span wicket:id=“name”>John Doe</span></td> <td><span wicket:id=“telnr”>555-5555</span></td> Page <td><span wicket:id=“type”>friend</span></td> <h1> </tr> </table> name telnr f/f </body> rows (<tr>) <table> </html> link (<a href>)
From Markup to Java public class public class AddressPage extends extends WebPage { public public AddressPage() { } } Page <h1> name telnr f/f rows (<tr>) <table> link (<a href>)
From Markup to Java public class public class AddressPage extends extends WebPage public public AddressPage() { add(new new AddressListView(“rows”, addresses)); } public class public class AddressListView extends extends ListView { public AddressListView(String name, IModel model) { public super super(name, model); } } Page } <h1> name telnr f/f rows (<tr>) <table> link (<a href>)
From Markup to Java public class public class AddressPage extends extends WebPage public public AddressPage() { add(new new AddressListView(“rows”, addresses)); } public class public class AddressListView extends extends ListView { public public AddressListView(String name, IModel model) { super super(name, model); } protected void populateItem(ListItem item) { item.add(new Label(“name”)); Page item.add(new Label(“telnr”)); <h1> item.add(new Label(“type”)); } } name telnr f/f rows (<tr>) } <table> link (<a href>)
Application public class AddressApplication extends WebApplication { public AddressApplication() { super(); getPages().setHomePage(AddressPage.class); } }
Recommend
More recommend
