lundi 13 septembre 2010

[GWT] Les Layouts

Première étape de la création d'une application GWT, l'interface utilisateur.
En GWT, on utilise les Layouts (Patron, MasterPage).

En gros on créé l'architecture de la vue en créant un layout général.

Toujours avec la fameuse librairie GXT (cf les précédents tuto), on va réussir à faire un super truc très rapidement.

Deux trucs à savoir :

1) Il existe beaucoup de types de layouts. Nous utiliserons le type de layout utilisé dans l'exemple du showcase de Sencha BorderLayoutExample car il est très performant, assez rapide de mise en oeuvre et déjà stylé et largement parametrable, c'est probablement au moment ou je parle le plus puissant layout de GWT.
2) Pour redimensionner automatiquement notre layout lorsqu'on redimensionne le navigateur, il faut utiliser l'objet VIEWPORT

Pour intégrer Viewport à notre exemple de borderlayout, on va importer Viewport et l'instancier. Il faudra toujours considérer ViewPort comme la vue globale.

J'ai renommé l'exemple BorderLayoutExample en GeneralLayout.
J'ai enlevé la classe mère LayoutContainer de la déclaration de classe, l'objet ViewPort héritant déjà de LayoutContainer

Je ne vais pas revenir sur les exemples de Sencha, c'est assez explicite, je vous montre seulement ce qui change dans le fichier GeneralLayout à la fin, lorsqu'on ajoute du contenu à une zone du layout :


Il reste une chose à faire maintenant, utiliser viewport comme vue globale dans le onModuleLoad()


Ainsi, on peut maintenant redimensionner notre navigateur, le layout se redimensionnera instantanément.
Plutot Génial hein ?

Aucun commentaire:

Enregistrer un commentaire

Bonjour,