Diese Präsentation wurde erfolgreich gemeldet.

Wicket In Action

21

Teilen

Wird geladen in …3
×
1 von 108
1 von 108

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Wicket In Action

  1. 1. Wicket in Action Martijn Dashorst Topicus b.v.
  2. 2. Wicket in Action Create web applications with just Java and HTML using Apache Wicket www.javapolis.com
  3. 3. Martijn Dashorst Software Engineer   Committer  Chair  Co-author  Eelco Hillenius www.javapolis.com
  4. 4. Martijn Dashorst Software Engineer   Committer  Chair  Co-author  Eelco Hillenius www.javapolis.com
  5. 5. Agenda What is Wicket?   Wicket concepts  Building a Wicket Application  Q&A www.javapolis.com 5
  6. 6. Wicket? www.javapolis.com
  7. 7. Wicket? www.javapolis.com 7
  8. 8. www.javapolis.com 8
  9. 9. 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
  10. 10. Apache Wicket Component oriented   Open source  Web application framework  Java+HTML www.javapolis.com 10
  11. 11. Hello, World!
  12. 12. Hello, World! www.javapolis.com 12
  13. 13. Hello, World! <h1 wicket:id=”msg”>[text goes here]</h1> www.javapolis.com 12
  14. 14. Hello, World! <h1 wicket:id=”msg”>[text goes here]</h1> + add(new Label(“msg”, “Hello, World!”)); www.javapolis.com 12
  15. 15. Hello, World! <h1 wicket:id=”msg”>[text goes here]</h1> + add(new Label(“msg”, “Hello, World!”)); = <h1>Hello, World!</h1> www.javapolis.com 12
  16. 16. Hello, World! <h1 wicket:id=”msg”>[text goes here]</h1> + add(new Label(“msg”, “Hello, World!”)); = <h1>Hello, World!</h1> www.javapolis.com 13
  17. 17. Hello, World! <h1 wicket:id=”msg”>[text goes here]</h1> + add(new Label(“msg”, “Hello, World!”)); = <h1>Hello, World!</h1> www.javapolis.com 13
  18. 18. A brief history of Wicket www.javapolis.com 14
  19. 19. • Discovery of the Hobbit • Year of the monkey • Milau bridge opens 2004
  20. 20. www.javapolis.com 16
  21. 21. 2005 Airbus A380’s maiden flight   Huygens lands on Titan  Dr. Who returns www.javapolis.com 17
  22. 22. 2005 Airbus A380’s maiden flight   Huygens lands on Titan  Dr. Who returns www.javapolis.com 17
  23. 23. JavaOne’05 Tapestry guy Bald Struts/Shale guy guy Wicket JSF guy WebWork guy guy www.javapolis.com 18
  24. 24. JavaOne’05 Wicket 1.0 www.javapolis.com 18
  25. 25. 2007 Joins Apache Software Foundation   Releases 1.3  User groups start spawning www.javapolis.com 19
  26. 26. 2007 Joins Apache Software Foundation   Releases 1.3  User groups start spawning www.javapolis.com 19
  27. 27. Wicket uptake www.javapolis.com 20
  28. 28. Wicket uptake Wicket 1.0 released www.javapolis.com 20
  29. 29. Wicket uptake Wicket 1.2 released Wicket 1.0 released www.javapolis.com 20
  30. 30. Wicket uptake Wicket 1.2 released Wicket 1.0 released Joined Apache www.javapolis.com 20
  31. 31. Popular? Java Software Apache Software Foundation Web frameworks www.javapolis.com 21
  32. 32. 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
  33. 33. Getting Wicket Everybody gets the ultimate edition   Includes:  sources  projects  examples Currently 1.3-rc2  Or...  www.javapolis.com 23
  34. 34. 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
  35. 35. Agenda What is Wicket?   Wicket concepts  Building a Wicket Application  Q&A www.javapolis.com 25
  36. 36. Concepts Application  Session  RequestCycle  Components  Behaviors  Models  www.javapolis.com 26
  37. 37. Application Main entry point for your web application  Initialization  Configuration  Homepage  Factories  Configured in web.xml  www.javapolis.com 27
  38. 38. Concepts Application  Session  RequestCycle  Components  Behaviors  Models  www.javapolis.com 28
  39. 39. Concepts Application  Session  RequestCycle  Components  Behaviors  Models  www.javapolis.com 29
  40. 40. Concepts Application  Session  RequestCycle  Components  Behaviors  Models  www.javapolis.com 30
  41. 41. 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
  42. 42. 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
  43. 43. Component: Link <a href=”#” wicket:id=”link”>Click</a> Link link = new Link(“link”); add(link); www.javapolis.com 33
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. Concepts Application  Session  RequestCycle  Components  Behaviors  Models  www.javapolis.com 38
  49. 49. 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
  50. 50. 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
  51. 51. Concepts Application  Session  RequestCycle  Components  Behaviors  Models  www.javapolis.com 41
  52. 52. Models Models bind your POJO’s to Wicket  components Component Model Component Model Domain www.javapolis.com 42
  53. 53. Models Models bind your POJO’s to Wicket  components Label Model quot;Johnquot; PropertyModel Label Person expression: quot;namequot; www.javapolis.com 42
  54. 54. 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
  55. 55. 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
  56. 56. Agenda What is Wicket?   Wicket concepts  Building a Wicket Application  Q&A www.javapolis.com 45
  57. 57. DEMO
  58. 58. Cheese Store - front page www.javapolis.com 47
  59. 59. Cheese store - check out www.javapolis.com 48
  60. 60. Generating the skeleton www.javapolis.com 49
  61. 61. 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
  62. 62. Import project into Eclipse www.javapolis.com 51
  63. 63. www.javapolis.com 52
  64. 64. Start application Embedded Jetty   Start.java in src/test/java www.javapolis.com 53
  65. 65. Add stylesheet and images to webapp Copy design to context root  www.javapolis.com 54
  66. 66. Apply mock markup to home page www.javapolis.com 55
  67. 67. Refresh page in browser www.javapolis.com 56
  68. 68. Add domain objects to project Cheese   name, description, price Cart   name,street, zipcode, city, state, contents:list<cheese> www.javapolis.com 57
  69. 69. 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
  70. 70. 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
  71. 71. 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
  72. 72. Implement cheese list www.javapolis.com 61
  73. 73. Make the list pageable <div> <a href=quot;#quot;>&lt;&lt;</a> <a href=quot;#quot;>&lt;</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;>&gt;</a> <a href=quot;#quot;>&gt;&gt;</a> </div> www.javapolis.com 62
  74. 74. Make the list pageable <div wicket:id=”navigator”> <a href=quot;#quot;>&lt;&lt;</a> <a href=quot;#quot;>&lt;</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;>&gt;</a> <a href=quot;#quot;>&gt;&gt;</a> </div> www.javapolis.com 63
  75. 75. 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
  76. 76. 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
  77. 77. Implement cheese list www.javapolis.com 66
  78. 78. 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>&nbsp;</td> </tr> www.javapolis.com 67
  79. 79. 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>&nbsp;</td> </tr> www.javapolis.com 68
  80. 80. 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
  81. 81. Add shopping cart to page www.javapolis.com 70
  82. 82. 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> <!-- cart: --> <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
  83. 83. 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
  84. 84. Add add + remove links www.javapolis.com 73
  85. 85. Fix shopping cart total add(new Label(“total”, cart.getTotal())); add(new Label(“total”, new PropertyModel(cart, “total”))); www.javapolis.com 74
  86. 86. Fix shopping cart total www.javapolis.com 75
  87. 87. 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
  88. 88. Add checkout page Create CheckOutPage.html   Create CheckOutPage.java www.javapolis.com 77
  89. 89. Apply mock markup to check out page www.javapolis.com 78
  90. 90. Apply mock markup to check out page www.javapolis.com 79
  91. 91. 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
  92. 92. Reuse the shopping cart www.javapolis.com 81
  93. 93. 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
  94. 94. 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
  95. 95. 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
  96. 96. 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
  97. 97. 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
  98. 98. 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
  99. 99. 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
  100. 100. 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
  101. 101. Agenda What is Wicket?   Wicket concepts  Building a Wicket Application  Q&A www.javapolis.com 90
  102. 102. 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
  103. 103. 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
  104. 104. 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
  105. 105. Q&A View JavaPolis talks @ www.parleys.com
  106. 106. Thank you for your attention

×