Wicket in Action
 Martijn Dashorst
  Topicus b.v.
Wicket in Action




          Create web applications
          with just Java and HTML
            using Apache Wicket

...
Martijn Dashorst
  Software Engineer


 Committer

 Chair

 Co-author

     Eelco   Hillenius




                   ...
Martijn Dashorst
  Software Engineer


 Committer

 Chair

 Co-author

     Eelco   Hillenius




                   ...
Agenda
  What is Wicket?


 Wicket concepts

 Building a Wicket Application

 Q&A




                      www.javapo...
Wicket?




          www.javapolis.com
Wicket?




www.javapolis.com        7
www.javapolis.com   8
Wicket       Welcome to Apache Wicket
            Home      With proper mark-up/logic
                                    ...
Apache Wicket

  Component oriented


 Open source

 Web application framework

 Java+HTML




                   www....
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!”));




 ...
Hello, World!
<h1 wicket:id=”msg”>[text goes here]</h1>
                  +
 add(new Label(“msg”, “Hello, World!”));
     ...
Hello, World!
<h1 wicket:id=”msg”>[text goes here]</h1>
                  +
 add(new Label(“msg”, “Hello, World!”));
     ...
Hello, World!
<h1 wicket:id=”msg”>[text goes here]</h1>
                  +
 add(new Label(“msg”, “Hello, World!”));
     ...
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.co...
2005
  Airbus A380’s maiden flight


 Huygens lands on Titan

 Dr. Who returns




                    www.javapolis.co...
JavaOne’05
          Tapestry
            guy

                         Bald                Struts/Shale
                 ...
JavaOne’05




   Wicket 1.0
             www.javapolis.com   18
2007
  Joins Apache Software Foundation


 Releases 1.3

 User groups start spawning




                   www.javapol...
2007
  Joins Apache Software Foundation


 Releases 1.3

 User groups start spawning




                   www.javapol...
Wicket uptake




                www.javapolis.com   20
Wicket uptake


    Wicket 1.0
    released




                 www.javapolis.com   20
Wicket uptake

                                     Wicket 1.2
                                     released
    Wicket 1....
Wicket uptake

                                              Wicket 1.2
                                              rele...
Popular?
Java Software


Apache Software Foundation


Web frameworks


                    www.javapolis.com   21
Projects




    core

                                                     Wicket
                                      ...
Getting Wicket


  Everybody gets the ultimate edition


 Includes:

     sources

     projects

     examples

    ...
Using maven to get Wicket




<dependency>
  <groupId>org.apache.wicket</groupId>
  <artifactId>wicket</artifactId>
  <ver...
Agenda
  What is Wicket?


 Wicket concepts

 Building a Wicket Application

 Q&A




                      www.javapo...
Concepts
    Application


    Session


    RequestCycle


    Components


    Behaviors


    Models




        ...
Application



    Main entry point for your web application


    Initialization


    Configuration


    Homepage

...
Concepts
    Application


    Session


    RequestCycle


    Components


    Behaviors


    Models




        ...
Concepts
    Application


    Session


    RequestCycle


    Components


    Behaviors


    Models




        ...
Concepts
    Application


    Session


    RequestCycle


    Components


    Behaviors


    Models




        ...
Components


  Encapsulate the programmatic manipulation


  of markup
 Render content in the response

 Receive events...
Components


  Component has wicket:id


 Markup has same wicket:id

 Hierarchy must match




<h1 wicket:id=“msg”>Gets...
Component: Link



    <a href=”#” wicket:id=”link”>Click</a>

    Link link = new Link(“link”);




    add(link);

     ...
