Vdiseno Manual Consulta

Gua de diseo de la interfaz vDiseo: Manual de consulta
Gua de diseo de la interfaz vDiseo: Manual de Consulta

Gua de diseo de la interfaz vDiseo: 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 mens 2.1 Men Principal 2.2. Submens 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 Parmetros 2.2.4.2 Submen Utilidades 2.2.5 Men Ayuda 3. Bloque uno. Barra Lateral 4. Bloque dos. Men de aplicacin 5. Bloque tres. Vista central 5.1 Botn de inicio - Formulario de inicio 5.2 Estilo migas en las pestaas 5.3 Formulario abierto desde opciones de men 6. Rejilla 7. Formularios 7.1 Cabecera 7.2 Cuerpo 7.2.1 Men de botn para campos puntero a maestro 7.3 Pie 7.4 Recomendaciones 8. Dibujos Dibujos de la aplicacin (Personalizables)
Pol. Ind. A Granxa, Edificio vCenter Ra D, esquina paralela 3 36400 Porrio (Pontevedra) Espaa
Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es
Velneo, S.A. C.I.F. A36494706 Inscrita en el Reg Mercantil de Pontevedra al tomo 3085, Libro 3085, Folio 90, Hoja PO-37578, Inscr 1
Dibujos de la interfaz Dibujos del men archivo Dibujos del men editar Dibujos del men configurar Dibujos del men ayuda Dibujos de los botones Apndices Apndice 1: Galera 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 creacin de la presente gua de diseo.
El programador dispondr de recomendaciones de trabajo claras para el diseo de la interfaz de sus aplicaciones. Las recomendaciones tratan de conseguir una interfaz homognea en el ecosistema de Open Apps. La interfaz de las aplicaciones desarrolladas con Velneo V7 debe ser sencilla y agradable de usar. La gua est diseada para conseguir la mejor experiencia del usuario final. La gua est diseada para conseguir los mejores resultados en unas resoluciones y tamaos de pantalla determinados. Con esta gua los desarrolladores podrn seguir unos patrones unificados de diseo en el desarrollo de la interfaz de sus Open Apps. La gua facilita la integracin de aplicaciones desarrolladas por diferentes empresas. La gua se disea para que sea fcil de entender y aplicar. En el catlogo de Open Apps existirn ejemplos de aplicaciones desarrolladas aplicando esta gua. Se crearn Open Apps con recursos que servirn como plantilla para facilitar la aplicacin de la gua al interfaz de las aplicaciones en desarrollo.
1.2 Recomendaciones Generales

Pol. Ind. A Granxa, Edificio vCenter Ra D, esquina paralela 3 36400 Porrio (Pontevedra) Espaa Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es
A continuacin se detallan las recomendaciones a nivel general que se aplicarn a todos los objetos y controles de la aplicacin. Fuentes de sistema: Se usarn en todos los controles y objetos las fuentes de sistema, por defecto. Esto ayuda en la transicin 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 vdeo David Guitirrez 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 especficos se use otra tecla para el avance de control que ayude en su propsito. 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 aplicacin. Dimensin controles: En la edicin de formularios se utilizar la cuadrcula, siempre que sea posible. De esta forma los controles tendrn posiciones y dimensiones mltiplos de 10. De esta forma es ms sencillo el mantenimiento de la aplicacin y la edicin de los formularios. En ejecucin las posiciones y dimensiones se vern afectadas por la aplicacin de los layouts. Icono de las propiedades de marco, formularios y mens: El nmero, tamao y colores de las imgenes 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 ejecucin. Se recomienda el uso de iconos de un tamao de 16x16. Para los iconos usados en el marco o formularios se utilizarn iconos de un tamao de 32x32 ya que adems de verse en la esquina superior izquierda del objeto tambin son visibles en toolbars o ventanas del sistema operativo como la de cambio de aplicacin. Librera de iconos: Esta gua ha sido desarrollada utilizando la librera de iconos (Silk de famfamfam ) Para que el interfaz sea homogneo se recomienda el uso de este misma librera para implementar los iconos propios de la aplicacin. Resolucin: Esta gua est desarrollada para una resolucin mnima recomendada de 1024*768. Tamao de pantalla: Esta gua est desarrollada para tamaos 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
Descripcin El AUTOEXEC es el marco principal de la aplicacin que engloba en su interior a todos los bloques definidos en esta gua. Propiedades: Identificador Estilos Comentarios Icono Ttulo Marco de arranque de la aplicacin APP_ICO de 32x32 identificativo de la aplicacin "" + getProjectName() + " " + AUTOEXEC
getProjectVersion() Formulario principal Modo arranque Menu Principal: INI@proyectoapp TAB PRN (Barra de menu)@nombreapp
Propiedades de los subobjetos docks del marco: Identificador Nombre Estilos Comentarios: Objeto: Posicin: Modo de Aparcar: Condicin de visible inicial: Dock Principal de navegacin que se sita, por defecto, a la izquierda del marco. MEN_APP@proyectoapp izquierda incluir MEN_APP Principal
2. Bloque cero. Barra de mens

Descripcin
Denominamos bloque 0 a la barra de mens de la aplicacin, que se configura en la propiedad Men principal del Marco AUTOEXEC de nuestro proyecto.
Recomendaciones El men no debe incluir ms de dos niveles de apertura
Uso Barra de men por defecto para aplicaciones, est incluida en el proyecto vDiseo heredable para el uso general por los desarrolladores de la comunidad. Localizacin Proyecto a heredar: vDiseo (Descargable desde el catlogo de Velneo Open Apps)
2.1 Men Principal
Propiedades: Identificador Nombre Estilos Comentarios Men principal de la aplicacin asociado a la propiedad Men Principal de nuestro Marco con identificador AUTOEXEC. Icono y texto PRN@vDiseo Principal
Modo Icono
Lanzadores de accin del men principal Propiedades de la accin de men PRN_INS_1 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men PRN_ACH Accin PRN_INS_1@vDiseo PRN_INS_1 Punto de insercin 1
Identificador Nombre Estilos Comentarios Modo Men Propiedades de la accin de men PRN_EDT Identificador Nombre Estilos Comentarios Modo Men Propiedades de la accin de men PRN_REG Identificador Nombre Estilos Comentarios Modo Men Propiedades de la accin de men PRN_CFG Identificador Nombre Estilos
PRN_ACH Archivo
Men PRN_ACH@vDiseo
PRN_EDT Editar
Men PRN_EDT@vDiseo
PRN_REG Registro
Men PRN_REG@vDiseo
PRN_CFG Configuracin
Comentarios Modo Men Propiedades de la accin de men PRN_INS_2 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men PRN_AYU Identificador Nombre Estilos Comentarios Modo Men Men PRN_AYU@vDiseo PRN_AYU Ayuda Accin PRN_INS_2@vDiseo PRN_INS_2 Punto de insercin 2 Men PRN_CFG@vDiseo
Acciones asociadas al men principal: Propiedades de la accin PRN_INS_1 Identificador Nombre Estilos Comentarios PRN_INS_1 Punto de insercin 1 en el men PRN Punto de insercin Primer punto de insercin en el men PRN
Tabla asociada Propiedades de la accin PRN_INS_2 Identificador Nombre Estilos Comentarios Tabla asociada PRN_INS_2 Punto de insercin 2 en el men PRN Punto de insercin Segundo punto de insercin en el men PRN
2.2. Submens del men principal

