Guía de diseño de la interfaz vdiseño: Manual de Consulta Guía de diseño de la interfaz vdiseño: Manual de Consulta 1. Objetivo 1.1 Expectativas 1.2 Recomendaciones Generales 1.3 Esquema: Bloques de la interfaz 1.4 Autoexec 2. Bloque cero. Barra de menús 2.1 Menú Principal 2.2. Submenús del menú principal 2.2.1 Submenú Archivo 2.2.2 Submenú Editar 2.2.3 Submenú Registros 2.2.4 Submenú Configurar 2.2.4.1 Submenú Parámetros 2.2.4.2 Submenú Utilidades 2.2.5 Menú Ayuda 3. Bloque uno. Barra Lateral 4. Bloque dos. Menú de aplicación 5. Bloque tres. Vista central 5.1 Botón de inicio - Formulario de inicio 5.2 Estilo migas en las pestañas 5.3 Formulario abierto desde opciones de menú 6. Rejilla 7. Formularios 7.1 Cabecera 7.2 Cuerpo 7.2.1 Menú de botón para campos puntero a maestro 7.3 Pie 7.4 Recomendaciones 8. Dibujos Dibujos de la aplicación (Personalizables)
Dibujos de la interfaz Dibujos del menú archivo Dibujos del menú editar Dibujos del menú configurar Dibujos del menú ayuda Dibujos de los botones Apéndices Apéndice 1: Galería de iconos 1. Objetivo El objetivo de este documento es establecer recomendaciones para el desarrollo, con Velneo V7, de aplicaciones con un interfaz sencillo y agradable. 1.1 Expectativas La siguiente lista muestra las expectativas que se generaron y aplicaron para la creación de la presente guía de diseño. El programador dispondrá de recomendaciones de trabajo claras para el diseño de la interfaz de sus aplicaciones. Las recomendaciones tratan de conseguir una interfaz homogénea en el ecosistema de Open Apps. La interfaz de las aplicaciones desarrolladas con Velneo V7 debe ser sencilla y agradable de usar. La guía está diseñada para conseguir la mejor experiencia del usuario final. La guía está diseñada para conseguir los mejores resultados en unas resoluciones y tamaños de pantalla determinados. Con esta guía los desarrolladores podrán seguir unos patrones unificados de diseño en el desarrollo de la interfaz de sus Open Apps. La guía facilita la integración de aplicaciones desarrolladas por diferentes empresas. La guía se diseña para que sea fácil de entender y aplicar. En el catálogo de Open Apps existirán ejemplos de aplicaciones desarrolladas aplicando esta guía. Se crearán Open Apps con recursos que servirán como plantilla para facilitar la aplicación de la guía al interfaz de las aplicaciones en desarrollo. 1.2 Recomendaciones Generales
A continuación se detallan las recomendaciones a nivel general que se aplicarán a todos los objetos y controles de la aplicación. Fuentes de sistema: Se usarán en todos los controles y objetos las fuentes de sistema, por defecto. Esto ayuda en la transición del trabajo multiplataforma. El único objeto en el que no se utilizará, por defecto, fuente de sistema en sus controles es en el informe donde se utilizará la fuente Arial. En el siguiente vídeo David Guitiérrez muestra la funcionalidad de fuentes de sistema y da unas recomendaciones claras y precisas de como utilizarlas para facilitar el uso de las aplicaciones en cualquier plataforma. (http://www.youtube.com/ watch?v=y9fbk2ghlea) Usar TAB por defecto: Se recomienda que las aplicaciones por defecto usen la tecla TAB para avanzar al siguiente control. Esto no excluye que en formularios específicos se use otra tecla para el avance de control que ayude en su propósito. Limitar el uso de CSS: Las CSS deben aplicarse de forma concreta para situaciones controladas. El abuso en el uso de las mismas pone en riesgo la estabilidad de la aplicación. Dimensión controles: En la edición de formularios se utilizará la cuadrícula, siempre que sea posible. De esta forma los controles tendrán posiciones y dimensiones múltiplos de 10. De esta forma es más sencillo el mantenimiento de la aplicación y la edición de los formularios. En ejecución las posiciones y dimensiones se verán afectadas por la aplicación de los layouts. Icono de las propiedades de marco, formularios y menús: El número, tamaño y colores de las imágenes influyen negativamente en el peso de las aplicaciones tanto a la hora de guardar los proyectos en desarrollo como en la descarga de las aplicaciones en ejecución. Se recomienda el uso de iconos de un tamaño de 16x16. Para los iconos usados en el marco o formularios se utilizarán iconos de un tamaño de 32x32 ya que además de verse en la esquina superior izquierda del objeto también son visibles en toolbars o ventanas del sistema operativo como la de cambio de aplicación. Librería de iconos: Esta guía ha sido desarrollada utilizando la librería de iconos (Silk de famfamfam ) Para que el interfaz sea homogéneo se recomienda el uso de este misma librería para implementar los iconos propios de la aplicación. Resolución: Esta guía está desarrollada para una resolución mínima recomendada de 1024*768. Tamaño de pantalla: Esta guía está desarrollada para tamaños de pantalla (analizar relaciones de pantalla 4/3 y 16/9) Estilo por defecto: Se recomienda el estilo Plastique por defecto. 1.3 Esquema: Bloques de la interfaz En el siguiente esquema se pueden apreciar los 4 bloques que configuran la interfaz principal de las aplicaciones.
1.4 Autoexec Descripción El AUTOEXEC es el marco principal de la aplicación que engloba en su interior a todos los bloques definidos en esta guía. Propiedades: AUTOEXEC Icono Marco de arranque de la aplicación APP_ICO de 32x32 identificativo de la aplicación Título "" + getprojectname() + " " +
getprojectversion() Formulario principal Modo arranque Menu Principal: INI@proyectoapp TAB PRN (Barra de menu)@nombreapp Propiedades de los subobjetos docks del marco: MEN_APP Principal : Objeto: Posición: Modo de Aparcar: Dock Principal de navegación que se sitúa, por defecto, a la izquierda del marco. MEN_APP@proyectoapp izquierda incluir Condición de visible inicial: 2. Bloque cero. Barra de menús Descripción Denominamos bloque 0 a la barra de menús de la aplicación, que se configura en la propiedad Menú principal del Marco AUTOEXEC de nuestro proyecto.
Recomendaciones El menú no debe incluir más de dos niveles de apertura Uso Barra de menú por defecto para aplicaciones, está incluida en el proyecto vdiseño heredable para el uso general por los desarrolladores de la comunidad. Localización Proyecto a heredar: vdiseño (Descargable desde el catálogo de Velneo Open Apps ) 2.1 Menú Principal
Propiedades: PRN@vDiseño Principal Modo Menú principal de la aplicación asociado a la propiedad Menú Principal de nuestro Marco con identificador AUTOEXEC. Icono y texto Icono Lanzadores de acción del menú principal Propiedades de la acción de menú PRN_INS_1 PRN_INS_1 Punto de inserción 1 Modo Acción Acción PRN_INS_1@vDiseño Propiedades de la acción de menú PRN_ACH
PRN_ACH Archivo Modo Menú Menú PRN_ACH@vDiseño Propiedades de la acción de menú PRN_EDT PRN_EDT Editar Modo Menú Menú PRN_EDT@vDiseño Propiedades de la acción de menú PRN_REG PRN_REG Registro Modo Menú Menú PRN_REG@vDiseño Propiedades de la acción de menú PRN_CFG PRN_CFG Configuración
Modo Menú Menú PRN_CFG@vDiseño Propiedades de la acción de menú PRN_INS_2 PRN_INS_2 Punto de inserción 2 Modo Acción Acción PRN_INS_2@vDiseño Propiedades de la acción de menú PRN_AYU PRN_AYU Ayuda Modo Menú Menú PRN_AYU@vDiseño Acciones asociadas al menú principal: Propiedades de la acción PRN_INS_1 PRN_INS_1 Punto de inserción 1 en el menú PRN Punto de inserción Primer punto de inserción en el menú PRN
Tabla asociada Propiedades de la acción PRN_INS_2 PRN_INS_2 Punto de inserción 2 en el menú PRN Punto de inserción Segundo punto de inserción en el menú PRN Tabla asociada 2.2. Submenús del menú principal 2.2.1 Submenú Archivo Propiedades: PRN_ACH@vDiseño Archivo Opciones generales para todas las aplicaciones
Modo Icono y texto Icono Lanzadores de acción del menú archivo Propiedades de la acción de menú PRN_ACH_INS_1 PRN_ACH_INS_1 Punto de inserción 1 Modo Acción Acción PRN_ACH_INS_1@vDiseño Propiedades de la acción de menú PRT_CFG PRT_CFG Configuración de impresoras lógicas Modo Acción Acción PRN_CFG@vDiseño Propiedades de la acción de menú CRR CRR Salir de la aplicación Modo Acción
Acción CRR@vDiseño Acciones asociadas al menú archivo Propiedades de la acción PRN_ACH_INS_1 PRN_ACH_INS_1 Punto de inserción 1 en el menú PRN_ACH Punto de inserción Primer punto de inserción en el menú PRN_ACH Tabla asociada Propiedades de la acción PRT_CFG PRT_CFG Configurar impresoras Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinación de la tecla aceleradora Comando Configurar impresoras Configurar impresoras Configurar impresoras Configurar impresoras PRT_ICO@vDiseño Ninguna Tecla Archivo: Configurar impresoras lógicas Propiedades de la acción CRR CRR
Salir de la aplicación Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinación de la tecla aceleradora Comando Salir de la aplicación Salir de la aplicación Salir de la aplicación Salir de la aplicación CRR_ICO@vDiseño Ninguna Tecla Archivo: Salir 2.2.2 Submenú Editar Propiedades: PRN_EDT Editar
Modo Opciones de edición Icono y texto Icono Lanzadores de acción del menú editar Propiedades de la acción de menú EDT_COR EDT_COR Cortar Modo Acción Acción EDT_COR@vDiseño Propiedades de la acción de menú EDT_COP EDT_COP Copiar Modo Acción Acción EDT_COP@vDiseño Propiedades de la acción de menú EDT_PEG EDT_PEG Pegar
Modo Acción Acción EDT_PEG@vDiseño Acciones asociadas al menú editar Propiedades de la acción EDT_COR EDT_COR Cortar Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinación de la tecla aceleradora Comando Cortar Cortar Cortar Cortar COR_ICO@vDiseño X Control + Tecla Editar: Cortar Propiedades de la acción EDT_COP EDT_COP Copiar Tabla asociada
Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinación de la tecla aceleradora Comando Copiar Copiar Copiar Copiar COP_ICO@vDiseño C Control + Tecla Editar: Copiar Propiedades de la acción EDT_PEG EDT_PEG Pegar Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinación de la tecla aceleradora Comando Pegar Pegar Pegar Pegar PEG_ICO@vDiseño V Control + Tecla Editar: Pegar 2.2.3 Submenú Registros
Propiedades: PRN_REG Registros Modo Opciones generales para manejo de registros Icono y texto Icono Lanzadores de acción del menú registros Propiedades de la acción de menú NAV NAV Navegante Modo Menú en stock Menú en stock Navegante Propiedades de la acción de menú FIC FIC
Ficha Modo Menú en stock Menú en stock Ficha Propiedades de la acción de menú LIS LIS Lista Modo Menú en stock Menú en stock Lista 2.2.4 Submenú Configurar Propiedades:
PRN_CFG Configurar Modo Opciones de configuración y parametrización Icono y texto Icono Lanzadores de acción del menú configurar Propiedades de la acción de menú CFG_INS_1 CFG_INS_1 Punto de inserción 1 Modo Acción Acción CFG_INS_1@vDiseño Propiedades de la acción de menú CFG_INS_2 CFG_INS_2 Punto de inserción 2 Modo Acción Acción CFG_INS_2@vDiseño Propiedades de la acción de menú CFG_INS_3 CFG_INS_3
Punto de inserción 3 Modo Acción Acción CFG_INS_3@vDiseño Propiedades de la acción de menú CFG_INS_4 CFG_INS_4 Punto de inserción 4 Modo Acción Acción CFG_INS_4@vDiseño Propiedades de la acción de menú PRN_PAR PRN_PAR Parametrización Modo Menú Menú PRN_PAR@vDiseño Propiedades de la acción de menú PRN_UTI PRN_UTI Utilidades
Modo Menú Menú PRN_UTI@vDiseño Propiedades de la acción de menú IDI IDI Idioma Modo Menú en stock Menú en stock Idioma Propiedades de la acción de menú EST EST Estilo Modo Menú en stock Menú en stock Estilo Acciones asociadas al menú configurar Propiedades de la acción CFG_INS_1 CFG_INS_1 Punto de insercción 1 en el menú PRN_CFG Punto de inserción Primer punto de inserción en el menú PRN_CFG Tabla asociada
Propiedades de la acción CFG_INS_2 CFG_INS_2 Punto de insercción 2 en el menú PRN_CFG Punto de inserción Primer punto de inserción en el menú PRN_CFG Tabla asociada Propiedades de la acción CFG_INS_3 CFG_INS_3 Punto de insercción 3 en el menú PRN_CFG Punto de inserción Tercer punto de inserción en el menú PRN_CFG Tabla asociada Propiedades de la acción CFG_INS_4 CFG_INS_4 Punto de insercción 4 en el menú PRN_CFG Punto de inserción Cuarto punto de inserción en el menú PRN_CFG Tabla asociada 2.2.4.1 Submenú Parámetros
Propiedades: PRN_PAR Parámetros Modo Icono Parámetros Icono y texto PAR_ICO@vDiseño Lanzadores de acción del menú parámetros Propiedades de la acción de menú PAR_INS_1 PAR_INS_1 Punto de inserción 1 Modo Acción Acción PAR_INS_1@vDiseño Propiedades de la acción de menú PAR_INS_2
PAR_INS_2 Punto de inserción 2 Modo Acción Acción PAR_INS_2@vDiseño Propiedades de la acción de menú PAR_INS_3 PAR_INS_3 Punto de inserción 3 Modo Acción Acción PAR_INS_3@vDiseño Propiedades de la acción de menú PAR_INS_4 PAR_INS_4 Punto de inserción 4 Modo Acción Acción PAR_INS_4@vDiseño Acciones asociadas al menú parámetros Propiedades de la acción PAR_INS_1 PAR_INS_1 Punto de insercción 1 en el menú PRN_PAR
Punto de inserción Primer punto de inserción en el menú PRN_PAR Tabla asociada Propiedades de la acción PAR_INS_2 PAR_INS_2 Punto de insercción 2 en el menú PRN_PAR Punto de inserción Segundo punto de inserción en el menú PRN_PAR Tabla asociada Propiedades de la acción PAR_INS_3 PAR_INS_3 Punto de insercción 3 en el menú PRN_PAR Punto de inserción Tercer punto de inserción en el menú PRN_PAR Tabla asociada Propiedades de la acción PAR_INS_4 PAR_INS_4 Punto de insercción 4 en el menú PRN_PAR Punto de inserción Cuarto punto de inserción en el menú PRN_PAR Tabla asociada 2.2.4.2 Submenú Utilidades
Propiedades: PRN_UTI Utilidades Modo Icono Utilidades Icono y texto UTI_ICO@vDiseño Lanzadores de acción del menú utilidades Propiedades de la acción de menú CAM_PWD CAM_PWD Cambio de contraseña Modo Acción Acción CAM_PWD@vDiseño
Propiedades de la acción de menú CACHE CACHE Caché Modo Acción Acción CACHE@vDiseño Propiedades de la acción de menú PRC_2P PRC_2P Procesos en segundo plano Modo Acción Acción PRC_2P@vDiseño Propiedades de la acción de menú UTI_INS_1 UTI_INS_1 Punto de inserción 1 Modo Acción Acción UTI_INS_1@vDiseño Propiedades de la acción de menú UTI_INS_2 UTI_INS_2 Punto de inserción 2
Modo Acción Acción UTI_INS_2@vDiseño Propiedades de la acción de menú UTI_INS_3 UTI_INS_3 Punto de inserción 3 Modo Acción Acción UTI_INS_3@vDiseño Propiedades de la acción de menú UTI_INS_4 UTI_INS_4 Punto de inserción 4 Modo Acción Acción UTI_INS_4@vDiseño Acciones asociadas al menú utilidades Propiedades de la acción CAM_PWD CAM_PWD Cambiar contraseña
Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinación de la tecla aceleradora Comando Cambiar contraseña Cambiar contraseña Cambiar contraseña Cambiar contraseña PWD_ICO@vDiseño Ninguna Tecla Archivo: Modificar contraseña del usuario Propiedades de la acción CACHE CACHE Caché Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinación de la tecla aceleradora Comando Estado de la caché de fichas del navegador Estado de la caché de fichas del navegador Estado de la caché de fichas del navegador Caché CACHE_ICO@vDiseño Ninguna Tecla Archivo: Cachés de fichas Propiedades de la acción PRC_2P
PRC_2P Procesos en 2º plano Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Ventana de estado de procesos en 2º plano Ventana de estado de procesos en 2º plano Ventana de estado de procesos en 2º plano Procesos en 2º plano CFG_ICO@vDiseño Tecla aceleradora 2 Combinación de la tecla aceleradora Comando Control + Tecla Archivo: Procesos en segundo plano Propiedades de la acción UTI_INS_1 UTI_INS_1 Punto de insercción 1 en el menú PRN_UTI Punto de inserción Primer punto de inserción en el menú PRN_UTI Tabla asociada Propiedades de la acción UTI_INS_2 UTI_INS_2 Punto de insercción 2 en el menú PRN_UTI Punto de inserción Segundo punto de inserción en el menú PRN_UTI Tabla asociada
Propiedades de la acción UTI_INS_3 UTI_INS_3 Punto de insercción 3 en el menú PRN_UTI Punto de inserción Tercer punto de inserción en el menú PRN_UTI Tabla asociada Propiedades de la acción UTI_INS_4 UTI_INS_4 Punto de insercción 4 en el menú PRN_UTI Punto de inserción Cuarto punto de inserción en el menú PRN_UTI Tabla asociada 2.2.5 Menú Ayuda Propiedades: PRN_AYU Ayuda
Modo Ayuda de la aplicación Icono y texto Icono Lanzadores de acción del menú ayuda Propiedades de la acción de menú AYU_INS_1 AYU_INS_1 Punto de inserción 1 Modo Acción Acción AYU_INS_1@vDiseño Propiedades de la acción de menú ACERCA_DE ACERCA_DE Acerca de Modo Acción Acción ACERCA_DE@vDiseño Acciones asociadas al menú ayuda Propiedades de la acción AYU_INS_1 AYU_INS_1 Punto de insercción 1 en el menú PRN_AYU
Punto de inserción Primer punto de inserción en el menú PRN_AYU Tabla asociada Propiedades de la acción ACERCA_DE ACERCA_DE Acerca de Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinación de la tecla aceleradora Comando Acerca de Acerca de Acerca de Acerca de AYU_ICO@vDiseño Ninguna Tecla Ayuda: Acerca de... 3. Bloque uno. Barra Lateral Descripción Denominamos bloque 1 al formulario MEN_APP ubicado en el dock con el identificador MEN_APP situado por defecto a la izquierda del marco AUTOEXEC.
Detalle Bloque uno
Propiedades del formulario MEN_APP MEN_APP Menú general Tabla asociada Ancho 210 Alto 400 Siempre cuadro de diálogo
Especial para búsquedas Condición de activo Título opcional getprojectname() Icono Centrar Color de fondo #ffffff (Blanco) Dibujo de fondo Aspecto de dibujo Original Timer (milisegundos) 0 Layout Alineamiento horizontal Alineamiento vertical Vertical Izquierda Arriba Espaciado 0 Margen izquierdo 0 Margen derecho 0 Margen superior 0 Margen inferior 0 Descripción de los controles del formulario En la esquina superior izquierda se incluye el botón inicio que da acceso al formulario principal, que se carga en la vista central del marco. Remarcando el botón inicio tanto en horizontal como en vertical se incluyen dos bandas de color. La banda horizontal, banda A, es personalizable en color (COL_APP@vDiseño). La banda vertical, banda B, es de color gris oscuro (INI_ICO@vDiseño). Sobre la banda A se incluye un texto Usuario (sysusername) para referenciar al usuario cuando use distintintas sesiones en la misma aplicación. El botón con la etiqueta crear nuevo (BTN_ALT) será una seña de identidad de las aplicaciones. Los márgenes de este botón serán 20px margen superior con respecto a la banda
A, 10px margen izquierdo, con respecto a la banda B, 10px con respecto al borde de la barra y 20px margen inferior con respecto al control caja de formulario que forma el bloque 2. Controles del formulario MEN_APP Propiedades del control LAY_1 LAY_1 Layout general Tipo Layout Ancho 210 Alto 400 Posición X 0 Posición Y 0 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Izquierda Arriba Horizontal Espaciado -1 Margen izquierdo -1 Margen derecho -1 Margen superior -1 Margen inferior -1 Ancho en layout Alto en layout Fijo Propiedades del control LAY_2
LAY_2 Layout bloque izquierdo Tipo Layout Ancho 20 Alto 400 Posición X 0 Posición Y 0 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Izquierda Arriba Vertical Espaciado 0 Margen izquierdo 0 Margen derecho 0 Margen superior 0 Margen inferior 0 Ancho en layout Alto en layout Fijo Propiedades del control COL_BAS COL_BAS Barra vertical color base
Tipo Dibujo Ancho 20 Alto 217 Posición X 1 Posición Y 30 Tooltip Condición de visible Borde Ninguno Tamaño del borde 0 Color del borde Color del primer plano Fondo opaco Alineamiento horizontal Alineamiento vertical Dibujo Aspecto del dibujo Tipo de layout Ventana Texto ventana Izquierda Arriba COL_BAS@vDiseño Estirar / Encoger Vertical Espaciado 0 Margen izquierdo 0 Margen derecho 0 Margen superior 0 Margen inferior 0 Ancho en layout Alto en layout Tipo de menú de contexto Fijo
Propiedades del control BTN_INI BTN_INI Tipo Botón de inicio Botón Ancho 20 Alto 20 Posición X 1 Posición Y 44 Tooltip Seleccionable con Tab Mostrar inicio Condición de visible Condición de activo Contenido Color de botón Color de botón Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Base Texto botón Sistema Ninguna Tecla Verdadero INI_ICO@vDiseño Original
Comando Objeto Ancho en layout Alto en layout Tipo de menú de contexto Acción FRM_INI@vDiseño Fijo Fijo Propiedades del control LAY_3 LAY_3 Layout bloque derecho Tipo Layout Ancho 190 Alto 400 Posición X 20 Posición Y 0 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Izquierda Arriba Vertical Espaciado -1 Margen izquierdo 0 Margen derecho 0 Margen superior 0 Margen inferior 0 Ancho en layout Fijo
Alto en layout Propiedades del control COL_APP COL_APP Barra horizontal color aplicación Tipo Dibujo Ancho 106 Alto 20 Posición X 80 Posición Y 4 Tooltip Condición de visible Borde Ninguno Tamaño del borde 0 Color del borde Color del primer plano Fondo opaco Alineamiento horizontal Alineamiento vertical Dibujo Aspecto del dibujo Tipo de layout Ventana Texto ventana Derecha Centrado COL_APP@vDiseño Estirar / Encoger Horizontal Espaciado -1 Margen izquierdo 0
Margen derecho 0 Margen superior 0 Margen inferior 0 Ancho en layout Alto en layout Tipo de menú de contexto Fijo Propiedades del control NOM_USR NOM_USR del usuario Tipo Texto estático Ancho 27 Alto 13 Posición X 109 Posición Y 8 Tooltip Condición de visible Condición de activo Borde Ninguno Tamaño del borde 0 Contenido Color del borde Color del primer plano Fondo opaco sysusername Ventana #ffffff (Blanco)
Fuente Alineamiento horizontal Alineamiento vertical Multilineas Ancho en layout Alto en layout Tipo de menú de contexto Sistema Izquierda Arriba Propiedades del control ESP_1 ESP_1 Espaciador para el nombre del usuario Tipo Espaciador Ancho 10 Alto 10 Posición X 145 Posición Y 10 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Izquierda Arriba Espaciador fijo Propiedades del control LAY_4 LAY_4 Layout botón crear nuevo
Tipo Layout Ancho 186 Alto 35 Posición X 23 Posición Y 40 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Izquierda Arriba Horizontal Espaciado -1 Margen izquierdo 10 Margen derecho 10 Margen superior 15 Margen inferior 15 Ancho en layout Alto en layout Propiedades del control BTN_ALT BTN_ALT Botón crear nuevo Tipo Botón Ancho 172 Alto 27
Posición X 30 Posición Y 44 Tooltip Seleccionable con Tab Mostrar inicio Verdadero Condición de visible Condición de activo Contenido Color de botón Color de botón Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Comando Objeto Ancho en layout Alto en layout Tipo de menú de contexto #ffffff (Blanco) Texto botón Sistema Ninguna Tecla ALT_ICO@vDiseño Pequeño Menú BTN_ALT@vDiseño Proporcional Propiedades del control MEN_APP_CAJ MEN_APP_CAJ Caja de formulario del menú de aplicación
Tipo Caja de formularios Ancho 190 Alto 286 Posición X 20 Posición Y 90 Tooltip Seleccionable con Tab Verdadero Condición de visible Condición de activo Borde Caja a nivel Tamaño del borde 0 Color de primer plano Color de base Color de botón #ffffff (Blanco) #ffffff (Blanco) #ffffff (Blanco) Color texto de botón #808080 Fondo opaco Fuente Ancho en layout Alto en layout Tipo de menú de contexto Sistema Fijo Propiedades del control ESP_2 ESP_2 Espaciador en el pie
Tipo Espaciador Ancho 190 Alto 20 Posición X 20 Posición Y 380 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Izquierda Abajo Espaciador expansible 4. Bloque dos. Menú de aplicación Descripción Se denomina bloque 2 al área del interfaz situado dentro del bloque 1, debajo del botón Crear Nuevo, compuesto por una caja de formulario y sus subobjetos (Formularios) que conforman las opciones principales de la aplicación.
Detalle Bloque dos
La caja de formularios contiene en su interior un formulario por cada subobjeto. Cada subobjeto contiene en su interior un formulario sin origen.
El formulario sin origen debe contener los siguientes controles: Un botón por cada opción de menú que se quiera incluir con un icono y un texto descriptivo. El botón ejecutará una acción que abrirá un formulario sin origen en el bloque 3. Para conseguir que las imágenes y los textos queden alineados por la izquierda se utilizarán CSS que se incrustarán en el evento ON-INIT del formulario que se ejecuta con la conexión a la señal de inicialización del formulario. A continuación se muestra el código CSS que se ejecuta: Insertada entre cada dos opciones se situará una imagen para separarlas. Esta imagen se creará como objeto dibujo en el proyecto de aplicación y tendrá un tamaño de 10x10 px.
Controles del bloque 2 Propiedades de la caja de formularios MEN_APP_CAJ MEN_APP_CAJ Menú principal Tipo Menú principal incrustado en el dock lateral Caja de formularios Ancho 190 Alto 286 Posición X 20 Posición Y 90 Tooltip Seleccionable con Tab Verdadero Condición visible Condición activo Borde Caja a nivel Tamaño del borde 0 Color de primer plano Color de base Color de botón #ffffff #ffffff #ffffff Color texto del botón #808080 Fondo opaco Fuente Sistema, +0,5
Ancho de layout Alto de layout Tipo de menú de contexto Fijo Subcontroles de la caja de formulario Propiedades del subcontrol MEN_APP_1 MEN_APP_1 Menú de aplicación 1 Formulario Icono MEN_APP_1@proyectoapp MEN_APP_OPC_ICO@vDiseño Condición de visible Propiedades del subcontrol MEN_APP_2 MEN_APP_2 Menú de aplicación 2 Formulario Icono MEN_APP_2@proyectoapp MEN_APP_OPC_ICO@vDiseño Condición de visible Propiedades del subcontrol MEN_APP_3 MEN_APP_3 Menú de aplicación 3
Formulario Icono MEN_APP_3@proyectoapp MEN_APP_OPC_ICO@vDiseño Condición de visible Propiedades del subcontrol MEN_APP_4 MEN_APP_4 Menú de aplicación 4 Formulario Icono MEN_APP_4@proyectoapp MEN_APP_OPC_ICO@vDiseño Condición de visible Formularios que se muestran con las opción del menú de aplicación En la plantilla de vdiseño se incluyen 4 formularios. Son todos iguales por lo que sólo se documenta el primero. Propiedades del Formulario MEN_APP_1 MEN_APP_1 Menú de aplicación 1 Tabla asociada Ancho 190
Alto Siempre cuadro de diálogo Especial para búsquedas 170 (40px por cada opción contenida. 1 opción 50px, 2 opciones=90px, 3 opciones=130px, 4 opciones=170px) Condición de activo Titulo opcional Icono Centrar Color de fondo #ffffff (Blanco) Dibujo de fondo Aspecto de dibujo Original centrado Timer (Milisegundos) 0 Tipo de layout Ninguno Controles del formulario MEN_APP_1 Propiedades del control BTN_OPC_1 BTN_OPC_1 Opción 1 (Sustituir opción 1) Tipo Botón Ancho 170 Alto 30 Posición X 10
Posición Y 10 Tooltip Abrir opción 1 (Sustituir opción 1) Seleccionable con Tab Verdadero Condición visible Condición activo Contenido Color del botón Botón Color texto del botón #000000 Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Comando Objeto Tipo de menú de contexto Sistema Ninguna Tecla Verdadero APP_ICO@vDiseño (Sustituir por el icono representativo de la opción con un tamaño de 16x16 px) Original Acción MEN_APP_OPC@vDiseño (Sustituir por la acción a ejecutar) Propiedades del control BAR_SEP_1 BAR_SEP_1 Barra de separación 1
Tipo Dibujo Ancho 140 Alto 1 Posición X 25 Posición Y 40 Tooltip Condición visible Borde Ninguno Tamaño del borde 0 Color de fondo Color de primer plano Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Tipo de menú de contexto Ventana Texto ventana COL_APP@vDiseño Estirar / Encoger Ninguno Por dfecto Propiedades del control BTN_OPC_2 BTN_OPC_2 Opción 2 (Sustituir opción 2) Tipo Botón
Ancho 170 Alto 30 Posición X 10 Posición Y 50 Tooltip Abrir opción 2 (Sustituir opción 2) Seleccionable con Tab Verdadero Condición visible Condición activo Contenido Color del botón Botón Color texto del botón #000000 Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Comando Objeto Tipo de menú de contexto Sistema Ninguna Tecla Verdadero APP_ICO@vDiseño (Sustituir por el icono representativo de la opción con un tamaño de 16x16 px) Original Acción MEN_APP_OPC@vDiseño (Sustituir por la acción a ejecutar)
Propiedades del control BAR_SEP_2 BAR_SEP_2 Barra de separación 2 Tipo Dibujo Ancho 140 Alto 1 Posición X 25 Posición Y 80 Tooltip Condición visible Borde Ninguno Tamaño del borde 0 Color de fondo Color de primer plano Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Tipo de menú de contexto Ventana Texto ventana COL_APP@vDiseño Estirar / Encoger Ninguno Por dfecto Propiedades del control BTN_OPC_3 BTN_OPC_3 Opción 3 (Sustituir opción 3)
Tipo Botón Ancho 170 Alto 30 Posición X 10 Posición Y 90 Tooltip Abrir opción 3 (Sustituir opción 3) Seleccionable con Tab Verdadero Condición visible Condición activo Contenido Color del botón Botón Color texto del botón #000000 Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Comando Sistema Ninguna Tecla Verdadero APP_ICO@vDiseño (Sustituir por el icono representativo de la opción con un tamaño de 16x16 px) Original Acción
Objeto Tipo de menú de contexto MEN_APP_OPC@vDiseño (Sustituir por la acción a ejecutar) Propiedades del control BAR_SEP_3 BAR_SEP_3 Barra de separación 3 Tipo Dibujo Ancho 140 Alto 1 Posición X 25 Posición Y 120 Tooltip Condición visible Borde Ninguno Tamaño del borde 0 Color de fondo Color de primer plano Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Tipo de menú de contexto Ventana Texto ventana COL_APP@vDiseño Estirar / Encoger Ninguno Por dfecto
Propiedades del control BTN_OPC_4 BTN_OPC_4 Opción 4 (Sustituir opción 4) Tipo Botón Ancho 170 Alto 30 Posición X 10 Posición Y 130 Tooltip Abrir opción 4 (Sustituir opción 4) Seleccionable con Tab Verdadero Condición visible Condición activo Contenido Color del botón Botón Color texto del botón #000000 Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Icono Sistema Ninguna Tecla Verdadero APP_ICO@vDiseño (Sustituir por el icono representativo de la opción con un tamaño de 16x16 px)
Tamaño del icono Botón por defecto Comando Objeto Tipo de menú de contexto Original Acción MEN_APP_OPC@vDiseño (Sustituir por la acción a ejecutar) Recomendaciones Usar un máximo de 4 opciones en cada formulario. Utilizar textos con el menor número de palabras posibles, lo ideal es 1 palabra. Utilizar tooltip para ampliar la descripción de la opción y poder ahorrar palabras en el texto. Utilizar iconos asociados a la opción de 16x16 y siempre que sea posible de la librería famfamfam Silk. No utilizar el mismo icono para más de una opción. 5. Bloque tres. Vista central
Descripción El bloque tres, es el bloque de trabajo principal del usuario el que se divide en 4 sub.zonas. Cada acción que se se seleccione en el Bloque 2 lanzará un formulario sin origen con el bloque 3
5.1 Botón de inicio - Formulario de inicio Descripción Cuando se pulsa el botón inicio en el bloque 0, se muestra el formulario de inicio en el visor central que denominamos en esta guía bloque 3.
Propiedades del formulario INI INI Inicio Tabla asociada
Ancho 500 Alto 400 Siempre cuadro de diálogo Especial para búsquedas Condición de activo Título opcional Icono Centrar Color de fondo #ffffff Dibujo de fondo Aspecto del dibujo Estirar / Encoger Timer (Milisegundos) 0 Tipo de layout Alineamiento horizontal Alineamiento vertical Vertical Izquierda Arriba Espaciado -1 Margen izquierdo -1 Margen derecho -1 Margen superior -1 Margen inferior -1 Controles del formulario INI Propiedades del control BTN_CNC BTN_CNC
Tipo Botón cancelar para permitir cerrar la pestaña con la tecla ESC Botón Ancho 0 Alto 0 Posición X 0 Posición Y 0 Tooltip Seleccionable con Tab Condición visible Condición activo Contenido Color del botón Color texto del botón Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Botón Texto botón Sistema Escape Tecla Icono Tamaño del icono Botón por defecto Pequeño
Comando Ancho en layout Alto en layout Tipo de menú de contexto Cancelar Fijo Fijo Propiedades del control TIT_TXT TIT_TXT Inicio Tipo Texto estático Ancho 480 Alto 20 Posición X 10 Posición Y 10 Tooltip Condición visible Condición activo Borde Ninguno Tamaño del borde 0 Contenido Color del botón Ventana Color texto del botón #000000 Fondo opaco Fuente Sistema +3, negrita
Alineamiento horizontal Alineamiento vertical Multilíneas Ancho en layout Alto en layout Tipo de menú de contexto Izquierda Centrado Fijo Fijo Propiedades del control COL_APP COL_APP Banda con color de fondo de la aplicación Tipo Dibujo Ancho 480 Alto 1 Posición X 10 Posición Y 40 Tooltip Condición visible Borde Ninguno Tamaño del borde 0 Color del botón Color texto del botón Fondo opaco Dibujo Ventana Texto ventana COL_APP@vDiseño
Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout Tipo de menú de contexto Estirar / Encoger Ninguno Fijo Propiedades del control ESP_1 ESP_1 Espaciador superior Tipo Espaciador Ancho 140 Alto 70 Posición X 180 Posición Y 60 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Izquierda Arriba Espaciador fijo Propiedades del control LOGO_APP LOGO_APP Logotipo de la aplicación
Tipo Dibujo Ancho 220 Alto 110 Posición X 140 Posición Y 150 Tooltip Condición visible Borde Ninguno Tamaño del borde 0 Color del botón Color texto del botón Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout Tipo de menú de contexto Ventana Texto ventana LOGO_APP@vDiseño Original centrado Ninguno Propiedades del control ESP_2 ESP_2 Espaciador inferior
Tipo Espaciador Ancho 140 Alto 70 Posición X 180 Posición Y 280 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Izquierda Arriba Espaciador fijo Propiedades del control COL_BAS COL_BAS Banda con color base Tipo Dibujo Ancho 480 Alto 2 Posición X 10 Posición Y 370 Tooltip Condición visible Borde Ninguno Tamaño del borde 0 Color del botón Ventana
Color texto del botón Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout Tipo de menú de contexto Texto ventana COL_BAS@vDiseño Estirar / Encoger Ninguno Fijo Propiedades del control ESP_3 ESP_3 Espaciador pie Tipo Espaciador Ancho 140 Alto 10 Posición X 180 Posición Y 380 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Izquierda Arriba Espaciador expansible
5.2 Estilo migas en las pestañas Descripción En el nombre de las pestañas que se abren al ejecutar las opciones de menú se aplicará un estilo migas XXX.YYY (Siendo XXX el nombre de la opción principal e YYY el nombre de la subopción) y el icono será el mismo que el de la opción que dispara (XXX_YYY_ICO@proyectoapp). 5.3 Formulario abierto desde opciones de menú Descripción Cuando se ejecuta una opción del menú de aplicación se recomienda abrir un formulario en el bloque 3 (vista central a pantalla completa, no en cuadro de diálogo). A continuación se detallan las características de este formulario.
Plantilla En la guía se incluye el formulario FRM_PLA que puedes servir de base o plantilla para la creación de los formularios a ser lanzados desde las opciones de menú en el bloque 3 (vista central). En el formulario se recomienda que las acciones de los botones "Nuevo", "Opción 1" y "Opción 2" reflejen el resultado de la ejecución de la acción dentro del propio formulario y si es necesario refrescando la información del objeto de lista. Para acciones que deban abrir una nueva pestaña en el marco de aplicación se recomienda el uso de acciones incrustadas en el menú contextual del botón "Más opciones". Propiedades del formulario FRM_PLA FRM_PLA Formulario de ejemplo Tabla asociada Ancho 500 Alto 400 Siempre cuadro de diálogo
Especial para búsquedas Condición de activo Título opcional Icono Centrar Color de fondo #ffffff Dibujo de fondo Aspecto del dibujo Estirar / Encoger Timer (Milisegundos) 0 Tipo de layout Alineamiento horizontal Alineamiento vertical Vertical Izquierda Arriba Espaciado -1 Margen izquierdo -1 Margen derecho -1 Margen superior -1 Margen inferior -1 Controles del formulario FRM_PLA Propiedades del control BTN_CNC BTN_CNC Botón cancelar para permitir cerrar el formulario con la tecla ESC
Tipo Botón Ancho 0 Alto 0 Posición X 0 Posición Y 0 Tooltip Seleccionable con Tab Condición visible Condición activo Contenido Color del botón Color texto del botón Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Botón Texto botón Sistema Escape Tecla Icono Tamaño del icono Botón por defecto Comando Ancho en layout Alto en layout Tipo de menú de contexto Pequeño Cancelar Fijo Fijo
Propiedades del control TIT_TXT TIT_TXT Título de ejemplo (A sustituir) Tipo Texto estático Ancho 480 Alto 20 Posición X 10 Posición Y 10 Tooltip Condición visible Condición activo Borde Ninguno Tamaño del borde 0 Contenido Color del botón Ventana Color texto del botón #000000 Fondo opaco Fuente Alineamiento horizontal Alineamiento vertical Multilíneas Ancho en layout Sistema +3, negrita Izquierda Centrado Fijo
Alto en layout Tipo de menú de contexto Fijo Propiedades del control COL_APP COL_APP Banda con color de fondo de la aplicación Tipo Dibujo Ancho 480 Alto 1 Posición X 10 Posición Y 40 Tooltip Condición visible Borde Ninguno Tamaño del borde 0 Color del botón Color texto del botón Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout Ventana Texto ventana COL_APP@vDiseño Estirar / Encoger Ninguno Fijo
Tipo de menú de contexto Propiedades del control LAY_1 LAY_1 Layout botones Tipo Layout Ancho 480 Alto 50 Posición X 10 Posición Y 60 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Izquierda Arriba Horizontal Espaciado -1 Margen izquierdo -1 Margen derecho -1 Margen superior -1 Margen inferior -1 Ancho en layout Alto en layout Propiedades del control BTN_ALT
BTN_ALT Nuevo Tipo Botón Ancho 100 Alto 30 Posición X 20 Posición Y 70 Tooltip Seleccionable con Tab Verdadero Condición de visible Condición de activo Contenido Color del botón Color texto del botón Fondo opaco Fuente Tecla aceleradora Combinación de tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Botón Texto botón Sistema Ninguna Tecla ALT_ICO@vDiseño Pequeño
Comando Ancho en layout Alto en layout Tipo de menú de contexto Aceptar Propiedades del control BTN_OPC_1 BTN_OPC_1 Opción 1 (Sustituir) Tipo Botón Ancho 100 Alto 30 Posición X 130 Posición Y 70 Tooltip Seleccionable con Tab Verdadero Condición de visible Condición de activo Contenido Color del botón Color texto del botón Fondo opaco Fuente Tecla aceleradora Botón Texto botón Sistema Ninguna
Combinación de tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Comando Evento Ancho en layout Alto en layout Tipo de menú de contexto Tecla PAR_ICO@vDiseño (Sustituir) Pequeño Ejecutar evento BTN_ALT Propiedades del control BTN_OPC_2 BTN_OPC_2 Opción 2 (Sustituir) Tipo Botón Ancho 100 Alto 30 Posición X 240 Posición Y 70 Tooltip Seleccionable con Tab Verdadero Condición de visible Condición de activo
Contenido Color del botón Color texto del botón Fondo opaco Fuente Tecla aceleradora Combinación de tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Comando Ancho en layout Alto en layout Tipo de menú de contexto Botón Texto botón Sistema Ninguna Tecla PAR_ICO@vDiseño (Sustituir) Pequeño Aceptar (Sustituir) Propiedades del control BTN_OPC_MAS BTN_OPC_MAS Más opciones Tipo Botón Ancho 100 Alto 30 Posición X 350
Posición Y 70 Tooltip Seleccionable con Tab Verdadero Condición de visible Condición de activo Contenido Color del botón Color texto del botón Fondo opaco Fuente Tecla aceleradora Combinación de tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Comando Objeto Ancho en layout Alto en layout Tipo de menú de contexto Botón Texto botón Sistema Ninguna Tecla MEN_APP_OPC_ICO@vDiseño Pequeño Menú (Seleccionar el menú con opciones) Propiedades del control OBJ_LST OBJ_LST Objeto de lista como la rejilla, casillero, etc.
Tipo Control objeto Ancho 480 Alto 230 Posición X 10 Posición Y 130 Tooltip Seleccionable con Tab Verdadero Condición de visible Condición de activo Borde Ninguno Tamaño del borde 0 Fondo opaco Barras de scroll Objeto 1 Ancho en layout Alto en layout Tipo de menú de contexto Automático (Seleccionar objetos para mostrar la lista de registros) Propiedades del control ESP_1 ESP_1 Espaciador pie
Tipo Espaciador Ancho 140 Alto 70 Posición X 180 Posición Y 380 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Izquierda Arriba Espaciador fijo Eventos del formulario Propiedades del evento BTN_ALT BTN_ALT Botón Alta Instrucciones del evento 6. Rejilla La recomendaciones para conseguir la mejor sensación del usuario al usar el objeto rejilla son las siguientes:
No alimentar la rejilla del menú con una lista de registros que tarden más de un segundo en cargar. No utilizar ningún tipo de singular de plural ni variables globales en disco, en las columnas o en datos que se visualicen en la rejilla y que produzcan el pintado uno a uno de los registros. No utilizar formateo ni componer fórmulas en las columnas de texto. Trata de evitar el uso de campos tipo fórmula como contenido de las columnas. Crear 5 columnas, como máximo, en la rejilla. Recomendamos 3 columnas máximo de texto. Recomendamos tener al menos una columna con la propiedad Tipo de ancho con el valor Máximo disponible. Se recomienda que sean las columnas de campos alfabéticos, si no las hibiese, sería la columna situada a la derecha. XXX_YYY@proyecto.app (Siendo XXX el nombre de la opción de menú de aplicación e YYY el nombre de la subopción de aplicación. Ejemplo: VTA_FAC para la rejilla de facturas de venta) Rejilla de YYY de XXX (Ejemplo: Rejilla de facturas de venta) Tabla Asociada Formulario de alta Formulario de modificación Formulario de baja Tipo de menú de contexto Multiselección Modo ver cabeceras Rejilla del menú principal La que corresponda El que corresponda El que corresponda El que corresponda (Aunque se puede usar un menú personalizado para controlar las opciones disponibles por lo usuarios o también aplicar la opción ninguno) Horizontal
Editable Alto de cabecera 29 Color de cara cabecera Color de luz de cabecera Color de sombra de cabecera Ventana Luz Sombra Alto de cuerpo 21 Color de fondo de cuerpo Color de fondo par de cuerpo Mostrar líneas de rejilla Pie activo Base Base alternativo Alto de pie Color de fondo de pie Toolbar Longitud de columnas 7. Formularios Descripción En esta sección se describe como sería el formulario recomendado para el mantenimiento (Alta, Baja y Modificación) de una tabla.
El formulario se puede dividir, horizontalmente, en 3 zonas principales: cabecera, cuerpo y pie. A continuación se detallan cada una de ellas. 7.1 Cabecera Descripción La cabecera es el área del formulario que ocupa la parte superior y en la que se informa del origen de la información contenida en el cuerpo del formulario.
Controles de la cabecera del formulario Propiedades del control LAY_1 LAY_1 Layout cabecera
Tipo Layout Ancho 580 Alto 50 Posición X 10 Posición Y 0 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Izquierda Arriba Horizontal Espaciado 5 Margen izquierdo -1 Margen derecho -1 Margen superior 0 Margen inferior 10 Ancho en layout Alto en layout Propiedades del control TIT_TXT TIT_TXT Registro (A sustituir) Tipo Texto estático Ancho 560 Alto 20
Posición X 20 Posición Y 10 Tooltip Condición visible Condición activo Borde Ninguno Tamaño del borde 0 Contenido Color del botón choose(#id, "Registro", "Nuevo registro") (Sustituir Registro por el nombre de la tabla) Ventana Color texto del botón #000000 Fondo opaco Fuente Alineamiento horizontal Alineamiento vertical Multilíneas Ancho en layout Alto en layout Tipo de menú de contexto Sistema +3, negrita Izquierda Arriba Propiedades del control TIT_SEP TIT_SEP Separador del título
Tipo Dibujo Ancho 560 Alto 1 Posición X 20 Posición Y 40 Tooltip Condición visible Borde Ninguno Tamaño del borde 0 Color del botón Color texto del botón Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout Tipo de menú de contexto Ventana Texto ventana COL_BAS@vDiseño Estirar / Encoger Ninguno Proporcional Fijo 7.2 Cuerpo Descripción El cuerpo es el área del formulario que ocupa la parte central del formulario y que contendrá controles con información del registro o un control contenedor como el separador de formularios, splitter, pila de formularios o caja de formularios.
Controles del cuerpo del formulario Propiedades del control LAY_2 LAY_2 Layout cuerpo Tipo Layout Ancho 580 Alto 210 Posición X 10 Posición Y 60 Tooltip
Alineamiento horizontal Alineamiento vertical Tipo de layout Izquierda Arriba Horizontal Espaciado -1 Margen izquierdo -1 Margen derecho -1 Margen superior 10 Margen inferior 10 Ancho en layout Alto en layout Propiedades del control DAT_TXT DAT_TXT (Sustiuit por el nombre de campo del dato) Tipo de campo Ancho 100 Alto 20 Posición X 30 Posición Y 80 Tooltip Condición visible Condición activo Borde Ninguno
Tamaño del borde 0 Color del botón Color texto del botón Fondo opaco Fuente Alineamiento horizontal Alineamiento vertical Multilíneas Campo Ancho en layout Alto en layout Tipo de menú de contexto Ventana Texto ventana Sistema Derecha Centrado (Seleccionar el campo a mostrar) Propiedades del control DAT DAT Dato (Sustituir por el nombre del campo) Tipo Edición Ancho 430 Alto 20 Posición X 140 Posición Y 80 Tooltip Seleccionable con Tab Verdadero
Condición visible Condición activo Sólo lectura Contenido Color de base Color de texto Fondo opaco Fuente Alineamiento horizontal Alineamiento vertical Contraseña (Sustituir por el campo a editar) Base Texto Sistema Izquierda Centrado Máscara Ancho en layout Alto en layout Tipo de menú de contexto Tipo de menú de botón Menú de botón Botón izquierda (Selecionar el menú a mostrar) 7.2.1 Menú de botón para campos puntero a maestro Descripción Cuando un control de edición muestra información de un campo puntero a una tabla maestra, recomandamos que se incluya un menú de botón para dar al usuario la posibilidad de realizar acciones muy habituales de forma sencilla e incluso directamente con el teclado:
Icono Opción Acción Tecla acel. BTN_LOC_ICO@vDiseño XXX_YYY_LOC@proyectoapp Localizar F5 BTN_ALT_ICO@vDiseño XXX_YYY_ALT@proyectoapp Nuevo F6 BTN_MOD_ICO@vDiseño XXX_YYY_MOD@proyectoapp Editar F7 Con estas acciones se crea el menú XXX_YYY@proyectoapp (Donde XXX corresponde al identificador de la tabla histórica, es decir la del formulario, e YYY al campo de la tabla maestra sobre la que se lanzan las acciones). Ejemplo: LIN_ART@proyectoapp sería el menú de botón para el campo artículo en la tabla de líneas. 7.3 Pie Descripción El pie es el área del formulario situado en la parte inferior. Esta zona se utiliza para la ubicación de los diversos botones con las funcionalidades básicas del formulario como grabar, cancelar o eliminar el registro, entre otros.
Controles del pie del formulario Propiedades del control ESP_1 ESP_1 Espaciador entre cuerpo y pie Tipo Espaciador Ancho 580 Alto 10 Posición X 10 Posición Y 270 Tooltip
Alineamiento horizontal Alineamiento vertical Tipo de espaciador Izquierda Arriba Espaciador expandible Propiedades del control LAY_3 LAY_3 Layout pie general Tipo Layout Ancho 580 Alto 60 Posición X 10 Posición Y 280 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Izquierda Arriba Horizontal Espaciado -1 Margen izquierdo 0 Margen derecho 0 Margen superior 0 Margen inferior 0 Ancho en layout Alto en layout
Propiedades del control LAY_4 LAY_4 Layout pie botones derecha Tipo Layout Ancho 230 Alto 40 Posición X 350 Posición Y 290 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Derecha Arriba Horizontal Espaciado -1 Margen izquierdo -1 Margen derecho 0 Margen superior 0 Margen inferior 0 Ancho en layout Alto en layout Propiedades del control BTN_ACE BTN_ACE
Aceptar Tipo Botón Ancho 100 Alto 34 Posición X 360 Posición Y 292 Tooltip Seleccionable con Tab Verdadero Condición visible Condición activo Contenido Color del botón Color texto del botón Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Comando Botón Texto botón Sistema F12 Tecla BTN_ACE_ICO@vDiseño Pequeño Aceptar
Ancho en layout Alto en layout Tipo de menú de contexto Propiedades del control BTN_CNC BTN_CNC Cancelar Tipo Botón Ancho 100 Alto 34 Posición X 470 Posición Y 292 Tooltip Seleccionable con Tab Verdadero Condición visible Condición activo Contenido Color del botón Color texto del botón Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Botón Texto botón Sistema Ninguna Tecla
Plano Icono Tamaño del icono Botón por defecto Comando Ancho en layout Alto en layout Tipo de menú de contexto BTN_CNC_ICO@vDiseño Pequeño Cancelar Propiedades del control ESP_2 ESP_2 Espaciador entre layouts de botones Tipo Espaciador Ancho 190 Alto 40 Posición X 150 Posición Y 290 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Izquierda Arriba Espaciador expandible Propiedades del control LAY_5
LAY_5 Layout pie botones izquierda Tipo Layout Ancho 120 Alto 40 Posición X 20 Posición Y 290 Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Izquierda Arriba Horizontal Espaciado -1 Margen izquierdo 0 Margen derecho -1 Margen superior 0 Margen inferior 0 Ancho en layout Alto en layout Propiedades del control BTN_SUP BTN_SUP Eliminar
Tipo Botón Ancho 100 Alto 34 Posición X 30 Posición Y 292 Tooltip Seleccionable con Tab Condición visible Condición activo Contenido Color del botón Color texto del botón Fondo opaco Fuente Tecla aceleradora Combinación de la tecla aceleradora Plano Icono Tamaño del icono Botón por defecto Comando Ancho en layout Alto en layout Botón Texto botón Sistema E Control + Tecla BTN_BAJ_ICO@vDiseño Pequeño Eliminar controlado
Tipo de menú de contexto 7.4 Recomendaciones Se reomcienda dejar bastante espacio entre controles (Déjalos respirar). Se recomienda no incluir muchos controles en un formulario. Menos es más. Lo difícil es hacerlo sencillo. Debemos esforzarnos por conseguir una interfaz sencilla. Las opciones visibles o intuitivas siempre son más sencillas para el usuario. El teclado es muy cómodo para determinadas tareas, utiliza teclas aceleradoras. Utiliza siempre las mismas teclas aceleradoras aplicados a las mismas funcionalidades. 8. Dibujos A continuación se detallan todos los dibujos utilizados en la guía y que han sido seleccionado de la librería de iconos Silk de famfamfam, salvo los que corresponden a colores y logo de la aplicación. Dibujos de la aplicación (Personalizables) Icono Descripción COL_APP@vDiseño LOGO_APP@vDiseño Color de la aplicación utilizado para fondo y líneas de separadores. Logotipo de la aplicación.