Wicket et ses fonctionnalités de templating

[This note is also available in English.]

Wicket fournit des fonctionnalités de templating. Rien de bien folichon, mais c’est tout de même bien pratique, surtout quand il faut intégrer du JavaScript.

Ces fonctionnalités sont cependant très peu discutées voir même, je suspecte, globalement inconnues. Aussi, creusons un peu la chose!

Comme tout système de templating, tout tourne autour de texte contenant des variables, définies par ${variable} et dont les valeurs sont données via Java.

Voyons un exemple simple, un fichier de template nommé javascript.tpl:

alert('${variable}');

Wicket permet d’aisément accéder à ces templates en tant que ressources mises dans des packages Java, via la classe PackagedTextTemplate:

public PackagedTextTemplate(final Class clazz, final String fileName)

Par exemple:

PackagedTextTemplate jsTemplate = new PackagedTextTemplate(this.getClass(), "javascript.tpl");

Ainsi, le template se trouve à côté de la classe Java et de l’html l’utilisant, rendant le tout aisé d’utilisation.

Les variables sont fournies au moyen d’une simple Map:

Map parameters = new HashMap();
parameters.put("variable","test working");

Au final ce template trônera certainement au milieu d’html. Aussi Wicket fournit plusieurs options pour cela:

• contribution au header html:

  add(TextTemplateHeaderContributor.forJavaScript(jsTemplate, new  Model((Serializable) parameters)));

• accolé à des éléments du body html:
  Java:

  Label myScript = new Label("myScript", new JavaScriptTemplate(jsTemplate).asString(parameters));
  myScript.setEscapeModelStrings(false);
  add(myScript);

  Html :

  <wicket:container wicket:id="myScript"></wicket:container>

Vous avez sans doute remarqué que, dans chacun des cas, je ne fournis pas le tag qui devrait entourer le tout. Pas d’inquiétude à avoir, Wicket le fait pour vous.
L’html résultant est en effet:

<script type="text/javascript"><!--/*--><![CDATA[/*><!--*/
alert('test working');
/*-->]]>*/</script>

Si le template contenait plutôt du CSS, il faut juste utiliser un CssTemplate au lieu du JavaScriptTemplate.

Quelques info supplémentaires sont disponibles sur le wiki wicket: Including CSS resources.

++
joseph

Playing with Wicket’s templates

[Ce billet est également disponible en français.]

Wicket comes with some templating facilities. Nothing fancy, but still they’re quite handy, especially when integrating JavaScript components.

These functionalities aren’t much advertised and I would say even quite unknown. So, let’s dig in !

Basically, this templating is about some text containing variables, for example ${variable}, whose values are provided through Java code.

Let’s take a simple example, a template file named javascript.tpl containing :

alert('${variable}');

Wicket is nice enough to provide an easy to access the templates as package resources, through the PackagedTextTemplate class :

public PackagedTextTemplate(final Class clazz, final String fileName)

For example :

PackagedTextTemplate jsTemplate = new PackagedTextTemplate(this.getClass(), "javascript.tpl");

Thus the template can be next to the .html page and the Java class using it, making the whole quite cohesive.

Providing the variables is done through a simple Map :

Map parameters = new HashMap();
parameters.put("variable","test working");

And then, you most probably want to include this template in some html. Wicket provides you different options :

• as an header contribution :

  add(TextTemplateHeaderContributor.forJavaScript(jsTemplate, new  Model((Serializable) parameters)));

• directly next to some element in the html file:
  Java side :

  Label myScript = new Label("myScript", new JavaScriptTemplate(jsTemplate).asString(parameters));
  myScript.setEscapeModelStrings(false);
  add(myScript);

  Html side :

  <wicket:container wicket:id="myScript"></wicket:container>

You may have noticed that, in both cases, I didn’t provided the surrounding script tag (and the appropriate inner wrapping). Fear not, Wicket does it for you !
Indeed, the rendered html is :

<script type="text/javascript"><!--/*--><![CDATA[/*><!--*/
alert('test working');
/*-->]]>*/</script>

If the template was about some CSS stuff, one would just need to wrap it using a CssTemplate instead of the JavaScriptTemplate.

A bit more info are available there Including CSS resources.

++
joseph

Defining JavaScript variables…

hi

Do you know the difference in JavaScript between these variables declarations :

- myVar = "foo"

- var myVarVar = "foo"

In fact, the first one will have an unlimited scope, and thus accessible from the outer world, whereas the second one will only be accessible at this level and below.

As such, this is why the line "$.fn.myFunction = function(){bla}; " is used to declare new function to the jQuery object.

Similarly, make sure you use "var" in front of your own JavaScript variables to avoid name collisions !

Hope it helps !

++

PS : funny how I’ve plenty of long posts in mind but not yet written (out of laziness/lack of time) while at the same time I’m eager to write small ones on stuff I’ve just discovered… May be I should consider twitter more closely !

PPS : the (french) source of this post : developpez.com

Book review : Learning JQuery

I recently read Learning JQuery, the version of 2007. I was reading it as a casual reader, just to get a better hand on JQuery.

My feeling about it is the following : it seems good at providing technical details but fails at "empowering" the reader and providing the big picture. I say "it seems" because I had difficulties to keep reading it, since I didn’t feel it attractive. So I’ve finished it through "scanning"… From an avid reader like me, that’s really an unusual move. Furthermore, I didn’t find advices/best practices about plugin usage and integration, which I was especially looking for.

Conclusion : grab it only if you’re an avid javascript developer willing to develop plugins and not afraid of connecting the chapters together yourself…

Ps : With further use of JQuery and hence of this book, I now realize that its index is very poor