Wicket in Action at JavaZone

Introduction to Apache Wicket given at the JavaZone 2011 conference. Topics include "Why choose Wicket", "Starting with Wicket", selected components, how to keep your application in production, testing with Wicket and what's coming in Wicket 1.5.

Transcript

1. Introducing Apache Wicket Martijn Dashorst Topicus 1
2. • Husband and father • Wicket Committer • Author Wicket in Action • Software engineer for Topicus Martijn Dashorst 2
3. One more thing... 3
4. Wicket 1.5.0 is released! 4
5. Get it now! http://wicket.apache.org 5
6. Get it now! http://wicket.apache.org in 50 minutes 6
7. Agenda • Introduction to Apache Wicket • Getting started • Navigation, Internationalization, Validation, JQuery, Production, Testing • New and noteworthy in 1.5 • Questions 7
8. Introduction 8
9. Wicket is... a component oriented web framework using just HTML and Java 9
10. Apache Wicket • Open Source: ASL 2.0 • Created in 2004 • Java web framework • Component oriented • http://wicket.apache.org 10
11. Who’s using Wicket? 11
13. mobile.walmart.com supports three categories of devices using the same Java code (only the html is (very) different.) Try doing that with JSP. — Joachim Kainz 13
14. ... We at Vegas.com have been able to re- purpose our Wicket-based air/hotel search application and purchase/checkout application. This is the new mexico.com. [...] The re-use of components and abstract pages was tremendous. —Scott Swank, senior engineer vegas.com 14
15. Just HTML 15
16. Sign up form Example from Railscast episode #250 16
17. Sign up form 17
18. Sign up form <h1>Sign Up</h1> <form> <div class="error_messages"> <h2>Form is invalid</h2> <ul> <li>Some error message</li> </ul> </div> <p> <label for="email">E-Mail</label><br/> <input type="email" id="email" /> </p> <p> <label for="password">Password</label> <input type="password" id="password" /> </p> <p> <label for="confirm">Password confirmat <input type="password" id="confirm" /> </p> <p class="button"><input type="submit" va 18
19. Sign up form 19
20. Sign up form <h1>Sign Up</h1> <%= form_for @user do |f| %> <% if @user.errors.any? %> <div class="error_messages"> <h2>Form is invalid</h2> <ul> <% for message in @user.errors.full <li><%= message %></li> <% end %> </ul> </div> <% end %> <p> <%= f.label :email %><br /> <%= f.text_field :email %> </p> <p> <%= f.label :password %><br /> <%= f.password_field :password %> </p> <p> 20
21. Sign up form <h1>Sign Up</h1> <form> <div class="error_messages"> <h2>Form is invalid</h2> <ul> <li>Some error message</li> </ul> </div> <p> <label for="email">E-Mail</label><br/> <input type="email" id="email" /> </p> <p> <label for="password">Password</label> <input type="password" id="password" /> </p> <p> <label for="confirm">Password confirmat <input type="password" id="confirm" /> </p> <p class="button"><input type="submit" va 21
22. Sign up form <h1>Sign Up</h1> <form> <div wicket:id="feedback" class="error_me <h2>Form is invalid</h2> <ul> <li>Some error message</li> </ul> </div> <p> <label for="email">E-Mail</label><br/> <input wicket:id="email" type="email" i </p> <p> <label for="password">Password</label> <input wicket:id="password" type="passw </p> <p> <label for="confirm">Password confirmat <input wicket:id="confirm" type="passwo </p> <p class="button"><input type="submit" va 22
23. Sign up form <h1>Sign Up</h1> <form> <div wicket:id="feedback" class="error_me <h2>Form is invalid</h2> <ul> <li>Some error message</li> </ul> </div> <p> <label for="email">E-Mail</label><br/> <input wicket:id="email" type="email" i </p> <p> <label for="password">Password</label> <input wicket:id="password" type="passw </p> <p> <label for="confirm">Password confirmat <input wicket:id="confirm" type="passwo </p> <p class="button"><input type="submit" va 23
24. <tag wicket:id="foo"> Instructs Wicket to work on this tag 24
25. Imperative markup • Used by Ruby on Rails, JSP, Play, Velocity, ... • Great for web developers • Great for hacking on a web site • Code and markup are not separated <h1>Sign Up</h1> <%= form_for @user do |f| %> <% if @user.errors.any? %> <div class="error_messag <h2>Form is invalid</h <ul> <% for message in @u <li><%= message %> <% end %> </ul> </div> <% end %> <p> <%= f.label :email %><br <%= f.text_field :email </p> <p> 25
26. Declarative markup • Used by Wicket, Tapestry, Facelets • Great for web designers • Go from PSD → HTML → Page → Component • Code and markup are strictly separated <h1>Sign Up</h1> <form wicket:id="form"> <div class="error_message <p> <label for="email">E-Ma <input type="email" id= </p> <p> <label for="password">P <input type="password" </p> <p> <label for="confirm">Pa <input type="password" </p> <p class="button"><input </form> 26
27. Just Java 27
28. Sign up form <h1>Sign Up</h1> <%= form_for @user do |f| %> <% if @user.errors.any? %> <div class="error_messages"> <h2>Form is invalid</h2> <ul> <% for message in @user.errors.full_messages %> <li><%= message %></li> <% end %> </ul> </div> <% end %> <p> <%= f.label :email %><br /> <%= f.text_field :email %> </p> <p> <%= f.label :password %><br /> <%= f.password_field :password %> </p> <p> <%= f.label :password_confirmation %> 28
29. Sign up form Form form = new Form("signup") { @Override public void onSubmit() { // ... } } add(form); 29
30. Sign up form Form form = new Form("signup") { @Override public void onSubmit() { // ... } } add(form); FeedbackPanel feedback = new FeedbackPanel("feedback"); feedback.setVisible(form.hasFeedbackMessages()); form.add(feedback); 30
31. Sign up form Form form = new Form("signup") { @Override public void onSubmit() { // ... } } add(form); FeedbackPanel feedback = new FeedbackPanel("feedback"); feedback.setVisible(form.hasFeedbackMessages()); form.add(feedback); form.add(new EmailTextField("email", Model.of("")) .setRequired(true)); 31
32. Sign up form Form form = new Form("signup") { @Override public void onSubmit() { // ... } } add(form); FeedbackPanel feedback = new FeedbackPanel("feedback"); feedback.setVisible(form.hasFeedbackMessages()); form.add(feedback); form.add(new EmailTextField("email", Model.of("")) .setRequired(true)); form.add(new PasswordField("password", Model.of("")) .setRequired(true)); 32
33. Sign up form Form form = new Form("signup") { @Override public void onSubmit() { // ... } } add(form); FeedbackPanel feedback = new FeedbackPanel("feedback"); feedback.setVisible(form.hasFeedbackMessages()); form.add(feedback); form.add(new EmailTextField("email", Model.of("")) .setRequired(true)); form.add(new PasswordField("password", Model.of("")) .setRequired(true)); form.add(new PasswordField("confirm", Model.of("")) .setRequired(true)); 33
34. Wicket: Just Java • No logic in markup • Components are objects (use new and extends) • Use OO techniques in your programming • No XML 34
35. Concepts 35
36. Components • Manipulate markup • Render content • Receive events (onClick, onSubmit) • Examples: Label, Link, Form, TextField, PagingNavigator, Panel, Page, ClientSideImageMap 36
37. Models • Provide data to components • Store data for components • Transform data • Retrieve data from persistent storage • Examples: Model<T>, PropertyModel<T> 37
38. Behaviors • Decorator/Adapter for Component • Can manipulate markup of Component • Can receive events (onClick) • Add Ajax functionality to components • Example: AjaxSelfUpdatingTimerBehavior 38
39. Getting started 39
40. Wicket projects • Apache Wicket (extensions, spring, guice, velocity, etc) • Wicket stuff (grand collection of projects) • Seam for Apache Wicket • WiQuery (JQuery integration library) • Leg before Wicket (Maven archetypes) • Apache Isis (incubating, DDD framework) • Jolira Tools (powers mobile.walmart.com) • Visural Wicket (standalone Wicket components) 40
41. Apache Wicket projects • Core • Extensions • Quick start • IoC • Spring • Guice • DateTime • Velocity • Auth/Roles • JMX • Dev utils • Examples 41
42. Wicket Stuff projects • progressbar • datatable-autocomplete • flot • googlecharts • scala-extensions • openlayers • gmap2 • inmethod-grid • minis • phonebook • shiro-security • gae-initializer • push-jdk-1.5 • jasperreports • mbeanview • jsr303 • client-and-server-validation • multi-text-input • prototype • simile-timeline • theme • yav • maven-support • plugin • input-events • javaee-inject • push • wicket-html5 • wicket-servlet3 42
43. Quick start 43
44. Quick start 44
45. Running quickstart $ _ 45
46. Running quickstart $ mvn -o archetype:generate - DarchetypeGroupId=org.apache.wicket - DarchetypeArtifactId=wicket-archetype-quickstart - DarchetypeVersion=1.5-SNAPSHOT - DgroupId=com.mycompany -DartifactId=myproject - DarchetypeRepository=https://repository.apache.org/ content/repositories/snapshots/ - DinteractiveMode=false _ 46
47. Running quickstart $ mvn -o archetype:generate - DarchetypeGroupId=org.apache.wicket - DarchetypeArtifactId=wicket-archetype-quickstart - DarchetypeVersion=1.5-SNAPSHOT - DgroupId=com.mycompany -DartifactId=myproject - DarchetypeRepository=https://repository.apache.org/ content/repositories/snapshots/ - DinteractiveMode=false [INFO] Scanning for projects... [INFO] ----------------------------------------------------- ------ [INFO] Building Maven Stub Project (No POM) 1 [INFO] ----------------------------------------------------- ------ [INFO] >>> maven-archetype-plugin:2.0:generate (default-cli) >>> 47
48. Running quickstart $ mvn jetty:run_ 48
49. Running quickstart $ mvn jetty:run [INFO] Scanning for projects... [INFO] ----------------------------------------------------- ------ [INFO] Building quickstart 1.0-SNAPSHOT [INFO] ----------------------------------------------------- ------ [INFO] Starting jetty 7.2.2.v20101205 ... 2011-02-04 22:04:34.969:INFO::jetty-7.2.2.v20101205 2011-02-04 22:04:35.198:INFO::No Transaction manager found - if yo INFO - WebXmlFile - web.xml: found filter with na INFO - Application - [wicket.myproject] init: Wick INFO - RequestListenerInterface - registered 49
50. Running quickstart 50
51. Quick start alternative Leg up • Spring • Guice • JDBC • JPA • Hibernate • Scala http://jweekend.com/dev/LegUp 51
52. Want to learn more? 52
53. Want to learn more? http://wicket.apache.org/learn/books.html 53
54. Examples 54
55. Examples Hello, World! 55
56. Hello, World! <h1>Hello, World</h1> 56
57. Hello, World! <h1>[Replaced text]</h1> 57
58. Hello, World! <h1 wicket:id="msg">[Replaced text]</h1> 58
59. Hello, World! <h1 wicket:id="msg">[Replaced text]</h1> + add(new Label("msg", "Hello, World!")); 59
60. Hello, World! <h1 wicket:id="msg">[Replaced text]</h1> + add(new Label("msg", "Hello, World!")); = <h1>Hello, World!</h1> 60
61. Examples Click counter 61
62. This link has been clicked 123 times 62
63. This link has been clicked 123 times This link has been clicked 123 times! 63
64. This link has been clicked 123 times This <a href="#">link</a> has been clicked 123 times! 64
65. This link has been clicked 123 times This <a href="#">link</a> has been clicked <span>123</span> times! 65
66. This link has been clicked 123 times This <a wicket:id="link" href="#">link</a> has been clicked <span>123</span> times! 66
67. This link has been clicked 123 times This <a wicket:id="link" href="#">link</a> has been clicked <span wicket:id="clicks">123</span> times! 67
68. This link has been clicked 123 times This <a wicket:id="link" href="#">link</a> has been clicked <span wicket:id="clicks">123</span> times! 68
69. This link has been clicked 123 times public class ClickCountPage extends WebPage { } 69
70. This link has been clicked 123 times public class ClickCountPage extends WebPage { public ClickCountPage() { } } 70
71. This link has been clicked 123 times public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCountPage() { } } 71
72. This link has been clicked 123 times public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCountPage() { add(new Link<Void>("link") { public void onClick() { clicks++; } }); } } 72
73. This link has been clicked 123 times public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCountPage() { add(new Link<Void>("link") { ... }); add(new Label("clicks", new PropertyModel<Integer>(this, "clicks"))); } } 73
74. Examples Sign up form 74
75. Sign Up <h1>Sign Up</h1> 75
76. Sign Up <h1>Sign Up</h1> <form> </form> 76
77. Sign Up <h1>Sign Up</h1> <form> <p> <label for="email">Email Address</label> <input type="email" id="email" /> </p> </form> 77
78. Sign Up <h1>Sign Up</h1> <form> <p> <label for="email">Email Address</label> <input type="email" id="email" /> </p> <p> <label for="password">Password</label> <input type="password" id="password" /> </p> </form> 78
79. Sign Up <h1>Sign Up</h1> <form> <p> <label for="email">Email Address</label> <input type="email" id="email" /> </p> <p> <label for="password">Password</label> <input type="password" id="password" /> </p> <p> <label for="confirm">Password Confirmation</label <input type="password" id="confirm" /> </p> </form> 79
80. Sign Up <h1>Sign Up</h1> <form> <p> <label for="email">Email Address</label> <input type="email" id="email" /> </p> <p> <label for="password">Password</label> <input type="password" id="password" /> </p> <p> <label for="confirm">Password Confirmation</label <input type="password" id="confirm" /> </p> <input type="submit" value="Create user" /> </form> 80
81. Sign Up <h1>Sign Up</h1> <form wicket:id="form"> <p> <label for="email">Email Address</label> <input type="email" id="email"/> </p> <p> <label for="password">Password</label> <input type="password" id="password" /> </p> <p> <label for="confirm">Password Confirmation</label <input type="password" id="confirm" /> </p> <input type="submit" value="Create user" /> </form> 81
82. Sign Up <h1>Sign Up</h1> <form wicket:id="form"> <p> <label for="email">Email Address</label> <input wicket:id="email" type="email" id="email"/ </p> <p> <label for="password">Password</label> <input type="password" id="password" /> </p> <p> <label for="confirm">Password Confirmation</label <input type="password" id="confirm" /> </p> <input type="submit" value="Create user" /> </form> 82
83. Sign Up <h1>Sign Up</h1> <form wicket:id="form"> <p> <label for="email">Email Address</label> <input wicket:id="email" type="email" id="email"/ </p> <p> <label for="password">Password</label> <input wicket:id="password" type="password" id="p </p> <p> <label for="confirm">Password Confirmation</label <input type="password" id="confirm" /> </p> <input type="submit" value="Create user" /> </form> 83
84. Sign Up <h1>Sign Up</h1> <form wicket:id="form"> <p> <label for="email">Email Address</label> <input wicket:id="email" type="email" id="email"/ </p> <p> <label for="password">Password</label> <input wicket:id="password" type="password" id="p </p> <p> <label for="confirm">Password Confirmation</label <input wicket:id="confirm" type="password" id="co </p> <input type="submit" value="Create user" /> </form> 84
85. Sign Up public class SignUpPage extends WebPage { } 85
86. Sign Up public class SignUpPage extends WebPage { public SignUpPage() { } } 86
87. Sign Up public class SignUpPage extends WebPage { public SignUpPage() { Form<Void> form = new Form<Void>("form"); add(form); } } 87
88. Sign Up public class SignUpPage extends WebPage { private String email; public SignUpPage() { Form<Void> form = new Form<Void>("form"); add(form); form.add(new TextField<String>("email", new PropertyModel(this, "email"))); } } 88
89. Sign Up public class SignUpPage extends WebPage { private String email; private String password; public SignUpPage() { Form<Void> form = new Form<Void>("form"); add(form); form.add(new TextField<String>("email", new PropertyModel(this, "email"))); form.add(new PasswordTextField("password", new PropertyModel(this, "password"))); } } 89
90. Sign Up public class SignUpPage extends WebPage { private String email; private String password; private String confirm; public SignUpPage() { Form<Void> form = new Form<Void>("form"); add(form); form.add(new TextField<String>("email", new PropertyModel(this, "email"))); form.add(new PasswordTextField("password", new PropertyModel(this, "password"))); form.add(new PasswordTextField("confirm", new PropertyModel(this, "confirm"))); } } 90
91. Sign Up public class SignUpPage extends WebPage { private String email; private String password; private String confirm; public SignUpPage() { Form<Void> form = new Form<Void>("form") { public void onSubmit() { // create user } }; add(form); form.add(new TextField<String>("email", new PropertyModel(this, "email"))); form.add(new PasswordTextField("password", new PropertyModel(this, "password"))); form.add(new PasswordTextField("confirm", new PropertyModel(this, "confirm"))); 91
92. Sign Up 92
93. Navigation Going from one page to another 93
94. Link types • External • Bookmarkable links to pages • Action links on pages • Ajax links on pages 94
95. External link • Useful for rendering links to external sites <a href="http://google.com">Search</a> • new ExternalLink("search", "http://google.com") • No request is sent to application when clicked 95
96. A bookmarkable link to an other page add(new BookmarkablePageLink("link", OtherPage.class)); <a href="/other/page">Other page</a> 96
97. A bookmarkable link to a page with parameters PageParameters pars = new PageParameters(); pars.add("key", "value); add(new BookMarkablePageLink("link", SomeOtherPage.class, pars)); <a href="/some/other/page/key/value">page</a> <a href="/some/other/page/value">page</a> <a href="/some/other/page?key=value">page</a> 97
98. Action links on pages • Perform some serverside action • increase counter • delete object • start global thermonuclear war • Navigate to another page 98
99. Click to start global thermonuclear war 99
100. Click to start global thermonuclear war add(new Link<Void>("start") { }); 100
101. Click to start global thermonuclear war add(new Link<Void>("start") { @Override public void onClick() { games.startGlobalThermoNuclearWar(); } }); 101
102. Click to start global thermonuclear war add(new Link<Void>("start") { @Override public void onClick() { games.startGlobalThermoNuclearWar(); // not bookmarkable, session relative response setResponsePage(new DefconStatusPage(Level3)); } }); 102
103. Click to start global thermonuclear war add(new Link<Void>("start") { @Override public void onClick() { games.startGlobalThermoNuclearWar(); // bookmarkable response setResponsePage(DefconStatusPage.class); } }); 103
104. setResponsePage • Used with page instance • session relative • not bookmarkable • Used with page class • bookmarkable • Works even in Ajax requests 104
105. Internationalization i18n and l10n 105
106. Multiple languages 106
107. Strategies to i18n • A markup file per language • SignUpPage.html • SignUpPage_en.html • SignUpPage_nl.html • One markup file to rule them all • Different .properties for each language 107
108. Markup per language 108
109. Sign Up Files • SignUpPage.java • SignUpPage_en.html • SignUpPage_nl.html 109
110. <h1>Sign Up</h1> <form wicket:id="form"> <p> <label for="email">Email Address</label> <input wicket:id="email" type="email" id="email"/ </p> <p> <label for="password">Password</label> <input wicket:id="password" type="password" id="p </p> <p> <label for="confirm">Password Confirmation</label <input wicket:id="confirm" type="password" id="co </p> <input type="submit" value="Create user" /> </form> SignUpPage_en.html 110
111. <h1>Registeren</h1> <form wicket:id="form"> <p> <label for="email">Email adres</label> <input wicket:id="email" type="email" id="email"/ </p> <p> <label for="password">Wachtwoord</label> <input wicket:id="password" type="password" id="p </p> <p> <label for="confirm">Bevestig wachtwoord</label <input wicket:id="confirm" type="password" id="co </p> <input type="submit" value="Maak gebruiker" /> </form> SignUpPage_nl.html 111
112. One markup file Many .properties files 112
113. Static text i18n’d • Replace your static text with <wicket:message key="...">text</wicket:message> • Replaces text between <wicket:message> with text from .properties file • Replace attributes using: <tag wicket:message key="attribute:key"> 113
114. <h1>Sign Up</h1> <h1>Sign Up</h1> 114
115. <h1><wicket:message key="signup">Sign Up</ wicket:message></h1> <h1>Sign Up</h1> 115
116. <h1><wicket:message key="signup">Sign Up</ wicket:message></h1> SignUpPage_en.properties signup=Sign Up <h1>Sign Up</h1> 116
117. <h1><wicket:message key="signup">Sign Up</ wicket:message></h1> SignUpPage_en.properties signup=Sign Up SignUpPage_nl.properties signup=Registreren <h1>Sign Up</h1> 117
118. Sign Up Files • SignUpPage.java • SignUpPage.html • SignUpPage_en.properties • SignUpPage_nl.properties 118
119. Application properties • Centralize your i18n labels • MyApplication_en.properties • MyApplication_nl.properties 119
120. Application properties • Order of priority: • Page.properties • Component.properties • Application.properties • Wicket’s default properties 120
121. Wicket standard languages • ba • cs • da • de • de_CH • el • es • et • fa_IR • fi • fr • hu • is • it • ja • ko • lt • lv • nl • no • pl • pt_BR • sl • sv • tl • zh_CN • zh_TW 121
122. Validating user input 122
123. Validators • Validate converted input • Invalid input stops further form processing • Generates feedback messages • Can have own resource bundle (Validator.properties) 123
124. Example Validating Sign Up 124
125. Sign Up Validation emailField = new TextField<String>("email", new Prope form.add(emailField); passwordField = new PasswordTextField("password", new form.add(passwordField); confirmField = new PasswordTextField("confirm", new P form.add(confirmField); 125
126. Sign Up Validation emailField = new TextField<String>("email", new Prope emailField.add(EmailAddressValidator.getInstance()); form.add(emailField); passwordField = new PasswordTextField("password", new form.add(passwordField); confirmField = new PasswordTextField("confirm", new P form.add(confirmField); 126
127. Sign Up Validation emailField = new TextField<String>("email", new Prope emailField.add(EmailAddressValidator.getInstance()); emailField.setRequired(true); form.add(emailField); passwordField = new PasswordTextField("password", new form.add(passwordField); confirmField = new PasswordTextField("confirm", new P form.add(confirmField); 127
128. Sign Up Validation emailField = new TextField<String>("email", new Prope emailField.add(EmailAddressValidator.getInstance()); emailField.setRequired(true); form.add(emailField); passwordField = new PasswordTextField("password", new passwordField.add(StringValidator.minimumLength(8)); form.add(passwordField); confirmField = new PasswordTextField("confirm", new P form.add(confirmField); 128
129. Sign Up Validation emailField = new TextField<String>("email", new Prope emailField.add(EmailAddressValidator.getInstance()); emailField.setRequired(true); form.add(emailField); passwordField = new PasswordTextField("password", new passwordField.add(StringValidator.minimumLength(8)); form.add(passwordField); confirmField = new PasswordTextField("confirm", new P form.add(confirmField); form.add(new EqualPasswordInputValidator( passwordField, confirmField)); 129
130. Provided validators • 2 fields equal • 2 password fields equal • Minimum • Maximum • Range • Credit card • Date • Pattern • Email address • Url • RFC-compliant email address • Exact length • Length between 130
131. JQuery integration Custom JavaScript components with WiQuery 131
132. What is WiQuery? • Integration library for Wicket and JQuery • Follows JQuery style programming closely in Java • MIT licensed • Very easy to integrate existing JQuery components • Provides JQuery UI components/themes as well 132
133. WiQuery comes with… • Events Mouse, Form, Key, State • Effects Show, Toggle, Hide, Delay, FadeIn, FadeOut, FadeTo, SlideDown, SlideToggle, SlideUp • UI plugins Accordion, Autocomplete, Button, Datepicker, Dialog, Drag/ Drop, UI Effects, ProgressBar, Resizable, Selectable, Slider, Sortable, Tabs, Themes 133
134. Example FadeIn effect 134
135. FadeIn effect <h1>WiQuery FadeIn effect</h1> <p>... fade this ...</p> 135
136. FadeIn effect <h1>WiQuery FadeIn effect</h1> <p wicket:id="msg">... fade this ...</p> 136
137. FadeIn effect <h1>WiQuery FadeIn effect</h1> <p wicket:id="msg" style="display:none"></p> 137
138. FadeIn effect <h1>WiQuery FadeIn effect</h1> <p wicket:id="msg" style="display:none"></p> Label label = new Label("msg", "Lorum ipsum..."); 138
139. FadeIn effect <h1>WiQuery FadeIn effect</h1> <p wicket:id="msg" style="display:none"></p> Label label = new Label("msg", "Lorum ipsum..."); label.setOutputMarkupId(true); 139
140. FadeIn effect <h1>WiQuery FadeIn effect</h1> <p wicket:id="msg" style="display:none"></p> Label label = new Label("msg", "Lorum ipsum..."); label.setOutputMarkupId(true); label.add(new EffectBehavior()); 140
141. FadeIn effect <h1>WiQuery FadeIn effect</h1> <p wicket:id="msg" style="display:none"></p> Label label = new Label("msg", "Lorum ipsum..."); label.setOutputMarkupId(true); label.add(new EffectBehavior( new FadeIn(EffectSpeed.SLOW))); 141
142. FadeIn effect <h1>WiQuery FadeIn effect</h1> <p wicket:id="msg" style="display:none"></p> Label label = new Label("msg", "Lorum ipsum..."); label.setOutputMarkupId(true); label.add(new EffectBehavior( new FadeIn(EffectSpeed.SLOW))); 142
143. WiQuery FadeIn effect 143
144. WiQuery FadeIn effect 144
145. FadeIn.java public class FadeIn extends Effect { public FadeIn() { } public FadeIn(EffectSpeed effectSpeed) { super(effectSpeed); } public String chainLabel() { return "fadeIn"; } } 145
146. Example Image zoom with JqZoom 146
147. JqZoom 147
148. JqZoom 148
149. JqZoom 149
150. JQuery Plugin URL: http://plugins.jquery.com/project/jQzoom http://www.mind-projects.it/projects/jqzoom/ Rating: ˒˒˒˒˒ License: BSD Description: JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework. jQzoom is a great and a really easy to use script to magnify what you want. 150
151. Usage example <a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"> </a> $('.MYCLASS').jqzoom(); 151
152. Usage example <a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"> </a> $('.MYCLASS').jqzoom(); 152
153. Usage example <a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"> </a> $('.MYCLASS').jqzoom(); 153
154. IWiQueryPlugin public interface IWiQueryPlugin { " void contribute(WiQueryResourceManager wiQueryResourceManager); " " JsStatement statement(); } 154
155. ZoomableImage public class ZoomableImage extends Panel { } 155
156. ZoomableImage public class ZoomableImage extends Panel { public ZoomableImage(String id, String big, String small) { } } 156
157. ZoomableImage public class ZoomableImage extends Panel { public ZoomableImage(String id, String big, String small) { WebMarkupContainer link = new WebMarkupContainer("a"); link.add(AttributeModifier.replace("href", big)); add(link); } } 157
158. ZoomableImage public class ZoomableImage extends Panel { public ZoomableImage(String id, String big, String small) { WebMarkupContainer link = new WebMarkupContainer("a"); link.add(AttributeModifier.replace("href", big)); add(link); WebMarkupContainer img = new WebMarkupContainer("img"); img.add(AttributeModifier.replace("src", small); link.add(img); } } 158
159. ZoomableImage public class ZoomableImage extends Panel implements IWiQueryPlugin public ZoomableImage(String id, String big, String small) { WebMarkupContainer link = new WebMarkupContainer("a"); link.add(AttributeModifier.replace("href", big)); add(link); WebMarkupContainer img = new WebMarkupContainer("img"); img.add(AttributeModifier.replace("src", small); link.add(img); } public void contribute(WiQueryResourceManager mgr) {...} public JsStatement statement() {...} } 159
160. ZoomableImage public class ZoomableImage extends Panel implements IWiQueryPlugin public ZoomableImage(String id, String big, String small) { WebMarkupContainer link = new WebMarkupContainer("a"); link.add(AttributeModifier.replace("href", big)); add(link); WebMarkupContainer img = new WebMarkupContainer("img"); img.add(AttributeModifier.replace("src", small); link.add(img); } public void contribute(WiQueryResourceManager mgr) { mgr.addJavaScriptResource(JqZoomJavaScript.get()); mgr.addCssResource(JqZoomStyleSheet.get()); } public JsStatement statement() {...} } 160
161. ZoomableImage public class ZoomableImage extends Panel implements IWiQueryPlugin public ZoomableImage(String id, String big, String small) { WebMarkupContainer link = new WebMarkupContainer("a"); link.add(AttributeModifier.replace("href", big)); add(link); WebMarkupContainer img = new WebMarkupContainer("img"); img.add(AttributeModifier.replace("src", small); link.add(img); } public void contribute(WiQueryResourceManager mgr) { mgr.addJavaScriptResource(JqZoomJavaScript.get()); mgr.addCssResource(JqZoomStyleSheet.get()); } public JsStatement statement() { return new JsQuery(this).$().chain("jqzoom"); } } 161
162. Steps • Add JavaScript/CSS/gif files to project • Create JavaScript/CSS resource references • Create ZoomableImage.java • Extend from Panel • Add link and image • Implement WiQueryPlugin interface methods: contribute() and statement() 162
163. 2 modes for your app Development and Deployment 163
164. Development mode $ mvn jetty:run [INFO] Scanning for projects... [INFO] ----------------------------------------------------------- [INFO] Building quickstart 1.0-SNAPSHOT [INFO] ----------------------------------------------------------- [INFO] Starting jetty 7.2.2.v20101205 ... 2011-02-04 22:04:34.969:INFO::jetty-7.2.2.v20101205 2011-02-04 22:04:35.198:INFO::No Transaction manager found - if yo INFO - WebXmlFile - web.xml: found filter with na INFO - Application - [wicket.myproject] init: Wick INFO - RequestListenerInterface - registered listener interface INFO - WebApplication - [wicket.myproject] Started Wi ****************************************************************** *** WARNING: Wicket is running in DEVELOPMENT mode. ** *** ^^^^^^^^^^^ ** *** Do NOT deploy to your live server(s) without changing this. ** *** See Application#getConfigurationType() for more information ** ****************************************************************** 2011-02-04 22:04:35.464:INFO::Started SelectChannelConnector@0.0.0.0:8080 [INFO] Started Jetty Server 164
165. Development mode • Exceptional error pages • Dynamic markup reloading • No caching • No javascript/css optimizations • Discover mistakes early (serialization, missing components, ...) • Wicket debugger visible 165
166. Error message Unable to find component with id 'count' in HomePage. This means that you declared wicket:id=count in your markup, but that you either did not add the component to your page at all, or that the hierarchy does not match. 166
167. Error pages 167
168. Ajax debugger 168
169. Ajax debugger 169
170. Ajax envelope <?xml version="1.0" encoding="UTF-8"?> <ajax-response> <component id="count2"> <![CDATA[<span wicket:id="count" id="count2">1</ span>]]> </component> </ajax-response> 170
171. Deployment mode • Cache markup resources • No checks • Don’t display stack traces to users • Minimize/compress JavaScript • Don’t generate wicket tags • Wicket debugger not visible 171
172. Don’t perform your performance tests in development mode! FREE PRO TIP: 172
173. Testing the UI 173
174. WicketTester • Test components directly, or their markup • Runs tests without starting server • Ajax testing (server side) • Runs in IDE, ant, maven builds • Achieves high code coverage 174
175. Testing Hello, World! @Test public void rendersWelcomeMessage() { } 175
176. Testing Hello, World! @Test public void rendersWelcomeMessage() { WicketTester tester = new WicketTester(); } 176
177. Testing Hello, World! @Test public void rendersWelcomeMessage() { WicketTester tester = new WicketTester(); tester.startPage(HelloWorldPage.class); } 177
178. Testing Hello, World! @Test public void rendersWelcomeMessage() { WicketTester tester = new WicketTester(); tester.startPage(HelloWorldPage.class); tester.assertLabel("msg", "Hello, World!"); } 178
179. Testing Click Count @Test public void clicksIncreaseCount() { } 179
180. Testing Click Count @Test public void clicksIncreaseCount() { WicketTester tester = new WicketTester(); } 180
181. Testing Click Count @Test public void clicksIncreaseCount() { WicketTester tester = new WicketTester(); tester.startPage(ClickCountPage.class); } 181
182. Testing Click Count @Test public void clicksIncreaseCount() { WicketTester tester = new WicketTester(); tester.startPage(ClickCountPage.class); tester.assertModelValue("clicks", 0); } 182
183. Testing Click Count @Test public void clicksIncreaseCount() { WicketTester tester = new WicketTester(); tester.startPage(ClickCountPage.class); tester.assertModelValue("clicks", 0); tester.clickLink("link"); } 183
184. Testing Click Count @Test public void clicksIncreaseCount() { WicketTester tester = new WicketTester(); tester.startPage(ClickCountPage.class); tester.assertModelValue("clicks", 0); tester.clickLink("link"); tester.assertModelValue("clicks", 1); } 184
185. Other test frameworks • PageTest (by Kent Tong) • JDave (BDD framework) 185
186. What’s new in 1.5? 186
187. HTML 5 support 187
188. HTML 4 input types <input type="checkbox"> <input type="radio"> <input type="password"> <input type="file"> <input type="submit"> <input type="text"> <select><option> 188
189. HTML 5 input types <input type="checkbox"> <input type="radio"> <input type="password"> <input type="file"> <input type="submit"> <input type="text"> <select><option> <input type="email"> <input type="url"> <input type="number" min="0" max="10" step="2"> <input type="range" min="0" max="10" step="2"> <input type="date"> <input type="time"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> <input type="datetime-local"> 189
190. HTML 5 input types type=”email” type=”url” type=”number” 190
191. Pre 1.5 • Checks for valid markup don’t accept new field types • HTML 5 defines: <input type=”text|email|password|number|date| search|url|...”> 191
192. With wicket 1.4 <input type="email"> 192
193. <input type="email"> Unexpected RuntimeException WicketMessage: Component [email] (path = [0:form:email]) must be applied to a tag with [type] attribute matching [text], not [email] [markup = file:/Users/dashorst/Workspaces/windesheim/i18n/target/classes/com/mycompany/HomePage.html Markup The problem is in "file:/Users/dashorst/Workspaces/windesheim/i18n/target/classes/com/mycompany/HomePage.html": <!DOCTYPE html> <html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"> <head> <title>Sign Up</title> <style>label { display:block }</style> </head> <body> <h1><wicket:message key="signup">Sign Up</wicket:message></h1> <form wicket:id="form"> <p> <label for="email">Email Address</label> <input wicket:id="email" type="email" id="email"/> </p> <p> <label for="password">Password</label> <input wicket:id="password" type="password" id="password"/> </p> <p> <label for="confirm">Password Confirmation</label> <input wicket:id="confirm" type="password" id="confirm"/> </p> <input type="submit" value="Create user"/> </form> </body> </html> Component [email] (path = [0:form:email]) must be applied to a tag with [type] attribute matching [text], not [email] 193
194. Wicket 1.5 • EmailTextField • NumberTextField • UrlTextField • RangeTextField 194
195. Improved internals 195
196. Split up core library • Old: • wicket.jar 196
197. Split up core library • Old: • wicket.jar • New: • wicket-requests.jar • wicket-util.jar • wicket-core.jar 197
198. Maven users <dependency> <groupId>org.apache.wicket</groupId> <artifactId>wicket-core</artifactId> <version>1.5.0</version> </dependency> 198
199. Simpler request cycle 199
200. Pre Wicket 1.5 • Decoding request and handling in state machine • Debugging ‘interesting’ • Designed for flexibility • Served its purpose—took on 4 years of engineering 200
201. Wicket 1.5 • Request cycle processing completely rewritten • Rendering code has been improved and simplified • URL rendering simplified: now in one place 201
202. Pre Wicket 1.5 • Custom request cycle: subclass WebRequestCycle • Problematic with add-ons: • HibernateRequestCycle • SecureRequestCycle • ActivityRequestCycle 202
203. New: RequestCycleListener public interface IRequestCycleListener { void onBeginRequest(RequestCycle cycle); void onEndRequest(RequestCycle cycle); void onDetach(RequestCycle cycle); IRequestHandler onException(RequestCycle cycle, Exception ex); } 203
204. RequestCycleListener public class SomeWebApplication extends WebApplication { @Override protected void init() { } @Override public Class<? extends Page> getHomePage() { return SomePage.class; } } 204
205. RequestCycleListener public class SomeWebApplication extends WebApplication { @Override protected void init() { addRequestCycleListener(new AbstractRequestCycleListener() { public void onBeginRequest(RequestCycle cycle) { // do something at the beginning of the request } public void onEndRequest(RequestCycle cycle) { // do something at the end of the request } public void onException(RequestCycle cycle, Exception ex) { // do something here with an exception } }); } @Override public Class<? extends Page> getHomePage() { return SomePage.class; } } 205
206. Switching to HTTPS 206
207. Switching to HTTPS public SecurePage extends WebPage { ... } public MyApplications extends WebApplication { @Override public void init() { super.init(); } } 207
208. Switching to HTTPS @RequireHttps public SecurePage extends WebPage { ... } public MyApplications extends WebApplication { @Override public void init() { super.init(); } } 208
209. Switching to HTTPS @RequireHttps public SecurePage extends WebPage { ... } public MyApplications extends WebApplication { @Override public void init() { super.init(); setRootRequestMapper( new HttpsMapper(getRootRequestMapper(), new HttpsConfig()); } } 209
210. Component event bus 210
211. Component event bus • IEventSource: objects that send events <T> void send(IEventSink sink, Broadcast broadcast, T payload); • IEventSink: objects that receive events void onEvent(IEvent<?> event); • Participants: Components, RequestCycle, Session and Application 211
212. Event bus example Ajax link counter 212
213. This link has been clicked 123 times public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new Link<Void>("link") { @Override public void onClick() { count++; } }); add(new Label("clicks", new PropertyModel<Integer>(this, "clicks"))); } } 213
214. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new Link<Void>("link") { @Override public void onClick() { count++; } }); add(new Label("clicks", new PropertyModel<Integer>(this, "clicks")) .setOutputMarkupId(true)); } } This link has been clicked 123 times 214
215. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { @Override public void onClick(AjaxRequestTarget target) { count++; } }); add(new Label("clicks", new PropertyModel<Integer>(this, "clicks")) .setOutputMarkupId(true)); } } This link has been clicked 123 times 215
216. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { @Override public void onClick(AjaxRequestTarget target) { count++; target.add(getPage().get("count")); } }); add(new Label("count", new PropertyModel<Integer>(this, "clicks")) .setOutputMarkupId(true)); } } This link has been clicked 123 times 216
217. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { @Override public void onClick(AjaxRequestTarget target) { count++; target.add(getPage().get("count")); } }); add(new Label("count", new PropertyModel<Integer>(this, "clicks")) .setOutputMarkupId(true)); } } This link has been clicked 123 times 217
218. • Link needs to know the updatable components • Makes code brittle, hard to maintain • Better: • Let the label refresh itself with each Ajax request Pre-event bus 218
219. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { @Override public void onClick(AjaxRequestTarget target) { count++; target.add(getPage().get("count")); } }); add(new Label("count", new PropertyModel<Integer>(this, "clicks")) .setOutputMarkupId(true)); } } 219
220. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { @Override public void onClick(AjaxRequestTarget target) { count++; send(getPage(), Broadcast.BREADTH, target); } }); add(new Label("count", new PropertyModel<Integer>(this, "clicks")) .setOutputMarkupId(true)); } } 220
221. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { @Override public void onClick(AjaxRequestTarget target) { count++; send(getPage(), Broadcast.BREADTH, target); } }); add(new CountLabel("count", new PropertyModel<Integer>(this, } } 221
222. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { ... }); add(new CountLabel("count", new PropertyModel<Integer>(this, } public class CountLabel extends Label { } } 222
223. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { ... }); add(new CountLabel("count", new PropertyModel<Integer>(this, } public class CountLabel extends Label { public CountLabel(String id, IModel<Integer> model) { super(id, model); } } } 223
224. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { ... }); add(new CountLabel("count", new PropertyModel<Integer>(this, } public class CountLabel extends Label { public CountLabel(String id, IModel<Integer> model) { super(id, model); setOutputMarkupId(true); } } } 224
225. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { ... }); add(new CountLabel("count", new PropertyModel<Integer>(this, } public class CountLabel extends Label { public CountLabel(String id, IModel<Integer> model) { super(id, model); setOutputMarkupId(true); } @Override public void onEvent(IEvent<?> event) { super.onEvent(event); } } } 225
226. public class ClickCountPage extends WebPage { private int clicks = 0; public ClickCount() { add(new AjaxLink<Void>("link") { ... }); add(new CountLabel("count", new PropertyModel<Integer>(this, } public class CountLabel extends Label { public CountLabel(String id, IModel<Integer> model) { super(id, model); setOutputMarkupId(true); } @Override public void onEvent(IEvent<?> event) { super.onEvent(event); if (event.getPayload() instanceof AjaxRequestTarget) { AjaxRequestTarget target = (AjaxRequestTarget) event.getPayload(); target.add(this); } } } } 226
227. • A bit more code • Updates are now completely decoupled • Make the payload type safe and meaningful: no AjaxRequestTarget, but CountEvent • AJAX requests trigger a default event with an AjaxRequestTarget as payload Post-event bus 227
228. And much, much more: http://cwiki.apache.org/WICKET/ migration-to-wicket15.html 228
229. One more thing... the next release of Wicket 229
230. Apache Wicket 6 230
231. • Java 6 • Servlet 3 • CDI integration (conversations, @Inject) • JQuery integration • OSGi support • Shorter release cycle! Next wicket? 231
232. Thank you! Questions? Ask! 232