Prototipo de pantalla de listado simple

LIBP-0162 (Libro de pautas)

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:

Listado simpleListado simple

Pautas

TítuloCarácter
Diseño del listado simpleObligatoria
ImplementaciónRecomendada

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

Recursos
Área: Interfaz de usuario » Normalización de Interfaces
Código Título Tipo Carácter
RECU-0524 Caso práctico Ejemplo Recomendado