1.
Présentation Wicket <br />JUG Lausanne – 11/02/2010<br />Christian Blavier<br />1<br />© OCTO 2010 <br />

2.
Je me présente<br />Christian Blavier<br />Architecte chez OCTO Technology<br />Mes dadas :<br /><ul><li>Industrialisation des développements

3.
Méthodologies agiles

4.
Ruby On Rails

5.
NoSQL</li></ul>2<br />© OCTO 2010 <br />

6.
Qu’est-ce que Wicket ?<br />3<br />© OCTO 2010 <br />

7.
Ou bien ?<br />4<br />© OCTO 2010 <br />

8.
Non, c’est plutôt<br />5<br />© OCTO 2010 <br />

9.
Gènes de Wicket<br /><ul><li>Framework d’IHM WEB

10.
Open-Source (Apache)

11.
Java + HTML … (separation of concerns)

12.
Maîtrise du HTML

13.
Orienté composant</li></ul>6<br />© OCTO 2010 <br />

14.
Hello World !<br />&lt;h1 wicket:id=“msg”&gt;[Textgoeshere]&lt;/h1&gt;<br />+<br />add(new Label(“msg”, “Hello World !”));<br />=<br />&lt;h1&gt;Hello World !&lt;/h1&gt;<br />7<br />© OCTO 2010 <br />2 fichiers : HelloWorld.java et HelloWorld.html<br />

15.
Projet Wicket minimal<br />pom.xml<br />src/main<br /> /webapp/WEB-INF/web.xml<br /> /java<br /> /com/octo/wicket/HelloWorld.java<br /> /com/octo/wicket/HelloWorld.html<br /> /com/octo/wicket/WicketApplication.java<br />8<br />© OCTO 2010 <br /><ul><li>Maven en natif !

16.
J’ai fait le choix de mettre les fichiers HTML dans « resources »

17.
Attention Netbeans ne supporte pas le rechargement à chaud des fichiers HTML en dehors du répertoire webapp (configuration Maven possible)</li></li></ul><li>Maintenant la démo<br /><ul><li>Tour de l’application

18.
Twitter like

19.
Spring / Hibernate

20.
JUnit / Unitils

21.
Maven / Jetty / HSQLDB / Jrebel</li></ul>9<br />© OCTO 2010 <br />Part 0<br />Hello World++<br />Part 2<br />Modèles avancés<br />Part 4<br />AJAX<br />Part 1<br />Liste de twitts<br />Part 3<br />Validation<br />Part 5<br />jQuery<br />

22.
Maintenant la démo<br />10<br />© OCTO 2010<br />Twicker<br />Application<br />HomePage.java<br /> .html<br />Instancie<br />Message<br />Message<br />Poste des messages<br />Récupère des messages<br />Message<br />TwickerService<br />Message<br />Persistance<br />(Hibernate)<br />Message<br />Message<br />HSQL<br />DB<br />

23.
Pour jouer avec l’application<br />Télécharger les sources<br />git clone git://github.com/cblavier/twicker.git<br />11<br />© OCTO 2010<br />Configurer jRebel(optionnel)<br />export MAVEN_OPTS=&quot;-noverify –javaagent:$JREBEL_DIR/jrebel.jar<br />-Drebel.wicket_plugin=true $MAVEN_OPTS&quot;<br />Lancer l’application<br />mvnjetty:run<br />

24.
Part 0 / Hello world++<br /><ul><li>Prévisualisation HTML

25.
Idéal pour collaborer avec des graphistes

26.
S’il s’agit d’un enjeu important sur votre projet, il faudra faire des compromis

27.
Pensez à wicket:remove !

28.
Intégration des ressources graphiques

29.
ResourceReference

30.
wicket:link, référence automatiquement les ressources contenues dans le package courant

31.
Tests unitaires

32.
Utilisation de WicketTester

33.
Puissant mais brouillon et mal documenté</li></ul>12<br />© OCTO 2010 <br />removeLink.add(new Image(&quot;icon&quot;, <br />new ResourceReference(DiscountsEditList.class, &quot;remove_icon.gif&quot;)));<br />

