Wicket In Action

Wicket in Action Martijn Dashorst Topicus b.v.

Wicket in Action Create web applications with just Java and HTML using Apache Wicket www.javapolis.com

Martijn Dashorst Software Engineer   Committer  Chair  Co-author  Eelco Hillenius www.javapolis.com

Agenda What is Wicket?   Wicket concepts  Building a Wicket Application  Q&A www.javapolis.com 5

Wicket? www.javapolis.com

Wicket? www.javapolis.com 7

www.javapolis.com 8

Wicket Welcome to Apache Wicket Home With proper mark-up/logic separation, a POJO data mo Introduction del, and a refreshing lack of makes developing web -apps XML, Apache Wicket simple and enjoyable again. Swap the boilerplate, comple Planet Wicket brittle code for powerful, reu x debugging and sable components written wit h plain Java and HTML. Community Check the feature list News Read some Wicket buzz, som e Wicket blogs or Planet Wic ket Find out why you should use Wicket Getting Started Check out some selected exa mples in detail or see them and many more in live action Take a look at our live compon Examples ent reference Go and download Wicket . Getting Wicket Wicket is released under the Components Apache License, Version 2.0 . QuickStart Community meetings Documentation The Wicket community is a very active community. The mailing lists and the irc cha But for those that prefer fac nnel are proof of that. Wiki e to face meetings, several com munity members have organi zed meetups. Blogs Country Where Reference When USA San Francisco Vision to be determined Belgium Antwerp JavaDocs JavaPolis'07 (dec 12th-14th ) The United Kingdom London The first Tuesday of every mo Releases The Netherlands nth Amsterdam ApacheCon EU'08 Denmark Copenhagen Wicket 1.3-rc to be determined Austria Linz/Hagenberg Wicket 1.2 to be determined Sweden Wicket 1.1 Stockholm Januari Brazil Wicket 1.0 Rio de Janeiro to be determined USA Minneapolis/Seattle to be determined Tool support If you are interested in attendi ng one of these events, please add yourself to the appropriat IDE plugins you want to organize such a e event, or if meetup yourself, add it to the community meetups page News Developers www.javapolis.com 9

Apache Wicket Component oriented   Open source  Web application framework  Java+HTML www.javapolis.com 10

Hello, World!

Hello, World! www.javapolis.com 12

Hello, World! <h1 wicket:id=”msg”>[text goes here]</h1> www.javapolis.com 12

Hello, World! <h1 wicket:id=”msg”>[text goes here]</h1> + add(new Label(“msg”, “Hello, World!”)); www.javapolis.com 12

Hello, World! <h1 wicket:id=”msg”>[text goes here]</h1> + add(new Label(“msg”, “Hello, World!”)); = <h1>Hello, World!</h1> www.javapolis.com 12

Hello, World! <h1 wicket:id=”msg”>[text goes here]</h1> + add(new Label(“msg”, “Hello, World!”)); = <h1>Hello, World!</h1> www.javapolis.com 13

A brief history of Wicket www.javapolis.com 14

• Discovery of the Hobbit • Year of the monkey • Milau bridge opens 2004

www.javapolis.com 16

2005 Airbus A380’s maiden flight   Huygens lands on Titan  Dr. Who returns www.javapolis.com 17

JavaOne’05 Tapestry guy Bald Struts/Shale guy guy Wicket JSF guy WebWork guy guy www.javapolis.com 18

JavaOne’05 Wicket 1.0 www.javapolis.com 18

2007 Joins Apache Software Foundation   Releases 1.3  User groups start spawning www.javapolis.com 19

Wicket uptake www.javapolis.com 20

Wicket uptake Wicket 1.0 released www.javapolis.com 20

Wicket uptake Wicket 1.2 released Wicket 1.0 released www.javapolis.com 20

Wicket uptake Wicket 1.2 released Wicket 1.0 released Joined Apache www.javapolis.com 20

Popular? Java Software Apache Software Foundation Web frameworks www.javapolis.com 21

