Prototipo de pantalla de listado simple
- Área: Prototipos de pantallas
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
Pautas relacionadas con el prototipo de pantalla de listado simple que permiten la visualización de un resultado de una búsqueda sobre la aplicación en formato de informe.
En la siguiente imagen puede observarse un ejemplo de prototipo de listado simple:
Pautas
Título | Carácter |
---|---|
Diseño del listado simple | Obligatoria |
Implementación | Recomendada |
Diseño del listado simple
El listado simple se presentará como un informe de impresión que dispondrá de Cabecera, Cuerpo y Pie, con una tabla de datos para mostrar la información.
El prototipo de pantalla de listado simple corresponderá con la visualización de un listado de datos en un formato que permita su impresión. Deberá incluir tres secciones cláramente diferenciadas:
- Cabecera: Se deberá mostrar el logotipo de la aplicación y/o de la organización. Incluirá además el título del listado, la relación de parámetros que fueron utilizados para su generación en la pantalla de búsqueda y los datos identificativos: usuario que ha generado, código de informe, etc.
- Cuerpo: Su contenido variará en función del listado, pero para el formato de listado simple se deberá visualizar una tabla de datos en cuya cabecera se muestren los nombres de las columnas que identifiquen claramente el contenido de los datos incluidos.
- Pie: Puede contener información sobre el nombre de la organización, así como la paginación si no estuviese ya en la cabecera.
Implementación
Implementar la pantalla de listado simple empleando los artefactos suministrados con el caso práctico.
En el caso práctico se ofrece un ejemplo de este tipo de pantalla que se compone de:
- Plantilla: plantilla.xhtml
- Fichero: listado.xhtml
- Backing Bean: Listado.java
Principales soluciones que implementa:
- Cumplimiento de pautas de accesibilidad y usabilidad
- En la plantilla, eliminación de atributos no válidos para scripts generados por RichFaces, a través de jQuery
- Enlace a la página actual con un botón tipo "submit" para evitar error de accesibilidad al no disponer de botón de envío de formulario
- Generación de fuentes de difusión en formato ATOM1.0
Para ello utiliza el fichero exportar.html y las clases Redifusion.java, Feed.java y Entry.java - Listado con el componente "dataTable" de RichFaces
Filtro de entidades utilizando cuadros de búsqueda y la llamada a la función de filtro a través de la propiedad "filterValue" de "rich:column"
Control del número de entidades listadas a través de la propiedad "rows" del dataTable
Ordenación de las tuplas por las diferentes columnas activando la propiedad "sortable" en el componente "rich:column"
Operaciones sobre las diferentes entidades con enlaces generados por RichFaces - Paginación con el componente datascroller
Cambio de imágenes en los enlaces de la paginación
La forma de implementar la paginación en este ejemplo es manteniendo en sesión todas las entidades que contiene el listado. Este tipo de implementación debe utilizarse cuando el número de entidades es reducido y nunca cuando es superior a 1000, ya que en caso contrario produciría un consumo excesivo de memoria en el servidor. - Eliminación de atributo "style" de elementos "div" y "table" generados por RichFaces, a través de jQuery
- Inclusión de atributo "summary" a tabla de entidades, a través de jQuery
- Ejemplo de exportación a pdf accesible a través del servlet PDFServlet.java
Contenidos relacionados
Código | Título | Tipo | Carácter |
---|---|---|---|
RECU-0524 | Caso práctico | Ejemplo | Recomendado |