34.
Part 1 / Première liste de twitts <br />The component Triad ! <br />html markup / component / model<br />13<br />© OCTO 2010 <br />

35.
Part 1 / Première liste de twitts <br />14<br />© OCTO 2010 <br />Wicket component = MVC controller + MVC view<br />Wicket model = MVC model<br />

36.
Part 1 / Première liste de twitts <br />Les modèles dynamiques rendent la gestion du binding transparente<br />15<br />© OCTO 2010 <br />

37.
Part 1 / Première liste de twitts <br /><ul><li>Intégration Spring : http://cwiki.apache.org/WICKET/spring.html#Spring-Solutions

38.
Application Object approach : à oublier

39.
Proxy Approach : beaucoup trop verbeux

40.
Annotation Approach : meilleure solution !

41.
Notes :

42.
On peut injecter des beans dans la WicketApplication, voir exemple

43.
Petite gymnastique à effectuer pour les tests afin d’injecter des mocks</li></ul>16<br />© OCTO 2010 <br />privateMock&lt;TwickerService&gt; twickerServiceMock;<br />@Before<br />public voidbefore() {<br /> tester = new WicketTester(new TwickerTestApplication());<br />AnnotApplicationContextMockmockContext = (<br /> (TwickerTestApplication) tester.getApplication()).getMockContext();<br />mockContext.putBean(&quot;defaultTwickerService&quot;, twickerServiceMock.getMock());<br />}<br />

44.
Part 2 / Modèles avancés<br />17<br />© OCTO 2010 <br />Page<br />Label<br />Model<br />Label<br />ListView<br />Model<br />ListView<br />PageStore<br />render<br />getObject<br />Serialization<br />render<br />getObject<br />Les données contenues dans la page sont sérialisées en session.<br />Attention à l’empreinte mémoire !<br />

45.
Part 2 / Modèles avancés<br />18<br />© OCTO 2010 <br />Page<br />Label<br />Model<br />Label<br />ListView<br />Model<br />ListView<br />PageStore<br />render<br />getObject<br />Serialization<br />getObject<br />render<br />detach<br />detach<br />detach<br />detach<br /><ul><li>Il faut considérer le modèle Wicket comme un cache de niveau 1 (durée d’une requête HTTP)

46.
Les modèles volumineux (par ex : données issues de la base) ne doivent pas être sérialisés en session mais être détachés</li></li></ul><li>Part 2 / Modèles avancés<br />19<br />© OCTO 2010 <br />Equivalents !<br />Imodel cheeseModel = new LoadableDetachableModel(){<br /> @Override<br /> public Object load() {<br /> return dao.getCheeses();<br /> } <br />}<br />

47.
Part 2 / Modèles avancés<br /><ul><li>Quelques modèles existant :</li></ul>20<br />© OCTO 2010 <br />

48.
Part 2 / Modèles avancés<br />Possibilité d’imbriquer les modèles<br />21<br />© OCTO 2010<br />LoadableCheeseModelcheeseModel = new LoadableCheeseModel(cheeseId);<br />PropertyModelnameModel = new PropertyModel(cheeseModel, “name”);<br />String name = (String) nameModel.getObject();<br />nameModel.detach(); <br />

49.
Part 3 / Formulaires<br />22<br />© OCTO 2010<br />

50.
Part 3 / Validation<br />23<br />© OCTO 2010 <br />Validateur fourni<br />Validateur custom<br />form.add(new TextField(&quot;age&quot;)<br /> .setRequired(true)<br /> .setLabel(new Model(&quot;age&quot;))<br /> .add(NumberValidator.minimum(18)));<br />public class MyValidatorextendsAbstractValidator {<br /> ...<br />}<br />FeedbackPanel<br />&lt;!-- html --&gt; <br />&lt;divwicket:id=&quot;feedback&quot;&gt;&lt;/div&gt;<br />/* Java */ <br />add(new FeedbackPanel(&quot;feedback&quot;));<br />Messages<br /># Index.propertiesRequired=Provide a ${label} or else...<br />myform.name.Required=You have to provide a name.<br />password.Required=You have to provide a password.<br />phonenumber.Required=A telephonenumberisobligatory.<br />

