Je travaille pour un professeur qui souhaite créer un logiciel en ligne d'exercice de maths, de suivi des élèves et de gestion de compétences.On va normalement travailler avec Google web toolkit !
C'est avec ce toolkit que Google code ses applications et le concept est assez simple et interessant :
- Ce n'est que du JAVA !
Je ne sais pas si c'est une bonne nouvelle mais c'est comme ca :D
Le fonctionnement est donc que l'on code tout en Java en utilisant les librairies qui conviennent. On ne touche normalement jamais à une ligne de code js et c'est completement objet.
J'ai donc installé ça ce soir et ca me donne très envie aussi je vous le recommande, je vais m'y mettre serieusement là et je posterais quelques tutoriels à ce sujet.
Ci contre un premier screen de ce qu'un projet neuf donne :
Je vous propose maintenant un petit tuto de découverte de GWT :
c'est fortement inspiré du tuto que propose google ici : StockWatcher
Il faut tout d'abord installer eclipse si vous ne l'avez pas déjà fait.
1. téléchargez la dernière version d'eclipse sur http://www.eclipse.org/downloads/
2. ensuite allez dans Eclipse -> Help -> New Software
Une fois dans New Software, on ajoute cet url : http://dl.google.com/eclipse/plugin/3.5 qui contient les sources de GWT et le plugin GWT pour eclipse
3. Cochez tout
4. Continuez l'installation jusqu'à la fin, logiquement pas de problème sinon suivez ce qu'ils disent, puis redémarrer.
5. De nouvelles choses apparaissent désormais , notamment 3 icones avec le g emblématique de google.
6. Eclipse vient d'installer GWT et être maintenant prêt à l'utiliser.
Je vais fonctionner ici en captures d'écran pour le code pour ne pas que vous copiez (bêtement) le code car c'est incomparable la différence entre écrire le code et le copier pour la compréhension.
On créer maintenant une nouvelle application web google. C'est assez instinctif, c'est cette icone .
On renseigne le nom du projet :stockWatcher et le package, habituellement, je mets juste com
Ca génère donc le hello world, c'est assez marrant, ca montre un peu comment ca s'organise mais ca ne sert pas à grand chose.
On va maintenant dans war et on ouvre le fichier stockwatcher.html (ca dépend du nom que vous avez pris pour votre nom de projet, j'ai moi pris "stockwatcher") puis on fait le ménage, rien qu'en enlevant les commentaires, on arrive à un truc propre et simple :
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="StockWatcher.css"><title>Web Application Starter Project</title><script type="text/javascript" language="javascript" src="stockwatcher/stockwatcher.nocache.js"></script></head><body><h1>StockWatcher</h1><div id="stockList"></div><iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe></body></html>
GWT utilise les id pour dire ou il veut afficher ses élements. Ainsi, on a fait une div avec l'id stockList vide mais dans le but d'y mettre notre contenu.
on ouvre maintenant com.client.StockWatcher.java
On a notre classe, déclarée comme ceci : public class StockWatcher implements Entrypoint{ }
Je vous rappelle qu'on déclare ce dont on a besoin directement dans la classe.
Dans ce tuto, on veut pouvoir ajouter en Ajax de nouvelles entrées dans un tableau, on va donc avoir besoin :
- d'un tableau (flexTable)
- d'un input text (TextBox)
- d'un label pour indiquer la date de dernière mise à jour (Label)
- d'un bouton (Button)
On a aussi besoin d'un panel, c'est typique de Java, considerons le simplement comme un socle.
- un panel pour l'affichage (VerticalPanel) et un panel horizontal pour l'ajout d'entrées
Mais tous ces éléments nécessitent l'import de certains fichiers.
On met ces import de librairies tout en haut du fichier.
Donc on met ca juste en dessous de la déclaration de la classe.
Le point d'entrée du programme, c'est la fonction public void onModuleLoad(){ }
C'est notre "main" pour ceux qui le cherchaient...
On commence par créer notre tableau dans lequel on va stocker les données, c'est le FlexTable stocksFlexTable :
Cela fera 4 colonnes.
On va ensuite y mettre l'input text et le bouton pour pouvoir ajouter des nouvelles entrées dans l'horizontalPanel addPanel:
Maintenant on met dans le mainPanel le tableau, le panel d'ajout d'entrées ainsi que notre label de mise à jour :
Vient ensuite une chose très interessante, la notion de RootPanel.
Le RootPanel, c'est notre page ! On ne la déclare jamais, elle est omniprésente et sert à communiquer entre notre classe et notre fichier html.
Ainsi, on va mettre notre mainPanel dans la div d'id stocksList comme ceci :
Maintenant, si on appuye sur F11 dans eclipse, on build notre projet et on peut le visualiser dans notre navigateur préféré (sauf au moment ou j'écris sur chrome sous ubuntu, c'est un comble !! Google quand même :S )
Mais pour l'instant, rien ne se passe en cliquant sur notre bouton et le tableau est vide.
Il faut créer une action sur le clic du bouton pour pouvoir envoyer le contenu de l'input text vers le flexTable.
Cela se fait avec la méthode addClickHandler de notre objet addStockButton.
Vous voyez ici que l'on fait appel, dès que l'on clique sur le bouton addStockButton, la fonction addStock(); Or cette fonction n'éxiste pas et eclipse va vous le faire remarquer.
Eclipse est sympa ! Il va même vous proposer de la créer à votre place.
Imaginons qu'on ne veuille pas ajouter 2 fois la même chose dans notre FlexTable et seulement des entrées de plus de 4 caractères et sans caractères spéciaux.
On créé une liste des entrées qu'on ajoute et à chaque fois on va vérifier qu'il n'éxiste pas dans notre liste avant de l'ajouter dans le flexTable et on teste le contenu avec un REGEX avec la fonction matches("^[0-9A-Z\\.]{1,10}$")
On affiche un message d'erreur avec l'objet Window, accessible grâce à l'inclusion :
import com.google.gwt.user.client.Window;
On peut enfin ajouter des choses dans notre flexTable ! Enjoy
C'est notre "main" pour ceux qui le cherchaient...
On commence par créer notre tableau dans lequel on va stocker les données, c'est le FlexTable stocksFlexTable :
On va ensuite y mettre l'input text et le bouton pour pouvoir ajouter des nouvelles entrées dans l'horizontalPanel addPanel:
Maintenant on met dans le mainPanel le tableau, le panel d'ajout d'entrées ainsi que notre label de mise à jour :
Vient ensuite une chose très interessante, la notion de RootPanel.
Le RootPanel, c'est notre page ! On ne la déclare jamais, elle est omniprésente et sert à communiquer entre notre classe et notre fichier html.
Ainsi, on va mettre notre mainPanel dans la div d'id stocksList comme ceci :
Maintenant, si on appuye sur F11 dans eclipse, on build notre projet et on peut le visualiser dans notre navigateur préféré (sauf au moment ou j'écris sur chrome sous ubuntu, c'est un comble !! Google quand même :S )
Mais pour l'instant, rien ne se passe en cliquant sur notre bouton et le tableau est vide.
Il faut créer une action sur le clic du bouton pour pouvoir envoyer le contenu de l'input text vers le flexTable.
Cela se fait avec la méthode addClickHandler de notre objet addStockButton.
Vous voyez ici que l'on fait appel, dès que l'on clique sur le bouton addStockButton, la fonction addStock(); Or cette fonction n'éxiste pas et eclipse va vous le faire remarquer.
Eclipse est sympa ! Il va même vous proposer de la créer à votre place.
Imaginons qu'on ne veuille pas ajouter 2 fois la même chose dans notre FlexTable et seulement des entrées de plus de 4 caractères et sans caractères spéciaux.
On créé une liste des entrées qu'on ajoute et à chaque fois on va vérifier qu'il n'éxiste pas dans notre liste avant de l'ajouter dans le flexTable et on teste le contenu avec un REGEX avec la fonction matches("^[0-9A-Z\\.]{1,10}$")
On affiche un message d'erreur avec l'objet Window, accessible grâce à l'inclusion :
import com.google.gwt.user.client.Window;
On oublie pas d'instancier notre liste stocks ArrayList, juste en dessous des autres déclarations
Puis on écrit notre fonction. Ca donne ça :
Aucun commentaire:
Enregistrer un commentaire
Bonjour,