2.2.1 Submen Archivo
Propiedades: Identificador Nombre Estilos Comentarios Opciones generales para todas las aplicaciones PRN_ACH@vDiseo Archivo
Modo Icono
Icono y texto
Lanzadores de accin del men archivo Propiedades de la accin de men PRN_ACH_INS_1 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men PRT_CFG Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men CRR Identificador Nombre Estilos Comentarios Modo Accin CRR Salir de la aplicacin Accin PRN_CFG@vDiseo PRT_CFG Configuracin de impresoras lgicas Accin PRN_ACH_INS_1@vDiseo PRN_ACH_INS_1 Punto de insercin 1
Accin
CRR@vDiseo
Acciones asociadas al men archivo Propiedades de la accin PRN_ACH_INS_1 Identificador Nombre Estilos Comentarios Tabla asociada Propiedades de la accin PRT_CFG Identificador Nombre Estilos Comentarios Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinacin de la tecla aceleradora Comando Propiedades de la accin CRR Identificador CRR Configurar impresoras Configurar impresoras Configurar impresoras Configurar impresoras PRT_ICO@vDiseo Ninguna Tecla Archivo: Configurar impresoras lgicas PRT_CFG Configurar impresoras PRN_ACH_INS_1 Punto de insercin 1 en el men PRN_ACH Punto de insercin Primer punto de insercin en el men PRN_ACH
Nombre Estilos Comentarios Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinacin de la tecla aceleradora Comando
Salir de la aplicacin
Salir de la aplicacin Salir de la aplicacin Salir de la aplicacin Salir de la aplicacin CRR_ICO@vDiseo Ninguna Tecla Archivo: Salir
2.2.2 Submen Editar
Propiedades: Identificador Nombre PRN_EDT Editar
Estilos Comentarios Modo Icono Opciones de edicin Icono y texto
Lanzadores de accin del men editar Propiedades de la accin de men EDT_COR Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men EDT_COP Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men EDT_PEG Identificador Nombre Estilos EDT_PEG Pegar Accin EDT_COP@vDiseo EDT_COP Copiar Accin EDT_COR@vDiseo EDT_COR Cortar
Comentarios Modo Accin Accin EDT_PEG@vDiseo
Acciones asociadas al men editar Propiedades de la accin EDT_COR Identificador Nombre Estilos Comentarios Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinacin de la tecla aceleradora Comando Propiedades de la accin EDT_COP Identificador Nombre Estilos Comentarios Tabla asociada EDT_COP Copiar Cortar Cortar Cortar Cortar COR_ICO@vDiseo X Control + Tecla Editar: Cortar EDT_COR Cortar
Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinacin de la tecla aceleradora Comando Propiedades de la accin EDT_PEG Identificador Nombre Estilos Comentarios Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinacin de la tecla aceleradora Comando
Copiar Copiar Copiar Copiar COP_ICO@vDiseo C Control + Tecla Editar: Copiar
EDT_PEG Pegar
Pegar Pegar Pegar Pegar PEG_ICO@vDiseo V Control + Tecla Editar: Pegar
2.2.3 Submen Registros
Propiedades: Identificador Nombre Estilos Comentarios Modo Icono Opciones generales para manejo de registros Icono y texto PRN_REG Registros
Lanzadores de accin del men registros Propiedades de la accin de men NAV Identificador Nombre Estilos Comentarios Modo Men en stock Propiedades de la accin de men FIC Identificador FIC Men en stock Navegante NAV Navegante
Nombre Estilos Comentarios Modo Men en stock Propiedades de la accin de men LIS Identificador Nombre Estilos Comentarios Modo Men en stock
Ficha
Men en stock Ficha
LIS Lista
Men en stock Lista
2.2.4 Submen Configurar
Propiedades:
Identificador Nombre Estilos Comentarios Modo Icono
PRN_CFG Configurar
Opciones de configuracin y parametrizacin Icono y texto
Lanzadores de accin del men configurar Propiedades de la accin de men CFG_INS_1 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men CFG_INS_2 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men CFG_INS_3 Identificador CFG_INS_3 Accin CFG_INS_2@vDiseo CFG_INS_2 Punto de insercin 2 Accin CFG_INS_1@vDiseo CFG_INS_1 Punto de insercin 1
Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men CFG_INS_4 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men PRN_PAR Identificador Nombre Estilos Comentarios Modo Men Propiedades de la accin de men PRN_UTI Identificador Nombre Estilos Comentarios
Punto de insercin 3
Accin CFG_INS_3@vDiseo
CFG_INS_4 Punto de insercin 4
Accin CFG_INS_4@vDiseo
PRN_PAR Parametrizacin
Men PRN_PAR@vDiseo
PRN_UTI Utilidades
Modo Men Propiedades de la accin de men IDI Identificador Nombre Estilos Comentarios Modo Men en stock Propiedades de la accin de men EST Identificador Nombre Estilos Comentarios Modo Men en stock
Men PRN_UTI@vDiseo
IDI Idioma
Men en stock Idioma
EST Estilo
Men en stock Estilo
Acciones asociadas al men configurar Propiedades de la accin CFG_INS_1 Identificador Nombre Estilos Comentarios Tabla asociada CFG_INS_1 Punto de inserccin 1 en el men PRN_CFG Punto de insercin Primer punto de insercin en el men PRN_CFG
Propiedades de la accin CFG_INS_2 Identificador Nombre Estilos Comentarios Tabla asociada Propiedades de la accin CFG_INS_3 Identificador Nombre Estilos Comentarios Tabla asociada Propiedades de la accin CFG_INS_4 Identificador Nombre Estilos Comentarios Tabla asociada CFG_INS_4 Punto de inserccin 4 en el men PRN_CFG Punto de insercin Cuarto punto de insercin en el men PRN_CFG CFG_INS_3 Punto de inserccin 3 en el men PRN_CFG Punto de insercin Tercer punto de insercin en el men PRN_CFG CFG_INS_2 Punto de inserccin 2 en el men PRN_CFG Punto de insercin Primer punto de insercin en el men PRN_CFG
2.2.4.1 Submen Parmetros
Propiedades: Identificador Nombre Estilos Comentarios Modo Icono Parmetros Icono y texto PAR_ICO@vDiseo PRN_PAR Parmetros
Lanzadores de accin del men parmetros Propiedades de la accin de men PAR_INS_1 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men PAR_INS_2 Accin PAR_INS_1@vDiseo PAR_INS_1 Punto de insercin 1
Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men PAR_INS_3 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men PAR_INS_4 Identificador Nombre Estilos Comentarios Modo Accin Acciones asociadas al men parmetros Propiedades de la accin PAR_INS_1 Identificador Nombre
PAR_INS_2 Punto de insercin 2
Accin PAR_INS_2@vDiseo
PAR_INS_1 Punto de inserccin 1 en el men PRN_PAR
Estilos Comentarios Tabla asociada Propiedades de la accin PAR_INS_2 Identificador Nombre Estilos Comentarios Tabla asociada Propiedades de la accin PAR_INS_3 Identificador Nombre Estilos Comentarios Tabla asociada Propiedades de la accin PAR_INS_4 Identificador Nombre Estilos Comentarios Tabla asociada
Punto de insercin Primer punto de insercin en el men PRN_PAR
PAR_INS_2 Punto de inserccin 2 en el men PRN_PAR Punto de insercin Segundo punto de insercin en el men PRN_PAR
PAR_INS_3 Punto de inserccin 3 en el men PRN_PAR Punto de insercin Tercer punto de insercin en el men PRN_PAR
PAR_INS_4 Punto de inserccin 4 en el men PRN_PAR Punto de insercin Cuarto punto de insercin en el men PRN_PAR
2.2.4.2 Submen Utilidades
Propiedades: Identificador Nombre Estilos Comentarios Modo Icono Utilidades Icono y texto UTI_ICO@vDiseo PRN_UTI Utilidades
Lanzadores de accin del men utilidades Propiedades de la accin de men CAM_PWD Identificador Nombre Estilos Comentarios Modo Accin Accin CAM_PWD@vDiseo CAM_PWD Cambio de contrasea
Propiedades de la accin de men CACHE Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men PRC_2P Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men UTI_INS_1 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men UTI_INS_2 Identificador Nombre UTI_INS_2 Punto de insercin 2 Accin UTI_INS_1@vDiseo UTI_INS_1 Punto de insercin 1 Accin PRC_2P@vDiseo PRC_2P Procesos en segundo plano Accin CACHE@vDiseo CACHE Cach
Estilos Comentarios Modo Accin Propiedades de la accin de men UTI_INS_3 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men UTI_INS_4 Identificador Nombre Estilos Comentarios Modo Accin Accin UTI_INS_4@vDiseo UTI_INS_4 Punto de insercin 4 Accin UTI_INS_3@vDiseo UTI_INS_3 Punto de insercin 3 Accin UTI_INS_2@vDiseo
Acciones asociadas al men utilidades Propiedades de la accin CAM_PWD Identificador Nombre Estilos CAM_PWD Cambiar contrasea
Comentarios Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinacin de la tecla aceleradora Comando Propiedades de la accin CACHE Identificador Nombre Estilos Comentarios Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinacin de la tecla aceleradora Comando Propiedades de la accin PRC_2P 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@vDiseo Ninguna Tecla Archivo: Cachs de fichas CACHE Cach Cambiar contrasea Cambiar contrasea Cambiar contrasea Cambiar contrasea PWD_ICO@vDiseo Ninguna Tecla Archivo: Modificar contrasea del usuario
Identificador Nombre Estilos Comentarios Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinacin de la tecla aceleradora Comando Propiedades de la accin UTI_INS_1 Identificador Nombre Estilos Comentarios Tabla asociada Propiedades de la accin UTI_INS_2 Identificador Nombre Estilos Comentarios Tabla asociada
PRC_2P Procesos en 2 plano
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@vDiseo 2 Control + Tecla Archivo: Procesos en segundo plano
UTI_INS_1 Punto de inserccin 1 en el men PRN_UTI Punto de insercin Primer punto de insercin en el men PRN_UTI
UTI_INS_2 Punto de inserccin 2 en el men PRN_UTI Punto de insercin Segundo punto de insercin en el men PRN_UTI
Propiedades de la accin UTI_INS_3 Identificador Nombre Estilos Comentarios Tabla asociada Propiedades de la accin UTI_INS_4 Identificador Nombre Estilos Comentarios Tabla asociada UTI_INS_4 Punto de inserccin 4 en el men PRN_UTI Punto de insercin Cuarto punto de insercin en el men PRN_UTI UTI_INS_3 Punto de inserccin 3 en el men PRN_UTI Punto de insercin Tercer punto de insercin en el men PRN_UTI
2.2.5 Men Ayuda
Propiedades: Identificador Nombre PRN_AYU Ayuda
Estilos Comentarios Modo Icono Ayuda de la aplicacin Icono y texto
Lanzadores de accin del men ayuda Propiedades de la accin de men AYU_INS_1 Identificador Nombre Estilos Comentarios Modo Accin Propiedades de la accin de men ACERCA_DE Identificador Nombre Estilos Comentarios Modo Accin Accin ACERCA_DE@vDiseo ACERCA_DE Acerca de Accin AYU_INS_1@vDiseo AYU_INS_1 Punto de insercin 1
Acciones asociadas al men ayuda Propiedades de la accin AYU_INS_1 Identificador Nombre AYU_INS_1 Punto de inserccin 1 en el men PRN_AYU
Estilos Comentarios Tabla asociada Propiedades de la accin ACERCA_DE Identificador Nombre Estilos Comentarios Tabla asociada Texto de estado Texto de tooltip Texto de ayuda Texto de icono Icono Tecla aceleradora Combinacin de la tecla aceleradora Comando
Punto de insercin Primer punto de insercin en el men PRN_AYU
ACERCA_DE Acerca de
Acerca de Acerca de Acerca de Acerca de AYU_ICO@vDiseo Ninguna Tecla Ayuda: Acerca de...
3. Bloque uno. Barra Lateral

