jan
04
GWT : Création d’une interface
|Sommaire
Maintenant que nous avons créé notre projet et que nous connaissons son architecture, nous pouvons nous attaquer à la création de l’interface.
Nous utiliseront les classes déjà présentent lors de la création d’un nouveau projet en les renommant et les remaniant à notre sauce pour les transformer en quelque chose de fonctionnel.
Dans un premier temps je vous présenterai les composants (ou widgets) que nous utiliserons puis dans une second temps nous les mettrons en place sur la page. Pour ne pas reprendre à zéro, je vous propose de télécharger le projet déjà créé : GWTwitter_v0.0.
Les widgets
Les panels
Les panels sont des widgets « conteneurs », c’est à dire qu’ils servent à contenir d’autre widgets (simples widgets ou panels).
| Classe | Utilisation dans notre application | Utilisation générale |
| VerticalPanel | Panel principal, c’est lui qui englobera toute l’application. | Permet de positionner des éléments les uns en dessous de autres. |
| HorizontalPanel | Panel qui contiendra tous les composants pour l’ajout de tweets. | Permet de positionner des éléments les uns à côté des autres. |
Les widgets simples
Les widgets simples sont des composants de base. C’est à partir d’eux qu’on va pouvoir construire : n’importe quel application ou d’autres widgets plus compliqués.
| Classe | Utilisation dans notre application | Utilisation générale |
| FlexTable | La FlexTable présentera les tweets. | Tableau qui s’agrandit au fur et à mesure de la création des cellules. |
| TextBox | Champ texte dans lequel nous rédigerons nos tweets. | Champs texte sur une seule ligne. |
| Button | Bouton de validation pour ajouter le tweet. | Un simple bouton qui déclenche un évement sur le clic. |
| Label | Afficher la date et l’heure du dernier rafraichissement. | Un texte qu’on peut modifier via un bout de code. |
Mise en place de l’interface
Déclaration des composants
Chacun des composants sera répertorié en tant qu’attribut de notre EntryPoint.
private final HorizontalPanel addPanel = new HorizontalPanel(); private final VerticalPanel mainPanel = new VerticalPanel(); private final FlexTable tweetsTable = new FlexTable(); private final TextBox tweetTextBox = new TextBox(); private final Button submitButton = new Button("Tweet"); private final Label updateLabel = new Label();
Mise en place des composants
Nous allons maintenant ajouter nos widgets simples dans les conteneurs puis les conteneurs dans la page. Ouvrez la méthode onModuleLoad dans notre EntryPoint « GWTwitter ».
Commençons par addPanel :
addPanel.add(tweetTextBox); // Ajout du champ texte addPanel.add(submitButton); // Ajout du bouton
Continuons tout simplement par le reste :
mainPanel.add(new HTML("Tweet with GWT !")); // Un petit titre mainPanel.add(tweetsTable); // Le tableau mainPanel.add(addPanel); // Le panel crée juste avant mainPanel.add(updateLabel); // La date du dernier rafraichissement
Pour finir, on ajoute le panel principal à la page :
RootPanel.get("page").add(mainPanel);
Et voilà, nous savons crée une interface. Bien sûr, il existe d’autres façons de mettre en place cette interface. Par exemple : séparer l’application suivant le modèle MVC afin de ne pas demander à votre designer de toucher à votre code.
Le HTML
Pour que notre code fonctionne il faut aussi modifier la page HTML qui accueillera nos éléments. Utilisez le code ci-dessous :
<!doctype html> <html> <head> <title>GWTwitter</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="GWTwitter.css"> <script type="text/javascript" language="javascript" src="gwtwitter/gwtwitter.nocache.js"></script> </head> <body> <h1>GWTwitter</h1> <div id="page"></div> </body> </html>
Dans ce code, id= »page » correspond à RootPanel.get(« page »). C’est le même élément (créé en HTML et utilisé en JAVA).
Vous pouvez dès à présent télécharger la Version de développement 0.1 de GWTwitter qui conclus cet article.
Prochaine partie : Faire fonctionner notre application.
Vous avez aimé, alors partagez
Laissez un commentaire