GWT et la gestion des images

GWT arrive avec une collection d’outils très intéressante pour faciliter le développement d’applications. Encore faut-il les connaître pour pouvoir les utiliser. Je vous propose donc dans ce billet de découvrir quelques-unes des facilités offertes par GWT pour la gestion des images.

L’interface ClientBundle

ClientBundle définit un moyen commun de gérer les ressources externes avec GWT, que ce soit des images, du texte, des feuilles de styles… tout cela afin d’optimiser le code produit lors de la compilation et de mutualiser la gestion des ressource, notamment en limitant le nombre de requêtes HTTP à effectuer et la bande passante utilisée.

La première chose à faire pour utiliser ClientBundle est d’ajouter le tag suivant au fichier gwt.xml de l’application

Ensuite, il suffit de créer une interface qui va étendre ClientBundle. Et par la même occasion, créer une instance de cette interface en faisant appel à la méthode GWT.create(…)

public interface ImageResources extends ClientBundle {

    public static final ImageResources INSTANCE = GWT.create(ImageResources.class);

}

A ce moment là, nous avons la base, associons maintenant quelques images simples

NB : zenika1.png a une taille originale de 1280×800 pour 83,7 Ko
zenika1-small.png a une taille originale de 128×80 pour 3,46 Ko

public interface ImageResources extends ClientBundle {

    public static final ImageResources INSTANCE = GWT.create(ImageResources.class);

    @Source("zenika1.png")
    ImageResource zenika1Large();

    @Source("zenika1-small.png")
    ImageResource zenika1Small();
}

..et rajoutons les dans notre panel

Image largeImage = new Image(ImageResources.INSTANCE.zenika1Large());
demo1.add(largeImage);

Image smallImage = new Image(ImageResources.INSTANCE.zenika1Small());
demo1.add(smallImage);

Vous voyez donc qu’il suffit de créer une méthode de l’interface qui renvoie un objet de type ImageResource et d’y ajouter l’annotation @Source pour préciser le chemin de notre image. (L’annotation est facultative si le nom de la méthode est le même que celui de l’image et que l’interface ImageResources et les images se trouvent dans le même package.) Voici le rendu.

Les optimisations GWT

Ok, c’est bien beau tout ça, mais c’est quoi l’avantage par rapport à une simple Image GWT à laquelle je passe le path de l’image. Nous y arrivons…

Pour voir la différence, il faut regarder le code généré :

• Pour l’image de gauche (le grand format), voici le code produit

Pour toutes les images dont la taille est supérieure à 32 Ko (ce qui est le cas de celle-ci), gwt les regroupe dans le fichier cache.png que l’on aperçoit ici dans la balise style.

• Pour l’image de droite (le petit format), voici le code produit (du moins une partie)

Dans le cas où la taille de l’image est inférieure à 32 Ko, l’image est embarqué directement au sein de la page HTML, encodée en base64

Redimensionner des images

Une autre fonctionnalité intéréssante est de redimensionner des images directement dans le code, en utilisant simplement des annotations

Dans l’exemple, suivant, à partir d’une même image source, nous allons créer 3 images de tailles différentes

@Source("zenika1.png")
@ImageOptions(height = 80, width = 128)
ImageResource zenikaSmall();

@Source("zenika1.png")
@ImageOptions(height = 240, width = 384)
ImageResource zenikaMedium();

@Source("zenika1.png")
@ImageOptions(height = 640, width = 1024)
ImageResource zenikaLarge();

Ce qui donne une fois que nous avons ajouté les images à notre page :

Pour aller plus loin…

L’annotation ImageOptions fournit des options supplémentaires qui ne sont utilisés que dans certains rares cas.

• flipRtl : true | false

Définit si l’image doit être basculé ou non selon l’axe des ordonnées, dans le cas où l’écriture sélectionné est de type « droite vers gauche »

Admettons que l’on ait spécifié cette option avec la valeur true, alors, si la méthode com.google.gwt.i18n.client.LocaleInfo.isRTL() renvoie false (le sens de l’écriture est de gauche à droite), l’image affichée sera :

Si l’écriture est de droite à gauche, l’image affichée sera

• repeatStyle : None | Horizontal | Vertical | Both

cette option spécifie à GWT la façon de « bundle-iser » l’image dans le cas où celle-ci sera soit répété de manière horizontale ou verticale. Cette option est utilisé conjoitement avec l’attribut @sprite qui permet de définir des sprites css via GWT.

Conclusion

Je vous conseille donc vivement d’utiliser la notion de Bundle pour gérer vos images dans vos applications GWT. Cela permet tout d’abord de simplifier votre code en n’ayant à spécifier les caractéristiques de votre image (chemin, taille) à un seul endroit. Ensuite, cela permet d’améliorer les performances de votre application, en particulier si celle-ci regroupe de nombreuses icônes et images utilisés à différents endroits.

Le code source de cette article est disponible sur Github ici : https://github.com/julienvey/GWT-Stuff/tree/master/images