Prototipo de pantalla de introducción de datos
- Área: Prototipos de pantallas
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
Las pantallas de introducción de datos están constituidas principalmente por un formulario web que permite al usuario introducir ciertos datos requeridas por la aplicación para realizar una búsqueda, dar de alta o modificar una entidad, etc.
Se presenta aquí el formato general de una pantalla simple de introducción de datos y sus pautas relacionadas.
Pautas
| Título | Carácter |
|---|---|
| Diseño de la pantalla | Obligatoria |
| Título del formulario | Obligatoria |
| Implementación | Recomendada |
Diseño de la pantalla
Las pantallas de introducción de datos deberán incluir un formulario web con un conjunto ordenado de campos para añadir la información requerida.
En la siguiente imagen se presenta el formato que deben tener este tipo de pantallas de introducción de datos:
Como puede observarse, los campos del formulario se disponen en una única columna para cumplir con las pautas de usabilidad y accesibilidad.
Título del formulario
El formulario web tendrá un título identificativo que sea suficientemente descriptivo.
En aras de la mejor comprensión de la información que se requiere en el formulario, éste debe aportar un título descriptivo para que el usuario pueda interpretar con claridad que datos debe aportar.
Implementación
Implementar la pantalla de introducción de datos o formulario 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: formulario.xhtml
- Backing Bean: Formulario.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
- Mensajes de error tras el componente que lo genera y al comienzo del formulario
- Etiquetado del componente "selectOneRadio" de JSF para cumplir accesibilidad
- Etiquetado del componente "selectBooleanCheckbox " de JSF para cumplir accesibilidad
- Etiquetado del componente "calendar " de RichFaces para cumplir accesibilidad y modificación de su iconos
- Eliminación de atributo "style" de elementos "input" generados por RichFaces, a través de jQuery
Contenidos relacionados
Recursos
| Código | Título | Tipo | Carácter |
|---|---|---|---|
| RECU-0524 | Caso práctico | Ejemplo | Recomendado |
