Si vous avez l'habitude de rajouter des fichiers Javascript ou CSS à vos pages depuis vos composants Wicket, vous avez sûrement déjà utilisé la méthode getHeaderContribution :

add(JavascriptPackageResource.getHeaderContribution(MyComponent.class, "js/MyComponent.js"));

Ou encore, sur les anciennes version de Wicket :

add(HeaderContributor.forJavaScript(MyComponent.class, "MyComponent.js");

Cependant, les fichiers Javascript (ou CSS) sont ajoutés tel quels. Nous allons voir ici comment personnaliser ces fichiers, en rajoutant des variables à nos fichiers initialement statiques.

Nous allons pour cela utiliser un TextTemplateHeaderContributor à la place de notre HeaderContributor, en passant un modèle contenant la liste de nos variables.

IModel<Map<String, Object>> variablesModel = new AbstractReadOnlyModel<Map<String, Object>>() {
 
	private Map<String, Object> variables;
 
	public Map<String, Object> getObject() {
		if (variables == null) {
			this.variables = new MiniMap<String, Object>(3);
			variables.put("markupId", MyComponent.this.getMarkupId() );
			variables.put("height", calculateHeight() );
			variables.put("width", calculateWidth() );
		}
		return variables;
	}
 
 
};
 
add(TextTemplateHeaderContributor.forJavaScript(MyComponent.class, "js/MyComponent.js", variablesModel));

Ensuite, il est facile de récupérer la valeur de nos variables dans notre fichier Javascript :

$(function() {
	$("#${markupId}").dialog({
		height: ${height},
		width: ${width}
	});
});

Nous verrons un cas d'application avec les templates Javascript et JQuery dans un prochain article.