Retour : Page Principale > sommaire aide > sommaire aide langages

Informations sur GWT - Google Web Toolkit

Information principale : en 2015 il ne faut plus l'utiliser car c'est complètement dépassé :-)
Des technologies telles qu' AngularJS ou même jQuery + Bootstrap sont aujourd'hui cross-browser.

Notes sur le développement avec GWT

Trousses à outils nécessaire

Eclipse 3.6 avec JAVA
JRE de SUN
GWT
Firefox
Extension Firebug

Problème : le plugin developpement Mode ne veut pas s'installer dans Firefox

NOTE : en 2015, les plugins de développement ne fonctionnent plus dans Chrome ni Firefox, en tout cas sous Linux. Un nouveau plugin est apparu, à tester : http://www.gwtproject.org/articles/superdevmode.html

Après avoir installer le plugin, il apparaît dans les modules installés mais la page http://localhost/MonAppli/war/MonAppli.html?gwt.codesvr=127.0.0.1:9997 propose toujours de télécharger le plugin.
Commencer par vérifier que vous posséder la librairie : libnspr4.so dans /usr/lib/ (ou /usr/lib64)
Installer là si nécessaire.
Créer le lien suivant : ln -s libnspr4.so libnspr4.so.0d
Puis rendez vous dans votre profil Firefox (/home/mon_compte/.mozilla/firefox/...) et supprimer le fichier compreg.dat.
Relancer Firefox, cela devrez fonctionner.
Sinon voir ici : http://groups.google.com/group/google-web-toolkit/browse_thread/thread/9e0c72621846bb45

Problème : le dossier WEB-INF est mis en erreur par Eclipse

Vérifier qu'il existe bien un fichier web.xml dans le dossier WEB-INF, sinon rajouter le avec pour contenu (remplacer MonApplication par le nom de de votre application):
<?xml version="1.0" encoding="UTF-8"?> <web-app>


<welcome-file-list>
- <welcome-file>MonApplication.html</welcome-file>
</welcome-file-list>

</web-app>

Problème : lancement du mode Hosted java.lang. UnsatisfiedLinkError libstdc++.so.5

Installer le paquetage libstdc++5 : urpmi libstdc++5

Utiliser le numéro de révision global de SVN

Dans le script de compilation, avant l'éxecution de java ajouter :
export SVN_NUMERO_REVISION_GLOBAL=`svnversion -n`; perl -e 'print "Révision:".$ENV{SVN_NUMERO_REVISION_GLOBAL},"\n"' perl -pi -e 's/"\$RevisionGlobale:? ?[^\$]* ?\$"/"\$RevisionGlobale: $ENV{SVN_NUMERO_REVISION_GLOBAL} \$"/g' $APPDIR/src/org/tela_botanica/client/Mediateur.java
Il faut bien entendu, indiquer le fichier du projet où se trouve le mot-clé : "$RevisionGlobale$" qui sera remplacé par "$RevisionGlobale: le_numéro $".

Installation et création d'application avec GWT

> Télécharger Gwt et le placer dans /opt ou dans ~/Applications/ puis créer un lien dans opt : cd /opt; ln -s ~/Applications/gwt_1.5.3 gwt
> Notes : l'utilisation du lien permet de garder les droits sur les fichiers et d'installer plusieurs versions pour tester. Il n'y aura qu'a le changer pour tester.
> Créer l'application :

1. Lancer les commandes suivantes :
- /opt/gwt/projectCreator -eclipse MonProjet -out ~/tmp/MonProjet
- /opt/gwt/applicationCreator -overwrite -eclipse MonProjet -out ~/tmp/MonProjet org.tela_botanica.client.MonAppli
2. Ouvrir Eclipse et faire Fichier > Import > Projet existant dans l'espace de travail et ouvrir le projet, ici MonProjet

> Pour pouvoir compiler depuis le navigateur :

Éditer le fichier .bashrc ou équivalant
Ajouter dedans la ligne suivante modifié selon votre configuration : export GWT_EXTERNAL_BROWSER="/chemin/vers/mon/executable/firefox"
Redémarrer votre session utilisateur
Vous pourrez ensuite utiliser le bouton de compilation

