java - framework - Vaadin Grid vs Table
Resumen
Grid → New & Amazing
Tabla → Venerable y Confiable
Table es un widget de visualización de cuadrícula de datos muy bueno integrado en las primeras versiones de Vaadin.
Grid es una gran reescritura desde cero, diseñada para suplantar a Table. El equipo de Vaadin está aprovechando su sabiduría obtenida de la experiencia, "si supiéramos entonces lo que sabemos ahora", para hacer la mejor red de datos posible dada la tecnología web actual. La cuadrícula es tan importante que tiene su propia página de vanidad . Consulte la publicación de este blog de la compañía para obtener una descripción general rápida
Así que, en general, te sugiero que te concentres en Grid . Pruébelo, apréndalo primero y vea si satisface sus necesidades. Si se encuentra con errores o problemas, o si necesita características que no se encuentran en Grid, entonces vuelva a la tabla . Puede mezclar y combinar ambos en un proyecto, con la advertencia de que la apariencia y el comportamiento diferentes pueden confundir a sus usuarios.
Piense en Grid como el adolescente precoz, lleno de promesas y con ganas de dar el salto a la edad adulta, y en Table como el adulto maduro que trabaja arduamente en sus primeros años de la mediana edad mientras sueña con un futuro bien merecido retiro en el atardecer.
Detalles
Si usa Vaadin 6, en un proyecto continuo o si necesita admitir navegadores muy antiguos, entonces Table es su única opción. Grid requiere Vaadin 7 o posterior.
Aquí hay algunas características importantes de la tabla que actualmente faltan en la cuadrícula.
- Funciones de arrastrar y soltar (que se agregarán más adelante).
- Cambiar el tamaño de la columna por el usuario arrastrando el borde del encabezado de la columna.
Ambos comparten muchas características. Practican la carga perezosa en el navegador, cargando automáticamente los datos solo según sea necesario desde el lado del servidor para no sobrecargar el navegador web. Ambos permiten al usuario arrastrar columnas para volver a ordenar. Ambos permiten al usuario mostrar / ocultar columnas.
Selección de filas
Ambos permiten seleccionar filas individuales o múltiples filas.
La cuadrícula también tiene una característica automática donde agrega una columna de casillas de verificación. El usuario puede seleccionar varias filas haciendo clic en esas casillas de verificación en lugar de usar un mouse o mouse + teclado. Muchos, si no la mayoría, los usuarios son torpes con la selección de múltiples filas controladas por el mouse. Vea esta captura de pantalla y observe la primera columna.
El soporte de programación para la selección es diferente. Grid no extiende AbstractSelect , en su lugar define su propia API de selección. Llame a addSelectionListener() y defina un SelectionListener . Ver El Libro De Vaadin .
Encabezados y pies de página
Ambos tienen encabezados y pies de página, pero Grid tiene más opciones. Grid puede colocar widgets en lugar de texto. La cuadrícula puede tener varias filas de encabezados. La cuadrícula puede unir celdas de encabezado, como dividir en una tabla HTML.
Edición in situ
Ambos proporcionan una edición de datos en el lugar, pero de diferentes maneras. Tabla permite la edición de datos en la celda. Grid adoptó un enfoque diferente, para editar toda la fila mostrando una mini ventana, un pequeño formulario de ingreso de datos. Este formulario incluye un par de botones de confirmación y cancelación. Esta forma es mucho más flexible que la edición de celdas de Table.
Filtración
Grid ofrece filtrado controlado por el usuario, donde aparece una fila de celdas enterables debajo de los encabezados. A medida que los usuarios escriben, se aplica un filtro para mostrar solo las filas coincidentes. Ver esta captura de pantalla . Con Table, necesita crear algún tipo de interfaz de usuario y aplicar el filtrado.
Respaldado por el contenedor de datos
ACTUALIZACIÓN: Vaadin 8 trae una nueva versión de Grid que aprovecha un modelo de datos recientemente mejorado y enormemente simplificado . Esta es una razón importante para usar Grid en lugar de Table. Tenga en cuenta que tanto la cuadrícula original como la tabla aún están disponibles en Vaadin 8 a través de la capa de compatibilidad de Vaadin 7 .
La siguiente información antigua queda intacta ...
Tanto Table como Grid son un widget solo para presentación, respaldado por un objeto de datos separado que implementa la interfaz de Container acuerdo con el modelo de datos de Vaadin .
La clase Table también actúa como un contenedor que siempre me confundió. Me alegra ver que Grid mantiene una separación clara más clara.
Al igual que en Table, Grid ofrece algunos métodos de conveniencia para situaciones rápidas y sucias en las que desea enviar algunos datos a la Grid sin producir formalmente un Contenedor. Pero los métodos de conveniencia de Grid utilizan términos de fila y columna en contraste con los términos de propiedad y artículo del Contenedor. Estos términos dejan más claro que usted está hablando con la Cuadrícula, pero la Cuadrícula está actuando en su instancia predeterminada IndexedContainer adjunta en su nombre.
Contenido celular
ACTUALIZACIÓN: En Vaadin 8.1, Grid obtiene la capacidad de mostrar un componente en una celda. Vea una demostración en vivo del Component Renderer .
El manejo del contenido celular es diferente. La cuadrícula no puede mostrar directamente los íconos de columna, ni puede colocar componentes (widgets) en una celda. En su lugar utiliza las nuevas características de Renderer .
Doc y demo
Ambos tienen un capítulo en The Book Of Vaadin , Table y Grid .
Ambos tienen demostraciones en vivo. Uno para la tabla (y TreeTable ). Y una pareja para Grid, una ventana completa y otra con varios aspectos .
Consulte la página de este folleto para Grid , que incluye una demostración en vivo incorporada, con un enlace a más demostraciones.
Diferencias misceláneas
Grid tiene un widget incorporado para mostrar un número como un pequeño widget de termómetro. Ver esta captura de pantalla , en la última columna.
Para conocer las diferencias más específicas, consulte la sección 5.24.1 Descripción general - Diferencias con la tabla en The Book Of Vaadin .
Esoterica ... Grid es el primer componente de Vaadin Components , un conjunto de componentes web de alta calidad construido en Google Polymer que está listo para ser utilizado con cualquier marco que admita componentes web . Si bien el equipo de Vaadin ha prometido apoyar a Table durante años en el futuro, no espere que reciba tanta atención especial.
Vaadin 8
En Vaadin 8.0 y 8.1, Grid está mejorando aún más. Las mejoras principales incluyen:
- Funciona con el modelo de datos más simple y elegante en Vaadin 8
- Pasa una colección de entidades para mostrar
- Definir fácilmente columnas con sintaxis lambda segura para el tipo
grid.addColumn( Person::getFirstName ).setCaption( "First Name" ); - Más fácil la carga perezosa de datos ahora que
Containerse ha ido:
grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
- La capacidad de mostrar los componentes de Vaadin en lugar de solo los renderizadores.
- Arrastre y suelte mediante el soporte de arrastrar y soltar definido por HTML5.
- Aun mas velocidad
El componente Tabla todavía está disponible a través de la capa de compatibilidad en Vaadin 8 para continuar el uso de las clases de Vaadin 7.
Futuro
El equipo de Vaadin tiene excelentes planes para Grid, y mucho de lo que lea en la página de cambiará. El equipo agregará con entusiasmo características, mejoras y correcciones de errores en los próximos meses y años. Muchas de las mejoras ya se han realizado en Grid en su breve historia, así que tenga cuidado al leer documentos antiguos sobre limitaciones o carencias de funciones, ya que puede que ya no sea así.
En la tabla de filtro, si hacemos clic en el encabezado de la tabla, la primera fila se resaltará por defecto con un método llamado setSelectable (true); pero en la tabla de cuadrícula no hay tal tipo de acción,
Quiero aplicar la misma acción en la tabla de cuadrícula. ¿Hay alguna posibilidad de tener esa naturaleza? ¿Hay algún método o código disponible?
A continuación se muestra el código que usé en mi tabla de cuadrícula:
private void buildPagedGrid(Class<T> clazz) {
setWidth("100%");
setSelectionMode(SelectionMode.SINGLE);
setImmediate(true);
setSizeFull();
setContainerDataSource(dataSource);
setFooterVisible(true);
}
En realidad, es posible implementar todo lo que quieras con ambos. Pero mi experiencia es que el Grid es más cómodo de usar.
La tabla es fácil de entender y fácil de usar para tablas simples (como puede suponer). Entonces, si solo desea mostrar algunas líneas de datos visualizados bien, use la tabla. Es estable y funciona bien en eso.
La cuadrícula se ve como una tabla pero tiene algunas características hacia la tabla. Si tiene una gran cantidad de datos para representar, la Cuadrícula podría manejarlo mejor. También existe una buena práctica para "editar en línea" sus datos. Hay una forma de personalizar ampliamente los encabezados de una cuadrícula. Si desea realizar mucha personalización e interacción dentro de un componente similar a una tabla, use la cuadrícula.
Vea las características aquí:
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid
Hay una diferencia en cómo puede seleccionar filas / celdas en estos dos componentes. Por ejemplo, los EventListeners para la selección se utilizan ligeramente diferentes en relación con el valor que devuelven. También hay una diferencia en cómo agregar columnas y filas a ellos, pero eso es solo una cuestión de implementación, por lo que realmente no debería importar.
Grid es un nuevo componente más poderoso que se supone que es el sucesor de Table (ver The Table is dead, long live the Grid ). Por lo tanto, no debería haber ninguna necesidad de favorecer la tabla sobre la cuadrícula.
Aquí está el primero de la serie de artículos de Vaadin sobre la migración de Table to Grid: https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic