CSSResources class name obfuscated

Depuis la version 2.0 de GWT, l'optimisation des ressources est prise en charge par ClientBundle. Pour les ressources, on peut utiliser CSSResources.
Grâce au mécanisme de Deffered binding, seuls les styles CSS utiles pour le navigateur sont téléchargés. De plus, les images sont embarquées dans les styles par encodage en base64. Il y a aussi un mécanisme d'encryption des noms de classes. Ce dernier mécanisme est intéressant pour optimiser la taille des styles, et aussi pour rendre opaque le code source de la page.
Cependant, ce mécanisme peut être gênant, notamment si l'on veut autoriser la surcharge des styles grâce à un simple fichier CSS. Ce qui a l'avantage de ne pas avoir à connaitre GWT et à ne pas passer par une phase de recompilation. C'est l'idéal pour confier le relooking d'une application à une web designer.

Mais pour cela, il faut que les noms des classes CSS soient en clair.

En fait, la solution est simple car GWT permet de le faire nativement, mais on peut passer quelque temps pour trouver la solution; Donc la voici : il faut utiliser l'annotation @external dans votre CSS référencé par votre ClientBundle.

Cette annotation sert habituellement à surcharger un style externe dans un fichier CSS référencé par ClientBundle au travers d'un CSSResource (par exemple .gwt-Label). Pour que ce soit possible il faut que le nom de la classe ne soit pas crypté, et il ne faut pas que le compilateur vérifie sa présence dans l'interface CSSResource. C'est ce que fait l'annotation @external.

Mais il est aussi possible d'utiliser cette annotation pour demander à GWT de ne pas encrypter un ensemble de noms de classes. Pour cela, il faut mettre l'annotation @external au début du fichier CSS et non devant le nom de la classe. Il est ausi possible d'utiliser le caractère joker *.

Voici un exemple qui permet de garder en clair les noms des classes qui commencent par .monwidget : @external .monwidget *.

Voila ce n'est pas compliqué, j'espère que cet article vous fera gagner du temps.

GWT DevMode everywhere

The DevMode appeared with GWT 2.0. With DevMode you can run in debug an GWT application. The immediate consequence is the dramatic increase of coding productivity.
It is very easy to use it thanks to the Eclipse Google plugin (Debug as Web application). The application run on embedded Jetty server and the DevMode mechanism is activated (communication between
client and server through a browser extension).

But when the application run in an external server, how to use DevMode ?
For example, a JBoss server that hosts an application based on Struts and improved by GWT components.
Well the solution is pretty simple, just start the GWT module in debug module via Eclipse Google plugin (as usual) and add the following parameter on each call of you pages : gwt.codesvr = 127.0.0.1:9997 (if your server is local).
That's it.

We can therefore use the GWT DevMode in differents technicals contexts : different JEE applications servers (whith JSP, JSF,GSP), but also PHP server PHP or ASP server.

Enjoy, and be productive.

Personnaliser ses cartes avec Google Maps API V3

Introduction

Dans le cadre d'un projet que je suis en train de mener, il y a le besoin de représenter une mappemonde avec un certain nombre de pays à mettre en évidence.
C'est un besoin assez classique pour un site web, mais cela peut s’avérer fastidieux et chronophage.
Pour ma part, j'ai rapidement pensé à utiliser l'API de Google Maps. Mais il me fallait styliser ma mappemonde.
Je devrais afficher seulement certains éléments, en l’occurrence seulement les terres et les mers. Mais il me fallait aussi changer les couleurs des mers et des terres, plus autoriser seulement un contrôle réduit sur la mappemonde.
Enfin, pour mettre en évidence les pays souhaités, ceux-ci devaient être affichés dans une couleur particulière et cerise sur le gâteau avec le changement de cette couleur sur l'évènement "onmouseover".

Google Maps API V3

Depuis peu, la version 3 de l'API Google Maps a vu le jour et Google a déclaré la version 2 comme dépréciée. Je me suis donc penché sur cette API.
Tout d'abord, il existe deux façons d'utiliser l'API, soit directement en Javascript, soit avec GWT via le module "Google Maps 1.1 Library". Malheureusement cette dernière ne supporte pas encore la version 3 de l'API Google Maps. Il faudra donc attendre une mise à jour pour bénéficier du confort de GWT.

Dans ce billet, je vais montrer comment utiliser l'API en Javascript. L'API Javascript est bien documentée et très claire. Donc, la première étape est de charge l'API de la manière suivante :



Le paramètre sensor permet d'indiquer s'il faut utiliser la fonctionnalité de géolocalisation du navigateur.
Ensuite, il faut créé l'objet Map en donnant l'élément du DOM qui va recevoir la carte et les options de la carte.



A partir de là on a une carte qui s'affiche positionnée, avec les contrôles que l'on souhaite. Maintenant comment stylisée ma carte ?
Depuis la version 3 de l'API, Google permet la personnalisation complète des cartes au travers de l'API "Styled Maps". Pour appliquer les styles à notre carte, il faut procéder comme ci-dessous :



Maintenant l'opération délicate est de mettre en évidence les pays souhaités. Pour cela on va utiliser un fichier standard KML pour décrire l'emplacement de mes pays sous la forme de polygones. Les polygones sont décrits point à point. On peut trouver des fichiers KML notamment dans les galeries de Google Earth, sinon il existe des outils en ligne pour créer ses propres fichiers KML.
Pour exploiter les fichiers KML dans notre mappemonde, j'ai utilise l'API "geoxml3". Pour cela, il faut importer les librairies suivantes :



Puis les utiliser de la manière suivante :



Le paramètre "useTheData" est une méthode que j'ai définie et qui sera appelée à la fin du chargement de mon fichier KML. Dans cette méthode, je pourrais notamment gérer les évènements de "mouseover" et "mouseout" sur mes polygones comme ceci :



Conclusion

Voila donc une manière élégante et simple de gérer ses cartes, bien entendu ce que je viens de vous montrer n'est que la base. Il est possible de faire beaucoup d'autres personnalisations et d'imaginer des interactions avec la carte beaucoup plus élaborées.