Descripcin 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 Identificador Nombre Estilos Comentarios Tabla asociada Ancho Alto Siempre cuadro de dilogo 210 400 Falso MEN_APP Men general
Especial para bsquedas Condicin de activo Ttulo opcional Icono Centrar Color de fondo Dibujo de fondo Aspecto de dibujo Timer (milisegundos) Layout Alineamiento horizontal Alineamiento vertical Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior
Descripcin de los controles del formulario
Falso
getProjectName()
Falso #ffffff (Blanco)
Original 0 Vertical Izquierda Arriba 0 0 0 0 0
En la esquina superior izquierda se incluye el botn inicio que da acceso al formulario principal, que se carga en la vista central del marco. Remarcando el botn inicio tanto en horizontal como en vertical se incluyen dos bandas de color. La banda horizontal, banda A, es personalizable en color (COL_APP@vDiseo). La banda vertical, banda B, es de color gris oscuro (INI_ICO@vDiseo). Sobre la banda A se incluye un texto Usuario (sysUserName) para referenciar al usuario cuando use distintintas sesiones en la misma aplicacin. El botn con la etiqueta crear nuevo (BTN_ALT) ser una sea de identidad de las aplicaciones. Los mrgenes de este botn sern 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 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Propiedades del control LAY_2 Izquierda Arriba Horizontal -1 -1 -1 -1 -1 Fijo Por defecto Layout 210 400 0 0 LAY_1 Layout general
Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Propiedades del control COL_BAS Identificador Nombre Estilos Comentarios
LAY_2 Layout bloque izquierdo
Layout 20 400 0 0
Izquierda Arriba Vertical 0 0 0 0 0 Fijo Por defecto
COL_BAS Barra vertical color base
Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin de visible Borde Tamao del borde Color del borde Color del primer plano Fondo opaco Alineamiento horizontal Alineamiento vertical Dibujo Aspecto del dibujo Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Tipo de men de contexto
Dibujo 20 217 1 30
Ninguno 0 Ventana Texto ventana Falso Izquierda Arriba COL_BAS@vDiseo Estirar / Encoger Vertical 0 0 0 0 0 Fijo Por defecto Por defecto
Propiedades del control BTN_INI Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin de visible Condicin de activo Contenido Color de botn Color de botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono Tamao del icono Botn por defecto Base Texto botn Falso Sistema Ninguna Tecla Verdadero INI_ICO@vDiseo Original Falso Botn de inicio Botn 20 20 1 44 Mostrar inicio Falso BTN_INI
Comando Objeto Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control LAY_3 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout
Accin FRM_INI@vDiseo Fijo Fijo Por defecto
LAY_3 Layout bloque derecho
Layout 190 400 20 0
Izquierda Arriba Vertical -1 0 0 0 0 Fijo
Alto en layout Propiedades del control COL_APP Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin de visible Borde Tamao del borde Color del borde Color del primer plano Fondo opaco Alineamiento horizontal Alineamiento vertical Dibujo Aspecto del dibujo Tipo de layout Espaciado Margen izquierdo
Por defecto
COL_APP Barra horizontal color aplicacin
Dibujo 106 20 80 4
Ninguno 0 Ventana Texto ventana Falso Derecha Centrado COL_APP@vDiseo Estirar / Encoger Horizontal -1 0
Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control NOM_USR Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin de visible Condicin de activo Borde Tamao del borde Contenido Color del borde Color del primer plano Fondo opaco
0 0 0 Por defecto Fijo Por defecto
NOM_USR Nombre del usuario
Texto esttico 27 13 109 8
Ninguno 0 sysUserName Ventana #ffffff (Blanco) Falso
Fuente Alineamiento horizontal Alineamiento vertical Multilineas Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control ESP_1 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Propiedades del control LAY_4 Identificador Nombre Estilos
Sistema Izquierda Arriba Falso Por defecto Por defecto Por defecto
ESP_1 Espaciador para el nombre del usuario
Espaciador 10 10 145 10
Izquierda Arriba Espaciador fijo
LAY_4 Layout botn crear nuevo
Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Propiedades del control BTN_ALT Identificador Nombre Estilos Comentarios Tipo Ancho Alto Botn 172 27 BTN_ALT Botn crear nuevo Izquierda Arriba Horizontal -1 10 10 15 15 Por defecto Por defecto Layout 186 35 23 40
Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin de visible Condicin de activo Contenido Color de botn Color de botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono Tamao del icono Botn por defecto Comando Objeto Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control MEN_APP_CAJ Identificador Nombre
30 44 Mostrar inicio Verdadero
#ffffff (Blanco) Texto botn Falso Sistema Ninguna Tecla Falso ALT_ICO@vDiseo Pequeo Falso Men BTN_ALT@vDiseo Proporcional Por defecto Por defecto
MEN_APP_CAJ Caja de formulario del men de aplicacin
Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin de visible Condicin de activo Borde Tamao del borde Color de primer plano Color de base Color de botn Color texto de botn Fondo opaco Fuente Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control ESP_2 Identificador Nombre ESP_2 Espaciador en el pie Caja a nivel 0 #ffffff (Blanco) #ffffff (Blanco) #ffffff (Blanco) #808080 Falso Sistema Fijo Por defecto Por defecto Verdadero Caja de formularios 190 286 20 90
Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Izquierda Abajo Espaciador expansible Espaciador 190 20 20 380
4. Bloque dos. Men de aplicacin

