Structure d'un projet GWT
:arrow: A quoi correspond le fichier "module.html" d'un projet GWT ?
C'est le point d'entrée de votre application GWT.
Il sera envoyé au client et c'est lui qui appelle le code JS généré par GWT.
C'est cette page qui est manipulée dans votre EntryPoint.
Elle peut être renommée, il faudra juste veiller à bien utiliser son nom dans l'url d'appel (et dans les paramètres d'exécution du hosted mode)
:arrow: A quoi correspond le fichier "module.gwt.xml" d'un projet GWT ?
C'est un fichier apportant des informations au compilateur GWT tel que les autres modules à utiliser, l'emplacement des sources, ...
Il peut être renommé, il faudra juste veiller à bien utiliser son nom dans les autres modules où il est appelé (et dans les paramètres d'exécution du hosted mode de ce module)
:arrow: Où trouver une description du fichier XML des modules ?
Module XML files
:arrow: A quoi correspond le dossier "client" d'un projet GWT ?
Le dossier qui contient le code Java qui sera compilé en Javascript par le compilateur GWT et interprété par le navigateur.
Il correspondant à ma définition de "client" donnée précédemment : les données envoyées au navigateur.
:arrow: A quoi correspond le dossier "server" d'un projet GWT ?
Le dossier qui contient le code Java qui sera compilé en byte code par le compilateur Java et interprété par le serveur d'application.
A part la servlet des services RPC, cette partie reste du Java classique et les forums JEE peuvent aider.
:arrow: A quoi correspond le dossier "public" d'un projet GWT ?
Le dossier qui contient les ressources statiques : images, css, ...
:arrow: Peut-on renommer les dossiers par défaut d'un projet GWT et quelles incidences cela a t'il ?
Oui, on peut tous les renommer en respectant les conventions des noms de packages Java.
Le nom du dossier "serveur" n'a aucune incidence s'il est libre.
Les noms du dossier "client" et du dossier "public" doivent être modifiés dans le fichier de votre module (module.gwt.xml par exemple)
Code:
1
2
| <source path="client"/>
<public path="public"/> |
Ils peuvent ne pas apparaître parce que ce sont des noms par défaut !
:arrow: Peut-on ajouter d'autres dossiers "client", "serveur", "public" ?
Oui.
Pour dossier "serveur", c'est du java classique donc package classique.
Pour les dossiers "client" et "public", il faudra là encore penser à les ajouter au fichier de votre module (module.gwt.xml par exemple)
Code:
1
2
3
| <source path="client"/>
<source path="data"/>
<public path="public"/> |
Cet exemple montre qu'on a ajouté un dossier source "data" et indique au compilateur GWT d'aller chercher des fichiers Java dedans. On peut faire l'analogie avec le classpath et dire que ces dossiers constituent le sourcepath ! N'oubliez pas que GWT compile votre code client en JS et il lui faut donc tous les sources Java des dépendances.
Personnellement, je conserve les dossiers "client" et "serveur", le premier contiendra l'interface utilisateur (front-end), le second les implémentations des services (back-end) et j'ajoute un dossier "data" pour les données qui transitent entre les deux.
Pour résumer :
- client : code Java transformé uniquement en javascript, pas besoin de byte code (non visible du serveur).
- data : code Java transformé à la fois en javascript par le compilateur GWT et en byte code par le compilateur Java (visible des deux côtés)
- server : code Java transformé uniquement en byte code par le compilateur Java (non visible du client)
:arrow: Peut-on ajouter des sous-packages "client" ?
Oui à condition que vos sous packages contiennent du code Java qui pourra lui aussi être compilé en Javascript.
- Si dans votre module, aucune balise source n'est indiquée, les sources de du dossier "client" et de tous ses sous dossiers sont vus par le compilateur.
- Si dans votre module, vous avez déclaré des balises sources, les sources de ces dossiers ainsi et de leurs sous dossiers sont vus par le compilateur.
Petits détails cosmétiques
:arrow: Comment utiliser un autre thème graphique ?
Utiliser une des 3 variantes proposées en commentant les autres.
Code:
1
2
3
| <inherits name='com.google.gwt.user.theme.standard.Standard'/>
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> --> |
:arrow: Pourquoi je ne peux pas modifier par CSS les couleurs des bordures des panneaux GWT ?
Parce que ce sont des images. Il faut fabriquer d'autres images.
:arrow: Où trouver d'autres thèmes graphiques pour GWT ?
Il existe une petite application qui permet de fabriquer un thème avec votre couleur préférée.
:arrow: Comment installer ce thème graphique "couleur" généré ?
- Copier le fichier gwttheme.jar généré dans le dossier war/WEB-INF/lib de votre projet GWT.
- Ajouter la ligne <inherits name='com.sensei.themes.couleur.Couleur'/> dans votre module.gwt.xml
- Désactiver le style par défaut en retirant la ligne <inherits name='com.google.gwt.user.theme.standard.Standard'/>
- Ajouter la librairie gwttheme.jar dans le classpath de votre projet GWT. (Faites Add Jar... et aller pointer sur le jar précédemment placé dans war/WEB-INF/lib )
- Décompresser le contenu du dossier public (gwt\couleur\...) de gwttheme.jar dans le dossier war de votre projet.
:arrow: Comment définir l'icône à côté de l'URL ?
- Une solution consiste à créer un fichier image "favicon.png" et le placer à la racine de votre application (directement dans le dossier war)
- Une autre solution consiste à créer une image icon.png et d'ajouter un lien vers cette image dans le fichier html de votre module (module.html par exemple)
Code:
<link rel="shortcut icon" type="image/png" href="mod/img/icon.png" id="icon" />
- mod représente le nom du dossier de compilation de votre module. Par défaut, c'est le nom du module préfixé par le nom du package.
Il peut être renommé avec l'attribut rename-to de la balise module de votre module (module.gwt.xml)
Code:
<module rename-to='mod'>
- img peut être un dossier ajouté après la compilation ou bien un sous dossier du dossier public qui sera recopié à chaque compilation.
:arrow: Comment modifier l'icône à côté de l'URL par programmation ?
Vous noterez l'id "icon" dans la ligne :
Code:
<link rel="shortcut icon" type="image/png" href="mod/img/icon.png" id="icon" />
Il permet de le modifier par cette méthode ajoutée à la classe entry-point déclarée dans votre module :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| /**
* Définit l'icone de la page.<br>
*
* @param iconPath L'emplacement de l'icone.
*/
public void setIcon(String iconPath)
{
if (iconPath != null)
{
this.iconPath = iconPath;
Element element = DOM.getElementById("icon");
DOM.setElementProperty(element, "href", iconPath.toString());
}
} |
:arrow: Comment se faire une belle petite page d'attente en attendant que le code JS soit chargé ?
:fleche: index.html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" type="image/png" href="gui/images/favicon.png" id="icon" />
<link rel="stylesheet" type="text/css" href="gui/styles/loading.css" />
<script type="text/javascript" language="javascript" src="gui/gui.nocache.js"></script>
<title>Chargement en cours ...</title>
</head>
<body style="overflow: hidden">
<div id="loading">
<div class="loading-indicator">
<img id="loading-img" src="gui/images/loading.gif" width="32" height="32"/>
Merci de patienter<br/>
<span id="loading-msg">Chargement en cours ...</span>
</div>
</div>
</body>
</html> |
:fleche: loading.css :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| #loading
{
position: absolute;
left: 45%;
top: 40%;
margin-left: -45px;
padding: 2px;
z-index: 20001;
height: auto;
border: 1px solid #ccc;
}
#loading .loading-indicator
{
background: white;
color: #444;
font: bold 13px tahoma, arial, helvetica;
padding: 10px;
margin: 0;
height: auto;
}
#loading-img
{
margin-right:8px;
float:left;
vertical-align:top;
}
#loading-msg
{
font: normal 10px arial, tahoma, sans-serif;
} |
:fleche: loading.gif :
Vous mettrez l'image que vous voudrez, moi, je l'ai généré avec cet outil et ces paramètres :
Indicator type : Indicator Big
Background color : FFFFFF
Foreground color : 000000
Installer GWT dans un IDE
:arrow: Pour développer en GWT, que faut il ?
:fleche: Il faut un environnement de développement Java :
Si le développement "à la main" est possible (il faudra suivre les instructions sur leur site), l'utilisation d'un IDE (les deux premiers sont gratuits) est recommandée (refactoring, debuggage, ...)
:fleche: Il faut le toolkit GWT !
:arrow: Quelle est la dernière version de GWT ?
C'est la 2.0.4
:arrow: Où télécharger GWT ?
:arrow: Comment installer GWT sous Eclipse 3.5 ?
- Allez dans le menu "Help > Install new software"
- Cliquez sur le bouton "Add"
- Copiez dans "location" l'url http://dl.google.com/eclipse/plugin/3.5
- Faites OK, cochez les composants à ajoutez et suivez les instructions d'eclipse.
:arrow: Comment installer GWT sous Netbeans ?
http://maksud.iblogger.org/2009/08/05/gwt-in-netbeans/
... si une bonne âme passe par là ;), a un lien ou un rapide résumé, je me ferai un plaisir de mettre à jour ...
:arrow: Comment installer GWT sous ... ?
... idem pour votre IDE favori