Projects core  Wicket Welcome to Apache Wick et Home With proper Introduction mark-up/logic extensions separation, a makes devel Planet Wick POJO data mo oping web-ap et del, and a ref ps simple an brittle code  reshing lack d enjoyable for powerful, Community again. Swap of XML, Apach reusable comp the boilerplate e Wicket onents writte , complex de n with plain Check the fea bugging and News Java and HTML ture list . Read some Wi cket buzz, so Getting Star me Wicket blo Find out why ted gs or Planet you should us Wicket e Wicket Check out so me selected examples in Examples Take a look detail or see at our live co them and ma mponent ref Getting Wick Go and down ny more in live erence et load Wicket. action Components Wicket is rel eased under ioc (spring, guice) QuickStart the Apache Lic ense, Version 2.0. Commun  ity meetings Documentatio n The Wicket co mmunity is a Wiki very active co But for those mmunity. Th that prefer fac e mailing list e to face me Blogs s and the irc etings, severa channel are l community proof of that. Reference members ha ve organized Where meetups. London, The Vision United Kingd om When JavaDocs Amsterdam, The first Tuesd The Netherla nds ay of every mo Antwerp, Belgi nth date/time Nov. 30th, 20 um Releases 07 Copenhagen JavaPolis'07 , Denmark  (dec 12th-14 Wicket 1.3-r th) Linz/Hagenbe c to be determi rg, Austria ned Wicket 1.2 Stockholm, Sw to be determi eden ned Wicket 1.1 Rio de Janeir Januari o, Brazil Wicket 1.0 Minneapolis/ to be determi Seattle, USA ned Tool suppor to be determi If you are int ned t erested in att ending one of you want to these events organize such IDE plugins , please add a meetup yo yourself to the urself, add it velocity appropriate to the comm News event, or if unity meetups Developers page  Apache Wick Reporting bu et 1.3.0-rc1 gs is released! Writing docs Nov 11, 2007 Building This release is the first in a series of rel ease candidate s until we fee l confident to finalize Wicke t 1.3. This auth-roles  www.javapolis.com 22

Getting Wicket Everybody gets the ultimate edition   Includes:  sources  projects  examples Currently 1.3-rc2  Or...  www.javapolis.com 23

Using maven to get Wicket <dependency> <groupId>org.apache.wicket</groupId> <artifactId>wicket</artifactId> <version>1.3.0-rc2</version> </dependency> www.javapolis.com 24

Concepts Application  Session  RequestCycle  Components  Behaviors  Models  www.javapolis.com 26

Application Main entry point for your web application  Initialization  Configuration  Homepage  Factories  Configured in web.xml  www.javapolis.com 27

Components Encapsulate the programmatic manipulation  of markup  Render content in the response  Receive events in the request  onClick, onSubmit Lots of em:   Label, MultiLineLabel, TextField, PasswordTextField, Image, Link, AjaxLink, AjaxFallbackLink, Tree, BookmarkablePageLink, ListView, RepeatingView, PagingNavigator, Button, ... www.javapolis.com 31

Components Component has wicket:id   Markup has same wicket:id  Hierarchy must match <h1 wicket:id=“msg”>Gets replaced</h1> new Label(“msg”, “Hello, World!”); www.javapolis.com 32

Component: Link <a href=”#” wicket:id=”link”>Click</a> Link link = new Link(“link”); add(link); www.javapolis.com 33

Component: Link <a href=”#” wicket:id=”link”>Click</a> Link link = new Link(“link”) { @Override public void onClick() { // do something setResponsePage(new NewPage()); } }; add(link); www.javapolis.com 34

Component: AjaxLink <a href=”#” wicket:id=”link”>Click</a> AjaxLink link = new AjaxLink(“link”) { public void onClick(AjaxRequestTarget t) { // do something } }; add(link); www.javapolis.com 35

Component: AjaxLink <a href=”#” wicket:id=”link”>Click</a> someComponent.setOutputMarkupId(true); AjaxLink link = new AjaxLink(“link”) { public void onClick(AjaxRequestTarget t) { // do something t.addComponent(someComponent); t.appendJavaScript(“Effects.fade(‘foo’);”); } }; www.javapolis.com 36

Component + Markup Some components  have own markup file  Page, Panel, Border Put Java, markup  and supporting files in same package on class path www.javapolis.com 37

Behaviors Plugins for components   Change attributes of your component’s markup  Add javascript events  Add Ajax behavior component.setOutputMarkupId(true); component.add( new AjaxSelfUpdatingBehavior(Duration.seconds(5))); www.javapolis.com 39

Behaviors link.add(new AbstractBehavior() { public void onComponentTag( Component component, ComponentTag tag) { tag.put(“onclick”, “return confirm(‘Are you sure?’);”); } }); Output: <a href=”...” onclick=”return confirm(‘....’);”>...</a> www.javapolis.com 40

Models Models bind your POJO’s to Wicket  components Component Model Component Model Domain www.javapolis.com 42