> Indiquer dans Eclipse les version des librairies utilisées :

Ouvrir la fenêtre de préférences : Window > Préférences
Aller dans : Java > Build Path > User Librairies
Ajouter avec le bouton "New..." l'entrée :
- GWT-1.5.3
Pour chacune d'entre elles, il faut ajouter les fichiers jar correspondant :
- GWT-1.5.3 :
  - /opt/gwt-1.5.3/gwt-dev-linux.jar
  - /opt/gwt-1.5.3/gwt-user.jar
Modifier les lancements des applis :
- Ouvrez la fenêtre : Run >Run configurations...
- Choisissez votre application MonProjet, puis dans l'onglet "Classpath" cliquez sur "Advanced" puis "Add library" puis "User library" puis cochez : "GWT-1.5.3"

> Pour pouvoir utiliser les webservice en Php il est nécessaire de modifier l'url dans le navigateur fournie avec GWT :

Vous pouvez configurez définitivement votre application (voir ci-dessous : "Paramétrage du mode Hosted pour utiliser des web services PHP") ou simplement modifier l'url...
Commencer par lancer ce navigateur en vous plaçant sur le dossier principal de l'application et en vue "Java" appuyer sur le bouton "Run" d'Eclipse
Deux fenêtres s'ouvrent : un shell et une fenêtre d'aperçu du résultat de l'application (le navigateur)
Dans la fenêtre du navigateur modifier l'url comme dans l'exemple ci-dessous (cette modification est valable que si le workpsace d'Eclipse correspond au dossier htdocs de Xamp) :
- URL d'origine : http://localhost:8888/org.tela_botanica.Mon_Appli/Mon_Appli.html
- Nouvelle URL : http://localhost/coel/www/org.tela_botanica.Mon_Appli/Mon_Appli.html

Installation et configuration de GWT-EXT

> Télécharger Gwt-Ext et le placer dans /opt ou dans ~/Applications/ puis créer un lien dans opt : cd /opt; ln -s ~/Applications/gwtext_2.0.2 gwtext
> Télécharger ext.js et poser dans le dossier MonProjet au niveau /src/org/tela_botanica/public/js/ext/ les fichiers et dossiers suivant :

/adapter
/resources
ext-all.js
ext-all-debug.js
ext-core.js
ext-core-debug.js

> Modifier le fichier MonAppli.gwt.xml en ajoutant les lignes :


<inherits name='com.gwtext.GwtExt' />
...
<stylesheet src="js/ext/resources/css/ext-all.css" />
<script src="js/ext/adapter/ext/ext-base.js" />
<script src="js/ext/ext-all.js" />

> Indiquer dans Eclipse les version des librairies utilisées :

Ouvrir la fenêtre de préférences : Window > Préférences
Aller dans : Java > Build Path > User Librairies
Ajouter avec le bouton "New..." l'entrée :
- GWTEXT-2.0.5
Puis, il faut ajouter les fichiers jar correspondant :
- GWTEXT-2.0.5
  - /opt/gwtext-2.0.5/gwtext.jar
Modifier les propriétés du projet MonProjet :
- Clic droit sur le dossier du projet et chosir "Properties"
- Allez sur l'entrée "Java Build Path"
- Choisir l'onglet " Librairies"
- Cliquer sur le bouton "Add library" > "User library" et cocher "GWTEXT-2.0.5'
Modifier le lancement de l'applis :
- Ouvrez la fenêtre : Run >Run configurations...
- Choisissez votre application MonProjet, puis dans l'onglet "Classpath" cliquez sur "Advanced" puis "Add library" puis "User library" puis cochez : "GWTEXT_2_0_5"

Installation et configuration de GXT

> Indiquer dans Eclipse les version des librairies utilisées :

Ouvrir la fenêtre de préférences : Window > Préférences
Aller dans : Java > Build Path > User Librairies
Ajouter avec le bouton "New..." l'entrée :
- GXT-1.2.4
Puis, il faut ajouter les fichiers jar correspondant :
- GXT-1.2.4 :
  - /opt/gxt-1.2.4/gxt.jar
Modifier les propriétés du projet MonProjet :
- Clic droit sur le dossier du projet et chosir "Properties"
- Allez sur l'entrée "Java Build Path"
- Choisir l'onglet " Librairies"
- Cliquer sur le bouton "Add library" > "User library" et cocher "GXT-1.2.4'
Modifier le lancement de l'appli :
- Ouvrez la fenêtre : Run >Run configurations...
- Choisissez votre application MonProjet, puis dans l'onglet "Classpath" cliquez sur "Advanced" puis "Add library" puis "User library" puis cochez : "GXT-1.2.4"

Paramétrage du mode Hosted pour utiliser des web services PHP

> Compiler votre application MonProjet
> Allez dans votre dépôt www et ajouter un lien : ln -s MonProjet/www/org.tela_botanica.MonProjet/ org.tela_botanica.MonProjet
> Modifier le lancement de l'appli :

Ouvrez la fenêtre : Run >Run configurations...
Choisissez votre application MonProjet, puis dans l'onglet "(x)=Arguments" ajouter dans "Program arguments : "-noserver -port 80" devant "-out www org.tela_botanica.MonProjet/MonProjet.html"

Fichiers à versioner dans le dépôt lors de la création d'une nouvelle application GWT

Voici l'exemple des fichiers importer dans le dépôt lors de la création de l'application "COEL" :

.settings/ permet de forcer l'utilisation de l'encodage adapté au projet (et/ou à certain fichier) pour tous les utilisateurs d'Eclipse.
doc/ contient toutes les documentations de l'application
- bdd/ contient la documentation concernant la base de données
- code/ contient la documentation concernant le code
- utilisateur/ contient la documentation concernant l'utilisateur
src/ contient les sources java
- org/
- tela_botanica/
  - Coel.gwt.xml
  - client/
    - Coel.java
  - public/
    - js/ contient les fichiers Javascripts.
      - ext/ contient les fichiers Javascripts de la bibliothèque Extjs. Les commiter dans le dépôt aussi...
        
        ... tous les fichiers et dossiers de Extjs à commiter.
    - Coel.css
    - Coel.html
test/ contient les tests unitaires
tomcat/ doit rester vide (ou même ne pas être commité) sur le dépôt
www/ doit rester vide sur le dépôt
www-test/ doit rester vide sur le dépôt
.classpath
Coel.launch
Coel-compile
Coel-shell

Mise en place des Tests unitaires

Lancer la commande suivante dans le dossier de l'application:
/opt/gwt-1.5.3/junitCreator

junit /opt/eclipse/plugins/org.junit_3.8.2.v20090203-1005/junit.jar
module org.tela_botanica.Coel
eclipse coel org.tela_botanica.client. CoelTest
overwrite

Dans les fichiers créés rajoute le chemin vers GXT : :/opt/gxt-1.2.4/gxt.jar et remplacer les chemins /home/.../Applications par /opt/
Lancer : ./ CoelTest-hosted pour voir si tout fonctionne.

Gestion de différentes avec GWT

Il est utile d'ajouter des locales dans une application, même si celle-ci n'est destinée qu'à une langue (fr).
Cela permet de traduire automatiquement certains messages (ex: boutons de MessageBox.Confirm)

Dans le fichier <Module>.xml, il faut ajouter les lignes suivantes:

<inherits name="com.google.gwt.i18n.I18N"/>
<extend-property name="locale" values="{locales}"/>

Le champ {locales} peut être une unique locale (ex: fr), ou plusieurs séparées par des virgules.

Attention: il faut compiler pour pouvoir utiliser ces locales dans le mode hosted
En effet, les valeurs des variables sont placées dans le fichier nocache.js

Valeur de la locale

A tout moment, pour obtenir la valeur de la locale, on peut utiliser:

LocaleInfo.getCurrentLocale().getLocaleName()

Spécifier la locale

Il est possible d'ajouter le champ Locale dans l'URL:
http://url?locale={locale}

ou par balise meta:

<meta name="gwt:property" content="locale={locale}">

http://code.google.com/intl/fr-FR/webtoolkit/tutorials/1.6/i18n.html

Problèmes avec Dictionary et le fichier config.js

Si Dictionary n'arrive pas à trouver une entrée fraichement ajoutée dans config.js, supprimer le contenu du dossier www de l'application et recompiler là en ligne de commande.