51.
Part 4 et 5 / Ajax<br /><ul><li>Des composants Ajax disponibles

52.
Des Behaviors Ajax

53.
Ne pas oublier le outputMarkupId !

54.
Utilisation de librairies de composants tierces</li></ul>24<br />© OCTO 2010<br />

55.
Part 5 / Passage d’état<br />25<br />© OCTO 2010<br /><ul><li>HTTP est un framework sans état

56.
Passer un état d’un écran à un autre se fait traditionnellement de 2 manières différentes

57.
Passage de données dans l’URL

58.
Passage de données par la session HTTP

59.
Wicket utilise la deuxième solution, et s’en occupe pour nous

60.
Rend l’approche POO beaucoup plus naturelle</li></ul>public class EditPersonLink extends Link {<br /> private final Person person;<br /> public EditPersonLink(String id, Person person) {<br /> super(id);<br /> this.person = person; <br /> }<br /> public void onClick() {<br /> setResponsePage(new EditPersonPage(person)); <br /> }<br />}<br />

61.
Autres fonctionnalités intéressantes <br /><ul><li>Gestion du layout

62.
Attention à la prévisualisation

63.
Création de composants

64.
Extrêmement simple : un fichier Java et un extrait HTML associé

65.
Maitrise des URLs

66.
Permet de créer des URLS RESTFUL

67.
Fonctionne sur GAE

68.
Nécessite 2 ou 3 lignes de configuration pour désactiver la persistance fichier</li></ul>26<br />© OCTO 2010<br />

69.
Avantages / inconvénients<br /><ul><li>Avantages

70.
Framework simple, facile d’accès

71.
Grande maîtrise du HTML produit

72.
Collaboration développeurs / web designers inédite

73.
POO aisée, création de composants intuitive

74.
Bonne productivité

75.
Communauté importante

76.
Inconvénients

77.
Documentation en ligne très perfectible

78.
Toutes les situations ne sont pas testables facilement

79.
Peu adapté pour des IHMs dynamiques (ex: interfaces à la GMail)

80.
Un framework RIA de plus ?</li></ul>27<br />© OCTO 2010<br />

81.
Et par rapport aux autres frameworks ?<br /><ul><li>Par rapport à JSF

82.
Wicket est beaucoup plus simple dans l’ensemble (cycle de vie, ajax, création de composants …)

83.
Mauvaise maitrise du HTML en JSF (exacerbée par l’utilisation de frameworks comme RichFaces)

84.
Par rapport à Tapestry

85.
Extrêmement similaires dans leur approche

86.
Wicket repose plus sur le Java que tapestry et à l’avantage de mettre en œuvre du simple HTML

87.
On peut considérer Wicket comme un successeur de Tapestry

88.
Par rapport à GWT

89.
Les deux prônent un retour au Java, à la POO et au Swing code-style

90.
Wicket permet de maîtriser son HTML là où GWT nous dispense d’en écrire

91.
GWT est probablement plus productif</li></ul>28<br />© OCTO 2010<br />

92.
Pourquoi maîtriser le HTML ?<br />29<br />© OCTO 2010<br />Design artistique<br />Référencement<br />Compatibilité avec les navigateurs<br />Accessibilité<br />

93.
Maturité<br />30<br />© OCTO 2010<br />Wicket<br />Une version 1.5 arrive avec notamment une refonte du WicketTester<br />

94.
Ressources conseillées<br /><ul><li>http://wicketinaction.com/

95.
http://martijndashorst.com/blog/

96.
http://chillenious.wordpress.com/

97.
http://yeswicket.com/</li></ul>31<br />© OCTO 2010<br />MUST READ !<br />(merci pour les exemples !)<br />

98.
C’est fini ! Des questions ? <br />32<br />© OCTO 2010<br />