GWT : Création d’une interface

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.

Tagués avec : , , ,
Publié dans Google Web Toolkit

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*