Component: Link



    <a href=”#” wicket:id=”link”>Click</a>

    Link link = new Link(“link”) {
       @Override public ...
Component: AjaxLink


  <a href=”#” wicket:id=”link”>Click</a>


  AjaxLink link = new AjaxLink(“link”) {
    public void ...
Component: AjaxLink


  <a href=”#” wicket:id=”link”>Click</a>

  someComponent.setOutputMarkupId(true);
  AjaxLink link =...
Component + Markup




    Some components


    have own markup file
     Page,   Panel, Border

    Put Java, markup
...
Concepts
    Application


    Session


    RequestCycle


    Components


    Behaviors


    Models




        ...
Behaviors


   Plugins for components
 

  Change attributes of your component’s

   markup
  Add javascript events

 ...
Behaviors




link.add(new AbstractBehavior() {
    public void onComponentTag(
      Component component, ComponentTag ta...
Concepts
    Application


    Session


    RequestCycle


    Components


    Behaviors


    Models




        ...
Models


    Models bind your POJO’s to Wicket


    components



             Component     Model



             Compo...
Models


    Models bind your POJO’s to Wicket


    components



             Label          Model             quot;Joh...
Java lazy binding sucks




    Doesn’t update:


    new Label(“name”, person.getName())
    Null checks necessary:


 ...
Models



    PropertyModel:


     new   PropertyModel(p, “name)
     new   PropertyModel(p, “address.street”)


    C...
Agenda
  What is Wicket?


 Wicket concepts

 Building a Wicket Application

 Q&A




                      www.javapo...
DEMO
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-quick...
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, cit...
Implement Cheese list


<div class=quot;cheesequot;>
  <h3>Gouda</h3>
  <p>Named after.....</p>
  <p>
     <span>$1.99</sp...
Implement Cheese list


<div class=quot;cheesequot; wicket:id=”cheeses”>
  <h3 wicket:id=”name”>Gouda</h3>
  <p wicket:id=...
Implement cheese list


add(new ListView(quot;cheesesquot;, Cheese.getCheeses()) {
   @Override
   protected void populate...
Implement cheese list




                        www.javapolis.com   61
Make the list pageable


<div>
  <a href=quot;#quot;>&lt;&lt;</a>
  <a href=quot;#quot;>&lt;</a>
  <a href=quot;#quot;>1</...
Make the list pageable


<div wicket:id=”navigator”>
  <a href=quot;#quot;>&lt;&lt;</a>
  <a href=quot;#quot;>&lt;</a>
  <...
Make the list pageable


add(new ListView(quot;cheesesquot;, Cheese.getCheeses()) {
   @Override
   protected void populat...
Make the list pageable


PageableListView lv = null;
lv = new PageableListView(quot;cheesesquot;, cheeses, 2) {
   @Overri...
Implement cheese list




                        www.javapolis.com   66
Add shopping cart to page


<div>
  <h3>Your Selection</h3>
  <table><tbody>
     <tr>
        <td>Gouda</td>
        <td>...
Add shopping cart to page


<div>
  <h3>Your Selection</h3>
  <table><tbody>
     <tr wicket:id=”contents”>
        <td wi...
Add shopping cart to page


add(new ListView(quot;contentsquot;, cart.getContents()) {
   @Override
   protected void popu...
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:...
Add add + remove links


item.add(new Link(“add”, item.getModel()) {
    @Override public void onClick() {
      Cheese ch...
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, “to...
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;Chec...
Add checkout page


  Create CheckOutPage.html


 Create CheckOutPage.java




                        www.javapolis.com...
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

  Sho...
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 w...
Make remove link Ajax enabled


// let panel write a dom identifier
setOutputMarkupId(true);

item.add(
   new AjaxFallbac...
CheckOutPage: add feedback panel


<div>
  <ul>
     <li>Name is required</li>
  </ul>
</div>

<div wicket:id=”feedback”>
...
CheckOutPage: add Form


<form>
  <h3>Check out</h3>
  <p>Please enter your billing address.</p>

<form wicket:id=”form”>
...
CheckOutPage: add fields


<tr><td>Name:</td>
<td><input type=”text” wicket:id=”name” /></td></tr>
<tr><td>Street:</td>
<t...
CheckOutPage: add validation


form.add(new TextField(“name”).setRequired(true));
form.add(new TextField(“street”).setRequ...
CheckOutPage: add state selection box


<th>State</th>
<td><select>
   <option>Alabama</option>
   <option>Nebraska</optio...
Create unit test for shopping cart

public void testRemove() {
  WicketTester tester = new WicketTester();
  final Cart ca...
Agenda
  What is Wicket?


 Wicket concepts

 Building a Wicket Application

 Q&A




                      www.javapo...
Wicket in Action


    Wicket in Action


     Eelco  Hillenius
     Martijn Dashorst

     ISBN: 1-932394-98-2

    ...
Summary


    Apache Wicket is:


    a  furry animal
     three sticks with stumps

     a component oriented web app...
Conclusion



  “Wicket is good for my sex life”
“Seriously, I also have a wife and kid. And the
   productivity gained fr...
Q&A
View JavaPolis talks @ www.parleys.com
Thank you for your
    attention
Wicket In Action
Wicket In Action
Upcoming SlideShare
Loading in …5
×

Wicket In Action

15,959 views

Published on

Presentation on Apache Wicket delivered at JavaPolis 2007 in Antwerp. We introduce Wicket, learn the concepts and go through developing an online Cheese store

Published in: Technology, Education
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,959
On SlideShare
0
From Embeds
0
Number of Embeds
1,372
Actions
Shares
0
Downloads
0
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

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

×