Descripcin Se denomina bloque 2 al rea del interfaz situado dentro del bloque 1, debajo del botn Crear Nuevo, compuesto por una caja de formulario y sus subobjetos (Formularios) que conforman las opciones principales de la aplicacin.
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 botn por cada opcin de men que se quiera incluir con un icono y un texto descriptivo. El botn ejecutar una accin que abrir un formulario sin origen en el bloque 3. Para conseguir que las imgenes y los textos queden alineados por la izquierda se utilizarn CSS que se incrustarn en el evento ON-INIT del formulario que se ejecuta con la conexin a la seal de inicializacin del formulario. A continuacin se muestra el cdigo 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 aplicacin y tendr un tamao de 10x10 px.
Controles del bloque 2 Propiedades de la caja de formularios MEN_APP_CAJ Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Borde Tamao del borde Color de primer plano Color de base Color de botn Color texto del botn Fondo opaco Fuente Caja a nivel 0 #ffffff #ffffff #ffffff #808080 Falso Sistema, +0,5 Verdadero Men principal incrustado en el dock lateral Caja de formularios 190 286 20 90
MEN_APP_CAJ
Men principal
Ancho de layout Alto de layout Tipo de men de contexto
Fijo Por defecto Por defecto
Subcontroles de la caja de formulario Propiedades del subcontrol MEN_APP_1 Identificador Nombre Estilos Comentarios Formulario Icono Condicin de visible Propiedades del subcontrol MEN_APP_2 Identificador Nombre Estilos Comentarios Formulario Icono Condicin de visible Propiedades del subcontrol MEN_APP_3 Identificador Nombre
MEN_APP_3 MEN_APP_2@proyectoapp MEN_APP_OPC_ICO@vDiseo MEN_APP_2 MEN_APP_1@proyectoapp MEN_APP_OPC_ICO@vDiseo MEN_APP_1
Men de aplicacin 1
Men de aplicacin 2
Men de aplicacin 3
Estilos Comentarios Formulario Icono Condicin de visible Propiedades del subcontrol MEN_APP_4 Identificador Nombre Estilos Comentarios Formulario Icono Condicin de visible
MEN_APP_4@proyectoapp MEN_APP_OPC_ICO@vDiseo MEN_APP_4 MEN_APP_3@proyectoapp MEN_APP_OPC_ICO@vDiseo
Men de aplicacin 4
Formularios que se muestran con las opcin del men de aplicacin En la plantilla de vDiseo se incluyen 4 formularios. Son todos iguales por lo que slo se documenta el primero. Propiedades del Formulario MEN_APP_1 Identificador Nombre Estilos Comentarios Tabla asociada Ancho 190
MEN_APP_1
Men de aplicacin 1
Alto
170 (40px por cada opcin contenida. 1 opcin 50px, 2 opciones=90px, 3 opciones=130px, 4 opciones=170px) Falso Falso
Siempre cuadro de dilogo Especial para bsquedas Condicin de activo Titulo opcional Icono Centrar Color de fondo Dibujo de fondo Aspecto de dibujo Timer (Milisegundos) Tipo de layout Controles del formulario MEN_APP_1 Propiedades del control BTN_OPC_1 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X
Falso #ffffff (Blanco)
Original centrado 0 Ninguno
BTN_OPC_1
Opcin 1 (Sustituir opcin 1)
Botn 170 30 10
Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono
10 Abrir opcin 1 (Sustituir opcin 1) Verdadero
Botn #000000 Falso Sistema Ninguna Tecla Verdadero APP_ICO@vDiseo (Sustituir por el icono representativo de la opcin con un tamao de 16x16 px) Original Falso Accin MEN_APP_OPC@vDiseo (Sustituir por la accin a ejecutar) Por defecto
Tamao del icono Botn por defecto Comando Objeto Tipo de men de contexto Propiedades del control BAR_SEP_1 Identificador Nombre
BAR_SEP_1 Barra de separacin 1
Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Borde Tamao del borde Color de fondo Color de primer plano Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Tipo de men de contexto Propiedades del control BTN_OPC_2 Identificador Nombre Estilos Comentarios Tipo Botn
BTN_OPC_2
Dibujo 140 1 25 40
Ninguno 0 Ventana Texto ventana Falso COL_APP@vDiseo Estirar / Encoger Ninguno Por dfecto
Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono
170 30 10 50 Abrir opcin 2 (Sustituir opcin 2) Verdadero
Botn #000000 Falso Sistema Ninguna Tecla Verdadero APP_ICO@vDiseo (Sustituir por el icono representativo de la opcin con un tamao de 16x16 px) Original Falso Accin MEN_APP_OPC@vDiseo (Sustituir por la accin a ejecutar) Por defecto
Tamao del icono Botn por defecto Comando Objeto Tipo de men de contexto
Propiedades del control BAR_SEP_2 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Borde Tamao del borde Color de fondo Color de primer plano Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Tipo de men de contexto Propiedades del control BTN_OPC_3 Identificador Nombre
BTN_OPC_3
Dibujo 140 1 25 80
Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono Botn #000000 Falso Sistema Ninguna Tecla Verdadero APP_ICO@vDiseo (Sustituir por el icono representativo de la opcin con un tamao de 16x16 px) Original Falso Accin Botn 170 30 10 90 Abrir opcin 3 (Sustituir opcin 3) Verdadero
Tamao del icono Botn por defecto Comando
Objeto Tipo de men de contexto Propiedades del control BAR_SEP_3 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Borde Tamao del borde Color de fondo Color de primer plano Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Tipo de men de contexto
MEN_APP_OPC@vDiseo (Sustituir por la accin a ejecutar) Por defecto
Dibujo 140 1 25 120
Propiedades del control BTN_OPC_4 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono Botn #000000 Falso Sistema Ninguna Tecla Verdadero APP_ICO@vDiseo (Sustituir por el icono representativo de la opcin con un tamao de 16x16 px) Botn 170 30 10 130 Abrir opcin 4 (Sustituir opcin 4) Verdadero
BTN_OPC_4
Tamao del icono Botn por defecto Comando Objeto Tipo de men de contexto
Original Falso Accin MEN_APP_OPC@vDiseo (Sustituir por la accin a ejecutar) Por defecto
Recomendaciones Usar un mximo de 4 opciones en cada formulario. Utilizar textos con el menor nmero de palabras posibles, lo ideal es 1 palabra. Utilizar tooltip para ampliar la descripcin de la opcin y poder ahorrar palabras en el texto. Utilizar iconos asociados a la opcin de 16x16 y siempre que sea posible de la librera famfamfam Silk. No utilizar el mismo icono para ms de una opcin.
5. Bloque tres. Vista central
Descripcin El bloque tres, es el bloque de trabajo principal del usuario el que se divide en 4 sub.zonas. Cada accin que se se seleccione en el Bloque 2 lanzar un formulario sin origen con el bloque 3
5.1 Botn de inicio - Formulario de inicio

