# Lineamientos generales de interfaz de usuario Resulta imposible estandarizar absolutamente la riqueza de la interfaz del usuario porque en gran parte es el resultado del trabajo creativo del desarrollador en respuesta a los requerimientos del usuario, sin embargo y para brindar consistencia en el sistema V12, se hacen las siguientes consideraciones. ## Tipos de vistas Un tipo de vista define un conjunto de caraterísticas generales respecto al propósito de una vista, así como a la distribución de sus elementos visuales. ### Mosaico Su propósito es presentar varias opciones para elegir o datos heterogéneos relevantes en forma gráfica. En una vista de mosaico, sus elementos tienen un ancho y alto fijo o al menos mínimo y se organización en función del ancho de la pantalla del dispositivo. Los elementos pueden estar delimitados por secciones que aportan organización lógica a la información. ### Lista Presenta información de un mismo tipo en forma tabular (filas y columnas) o de tarjetas, sobre la que se pueden realizar filtros, ordenaciones, búsquedas y acciones generales o por elemento (fila).
Consideraciones: * Si la cantidad de elementos máxima esperada no superará los 100 elementos, no incluir filtros (simplifica la complejidad de programación de la vista) * Si la cantidad de elementos de una lista es relativamente menor (<251) puede ser razonable mostrarla completamente, en caso contrario presentarla con un conjunto de filtros predeterminado * Si la cantidad de elementos podría ser muy grande, la mejor estrategia es proporcionar opciones de filtrado y búsqueda antes de mostrar los elementos * Si el tipo de elementos que muestra la lista representa documentos o transacciones en el tiempo, se incluirá el filtrado por rangos de fechas * Si los elementos de la lista tienen estados, generalmente se deberán incluir filtros (select) para esos estados * El filtro predeterminado es el "filter-text" que se aplica sobre identificadores (generalmente exacto) o bien sobre nombres o descripciones cortas (como like) * Se aprovechará de ser posible, el 100% del ancho de pantalla o contenedor para permitir que la mayor cantidad de elementos y columnas sean mostrados ### Formulario Presenta elementos de interfaz de usuario para indroducir datos en un formato coherente de arriba a abajo. Los formularios pueden ser simples o principal-detalle. Los formularios simples están formados únicamente por campos (una etiqueta y un control de entrada), mientras que los formularios principal-detalle incluyen tablas de entrada de datos.
En todos los casos, los formularios se organizan en secciones (generalmente pestañas en la parte superior) y en grupos de campos (marcos o frames). ## Composición de las vistas Una vista está definida por las siguientes características: * Tipo de vista (mosaico, lista, formulario, etc.) * Tipo de elemento de datos que representa (Data Element Type: Cliente, Venta, Factura, Documento, etc.) * Datos auxiliares. Datos que no forman parte del elemento de datos, pero que sirven para darle sentido o contexto (variables, parámetros y consultas). * Acciones. Implican una acción con o sobre los datos de la vista. * Controles. Son los elementos visuales individulales de la vista que permiten la interacción del usaurio para ver o modificar datos. * Disposición de controles. Es la secuencia y agrupación de los controles en la vista. * Estados. Son representaciones de la vista con base en sus datos. ### Tipo de elemento de datos Todos las vistas representan al menos un tipo de elemento de datos, por ejemplo un cliente o una factura. Dependiendo de la naturaleza del elemento, es posible que también se representen otros tipos de elementos dependientes. Una vista de lista para el tipo de elemento de datos 'Cliente' mostrará de cero a cualquier cantidad de clientes, mientras que una vista de formulario para ese mismo tipo de elemento mostrará la información de un solo cliente. Ahora bien, una vista de formulario de un tipo de elemento de datos 'Factura', podría mostrar dos tipos de entidades de datos: encabezado (datos generales de la transacción) y detalle (filas de productos) El tipo de elemento de datos es una abstracción de mayor nivel que las entidades que conforman el modelo de datos relacional. ## Datos auxiliares La presentación y comportamiento de las vistas puede depender y apoyarse de datos que no forman parte del tipo de elemento de datos que representa. Por ejemplo, una vista de formulario de 'Factura' require consultar al catálogo de productos para obtener los SKU, precios y otros datos de los elementos de su detalle, así como también requiere consultar al catálogo de clientes para establecer el cliente en el encabezado de la factura. Los datos auxiliares son generalmente: * Variables. Pares clave/valor generalmente establecidas en la configuración del sistema. * Parámetros. Pares clave/valor que se proporcionan al solicitar la vista (por ejemplo parámetros en la URL) * Consultas. Elementos de datos que se obtienen de la base de datos o fuentes de datos externas. ## Acciones Las acciones son disparadas por el usuario cuando require completar alguna tarea. Por ejemplo una vista de lista, generalmente tiene acciones como: Filtrar, Agregar, Editar y Eliminar, por su parte una vista de formulario generalmente incluye acciones como: Aceptar y Cancelar Las acciones en una vista de lista o mosaico pueden ser generales o específicas, son generales aquellas acciones que para su realización no requieren que haya un elemento de datos seleccionado, mientras que son específicas las que sí lo precisian. Acciones generales en una vista de lista son por ejemplo: Filtrar y Agregar, mientras que Editar y Eliminar son específicas porque requieren un elemento seleccionado. Las acciones en las vistas de formulario son generalmente específicas. ## Controles Los controles permiten ver o modificar los datos del elemento de datos representado en la vista. Tipos de controles: * label. Campo de solo lectura para mostrar texto. * input. Campo de entrada de texto o números * text-area. Campo de entrada de texto multilínea * email. Campo de entrada de direcciones de correo electrónico * num. Campo de entrada de números * check. Casilla de verificación * select. Campo de lista desplegable (combo) * edit-select. Campo de lista desplegable que además admite entrada de texto escrita. * input-key. Campo para buscar y seleccionar un elemento de datos auxiliar mediante una consulta. * edit-table. Tabla de presentación de datos con capacidades de edición, ordenación, representación jerárquica y arrastre de elementos. * table. Tabla de solo lectura sin otras capacidades. * check-list. Lista de casillas de verificación (múltiple selección) * date-range. Control de selección de rangos de fechas * safe-input. Control de entrada de texto o números que explícitamente debe ponerse en modo de edición. * media-list. Presenta una galería editable de imágenes u otros elementos multimedia * op-canva. Presenta un lienzo que permite arrastrar y colocar elementos. * stack-edit. Presenta una lista ordenable de elementos. * filter-text. Control para introducir filtros de texto. * filter-date-range. Control para establecer filtros de rango de fechas. Todos los controles tienen al menos las siguientes propiedades: * nombre (name) * etiqueta (label) * bandera de solo lectura (readonly) * bandera de inactivación (disabled) ## Disposición de controles La disposición de controles se refiere a la secuencia y agrupación de los mismos en la vista. Las agrupaciones se definen mediante secciones, que pueden representarse como pestañas o marcos. ## Estados de la vista Cada estado de la vista es una representación de la entidad en respuesta a una solicitud hacia el servidor. Una vista sin estados explícitamente indicados es considerada con un estado único que no requiere ser expresado. Por lo tanto, cada estado tiene un ciclo de vida con las siguientes fases: * Inicio (start). Se lleva a cabo en el servidor e incluye la formación (creación) de los controles y su disposición para ser enviados al dispositivo cliente, está programada generalmente con Devkron. * Interacción (interaction). Se realiza en el dispositivo cliente y está programada generalmente con Javascript * Finalización (finish). Su generación se realiza en el servidor (programada con Devkron) y es la respuesta tras el envío de una solicitud como consecuencia de una acción desde la fase de interacción. ### Condiciones Las condiciones son el comportamiento de los controles de la vista en respuesta a los valores que toman ciertos controles. Por ejemplo desactivar ciertos controles si el usuario selecciona determinada opción en un control 'select'. ### Flujo de estado de la vista El flujo de estados de la vista representa la secuencia de estados prevista. ### Filtros Los filtros implican un viaje de ida y vuelta al servidor que inicia enviando los parámetros de filtro recogidos por los controles de la sección de filtro y concluye en el mismo estado.