Se encuentra en:
Funcionalidades de la capa de presentación
LIBP-0011 (Libro de pautas)
- Área: Capa de Presentación
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
- Tecnologías: Capa de presentación
Tener en cuenta las siguientes indicaciones al trabajar con la capa de presentación
Pautas
| Título | Carácter |
|---|---|
| Finalidad | Obligatoria |
| Modularidad | Obligatoria |
| Internacionalización y localización | Recomendada |
| Validaciones | Obligatoria |
| Catálogo de controles | Recomendada |
| Estructura de la página | Recomendada |
| Áreas de la página | Recomendada |
| Campos de entrada/salida | Recomendada |
| Elementos de acción | Recomendada |
| Asignación de conversores | Obligatoria |
| Validadores | Obligatoria |
| Navegación | Recomendada |
| Uso de plantillas | Obligatoria |
| Uso de leyendas y avisos | Recomendada |
| Uso de XHTML | Obligatoria |
| Hojas de estilo en cascada | Obligatoria |
| Nomenclatura de componentes visuales | Recomendada |
| Codificación | Obligatoria |
| Reglas de navegación | Recomendada |
| Controles de interfaz | Obligatoria |
| Independencia entre capas | Obligatoria |
| Conversores | Recomendada |
Finalidad
Presentar la información al usuario
La capa de presentación, también llamada "capa de usuario", presenta el sistema al usuario, le comunica información y captura la misma en un proceso mínimo, que realiza un filtrado para validar los datos respecto al formato. No deberá procesar datos ni tomar decisiones.
Esta capa se comunica únicamente con la capa de negocio. También es conocida como interfaz gráfica y debe tener la característica de ser "amigable" (comprensible y fácil de usar) para el usuario.
Modularidad
Controlar la relación entre las vistas
En una vista sólo debe hacerse referencia a otras vistas relacionadas con su funcionalidad. Una vez en ejecución, se podrá integrar la vista con la cabecera, pie y menú que le corresponda, aumentando así la reusabilidad y el encapsulamiento de funcionalidad.
Internacionalización y localización
Preparar las aplicaciones para diferentes idiomas y convenciones
Se aconseja que las aplicaciones estén preparadas para que puedan adaptarse a diferentes idiomas y convenciones (formatos de fecha, moneda, etc.), sin necesidad de realizar cambios en el código.
Validaciones
Realizar validaciones sobre los datos introducidos por los usuarios
La vista será la responsable de la validación inicial de los datos introducidos por el usuario. La validación debe ser obligatoria sólo para el caso de campos y formato. La validación de campo obligatorio no va asociada al tipo de dato, sino a la función que se está codificando, por ello este tipo de validación se reflejará directamente en la página. En cambio, la validación de formato sí es independiente del contexto de la función. Nunca deberá realizarse una validación de negocio desde esta capa.
Catálogo de controles
Elaborar un catálogo con la lista de controles oficiales
Se especificará, si es posible, la función del control, los posibles validadores/conversores que se le puedan asociar, los eventos que pueda lanzar y los atributos que puedan cambiarse para manipular su aspecto externo. Los controles deberían permitir el tratamiento de componentes y eventos que nos posibiliten extraer de la vista toda la lógica de interfaz. La consecuencia principal de este enfoque es que desde la vista nunca se manipularán los controles. El objetivo es que la construcción de la vista sea una tarea totalmente autónoma del resto de componentes de la función de negocio y luego, que todas las piezas se integren perfectamente sin grietas.
Estructura de la página
Desarrollar nuevas funcionalidades manteniendo la estructura de la página
El desarrollo de la nueva funcionalidad se realizará teniendo en cuenta que irá incrustada en una página web completa, por lo que se recomienda no usar etiquetas que no puedan estar entre marcas <body /> de HTML, incluyendo las propias <body />.
Áreas de la página
Definir los grupos de controles de la página
Como grupos de controles a disponer en la página que implemente la funcionalidad de negocio, se tendrán:
- Zona de identificación de la funcionalidad: diversos marcadores que pueden identificar al usuario, al contexto en el que se está ejecutando la funcionalidad de la página, la propia funcionalidad, etc.
- Panel de mensajes generales, donde mostrar los mensajes de error.
- Cuerpo del formulario, agrupando los controles.
- Una zona de controles donde agrupar todos los botones que gestionen la navegación y el envío de datos del formulario al servidor.
Campos de entrada/salida
Formatear los campos de entrada/salida con etiquetas
Se recomienda que cada campo de entrada/salida tenga una etiqueta identificativa del campo y un lugar para mostrar los mensajes de error, que se puedan producir en relación con el campo al que acompaña (propiedad for de la etiqueta).
Elementos de acción
Definir correctamente los distintos elementos de acción
Se recomienda separar de forma efectiva la gestión de la navegación de la ejecución de la lógica. Los elementos de acción son botones o enlaces que generan acciones tanto de navegación como de ejecución de lógica. En la propiedad de control se tendrá una expresión que apuntara a una propiedad de tipo String. Esta propiedad devolverá el resultado que se pasará al sistema de gestión de la navegación. En otra propiedad de control se obtendrá la invocación a un método que ejecute la lógica de negocio, y que además modifique la propiedad que será usada para gestionar la navegación.
Asignación de conversores
Asignar conversores a controles individuales
Un conversor convierte datos de un sólo control en objetos de negocio, es decir, que si un cierto objeto de negocio necesita datos de varios controles (dos fechas y una cadena de caracteres, por ejemplo) para construirse, no se le podrá asignar un conversor al grupo de controles y obtener así el objeto de negocio. Los conversores sólo se asignarán a controles individuales.
Validadores
No usar validadores parametrizados
No existirán validadores parametrizados, por lo que el uso de un validador será sólo incluir la correspondiente etiqueta en el lugar correcto de la página.
Navegación
Informar de los resultados de la navegación
Se recomienda usar dos valores básicos para los resultados que guiarán la navegación: SUCESS y ERROR. El primero para indicar el éxito de una cierta acción y el segundo para indicar una situación de error. Además, se añadirá un nivel más de nomenclatura para afinar: NombreAccion_SUCESS y NombreAccion_ERROR, para incluir aparte de la situación, la acción en la que se generó esta última.
Uso de plantillas
Facilitar el mantenimiento haciendo uso de plantillas
Se debe utilizar un framework de plantillas (templating) en la capa de presentación, ya que se facilita el mantenimiento del diseño de los sistemas de información. Existen frameworks que posibilitan aislar el diseño de la aplicación en un único fichero de plantilla (o más, si se necesitan). Esto facilita hacer modificaciones en el diseño.
Uso de leyendas y avisos
Mejorar la información haciendo uso de leyendas y avisos
Se aconseja el uso de leyendas y avisos para las áreas de la vista. De esta manera se aumenta la capacidad de mostrar información y mejora la presentación de la vista. Solo se muestra el contenido cuando se produce un evento sobre el área que tiene asociada.
Uso de XHTML
Utilizar XHTML para cumplir estrictamente con las especificaciones
Se debe hacer uso de XHTML. XHTML es solamente la versión XML de HTML, por lo que tiene básicamente las mismas funcionalidades pero cumple las especificaciones más estrictas de XML. Las principales ventajas del XHTML sobre el HTML son:
- Se pueden incorporar elementos de distintos espacios de nombres XML.
- Un navegador no necesita implementar heurísticas para detectar qué quiso poner el autor, por lo que el analizador puede ser mucho más sencillo.
- Como es XML se pueden utilizar fácilmente herramientas creadas para procesamiento de documentos XML genéricos (editores, XSLT, etc.).
Hojas de estilo en cascada
Utilizar las hojas de estilo en cascada para separar contenido y presentación
Es preciso separar contenido de presentación, es decir, información sensible y la manera en la que ésta se representa en la capa. Dentro del código de la funcionalidad de negocio no se usará ninguna etiqueta que controle el formato. Esto posibilita la reutilización de código. Con el uso de CSS se personaliza cualquier aspecto de la web, y por la forma de ejecutarse el código, el estilo impuesto por CSS prevalece. Se deben realizar estos ajustes sobre un fichero de estilos, donde se implementen las distintas características en cuestiones de apariencia y presentación.
Nomenclatura de componentes visuales
Utilizar nomenclatura adecuada para facilitar la localización y mantenimiento
Se recomienda seguir una nomenclatura unitaria para los componentes visuales de una aplicación. De esta manera se facilita la localización y el mantenimiento de los mismos.
Codificación
Utilizar prefijos determinados en la importación de bibliotecas
En la importación de bibliotecas, se debe usar el prefijo “f” para hacer referencia a etiquetas del núcleo de la implementación mientras que el prefijo “h” se debe usar para hacer referencia a etiquetas de componentes HTML.
Reglas de navegación
Declarar las reglas de navegación en archivos independientes
Es recomendable para lograr una mejor legibilidad y organización, mantener las reglas de navegación en varios archivos de configuración XML.
Controles de interfaz
Utilizar un identificador único para los controles de interfaz
Todos los controles de interfaz a nivel de pantalla, deben mantener un identificador único para facilitar su compresión, reutilización y batería de pruebas del mismo.
Independencia entre capas
Evitar el acomplamiento entre distintas capas
Cada capa debe tomar la responsabilidad que le corresponde. Las clases de acción deben contener sólo lógica de presentación. En este caso, debe evitarse que la capa de presentación realice atribuciones que le correspondan a otras capas.
Conversores
Usar conversores de cadenas de texto
Se aconseja que las cadenas recogidas a través de formularios sean convertidas a objetos adecuados, bien tipos base, tales como integer, long, double, boolean.
Contenidos relacionados
Pautas
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| LIBP-0031 | Jerarquía visual clara | Libro de pautas | Directriz | Obligatoria |
| LIBP-0033 | Contenidos | Libro de pautas | Directriz | Obligatoria |
| LIBP-0034 | Formularios | Libro de pautas | Directriz | Obligatoria |
| LIBP-0035 | Búsqueda y filtro de contenidos | Libro de pautas | Directriz | Obligatoria |
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| PAUT-0038 | Consistencia | Pauta | Directriz | Obligatoria |
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| PAUT-0070 | Entrada y salida de datos | Pauta | Consejo | |
| PAUT-0072 | Idioma | Pauta | Consejo |
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| PAUT-0093 | XHTML 1.1 | Pauta | Directriz | Recomendada |
| PAUT-0094 | CSS 2.1 | Pauta | Directriz | Recomendada |
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| LIBP-0122 | Esquema general de las pantallas de primer nivel | Libro de pautas | Directriz | Obligatoria |
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| LIBP-0161 | Prototipo de pantalla de error | Libro de pautas | Directriz | Obligatoria |
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| LIBP-0145 | Componentes básicos de un formulario | Libro de pautas | Directriz | Obligatoria |
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| LIBP-0194 | Formato de impresión para interfaces web | Libro de pautas | Directriz | Obligatoria |
| Código | Título | Tipo | Carácter | |
|---|---|---|---|---|
| LIBP-0213 | Gama cromática | Libro de pautas | Directriz | Obligatoria |
| LIBP-0214 | Tipografía | Libro de pautas | Directriz | Obligatoria |
| LIBP-0215 | Elementos gráficos | Libro de pautas | Directriz | Obligatoria |
| LIBP-0216 | Creación de página | Libro de pautas | Directriz | Obligatoria |
Recursos
| Código | Título | Tipo | Carácter |
|---|---|---|---|
| RECU-0819 | Implementación de la capa de presentación con JSF | Referencia | Recomendado |
| RECU-0140 | Facelets | Referencia | Recomendado |