Descripcin Cuando se pulsa el botn inicio en el bloque 0, se muestra el formulario de inicio en el visor central que denominamos en esta gua bloque 3.
Propiedades del formulario INI Identificador Nombre Estilos Comentarios Tabla asociada
INI
Inicio
Ancho Alto Siempre cuadro de dilogo Especial para bsquedas Condicin de activo Ttulo opcional Icono Centrar Color de fondo Dibujo de fondo Aspecto del dibujo Timer (Milisegundos) Tipo de layout Alineamiento horizontal Alineamiento vertical Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior
500 400 Falso Falso
Falso #ffffff
Estirar / Encoger 0 Vertical Izquierda Arriba -1 -1 -1 -1 -1
Controles del formulario INI Propiedades del control BTN_CNC Identificador

BTN_CNC
Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono Tamao del icono Botn por defecto Pequeo Falso Botn Texto botn Falso Sistema Escape Tecla Falso Falso Botn cancelar para permitir cerrar la pestaa con la tecla ESC Botn 0 0 0 0
Comando Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control TIT_TXT Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Condicin activo Borde Tamao del borde Contenido Color del botn Color texto del botn Fondo opaco Fuente
Cancelar Fijo Fijo Por defecto
TIT_TXT
Inicio
Texto esttico 480 20 10 10
Ninguno 0
Ventana #000000 Falso Sistema +3, negrita
Alineamiento horizontal Alineamiento vertical Multilneas Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control COL_APP Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Borde Tamao del borde Color del botn Color texto del botn Fondo opaco Dibujo
Izquierda Centrado Falso Fijo Fijo Por defecto
COL_APP
Banda con color de fondo de la aplicacin
Dibujo 480 1 10 40
Ninguno 0 Ventana Texto ventana Falso COL_APP@vDiseo
Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control ESP_1 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Propiedades del control LOGO_APP Identificador Nombre Estilos
Estirar / Encoger Ninguno Por defecto Fijo Por defecto
ESP_1
Espaciador superior
LOGO_APP
Logotipo de la aplicacin
Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Borde Tamao del borde Color del botn Color texto del botn Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control ESP_2 Identificador Nombre Estilos Comentarios
ESP_2
Dibujo 220 110 140 150
Ninguno 0 Ventana Texto ventana Falso LOGO_APP@vDiseo Original centrado Ninguno Por defecto Por defecto Por defecto
Espaciador inferior
Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Propiedades del control COL_BAS Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Borde Tamao del borde Color del botn
COL_BAS
Banda con color base
Dibujo 480 2 10 370
Ninguno 0 Ventana
Color texto del botn Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control ESP_3 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador
Texto ventana Falso COL_BAS@vDiseo Estirar / Encoger Ninguno Por defecto Fijo Por defecto
ESP_3
Espaciador pie
Izquierda Arriba Espaciador expansible
5.2 Estilo migas en las pestaas

