Vaadin Grid vs Table
Grid est un nouveau composant plus puissant qui est supposé être le successeur de Table (voir La Table est morte, vive la Grille ). Il ne devrait donc pas être nécessaire de privilégier le tableau par rapport à la grille.
Voici une première dans la série d'articles de Vaadin sur la migration de Table vers Grid: https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic
Résumé
Grille → Nouveau et incroyable
Tableau → Vénérable et fiable
Table est un très bon widget d'affichage de grille de données intégré dans les premières versions de Vaadin.
Grid est une grande réécriture à partir de zéro, conçue pour supplanter Table. L'équipe Vaadin tire parti de sa sagesse acquise par l'expérience, "si nous savions alors ce que nous savons maintenant", pour créer la meilleure grille de données possible compte tenu de la technologie Web d'aujourd'hui. La grille est tellement importante qu'elle obtient son propre page de vanité . Voir ce billet de blog d'entreprise pour un aperçu rapide.
Donc, de manière générale, je vous suggère de vous concentrer sur la grille . Essayez-le, apprenez-le d'abord et voyez s'il répond à vos besoins. Si vous rencontrez des bugs ou des problèmes, ou si vous avez besoin de fonctionnalités manquantes dans la grille, retournez au tableau . Vous pouvez mélanger et assortir les deux dans un projet, avec la mise en garde que l'apparence et le comportement différents peuvent confondre vos utilisateurs.
Considérez Grid comme l'adolescent précoce plein de promesses et désireux de faire le saut à l'âge adulte, et Table en tant que grand adulte travaillant dur dans ses premières années de moyen-âge tout en rêvant d'une future retraite bien méritée naviguant vers le coucher du soleil.
Détails
Si vous utilisez Vaadin 6, sur un projet continu ou si vous devez prendre en charge de très anciens navigateurs, alors Table est votre seul choix. Grid nécessite Vaadin 7 ou une version ultérieure.
Voici quelques fonctionnalités principales de Table qui manquent actuellement dans Grid.
- Fonctionnalités de glisser-déposer (à ajouter ultérieurement).
- Redimensionnez la colonne en faisant glisser le bord de l'en-tête de colonne par l'utilisateur.
Les deux partagent de nombreuses fonctionnalités. Ils pratiquent le chargement paresseux sur le navigateur, chargeant automatiquement les données uniquement si nécessaire à partir du côté serveur afin de ne pas surcharger le navigateur Web. Les deux permettent à l'utilisateur de faire glisser les colonnes pour les réorganiser. Les deux permettent à l'utilisateur d'afficher/masquer les colonnes.
Sélection de ligne
Les deux permettent de sélectionner des lignes simples ou plusieurs lignes.
La grille a également une fonction automatique où elle ajoute une colonne de cases à cocher. L'utilisateur peut sélectionner plusieurs lignes en cochant ces cases plutôt qu'en utilisant une souris ou une souris + clavier. De nombreux utilisateurs, sinon la plupart, sont maladroits avec la sélection de plusieurs lignes à l'aide de la souris. Voir cette capture d'écran , et notez la toute première colonne.
Le support de programmation pour la sélection est différent. La grille ne s'étend pas AbstractSelect , définit à la place sa propre API de sélection. Appelez addSelectionListener() et définissez un SelectionListener . Voir Le livre de Vaadin .
En-têtes et pieds de page
Les deux ont des en-têtes et des pieds de page, mais Grid a plus d'options. La grille peut placer des widgets au lieu du texte. La grille peut avoir plusieurs lignes d'en-têtes. La grille peut joindre des cellules d'en-tête, comme s'étendant sur un tableau HTML.
Édition sur place
Les deux permettent de modifier les données sur place, mais de différentes manières. Le tableau permet de modifier les données de la cellule. Grid a adopté une approche différente, pour éditer la ligne entière en affichant une mini-fenêtre, un petit formulaire de saisie de données. Ce formulaire comprend une paire de boutons de confirmation et d'annulation. Ce formulaire est beaucoup plus flexible que l'édition de cellule du tableau.
Filtration
La grille offre un filtrage contrôlé par l'utilisateur, où une rangée de cellules saisissables apparaît sous les en-têtes. Lorsque les utilisateurs tapent, un filtre est appliqué pour afficher uniquement les lignes correspondantes. Voir cette capture d'écran . Avec Table, vous devez créer une sorte d'interface utilisateur et appliquer le filtrage.
Soutenu par un conteneur de données
MISE À JOUR: Vaadin 8 apporte une nouvelle version de Grid qui exploite n modèle de données nouvellement amélioré et grandement simplifié . C'est une raison majeure d'utiliser Grid au lieu de Table. Notez que la grille d'origine ainsi que le tableau sont toujours disponibles dans Vaadin 8 via la couche de compatibilité Vaadin 7 .
Les anciennes informations suivantes sont restées intactes…
Table et Grid sont tous deux un widget de présentation uniquement, soutenu par un objet de données distinct implémentant l'interface Container conformément à Vaadin Data Model .
La classe Table agit également comme un Container qui m'a toujours dérouté. Je suis heureux de voir Grid maintenir une séparation distincte plus claire.
Comme le tableau, la grille offre certaines méthodes pratiques pour les situations rapides et sales où vous souhaitez jeter des données sur la grille elle-même sans produire formellement un conteneur. Mais les méthodes pratiques de Grid utilisent les termes row et column contrairement aux conteneurs item et property termes. Ces termes indiquent plus clairement que vous parlez à la Grille mais que la Grille agit sur son instance attachée par défaut IndexedContainer en votre nom.
Contenu des cellules
MISE À JOUR: Dans Vaadin 8.1, la grille gagne la capacité d'afficher un composant dans une cellule. Voir une démo en direct du rendu des composants .
La gestion du contenu des cellules est différente. La grille ne peut pas afficher directement les icônes de colonne, ni placer des composants (widgets) dans une cellule. A la place, a utilisé les nouvelles fonctionnalités Renderer .
Doc et démo
Les deux ont un chapitre dans Le Livre de Vaadin , n pour le tablea et n pour la grille .
Les deux ont des démos en direct. n pour le tablea (et TreeTable ). Et un couple pour Grid, ne fenêtre pleine et ne avec divers aspects .
Voir ceci page de brochure pour Grid , y compris une démo en direct intégrée, avec un lien vers d'autres démos.
Différences diverses
La grille a un widget intégré pour afficher un nombre comme un petit widget thermomètre. Voir cette capture d'écran , dans la dernière colonne.
Pour des différences plus spécifiques, voir la section 5.24.1 Présentation - Différences par rapport au tablea dans The Book Of Vaadin .
Esoterica… Grid est le premier composant de Vaadin Components , un ensemble de composants Web de haute qualité construit sur Google Polymer qui est prêt à être utilisé avec n'importe quel framework qui prend en charge Composants Web . Alors que l'équipe Vaadin a promis de soutenir Table pendant des années à l'avenir, ne vous attendez pas à ce qu'elle reçoive une attention particulière.
Vaadin 8
Dans Vaadin 8.0 et 8.1, Grid s'améliore encore. Les améliorations majeures comprennent:
- Fonctionne avec le modèle de données plus simple et plus élégant nouveau dans Vaadin 8
- Passer une collection d'entités à afficher
- Définissez facilement des colonnes avec la syntaxe lambda de type sécurisé
grid.addColumn( Person::getFirstName ).setCaption( "First Name" ); - Chargement paresseux des données plus facile maintenant que
Containera disparu:grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
- La possibilité d'afficher des composants Vaadin plutôt que de simples rendus
- Glissez-déposez via la prise en charge du glisser-déposer définie par HTML5.
- Encore plus de vitesse
Le composant Table est toujours disponible via la couche de compatibilité dans Vaadin 8 pour continuer à utiliser les classes Vaadin 7.
Futur
L'équipe Vaadin a de grands projets pour Grid, donc beaucoup de ce que vous lisez sur la page StackOverflow va changer. L'équipe ajoutera avec impatience des fonctionnalités, des améliorations et des corrections de bugs dans les mois et les années à venir. De nombreuses améliorations ont déjà été apportées à Grid dans sa courte histoire, alors méfiez-vous lorsque vous lisez des documents plus anciens sur les limitations ou les fonctionnalités manquantes - ce n'est peut-être plus le cas.
En fait, il est possible de mettre en œuvre tout ce que vous voulez avec les deux. Mais mon expérience est que la grille est plus confortable à utiliser.
La table est facile à comprendre et facile à utiliser pour les tables simples (comme vous pouvez le deviner). Donc si vous voulez juste montrer quelques lignes de données bien visualisées - utilisez le tableau. Il est stable et fonctionne bien.
La Grille ressemble à une Table mais elle a quelques fonctionnalités vers la Table. Si vous avez beaucoup de données à restituer, la Grille pourrait mieux les gérer. Il existe également une bonne pratique pour "l'édition en ligne" de vos données. Il existe un moyen de personnaliser considérablement les en-têtes d'une grille. Si vous voulez faire beaucoup de personnalisation et d'interaction à l'intérieur d'un composant de type table - utilisez la Grille.
Voir les fonctionnalités ici:
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid
Il existe une différence dans la façon dont vous pouvez sélectionner des lignes/cellules dans ces deux composants. Par exemple, les EventListeners pour la sélection sont utilisés légèrement différents concernant la valeur qu'ils retournent. Il y a aussi une différence dans la façon dont vous leur ajoutez des colonnes et des lignes, mais c'est juste une chose d'implémentation, donc cela ne devrait pas vraiment avoir d'importance.
Dans la table de filtrage, si nous cliquons sur l'en-tête de la table, la première ligne sera mise en évidence par défaut par une méthode appelée setSelectable (true); mais dans la table de grille il n'y a pas un tel type d'action,
Je veux appliquer la même action dans la table de grille. Est-il possible d'avoir cette nature? Y a-t-il une méthode ou un code disponible?
Voici le code que j'ai utilisé dans ma table de grille:
private void buildPagedGrid(Class<T> clazz) {
setWidth("100%");
setSelectionMode(SelectionMode.SINGLE);
setImmediate(true);
setSizeFull();
setContainerDataSource(dataSource);
setFooterVisible(true);
}