Models Models bind your POJO’s to Wicket  components Label Model quot;Johnquot; PropertyModel Label Person expression: quot;namequot; www.javapolis.com 42

Java lazy binding sucks Doesn’t update:  new Label(“name”, person.getName()) Null checks necessary:  new Label(“street”, person.getAddress().getStreet()) www.javapolis.com 43

Models PropertyModel:   new PropertyModel(p, “name)  new PropertyModel(p, “address.street”) CompoundPropertyModel:   setModel(newCompoundPropertyModel(p)); add(new Label(“name”)); add(new Label(“address.street”)); www.javapolis.com 44

Cheese Store - front page www.javapolis.com 47

Cheese store - check out www.javapolis.com 48

Generating the skeleton www.javapolis.com 49

Generate skeleton mvn archetype:create -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.3.0-rc1 -DgroupId=com.cheesr -DartifactId=cheesr cd cheesr mvn eclipse:eclipse www.javapolis.com 50

Import project into Eclipse www.javapolis.com 51

www.javapolis.com 52

Start application Embedded Jetty   Start.java in src/test/java www.javapolis.com 53

Add stylesheet and images to webapp Copy design to context root  www.javapolis.com 54

Apply mock markup to home page www.javapolis.com 55

Refresh page in browser www.javapolis.com 56

Add domain objects to project Cheese   name, description, price Cart   name,street, zipcode, city, state, contents:list<cheese> www.javapolis.com 57

Implement Cheese list <div class=quot;cheesequot;> <h3>Gouda</h3> <p>Named after.....</p> <p> <span>$1.99</span> <a href=quot;#quot;>Add to cart</a> </p> </div> www.javapolis.com 58

Implement Cheese list <div class=quot;cheesequot; wicket:id=”cheeses”> <h3 wicket:id=”name”>Gouda</h3> <p wicket:id=”description”></p> <p> <span wicket:id=”price”></span> <a href=quot;#quot;>Add to cart</a> </p> </div> www.javapolis.com 59

Implement cheese list add(new ListView(quot;cheesesquot;, Cheese.getCheeses()) { @Override protected void populateItem(ListItem item) { Cheese cheese = (Cheese) item.getModelObject(); item.add(new Label(quot;namequot;, cheese.getName())); item.add(new Label(quot;descriptionquot;, cheese.get...())); item.add(new Label(quot;pricequot;, quot;$quot;+cheese.getPrice())); } }); www.javapolis.com 60

Implement cheese list www.javapolis.com 61

Make the list pageable <div> <a href=quot;#quot;><<</a> <a href=quot;#quot;><</a> <a href=quot;#quot;>1</a> <a href=quot;#quot;>2</a> <a href=quot;#quot;>3</a> <a href=quot;#quot;>4</a> <a href=quot;#quot;>></a> <a href=quot;#quot;>>></a> </div> www.javapolis.com 62

Make the list pageable <div wicket:id=”navigator”> <a href=quot;#quot;><<</a> <a href=quot;#quot;><</a> <a href=quot;#quot;>1</a> <a href=quot;#quot;>2</a> <a href=quot;#quot;>3</a> <a href=quot;#quot;>4</a> <a href=quot;#quot;>></a> <a href=quot;#quot;>>></a> </div> www.javapolis.com 63

Make the list pageable add(new ListView(quot;cheesesquot;, Cheese.getCheeses()) { @Override protected void populateItem(ListItem item) { Cheese cheese = (Cheese) item.getModelObject(); item.add(new Label(quot;namequot;, cheese.getName())); item.add(new Label(quot;descriptionquot;, cheese.get...())); item.add(new Label(quot;pricequot;, quot;$quot;+cheese.getPrice())); } }); www.javapolis.com 64

Make the list pageable PageableListView lv = null; lv = new PageableListView(quot;cheesesquot;, cheeses, 2) { @Override protected void populateItem(ListItem item) { Cheese cheese = (Cheese) item.getModelObject(); item.add(new Label(quot;namequot;, cheese.getName())); item.add(new Label(quot;descriptionquot;, cheese.getD...())); item.add(new Label(quot;pricequot;, quot;$quot;+cheese.getPrice())); } }); add(lv); add(new PagingNavigator(quot;navigatorquot;, lv)); www.javapolis.com 65

Implement cheese list www.javapolis.com 66