Descripcin En el nombre de las pestaas que se abren al ejecutar las opciones de men se aplicar un estilo migas XXX.YYY (Siendo XXX el nombre de la opcin principal e YYY el nombre de la subopcin) y el icono ser el mismo que el de la opcin que dispara (XXX_YYY_ICO@proyectoapp).
5.3 Formulario abierto desde opciones de men

Descripcin Cuando se ejecuta una opcin del men de aplicacin se recomienda abrir un formulario en el bloque 3 (vista central a pantalla completa, no en cuadro de dilogo). A continuacin se detallan las caractersticas de este formulario.
Plantilla En la gua se incluye el formulario FRM_PLA que puedes servir de base o plantilla para la creacin 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", "Opcin 1" y "Opcin 2" reflejen el resultado de la ejecucin de la accin dentro del propio formulario y si es necesario refrescando la informacin del objeto de lista. Para acciones que deban abrir una nueva pestaa en el marco de aplicacin se recomienda el uso de acciones incrustadas en el men contextual del botn "Ms opciones". Propiedades del formulario FRM_PLA Identificador Nombre Estilos Comentarios Tabla asociada Ancho Alto Siempre cuadro de dilogo 500 400 Falso
FRM_PLA
Formulario de ejemplo
Especial para bsquedas Condicin de activo Ttulo opcional Icono Centrar Color de fondo Dibujo de fondo Aspecto del dibujo Timer (Milisegundos) Tipo de layout Alineamiento horizontal Alineamiento vertical Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior
Falso
Falso #ffffff
Estirar / Encoger 0 Vertical Izquierda Arriba -1 -1 -1 -1 -1
Controles del formulario FRM_PLA Propiedades del control BTN_CNC Identificador Nombre Estilos Comentarios Botn cancelar para permitir cerrar el formulario con la tecla ESC
BTN_CNC
Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono Tamao del icono Botn por defecto Comando Ancho en layout Alto en layout Tipo de men de contexto
Botn 0 0 0 0
Falso
Botn Texto botn Falso Sistema Escape Tecla Falso
Pequeo Falso Cancelar Fijo Fijo Por defecto
Propiedades del control TIT_TXT Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Condicin activo Borde Tamao del borde Contenido Color del botn Color texto del botn Fondo opaco Fuente Alineamiento horizontal Alineamiento vertical Multilneas Ancho en layout Ventana #000000 Falso Sistema +3, negrita Izquierda Centrado Falso Fijo Ninguno 0 Texto esttico 480 20 10 10
TIT_TXT
Ttulo de ejemplo (A sustituir)
Alto en layout Tipo de men de contexto Propiedades del control COL_APP Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Borde Tamao del borde Color del botn Color texto del botn Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout
Fijo Por defecto
COL_APP
Banda con color de fondo de la aplicacin
Dibujo 480 1 10 40
Ninguno 0 Ventana Texto ventana Falso COL_APP@vDiseo Estirar / Encoger Ninguno Por defecto Fijo
Tipo de men de contexto Propiedades del control LAY_1 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Propiedades del control BTN_ALT
Por defecto
LAY_1
Layout botones
Layout 480 50 10 60
Izquierda Arriba Horizontal -1 -1 -1 -1 -1 Por defecto Por defecto
Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin de visible Condicin de activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de tecla aceleradora Plano Icono Tamao del icono Botn por defecto
BTN_ALT
Nuevo
Botn 100 30 20 70
Verdadero
Botn Texto botn Falso Sistema Ninguna Tecla Falso ALT_ICO@vDiseo Pequeo Falso
Comando Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control BTN_OPC_1 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin de visible Condicin de activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora
Aceptar Por defecto Por defecto Por defecto
BTN_OPC_1
Opcin 1 (Sustituir)
Botn 100 30 130 70
Verdadero
Botn Texto botn Falso Sistema Ninguna
Combinacin de tecla aceleradora Plano Icono Tamao del icono Botn por defecto Comando Evento Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control BTN_OPC_2 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin de visible Condicin de activo
Tecla Falso PAR_ICO@vDiseo (Sustituir) Pequeo Falso Ejecutar evento BTN_ALT Por defecto Por defecto Por defecto
BTN_OPC_2
Opcin 2 (Sustituir)
Botn 100 30 240 70
Verdadero
Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de tecla aceleradora Plano Icono Tamao del icono Botn por defecto Comando Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control BTN_OPC_MAS Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Botn 100 30 350
BTN_OPC_MAS
Botn Texto botn Falso Sistema Ninguna Tecla Falso PAR_ICO@vDiseo (Sustituir) Pequeo Falso Aceptar (Sustituir) Por defecto Por defecto Por defecto
Ms opciones
Posicin Y Tooltip Seleccionable con Tab Condicin de visible Condicin de activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de tecla aceleradora Plano Icono Tamao del icono Botn por defecto Comando Objeto Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control OBJ_LST Identificador Nombre
70
Verdadero
Botn Texto botn Falso Sistema Ninguna Tecla Falso MEN_APP_OPC_ICO@vDiseo Pequeo Falso Men (Seleccionar el men con opciones) Por defecto Por defecto Por defecto
OBJ_LST
Objeto de lista como la rejilla, casillero, etc.
Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin de visible Condicin de activo Borde Tamao del borde Fondo opaco Barras de scroll Objeto 1 Ninguno 0 Falso Automtico (Seleccionar objetos para mostrar la lista de registros) Por defecto Por defecto Por defecto Verdadero Control objeto 480 230 10 130
Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control ESP_1 Identificador Nombre Estilos
ESP_1
Espaciador pie
Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Eventos del formulario Propiedades del evento BTN_ALT Identificador Nombre Estilos Comentarios Instrucciones del evento
BTN_ALT
Botn Alta
6. Rejilla
La recomendaciones para conseguir la mejor sensacin del usuario al usar el objeto rejilla son las siguientes:
No alimentar la rejilla del men con una lista de registros que tarden ms de un segundo en cargar. No utilizar ningn 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 frmulas en las columnas de texto. Trata de evitar el uso de campos tipo frmula como contenido de las columnas. Crear 5 columnas, como mximo, en la rejilla. Recomendamos 3 columnas mximo de texto. Recomendamos tener al menos una columna con la propiedad Tipo de ancho con el valor Mximo disponible. Se recomienda que sean las columnas de campos alfabticos, si no las hibiese, sera la columna situada a la derecha.
Identificador
XXX_YYY@proyecto.app (Siendo XXX el nombre de la opcin de men de aplicacin e YYY el nombre de la subopcin de aplicacin. Ejemplo: VTA_FAC para la rejilla de facturas de venta) Rejilla de YYY de XXX (Ejemplo: Rejilla de facturas de venta)
Nombre Estilos Comentarios Tabla Asociada Formulario de alta Formulario de modificacin Formulario de baja Tipo de men de contexto
Rejilla del men principal La que corresponda El que corresponda El que corresponda El que corresponda Por defecto (Aunque se puede usar un men personalizado para controlar las opciones disponibles por lo usuarios o tambin aplicar la opcin ninguno) Falso Horizontal
Multiseleccin Modo ver cabeceras
Editable Alto de cabecera Color de cara cabecera Color de luz de cabecera Color de sombra de cabecera Alto de cuerpo Color de fondo de cuerpo Color de fondo par de cuerpo Mostrar lneas de rejilla Pie activo Alto de pie Color de fondo de pie Toolbar Longitud de columnas
Falso 29 Ventana Luz Sombra 21 Base Base alternativo Falso Falso
7. Formularios
Descripcin En esta seccin se describe como sera el formulario recomendado para el mantenimiento (Alta, Baja y Modificacin) de una tabla.
El formulario se puede dividir, horizontalmente, en 3 zonas principales: cabecera, cuerpo y pie. A continuacin se detallan cada una de ellas.
7.1 Cabecera
Descripcin La cabecera es el rea del formulario que ocupa la parte superior y en la que se informa del origen de la informacin contenida en el cuerpo del formulario.
Controles de la cabecera del formulario Propiedades del control LAY_1 Identificador Nombre Estilos Comentarios
LAY_1
Layout cabecera
Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Propiedades del control TIT_TXT Identificador Nombre Estilos Comentarios Tipo Ancho Alto
Layout 580 50 10 0
Izquierda Arriba Horizontal 5 -1 -1 0 10 Por defecto Por defecto
TIT_TXT
Registro (A sustituir)
Texto esttico 560 20
Posicin X Posicin Y Tooltip Condicin visible Condicin activo Borde Tamao del borde Contenido Color del botn Color texto del botn Fondo opaco Fuente Alineamiento horizontal Alineamiento vertical Multilneas Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control TIT_SEP Identificador Nombre Estilos Comentarios
20 10
Ninguno 0 choose(#ID, "Registro", "Nuevo registro") (Sustituir Registro por el nombre de la tabla) Ventana #000000 Falso Sistema +3, negrita Izquierda Arriba Falso Por defecto Por defecto Por defecto
TIT_SEP
Separador del ttulo
Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Borde Tamao del borde Color del botn Color texto del botn Fondo opaco Dibujo Aspecto del dibujo Tipo de layout Ancho en layout Alto en layout Tipo de men de contexto
Dibujo 560 1 20 40
Ninguno 0 Ventana Texto ventana Falso COL_BAS@vDiseo Estirar / Encoger Ninguno Proporcional Fijo Por defecto
7.2 Cuerpo
Descripcin El cuerpo es el rea del formulario que ocupa la parte central del formulario y que contendr controles con informacin 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 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Layout 580 210 10 60
LAY_2
Layout cuerpo
Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Propiedades del control DAT_TXT Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Condicin visible Condicin activo Borde
Izquierda Arriba Horizontal -1 -1 -1 10 10 Por defecto Por defecto
DAT_TXT
(Sustiuit por el nombre de campo del dato)
Nombre de campo 100 20 30 80
Ninguno
Tamao del borde Color del botn Color texto del botn Fondo opaco Fuente Alineamiento horizontal Alineamiento vertical Multilneas Campo Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control DAT Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab
0 Ventana Texto ventana Falso Sistema Derecha Centrado Falso (Seleccionar el campo a mostrar) Por defecto Por defecto Por defecto
DAT
Dato (Sustituir por el nombre del campo)
Edicin 430 20 140 80
Verdadero
Condicin visible Condicin activo Slo lectura Contenido Color de base Color de texto Fondo opaco Fuente Alineamiento horizontal Alineamiento vertical Contrasea Mscara Ancho en layout Alto en layout Tipo de men de contexto Tipo de men de botn Men de botn Por defecto Por defecto Por defecto Botn izquierda (Selecionar el men a mostrar) (Sustituir por el campo a editar) Base Texto Falso Sistema Izquierda Centrado Falso
7.2.1 Men de botn para campos puntero a maestro

Descripcin Cuando un control de edicin muestra informacin de un campo puntero a una tabla maestra, recomandamos que se incluya un men de botn para dar al usuario la posibilidad de realizar acciones muy habituales de forma sencilla e incluso directamente con el teclado:
Icono BTN_LOC_ICO@vDiseo BTN_ALT_ICO@vDiseo BTN_MOD_ICO@vDiseo
Opcin XXX_YYY_LOC@proyectoapp XXX_YYY_ALT@proyectoapp XXX_YYY_MOD@proyectoapp
Accin Localizar Nuevo Editar
Tecla acel. F5 F6 F7
Con estas acciones se crea el men XXX_YYY@proyectoapp (Donde XXX corresponde al identificador de la tabla histrica, es decir la del formulario, e YYY al campo de la tabla maestra sobre la que se lanzan las acciones). Ejemplo: LIN_ART@proyectoapp sera el men de botn para el campo artculo en la tabla de lneas.
7.3 Pie
Descripcin El pie es el rea del formulario situado en la parte inferior. Esta zona se utiliza para la ubicacin de los diversos botones con las funcionalidades bsicas del formulario como grabar, cancelar o eliminar el registro, entre otros.
Controles del pie del formulario Propiedades del control ESP_1 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Espaciador 580 10 10 270
ESP_1
Espaciador entre cuerpo y pie
Alineamiento horizontal Alineamiento vertical Tipo de espaciador Propiedades del control LAY_3 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout
Izquierda Arriba Espaciador expandible
LAY_3
Layout pie general
Layout 580 60 10 280
Izquierda Arriba Horizontal -1 0 0 0 0 Por defecto Por defecto
Propiedades del control LAY_4 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Propiedades del control BTN_ACE Identificador
BTN_ACE LAY_4
Layout pie botones derecha
Layout 230 40 350 290
Derecha Arriba Horizontal -1 -1 0 0 0 Por defecto Por defecto
Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono Tamao del icono Botn por defecto Comando
Aceptar
Botn 100 34 360 292
Verdadero
Botn Texto botn Falso Sistema F12 Tecla Falso BTN_ACE_ICO@vDiseo Pequeo Falso Aceptar
Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control BTN_CNC Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora
Por defecto Por defecto Por defecto
BTN_CNC
Cancelar
Botn 100 34 470 292
Verdadero
Botn Texto botn Falso Sistema Ninguna Tecla
Plano Icono Tamao del icono Botn por defecto Comando Ancho en layout Alto en layout Tipo de men de contexto Propiedades del control ESP_2 Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de espaciador Propiedades del control LAY_5
Falso BTN_CNC_ICO@vDiseo Pequeo Falso Cancelar Por defecto Por defecto Por defecto
ESP_2
Espaciador entre layouts de botones
Izquierda Arriba Espaciador expandible
Identificador Nombre Estilos Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Alineamiento horizontal Alineamiento vertical Tipo de layout Espaciado Margen izquierdo Margen derecho Margen superior Margen inferior Ancho en layout Alto en layout Propiedades del control BTN_SUP Identificador Nombre Estilos
LAY_5
Layout pie botones izquierda
Layout 120 40 20 290
Izquierda Arriba Horizontal -1 0 -1 0 0 Por defecto Por defecto
BTN_SUP
Eliminar
Comentarios Tipo Ancho Alto Posicin X Posicin Y Tooltip Seleccionable con Tab Condicin visible Condicin activo Contenido Color del botn Color texto del botn Fondo opaco Fuente Tecla aceleradora Combinacin de la tecla aceleradora Plano Icono Tamao del icono Botn por defecto Comando Ancho en layout Alto en layout Botn Texto botn Falso Sistema E Control + Tecla Falso BTN_BAJ_ICO@vDiseo Pequeo Falso Eliminar controlado Por defecto Por defecto Falso Botn 100 34 30 292
Tipo de men de contexto
Por defecto
7.4 Recomendaciones
Se reomcienda dejar bastante espacio entre controles (Djalos respirar). Se recomienda no incluir muchos controles en un formulario. Menos es ms. Lo difcil es hacerlo sencillo. Debemos esforzarnos por conseguir una interfaz sencilla. Las opciones visibles o intuitivas siempre son ms sencillas para el usuario. El teclado es muy cmodo para determinadas tareas, utiliza teclas aceleradoras. Utiliza siempre las mismas teclas aceleradoras aplicados a las mismas funcionalidades.
8. Dibujos
A continuacin se detallan todos los dibujos utilizados en la gua y que han sido seleccionado de la librera de iconos Silk de famfamfam, salvo los que corresponden a colores y logo de la aplicacin.
Dibujos de la aplicacin (Personalizables)

Icono Identificador COL_APP@vDiseo Descripcin Color de la aplicacin utilizado para fondo y lneas de separadores. Logotipo de la aplicacin.
LOGO_APP@vDiseo
Dibujos de la interfaz
Icono Identificador ALT_ICO@vDiseo APP_ICO@vDiseo COL_BAS@vDiseo INI_ICO@vDiseo MEN_APP_OPC_ICO@vDiseo USR_ICO@vDiseo Descripcin Nuevo. Aplicacin. Color neutro utilizado para fondos y lneas de separadores. Inicio. Opcin de aplicacin. Usuario.
Dibujos del men archivo

Icono Identificador CRR_ICO@vDiseo PRT_ICO@vDiseo Descripcin Salir. Impresora.
Dibujos del men editar

3Icono Identificador COP_ICO@vDiseo COR_ICO@vDiseo PEG_ICO@vDiseo Descripcin Copiar. Cortar. Pegar.
Dibujos del men configurar
Icono
Identificador CACHE_ICO@vDiseo CFG_ICO@vDiseo PAR_ICO@vDiseo PWD_ICO@vDiseo UTI_ICO@vDiseo
Descripcin Cach. Configuracin. Parmetros. Contrasea. Utilidades.
Dibujos del men ayuda

Icono Identificador AYU_ICO@vDiseo Descripcin Ayuda.
Dibujos de los botones

Icono Identificador BTN_ACE_ICO@vDiseo BTN_ALT_ICO@vDiseo BTN_BAJ_ICO@vDiseo BTN_CNC_ICO@vDiseo BTN_DUP_ICO@vDiseo BTN_LOC_ICO@vDiseo BTN_MOD_ICO@vDiseo Descripcin Aceptar. Alta. Baja / Eliminar / Suprimir. Cancelar. Duplicar. Localizar. Modificar / Editar.
Apndices
Apndice 1: Galera de iconos
Galera de iconos recomendada http://www.famfamfam.com/lab/icons/silk/

Vdiseno Manual Consulta

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Vdiseno Manual Consulta

Загружено:

Авторское право:

Доступные форматы

Gua de diseo de la interfaz vDiseo: Manual de consulta

Gua de diseo de la interfaz vDiseo: Manual de Consulta

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

1.2 Recomendaciones Generales

Gua de diseo de la interfaz vDiseo: Manual de consulta

1.3 Esquema: Bloques de la interfaz

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

2. Bloque cero. Barra de mens

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Recomendaciones El men no debe incluir ms de dos niveles de apertura

2.1 Men Principal

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

2.2. Submens del men principal

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

2.2.2 Submen Editar

Propiedades: Identificador Nombre PRN_EDT Editar

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Estilos Comentarios Modo Icono Opciones de edicin Icono y texto

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Comentarios Modo Accin Accin EDT_PEG@vDiseo

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Copiar Copiar Copiar Copiar COP_ICO@vDiseo C Control + Tecla Editar: Copiar

Pegar Pegar Pegar Pegar PEG_ICO@vDiseo V Control + Tecla Editar: Pegar

2.2.3 Submen Registros

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Men en stock Ficha

Men en stock Lista

2.2.4 Submen Configurar

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Identificador Nombre Estilos Comentarios Modo Icono

Opciones de configuracin y parametrizacin Icono y texto

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

CFG_INS_4 Punto de insercin 4

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta

Men en stock Idioma

Men en stock Estilo

Telf. (+34) 902 36 63 82 velneo@velneo.com velneo.es

Gua de diseo de la interfaz vDiseo: Manual de consulta