GWT - Applications
Avant de commencer à créer une application "HelloWorld" à l'aide de GWT, voyons quelles sont les parties réelles d'une application GWT:
Une application GWT se compose de quatre parties importantes suivantes, dont la dernière partie est facultative mais les trois premières parties sont obligatoires.
- Descripteurs de module
- Ressources publiques
- Code côté client
- Code côté serveur
Exemples d'emplacements de différentes parties d'une application gwt typique HelloWord sera comme indiqué ci-dessous -
| Nom | Emplacement |
|---|---|
| Racine du projet | Bonjour le monde/ |
| Descripteur de module | src / com / tutorialspoint / HelloWorld.gwt.xml |
| Ressources publiques | src / com / tutorialspoint / war / |
| Code côté client | src / com / tutorialspoint / client / |
| Code côté serveur | src / com / tutorialspoint / serveur / |
Descripteurs de module
Un descripteur de module est le fichier de configuration sous forme de XML qui est utilisé pour configurer une application GWT.
Une extension de fichier de descripteur de module est * .gwt.xml, où * est le nom de l'application et ce fichier doit résider à la racine du projet.
Voici un descripteur de module par défaut HelloWorld.gwt.xml pour une application HelloWorld -
<?xml version = "1.0" encoding = "utf-8"?>
<module rename-to = 'helloworld'>
<!-- inherit the core web toolkit stuff. -->
<inherits name = 'com.google.gwt.user.user'/>
<!-- inherit the default gwt style sheet. -->
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<!-- specify the app entry point class. -->
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<!-- specify the paths for translatable code -->
<source path = '...'/>
<source path = '...'/>
<!-- specify the paths for static files like html, css etc. -->
<public path = '...'/>
<public path = '...'/>
<!-- specify the paths for external javascript files -->
<script src = "js-url" />
<script src = "js-url" />
<!-- specify the paths for external style sheet files -->
<stylesheet src = "css-url" />
<stylesheet src = "css-url" />
</module>Voici un bref détail sur les différentes parties utilisées dans le descripteur de module.
| N ° Sr. | Nœuds et description |
|---|---|
| 1 | <module rename-to = "helloworld"> Cela fournit le nom de l'application. |
| 2 | <inherits name = "logical-module-name" /> Cela ajoute un autre module gwt dans l'application, tout comme l'importation le fait dans les applications java. N'importe quel nombre de modules peut être hérité de cette manière. |
| 3 | <entry-point class = "classname" /> Ceci spécifie le nom de la classe qui commencera à charger l'application GWT. N'importe quel nombre de classes de point d'entrée peut être ajouté et elles sont appelées séquentiellement dans l'ordre dans lequel elles apparaissent dans le fichier du module. Ainsi, lorsque le onModuleLoad () de votre premier point d'entrée se termine, le point d'entrée suivant est appelé immédiatement. |
| 4 | <source path = "path" /> Ceci spécifie les noms des dossiers source que le compilateur GWT recherchera pour la compilation source. |
| 5 | <public path = "path" /> Le chemin public est l'endroit de votre projet où les ressources statiques référencées par votre module GWT, telles que CSS ou images, sont stockées. Le chemin public par défaut est le sous-répertoire public sous où le fichier XML du module est stocké. |
| 6 | <script src="js-url" /> Injecte automatiquement le fichier JavaScript externe situé à l'emplacement spécifié par src. |
| sept | <stylesheet src="css-url" /> Injecte automatiquement le fichier CSS externe situé à l'emplacement spécifié par src. |
Ressources publiques
Ce sont tous les fichiers référencés par votre module GWT, tels que la page HTML de l'hôte, le CSS ou les images.
L'emplacement de ces ressources peut être configuré à l'aide de l'élément <public path = "path" /> dans le fichier de configuration du module. Par défaut, il s'agit du sous-répertoire public sous lequel le fichier XML du module est stocké.
Lorsque vous compilez votre application en JavaScript, tous les fichiers qui se trouvent sur votre chemin public sont copiés dans le répertoire de sortie du module.
La ressource publique la plus importante est la page hôte qui est utilisée pour appeler l'application GWT réelle. Une page hôte HTML typique pour une application peut ne pas inclure du tout de contenu de corps HTML visible, mais elle est toujours censée inclure une application GWT via une balise <script ... /> comme suit
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to first GWT application</p>
</body>
</html>Voici l'exemple de feuille de style que nous avons inclus dans notre page d'accueil -
body {
text-align: center;
font-family: verdana, sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}Code côté client
Il s'agit du code Java écrit implémentant la logique métier de l'application et que le compilateur GWT traduit en JavaScript, qui finira par s'exécuter dans le navigateur. L'emplacement de ces ressources peut être configuré à l'aide de l'élément <source path = "path" /> dans le fichier de configuration du module.
Par exemple Entry Point le code sera utilisé comme code côté client et son emplacement sera spécifié à l'aide de <source path = "path" />.
Un module entry-point est une classe attribuable à EntryPointet qui peut être construit sans paramètres. Lorsqu'un module est chargé, chaque classe de point d'entrée est instanciée et sonEntryPoint.onModuleLoad()La méthode est appelée. Un exemple de classe HelloWorld Entry Point sera comme suit -
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
Window.alert("Hello, World!");
}
}Code côté serveur
Il s'agit de la partie côté serveur de votre application et elle est très facultative. Si vous n'effectuez aucun traitement backend dans votre application, vous n'avez pas besoin de cette partie, mais s'il y a un traitement requis au backend et que votre application côté client interagit avec le serveur, vous devrez développer ces composants.
Le chapitre suivant utilisera tous les concepts mentionnés ci-dessus pour créer une application HelloWorld en utilisant Eclipse IDE.