Add shopping cart to page <div> <h3>Your Selection</h3> <table><tbody> <tr> <td>Gouda</td> <td>$1.99</td> <td><a href=quot;#quot;>remove</a></td> </tr> </tbody><tfoot> <tr class=quot;totalquot;> <th>Total</th> <td>$1.99</td> <td> </td> </tr> www.javapolis.com 67

Add shopping cart to page <div> <h3>Your Selection</h3> <table><tbody> <tr wicket:id=”contents”> <td wicket:id=”name”>Gouda</td> <td wicket:id=”price”>$1.99</td> <td><a href=quot;#quot;>remove</a></td> </tr> </tbody><tfoot> <tr class=quot;totalquot;> <th>Total</th> <td wicket:id=”total”>$1.99</td> <td> </td> </tr> www.javapolis.com 68

Add shopping cart to page add(new ListView(quot;contentsquot;, cart.getContents()) { @Override protected void populateItem(ListItem item) { Cheese cheese = (Cheese) item.getModelObject(); item.add(new Label(quot;namequot;, cheese.getName())); item.add(new Label(quot;pricequot;, quot;$quot;+cheese.getPrice())); } }); add(new Label(“total”, cart.getTotal())); www.javapolis.com 69

Add shopping cart to page www.javapolis.com 70

Add add + remove links <div class=quot;cheesequot; wicket:id=”cheeses”> <h3 wicket:id=”name”>Gouda</h3> <p wicket:id=”description”></p> <p><span wicket:id=”price”></span> <a wicket:id=”add” href=quot;#quot;>Add to cart</a> </p> </div>  <tr wicket:id=”contents”> <td wicket:id=”name”>Gouda</td> <td wicket:id=”price”>$1.99</td> <td><a wicket:id=”remove” href=quot;#quot;>remove</a></td> </tr> www.javapolis.com 71

Add add + remove links item.add(new Link(“add”, item.getModel()) { @Override public void onClick() { Cheese cheese = (Cheese)getModelObject(); cart.getContents().add(cheese); } }); // shopping cart: item.add(new Link(“remove”, item.getModel()) { @Override public void onClick() { Cheese cheese = (Cheese)getModelObject(); cart.getContents().remove(cheese); } }); www.javapolis.com 72

Add add + remove links www.javapolis.com 73

Fix shopping cart total add(new Label(“total”, cart.getTotal())); add(new Label(“total”, new PropertyModel(cart, “total”))); www.javapolis.com 74

Fix shopping cart total www.javapolis.com 75

Add checkout link <input type=quot;buttonquot; value=quot;Check outquot; /> <input type=quot;buttonquot; value=quot;Check outquot; wicket:id=”checkout”/> add(new Link(“checkout”) { @Override public void onClick() { setResponsePage(new CheckoutPage(cart)); } }); www.javapolis.com 76

Add checkout page Create CheckOutPage.html   Create CheckOutPage.java www.javapolis.com 77

Apply mock markup to check out page www.javapolis.com 78

Apply mock markup to check out page www.javapolis.com 79

Reuse the shopping cart Create ShoppingCartPanel.html   Create ShoppingCartPanel.java  Move cart markup to ShoppingCartPanel.html  Move cart Java code to ShoppingCartPanel.java  Use panel in home page and checkout page www.javapolis.com 80

Reuse the shopping cart www.javapolis.com 81

Reuse the shopping cart <wicket:panel> <h3>Your Selection</h3> <table><tbody> <tr wicket:id=quot;contentsquot;> <td wicket:id=quot;namequot;>Gouda</td> <td wicket:id=quot;pricequot;>$1.99</td> <td><a href=quot;#quot; wicket:id=quot;removequot;>remove</a></td> </tr> </tbody><tfoot> <tr class=quot;totalquot;> <th>Total</th> <td wicket:id=quot;totalquot;>$1.99</td> </tr></tfoot></table> </wicket:panel> www.javapolis.com 82

Make remove link Ajax enabled // let panel write a dom identifier setOutputMarkupId(true); item.add( new AjaxFallbackLink(quot;removequot;, item.getModel()) { @Override public void onClick(AjaxRequestTarget target) { Cheese cheese = (Cheese) getModelObject(); cart.getContents().remove(cheese); if(target != null ) { target.addComponent(ShoppingCartPanel.this); } } }); www.javapolis.com 83

CheckOutPage: add feedback panel <div> <ul> <li>Name is required</li> </ul> </div> <div wicket:id=”feedback”> <ul> <li>Name is required</li> </ul> </div> add(new FeedbackPanel(quot;feedbackquot;)); www.javapolis.com 84

