Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Présentation Wicket <br />JUG Lausanne – 11/02/2010<br />Christian Blavier<br />1<br />© OCTO 2010 <br />
Je me présente<br />Christian Blavier<br />Architecte chez OCTO Technology<br />Mes dadas :<br /><ul><li>Industrialisation...
Méthodologies agiles
Ruby On Rails
NoSQL</li></ul>2<br />© OCTO 2010 <br />
Qu’est-ce que Wicket ?<br />3<br />© OCTO 2010 <br />
Ou bien ?<br />4<br />© OCTO 2010 <br />
Non, c’est plutôt<br />5<br />© OCTO 2010 <br />
Gènes de Wicket<br /><ul><li>Framework d’IHM WEB
Open-Source (Apache)
Java + HTML … (separation of concerns)
Maîtrise du HTML
Orienté composant</li></ul>6<br />© OCTO 2010 <br />
Hello World !<br />&lt;h1 wicket:id=“msg”&gt;[Textgoeshere]&lt;/h1&gt;<br />+<br />add(new Label(“msg”, “Hello World !”));...
Projet Wicket minimal<br />pom.xml<br />src/main<br /> /webapp/WEB-INF/web.xml<br /> /java<br /> ...
J’ai fait le choix de mettre les fichiers HTML dans « resources »
Attention Netbeans ne supporte pas le rechargement à chaud des fichiers HTML en dehors du répertoire webapp (configuration...
Twitter like
Spring / Hibernate
JUnit / Unitils
Maven / Jetty / HSQLDB / Jrebel</li></ul>9<br />© OCTO 2010 <br />Part 0<br />Hello World++<br />Part 2<br />Modèles avanc...
Maintenant la démo<br />10<br />© OCTO 2010<br />Twicker<br />Application<br />HomePage.java<br /> .htm...
Pour jouer avec l’application<br />Télécharger les sources<br />git clone git://github.com/cblavier/twicker.git<br />11<br...
Part 0 / Hello world++<br /><ul><li>Prévisualisation HTML
Idéal pour collaborer avec des graphistes
S’il s’agit d’un enjeu important sur votre projet, il faudra faire des compromis
Pensez à wicket:remove !
Intégration des ressources graphiques
ResourceReference
wicket:link, référence automatiquement les ressources contenues dans le package courant
Tests unitaires
Utilisation de WicketTester
Upcoming SlideShare
Loading in …5
×

Wicket - JUG Lausanne

3,912 views

Published on

Présentation de 2h sur Wicket donnée le 11/02/2010 au JUG Lausanne.

A regarder avec les sources de la démo ici :
http://github.com/cblavier/twicker

Published in: Technology
no profile picture user

Wicket - JUG Lausanne

  1. 1. Présentation Wicket <br />JUG Lausanne – 11/02/2010<br />Christian Blavier<br />1<br />© OCTO 2010 <br />
  2. 2. Je me présente<br />Christian Blavier<br />Architecte chez OCTO Technology<br />Mes dadas :<br /><ul><li>Industrialisation des développements
  3. 3. Méthodologies agiles
  4. 4. Ruby On Rails
  5. 5. NoSQL</li></ul>2<br />© OCTO 2010 <br />
  6. 6. Qu’est-ce que Wicket ?<br />3<br />© OCTO 2010 <br />
  7. 7. Ou bien ?<br />4<br />© OCTO 2010 <br />
  8. 8. Non, c’est plutôt<br />5<br />© OCTO 2010 <br />
  9. 9. Gènes de Wicket<br /><ul><li>Framework d’IHM WEB
  10. 10. Open-Source (Apache)
  11. 11. Java + HTML … (separation of concerns)
  12. 12. Maîtrise du HTML
  13. 13. Orienté composant</li></ul>6<br />© OCTO 2010 <br />
  14. 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. 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. 16. J’ai fait le choix de mettre les fichiers HTML dans « resources »
  17. 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. 18. Twitter like
  19. 19. Spring / Hibernate
  20. 20. JUnit / Unitils
  21. 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. 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. 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. 24. Part 0 / Hello world++<br /><ul><li>Prévisualisation HTML
  25. 25. Idéal pour collaborer avec des graphistes
  26. 26. S’il s’agit d’un enjeu important sur votre projet, il faudra faire des compromis
  27. 27. Pensez à wicket:remove !
  28. 28. Intégration des ressources graphiques
  29. 29. ResourceReference
  30. 30. wicket:link, référence automatiquement les ressources contenues dans le package courant
  31. 31. Tests unitaires
  32. 32. Utilisation de WicketTester
  33. 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. 34. Part 1 / Première liste de twitts <br />The component Triad ! <br />html markup / component / model<br />13<br />© OCTO 2010 <br />
  35. 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. 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. 37. Part 1 / Première liste de twitts <br /><ul><li>Intégration Spring : http://cwiki.apache.org/WICKET/spring.html#Spring-Solutions
  38. 38. Application Object approach : à oublier
  39. 39. Proxy Approach : beaucoup trop verbeux
  40. 40. Annotation Approach : meilleure solution !
  41. 41. Notes :
  42. 42. On peut injecter des beans dans la WicketApplication, voir exemple
  43. 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. 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. 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. 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. 47. Part 2 / Modèles avancés<br /><ul><li>Quelques modèles existant :</li></ul>20<br />© OCTO 2010 <br />
  48. 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. 49. Part 3 / Formulaires<br />22<br />© OCTO 2010<br />
  50. 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. 51. Part 4 et 5 / Ajax<br /><ul><li>Des composants Ajax disponibles
  52. 52. Des Behaviors Ajax
  53. 53. Ne pas oublier le outputMarkupId !
  54. 54. Utilisation de librairies de composants tierces</li></ul>24<br />© OCTO 2010<br />
  55. 55. Part 5 / Passage d’état<br />25<br />© OCTO 2010<br /><ul><li>HTTP est un framework sans état
  56. 56. Passer un état d’un écran à un autre se fait traditionnellement de 2 manières différentes
  57. 57. Passage de données dans l’URL
  58. 58. Passage de données par la session HTTP
  59. 59. Wicket utilise la deuxième solution, et s’en occupe pour nous
  60. 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. 61. Autres fonctionnalités intéressantes <br /><ul><li>Gestion du layout
  62. 62. Attention à la prévisualisation
  63. 63. Création de composants
  64. 64. Extrêmement simple : un fichier Java et un extrait HTML associé
  65. 65. Maitrise des URLs
  66. 66. Permet de créer des URLS RESTFUL
  67. 67. Fonctionne sur GAE
  68. 68. Nécessite 2 ou 3 lignes de configuration pour désactiver la persistance fichier</li></ul>26<br />© OCTO 2010<br />
  69. 69. Avantages / inconvénients<br /><ul><li>Avantages
  70. 70. Framework simple, facile d’accès
  71. 71. Grande maîtrise du HTML produit
  72. 72. Collaboration développeurs / web designers inédite
  73. 73. POO aisée, création de composants intuitive
  74. 74. Bonne productivité
  75. 75. Communauté importante
  76. 76. Inconvénients
  77. 77. Documentation en ligne très perfectible
  78. 78. Toutes les situations ne sont pas testables facilement
  79. 79. Peu adapté pour des IHMs dynamiques (ex: interfaces à la GMail)
  80. 80. Un framework RIA de plus ?</li></ul>27<br />© OCTO 2010<br />
  81. 81. Et par rapport aux autres frameworks ?<br /><ul><li>Par rapport à JSF
  82. 82. Wicket est beaucoup plus simple dans l’ensemble (cycle de vie, ajax, création de composants …)
  83. 83. Mauvaise maitrise du HTML en JSF (exacerbée par l’utilisation de frameworks comme RichFaces)
  84. 84. Par rapport à Tapestry
  85. 85. Extrêmement similaires dans leur approche
  86. 86. Wicket repose plus sur le Java que tapestry et à l’avantage de mettre en œuvre du simple HTML
  87. 87. On peut considérer Wicket comme un successeur de Tapestry
  88. 88. Par rapport à GWT
  89. 89. Les deux prônent un retour au Java, à la POO et au Swing code-style
  90. 90. Wicket permet de maîtriser son HTML là où GWT nous dispense d’en écrire
  91. 91. GWT est probablement plus productif</li></ul>28<br />© OCTO 2010<br />
  92. 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. 93. Maturité<br />30<br />© OCTO 2010<br />Wicket<br />Une version 1.5 arrive avec notamment une refonte du WicketTester<br />
  94. 94. Ressources conseillées<br /><ul><li>http://wicketinaction.com/
  95. 95. http://martijndashorst.com/blog/
  96. 96. http://chillenious.wordpress.com/
  97. 97. http://yeswicket.com/</li></ul>31<br />© OCTO 2010<br />MUST READ !<br />(merci pour les exemples !)<br />
  98. 98. C’est fini ! Des questions ? <br />32<br />© OCTO 2010<br />

×