Utilisation GridLayout pour faire une mise en page intelligente qui répond à la fenêtre est redimensionnée?
Lorsque l'utilisateur redimensionne une fenêtre dans mon Vaadin 6 ou 7 web app, je veux avoir les différents domaines de la mise en page de redimensionner les plus grands ou plus petits afin de tirer le meilleur parti de l'espace utilisable.
GridLayout semble que la manière de le faire. Mais la prise en main avec GridLayout peut être délicat. J'ai lu le GridLayout API page, ainsi que le Livre de Vaadin (GridLayout page et la Mise en forme de la page).
Un exemple montrant GridLayout dans l'action serait utile.
OriginalL'auteur Basil Bourque | 2013-04-09
Vous devez vous connecter pour publier un commentaire.
Vaadin 7
J'ai créé un exemple Vaadin 7 web app montrant deux usages de
GridLayout
. Les deux usages de la place unTable
avec les données factices dans chacun des quatre coins de la mise en page. Lorsque la fenêtre est redimensionnée pour être plus grand ou plus petit, les quatre tables de modifier la taille en conséquence.Une utilisation est une simple grille de quatre cellules, deux colonnes et deux lignes. L'autre utilisation inclut une étude de Mise en page avec des Boutons dans une colonne du milieu et une rangée du milieu, dans un GridLayout avec trois colonnes et trois lignes pour un total de neuf cellules, dont trois vides.
Des captures d'écran de chaque type d'utilisation...
Voici les deux classes, chacune d'une sous-classe de GridLayout. D'abord les plus simples, puis plus complexes.
Voici le GridLayout avec des boutons.
Voici le code pour obtenir le GridLayouts sur l'écran. Pour Vaadin 6, déplacer les entrailles de cette classe à la classe appropriée.
Enfin, voici le code pour le mannequin de données, une sous-classe de la Table.
OriginalL'auteur Basil Bourque