CheckOutPage: add Form <form> <h3>Check out</h3> <p>Please enter your billing address.</p> <form wicket:id=”form”> <h3>Check out</h3> <p>Please enter your billing address.</p> add(new Form(quot;formquot;) { @Override public void onSubmit() { // do something with the order setResponsePage(FrontPage.class); } }); www.javapolis.com 85

CheckOutPage: add fields <tr><td>Name:</td> <td><input type=”text” wicket:id=”name” /></td></tr> <tr><td>Street:</td> <td><input type=”text” wicket:id=”street” /></td></tr> <tr><td>City:</td> <td><input type=”text” wicket:id=”city” /></td></tr> … form.setModel(new CompoundPropertyModel(cart)); form.add(new TextField(“name”)); form.add(new TextField(“street”)); form.add(new TextField(“city”)); … www.javapolis.com 86

CheckOutPage: add validation form.add(new TextField(“name”).setRequired(true)); form.add(new TextField(“street”).setRequired(true)); form.add(new TextField(“city”).setRequired(true)); … www.javapolis.com 87

CheckOutPage: add state selection box <th>State</th> <td><select> <option>Alabama</option> <option>Nebraska</option> </select></td> <th>State</th> <td><select wicket:id=”state”> <option>Alabama</option> <option>Nebraska</option> </select></td> form.add(new DropDownChoice(quot;statequot;, Arrays.asList(quot;Alabamaquot;, quot;Alaskaquot;, quot;Arkansasquot;, quot;Floridaquot;))); www.javapolis.com 88

Create unit test for shopping cart public void testRemove() { WicketTester tester = new WicketTester(); final Cart cart = new Cart(); cart.getContents().add(Cheese.getCheeses().get(0)); cart.getContents().add(Cheese.getCheeses().get(1)); List<Cheese> expected = new ArrayList<Cheese>(); expected.add(Cheese.getCheeses().get(0)); expected.add(Cheese.getCheeses().get(1)); tester.startPanel(new TestPanelSource() { public Panel getTestPanel(String panelId) { return new ShoppingCartPanel(panelId, cart); } }); tester.assertListView(quot;panel:contentsquot;, expected); tester.clickLink(quot;panel:contents:0:removequot;); expected.remove(0); tester.assertListView(quot;panel:contentsquot;, expected); } www.javapolis.com 89

Wicket in Action Wicket in Action   Eelco Hillenius  Martijn Dashorst  ISBN: 1-932394-98-2  ~375 pages  MEAP + E-book: $27.50  MEAP + Dead tree: $49.90 0% ! Use coupon code 3f f HC230 at checkout o www.javapolis.com 91

Summary Apache Wicket is:  a furry animal  three sticks with stumps  a component oriented web application framework Just Java and HTML   Easy Ajax  Good testing support  Great community www.javapolis.com

Conclusion “Wicket is good for my sex life” “Seriously, I also have a wife and kid. And the productivity gained from implementing in Wicket is unsurpassed. The extraordinary diagnostics available is worth it alone. OOP isn't bastardized within this framework, it is embraced...” – n n http://www.theserverside.com/news/thread.tss?thread_id=34725#175612 www.javapolis.com

Q&A View JavaPolis talks @ www.parleys.com

Thank you for your attention

http://blog.brunoborges.com.br	667
http://martijndashorst.com	506
http://wicketdiary.org	394
http://www.martijndashorst.com	93
http://www.slideshare.net	39
http://www.wicketdiary.org	27
http://www.infoblogs.com.br	26
http://w-download.blogspot.com	22
http://janusljd.blogspot.com	22
http://ts1	10
http://caixadeduvidas.blogspot.com	9
http://webcache.googleusercontent.com	5
http://192.168.0.1	4
http://static.slideshare.net	3
http://caixadeduvidas.blogspot.com.br	3
http://translate.googleusercontent.com	2
http://w-download.blogspot.com.br	2
http://www.w-download.blogspot.com	2
http://www.netvibes.com	1
http://janljd.blogspot.se	1
http://janljd.blogspot.com	1
http://cloudtu.blogspot.com	1
http://209.85.165.104	1
http://64.233.183.104	1
file://	1
http://74.125.47.132	1
http://cache.baidu.com	1
http://192.168.10.100	1

Wicket In Action

by Martijn Dashorst on Dec 16, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

28 Embeds 1,846

Statistics

Wicket In Action — Presentation Transcript