Développer des applications Web Mobiles avec GWT

Vous venez de développer une application web qui va faire fureur au sein de votre entreprise et vous souhaitez la porter sur mobile ? Malheureusement, vos collaborateurs ne se sont pas donnés le mot pour choisir leur smartphone : IPhone pour les uns, Android ou Blackberry pour les autres… De plus, pour vous l’Objective-C… pfff… sans façon ?

Alors… que faire ??
Vous avez surement entendu parlé de ces nouveaux frameworks mobiles utilisant JavaScript et CSS3 pour reproduire le look & feel des applications natives. Nous pouvons notamment citer jQtouch ou JQuery Mobile (bientôt en version 1.0 finale). Mais comment les interfacer avec votre back-end utilisant les dernières technologies à la mode ?
Une solution à envisager : GWT
Dans cette article, je vais vous présenter comment développer une application web ayant le « Look & Feel » d’une application IPhone en utilisant à la fois GWT et jQtouch. Pour l’exemple, je vais créer une application de visualisation des conférences et formations proposées par Zenika.

Design de l’application

Comme présenté en introduction de cet article, il existe plusieurs frameworks basés sur JQuery, spécialisés pour le développement d’applications mobile. Celui présenté dans cet article est JQTouch. Parmi les autres, nous trouvons notamment Sencha Touch ou JQuery Mobile, encore en version bêta, mais qui s’annoncent prometteurs.
Dans le concept des applications web mobiles, une « application » équivaut à une seule page html et un « écran » équivaut à un <div> dans cette page.
Nous allons mettre en place la navigation suivante entre les différentes écran :

Tout d’abord, il faut spécifier à JQTouch le corps de notre application avec une balise div

<div id="jqt">
    ...
</div>

 
Ensuite, créer chaque écran au sein de cette balise.
Note : Les attributs s-pane, s-scrollwrapper et s-scrollpane permettent l’intégration avec IScroll, un autre framework qui facilite la manipulation des headers & footers

<div id="home" class="s-pane">
    <div class="toolbar">
        <h1>Zenika Mobile</h1>
    </div>
    <div class="s-scrollwrapper">
        <div class="s-scrollpane" id="homepane">
            <!-- Corps de l'écran -->
        </div>
    </div>
</div>

Et voilà, les écrans de l’application sont créés. Il suffit maintenant d’ajouter des liens entre nos pages en créant de simples listes html et en y ajoutant des attributs « class » dans le corps de l’écran.

<ul class="rounded">
    <li class="arrow">
        <a href="#formations">Formations</a>
    </li>
    <li class="arrow">
        <a href="#conferences">Conférences</a>
    </li>
    <li class="arrow">
        <a href="#experts">Experts</a>
    </li>
</ul>

 
Le rendu sur un téléphone Android :

 
Il est également possible d’ajouter des boutons dans la « toolbar » de l’écran en ajoutant simplement un div :

<a class="back">Acceuil</a>

 
ce qui donne

Interaction Client/Serveur avec GWT

Maintenant que toutes les pages sont créées, encore faut-il les remplir, et c’est là que GWT intervient. Voici le corps de l’écran « Formations » dans le fichier html de l’application :

<h1 align="center">Les Prochaines Formations</h1><br>
<div id="formationres">
</div>

Les formations vont être récupérées sur le serveur au démarrage de l’application. Pour cela, lors de l’initialisation du module GWT, nous faisons appel à un service RPC GWT qui va collecter sur le serveur la liste des formations à venir.

private void initializeFormations() {
	dataService.getAllFormations(new AsyncCallback<List<Formation>>() {
		@Override
		public void onSuccess(List<Formation> result) {
			fillFormations(result);
		}
		@Override
		public void onFailure(Throwable caught) {
		}
	});
}

Nous allons ensuite remplir l’écran avec ces mêmes données.

protected void fillFormations(List<Formation> result) {
	RootPanel formationPanel = RootPanel.get("formationres");
	formationPanel.clear();
	if (result == null || result.size() == 0) {
		formationPanel.add(new Label("Aucune formation correspondante"));
	} else {
		RowList list = new RowList();
		Row row;
		Anchor a;
		for (Formation f : result) {
			row = new Row();
			row.addStyleName("arrow");
			a = new Anchor(f.getTitle());
			a.setHref("#formationdetail");
			row.add(a);
			row.addClickHandler(new FormationClickHandler(f));
			list.add(row);
		}
		formationPanel.add(list);
	}
}

Tout d’abord, nous récupérons le panel ayant l’id « formationres » (celui qui va contenir la liste des formations).
Ensuite, si aucune formation n’a été trouvée, nous ajoutons dans ce panel un label indiquant l’absence de résultats..
Enfin, pour chaque formation récupérée, nous instancions une liste « RowList », qui est un widget personnalisé correspondant à une liste <ul>, auquel nous ajoutons des « Row » (un autre widget correspondant à l’élément <li> et implémentant différents handlers GWT). Ensuite, dans ce « Row », nous ajoutons une « Anchor » GWT avec pour texte le nom de la formation et pour cible l’écran « formationdetail » qui a été créé dans la page html. Nous ajoutons également un ClickHandler sur celui-ci afin, lors d’un clic sur ce lien, remplir les différents champs de l’écran « formationdetail » avec les valeurs de la formation cliquée.
Nous pouvons ensuite répéter l’opération pour les conférences ainsi que les experts.

Conclusion

Grâce à cet exemple simple, nous avons illustré comment GWT peut nous aider à développer une application web mobile simplement et sans trop d’investissement. L’avantage de GWT par rapport à d’autres framework web est triple. Tout d’abord, la simplicité des services RPC, ensuite la réutilisation des objets Java de l’interface web jusqu’au serveur et enfin les API de manipulation du DOM qui permettent de s’adapter aux spécificités des différents frameworks de développement mobiles.
Les sources de cette application sont disponibles sur le Github Zenika ici
Pour ceux qui souhaitent aller plus loin dans le développement d’applications mobiles avec gwt, je vous conseille de regarder du côté de gwt-mobile-webkit, une librairie Java qui « wrap » les API HTML5 (notamment Database & Storage API) et qui pourra notamment vous aider à passer vos applications mobiles hors-ligne.