Guía de diseño de la interfaz vDiseño: Manual de...

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

Guía de diseño de la interfaz vDiseño: Manual de Consulta1. Objetivo

1.1 Expectativas1.2 Recomendaciones Generales1.3 Esquema: Bloques de la interfaz1.4 Autoexec

2. Bloque cero. Barra de menús2.1 Menú Principal2.2. Submenús del menú principal

2.2.1 Submenú Archivo2.2.2 Submenú Editar2.2.3 Submenú Registros2.2.4 Submenú Configurar

2.2.4.1 Submenú Parámetros2.2.4.2 Submenú Utilidades

2.2.5 Menú Ayuda3. Bloque uno. Barra Lateral4. Bloque dos. Menú de aplicación5. Bloque tres. Vista central

5.1 Botón de inicio - Formulario de inicio5.2 Estilo migas en las pestañas5.3 Formulario abierto desde opciones de menú

6. Rejilla7. Formularios

7.1 Cabecera7.2 Cuerpo

7.2.1 Menú de botón para campos puntero a maestro7.3 Pie7.4 Recomendaciones

8. DibujosDibujos de la aplicación (Personalizables)

Pol. Ind. A Granxa, Edificio vCenterRúa D, esquina paralela 336400 Porriño (Pontevedra)España

Telf. (+34) 902 36 63 [email protected]

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ª

mailto:[email protected]





http://www.google.com/url?q=http%3A%2F%2Fvelneo.es&sa=D&sntz=1&usg=AFQjCNHynXn8DXeXcZiZwFTIrLbYsQgLfQ




Manual de consulta

Dibujos de la interfazDibujos del menú archivoDibujos del menú editarDibujos del menú configurarDibujos del menú ayudaDibujos de los botones

ApéndicesApé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 Pol. Ind. A Granxa, Edificio vCenterRúa D, esquina paralela 336400 Porriño (Pontevedra)España












Manual de consulta

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.




http://www.google.com/url?q=http%3A%2F%2Fwww.famfamfam.com%2Flab%2Ficons%2Fsilk%2F&sa=D&sntz=1&usg=AFQjCNGrmUWH1dgZP47MtttipwwSw1pvIw














Manual de consulta

1.4 Autoexec DescripciónEl AUTOEXEC es el marco principal de la aplicación que engloba en su interior a todos los bloques definidos en esta guía. Propiedades:

Identificador AUTOEXEC

Estilos

Comentarios Marco de arranque de la aplicación

Icono APP_ICO de 32x32 identificativo de la aplicación

Título "" + getProjectName() + " " +













Manual de consulta

getProjectVersion()

Formulario principal INI@proyectoapp

Modo arranque TAB

Menu Principal: PRN (Barra de menu)@nombreapp

Propiedades de los subobjetos docks del marco:

Identificador MEN_APP

Nombre Principal

Estilos

Comentarios: Dock Principal de navegación que se sitúa, por defecto, a la izquierda del marco.

Objeto: MEN_APP@proyectoapp

Posición: izquierda

Modo de Aparcar: incluir

Condición de visible inicial:

2. Bloque cero. Barra de menúsDescripciónDenominamos 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.













Manual de consulta

Recomendaciones

● El menú no debe incluir más de dos niveles de apertura UsoBarra 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ónProyecto a heredar: vDiseño (Descargable desde el catálogo de Velneo Open Apps´)

2.1 Menú Principal













Manual de consulta

Propiedades:

Identificador PRN@vDiseño

Nombre Principal

Estilos

Comentarios Menú principal de la aplicación asociado a la propiedad Menú Principal de nuestro Marco con identificador AUTOEXEC.

Modo Icono y texto

Icono

Lanzadores de acción del menú principal Propiedades de la acción de menú PRN_INS_1

Identificador PRN_INS_1

Nombre Punto de inserción 1

Estilos

Comentarios

Modo Acción

Acción PRN_INS_1@vDiseño

Propiedades de la acción de menú PRN_ACH













Manual de consulta

Identificador PRN_ACH

Nombre Archivo

Estilos

Comentarios

Modo Menú

Menú PRN_ACH@vDiseño

Propiedades de la acción de menú PRN_EDT

Identificador PRN_EDT

Nombre Editar

Estilos

Comentarios

Modo Menú

Menú PRN_EDT@vDiseño

Propiedades de la acción de menú PRN_REG

Identificador PRN_REG

Nombre Registro

Estilos

Comentarios

Modo Menú

Menú PRN_REG@vDiseño

Propiedades de la acción de menú PRN_CFG

Identificador PRN_CFG

Nombre Configuración

Estilos













Manual de consulta

Comentarios

Modo Menú

Menú PRN_CFG@vDiseño

Propiedades de la acción de menú PRN_INS_2



Estilos

Comentarios

Modo Acción

Acción PRN_INS_2@vDiseño

Propiedades de la acción de menú PRN_AYU

Identificador PRN_AYU

Nombre Ayuda

Estilos

Comentarios

Modo Menú

Menú PRN_AYU@vDiseño

Acciones asociadas al menú principal: Propiedades de la acción PRN_INS_1


Nombre Punto de inserción 1 en el menú PRN

Estilos Punto de inserción

Comentarios Primer punto de inserción en el menú PRN













Manual de consulta

Tabla asociada

Propiedades de la acción PRN_INS_2


Nombre Punto de inserción 2 en el menú PRN


Comentarios Segundo punto de inserción en el menú PRN

Tabla asociada

2.2. Submenús del menú principal

2.2.1 Submenú Archivo

Propiedades:

Identificador PRN_ACH@vDiseño

Nombre Archivo

Estilos

Comentarios Opciones generales para todas las aplicaciones













Manual de consulta

Modo Icono y texto

Icono

Lanzadores de acción del menú archivo Propiedades de la acción de menú PRN_ACH_INS_1

Identificador PRN_ACH_INS_1


Estilos

Comentarios

Modo Acción

Acción PRN_ACH_INS_1@vDiseño

Propiedades de la acción de menú PRT_CFG

Identificador PRT_CFG

Nombre Configuración de impresoras lógicas

Estilos

Comentarios

Modo Acción

Acción PRN_CFG@vDiseño

Propiedades de la acción de menú CRR

Identificador CRR

Nombre Salir de la aplicación

Estilos

Comentarios

Modo Acción













Manual de consulta

Acción CRR@vDiseño

Acciones asociadas al menú archivo Propiedades de la acción PRN_ACH_INS_1

Identificador PRN_ACH_INS_1

Nombre Punto de inserción 1 en el menú PRN_ACH


Comentarios Primer punto de inserción en el menú PRN_ACH

Tabla asociada

Propiedades de la acción PRT_CFG

Identificador PRT_CFG

Nombre Configurar impresoras

Estilos

Comentarios

Tabla asociada

Texto de estado Configurar impresoras

Texto de tooltip Configurar impresoras

Texto de ayuda Configurar impresoras

Texto de icono Configurar impresoras

Icono PRT_ICO@vDiseño

Tecla aceleradora Ninguna

Combinación de la tecla aceleradora Tecla

Comando Archivo: Configurar impresoras lógicas

Propiedades de la acción CRR

Identificador CRR













Manual de consulta

Nombre Salir de la aplicación

Estilos

Comentarios

Tabla asociada

Texto de estado Salir de la aplicación

Texto de tooltip Salir de la aplicación

Texto de ayuda Salir de la aplicación

Texto de icono Salir de la aplicación

Icono CRR_ICO@vDiseño



Comando Archivo: Salir

2.2.2 Submenú Editar

Propiedades:

Identificador PRN_EDT

Nombre Editar













Manual de consulta

Estilos

Comentarios Opciones de edición

Modo Icono y texto

Icono

Lanzadores de acción del menú editar Propiedades de la acción de menú EDT_COR

Identificador EDT_COR

Nombre Cortar

Estilos

Comentarios

Modo Acción

Acción EDT_COR@vDiseño

Propiedades de la acción de menú EDT_COP

Identificador EDT_COP

Nombre Copiar

Estilos

Comentarios

Modo Acción

Acción EDT_COP@vDiseño

Propiedades de la acción de menú EDT_PEG

Identificador EDT_PEG

Nombre Pegar

Estilos













Manual de consulta

Comentarios

Modo Acción

Acción EDT_PEG@vDiseño

Acciones asociadas al menú editar Propiedades de la acción EDT_COR

Identificador EDT_COR

Nombre Cortar

Estilos

Comentarios

Tabla asociada

Texto de estado Cortar

Texto de tooltip Cortar

Texto de ayuda Cortar

Texto de icono Cortar

Icono COR_ICO@vDiseño

Tecla aceleradora X

Combinación de la tecla aceleradora Control + Tecla

Comando Editar: Cortar

Propiedades de la acción EDT_COP

Identificador EDT_COP

Nombre Copiar

Estilos

Comentarios

Tabla asociada













Manual de consulta

Texto de estado Copiar

Texto de tooltip Copiar

Texto de ayuda Copiar

Texto de icono Copiar

Icono COP_ICO@vDiseño

Tecla aceleradora C


Comando Editar: Copiar

Propiedades de la acción EDT_PEG

Identificador EDT_PEG

Nombre Pegar

Estilos

Comentarios

Tabla asociada

Texto de estado Pegar

Texto de tooltip Pegar

Texto de ayuda Pegar

Texto de icono Pegar

Icono PEG_ICO@vDiseño

Tecla aceleradora V


Comando Editar: Pegar

2.2.3 Submenú Registros













Manual de consulta

Propiedades:

Identificador PRN_REG

Nombre Registros

Estilos

Comentarios Opciones generales para manejo de registros

Modo Icono y texto

Icono

Lanzadores de acción del menú registros Propiedades de la acción de menú NAV

Identificador NAV

Nombre Navegante

Estilos

Comentarios

Modo Menú en stock

Menú en stock Navegante

Propiedades de la acción de menú FIC

Identificador FIC













Manual de consulta

Nombre Ficha

Estilos

Comentarios

Modo Menú en stock

Menú en stock Ficha

Propiedades de la acción de menú LIS

Identificador LIS

Nombre Lista

Estilos

Comentarios

Modo Menú en stock

Menú en stock Lista

2.2.4 Submenú Configurar

Propiedades:













Manual de consulta

Identificador PRN_CFG

Nombre Configurar

Estilos

Comentarios Opciones de configuración y parametrización

Modo Icono y texto

Icono

Lanzadores de acción del menú configurar Propiedades de la acción de menú CFG_INS_1

Identificador CFG_INS_1


Estilos

Comentarios

Modo Acción

Acción CFG_INS_1@vDiseño

Propiedades de la acción de menú CFG_INS_2



Estilos

Comentarios

Modo Acción
















Manual de consulta


Estilos

Comentarios

Modo Acción





Estilos

Comentarios

Modo Acción


Propiedades de la acción de menú PRN_PAR

Identificador PRN_PAR

Nombre Parametrización

Estilos

Comentarios

Modo Menú

Menú PRN_PAR@vDiseño

Propiedades de la acción de menú PRN_UTI

Identificador PRN_UTI

Nombre Utilidades

Estilos

Comentarios













Manual de consulta

Modo Menú

Menú PRN_UTI@vDiseño

Propiedades de la acción de menú IDI

Identificador IDI

Nombre Idioma

Estilos

Comentarios

Modo Menú en stock

Menú en stock Idioma

Propiedades de la acción de menú EST

Identificador EST

Nombre Estilo

Estilos

Comentarios

Modo Menú en stock

Menú en stock Estilo

Acciones asociadas al menú configurar Propiedades de la acción CFG_INS_1


Nombre Punto de insercción 1 en el menú PRN_CFG


Comentarios Primer punto de inserción en el menú PRN_CFG

Tabla asociada













Manual de consulta

Propiedades de la acción CFG_INS_2




Comentarios Primer punto de inserción en el menú PRN_CFG

Tabla asociada





Comentarios Tercer punto de inserción en el menú PRN_CFG

Tabla asociada





Comentarios Cuarto punto de inserción en el menú PRN_CFG

Tabla asociada

2.2.4.1 Submenú Parámetros













Manual de consulta

Propiedades:

Identificador PRN_PAR

Nombre Parámetros

Estilos

Comentarios Parámetros

Modo Icono y texto

Icono PAR_ICO@vDiseño

Lanzadores de acción del menú parámetros Propiedades de la acción de menú PAR_INS_1

Identificador PAR_INS_1


Estilos

Comentarios

Modo Acción

Acción PAR_INS_1@vDiseño

Propiedades de la acción de menú PAR_INS_2 Pol. Ind. A Granxa, Edificio vCenterRúa D, esquina paralela 336400 Porriño (Pontevedra)España












Manual de consulta



Estilos

Comentarios

Modo Acción


Propiedades de la acción de menú PAR_INS_3



Estilos

Comentarios

Modo Acción


Propiedades de la acción de menú PAR_INS_4



Estilos

Comentarios

Modo Acción


Acciones asociadas al menú parámetros Propiedades de la acción PAR_INS_1


Nombre Punto de insercción 1 en el menú PRN_PAR













Manual de consulta


Comentarios Primer punto de inserción en el menú PRN_PAR

Tabla asociada

Propiedades de la acción PAR_INS_2




Comentarios Segundo punto de inserción en el menú PRN_PAR

Tabla asociada





Comentarios Tercer punto de inserción en el menú PRN_PAR

Tabla asociada





Comentarios Cuarto punto de inserción en el menú PRN_PAR

Tabla asociada

2.2.4.2 Submenú Utilidades













Manual de consulta

Propiedades:

Identificador PRN_UTI

Nombre Utilidades

Estilos

Comentarios Utilidades

Modo Icono y texto

Icono UTI_ICO@vDiseño

Lanzadores de acción del menú utilidades Propiedades de la acción de menú CAM_PWD

Identificador CAM_PWD

Nombre Cambio de contraseña

Estilos

Comentarios

Modo Acción

Acción CAM_PWD@vDiseño













Manual de consulta

Propiedades de la acción de menú CACHE

Identificador CACHE

Nombre Caché

Estilos

Comentarios

Modo Acción

Acción CACHE@vDiseño

Propiedades de la acción de menú PRC_2P

Identificador PRC_2P

Nombre Procesos en segundo plano

Estilos

Comentarios

Modo Acción

Acción PRC_2P@vDiseño

Propiedades de la acción de menú UTI_INS_1

Identificador UTI_INS_1


Estilos

Comentarios

Modo Acción

Acción UTI_INS_1@vDiseño
















Manual de consulta

Estilos

Comentarios

Modo Acción





Estilos

Comentarios

Modo Acción





Estilos

Comentarios

Modo Acción


Acciones asociadas al menú utilidades Propiedades de la acción CAM_PWD

Identificador CAM_PWD

Nombre Cambiar contraseña

Estilos













Manual de consulta

Comentarios

Tabla asociada

Texto de estado Cambiar contraseña

Texto de tooltip Cambiar contraseña

Texto de ayuda Cambiar contraseña

Texto de icono Cambiar contraseña

Icono PWD_ICO@vDiseño



Comando Archivo: Modificar contraseña del usuario

Propiedades de la acción CACHE

Identificador CACHE

Nombre Caché

Estilos

Comentarios

Tabla asociada

Texto de estado Estado de la caché de fichas del navegador

Texto de tooltip Estado de la caché de fichas del navegador

Texto de ayuda Estado de la caché de fichas del navegador

Texto de icono Caché

Icono CACHE_ICO@vDiseño



Comando Archivo: Cachés de fichas

Propiedades de la acción PRC_2P Pol. Ind. A Granxa, Edificio vCenterRúa D, esquina paralela 336400 Porriño (Pontevedra)España












Manual de consulta

Identificador PRC_2P

Nombre Procesos en 2º plano

Estilos

Comentarios

Tabla asociada

Texto de estado Ventana de estado de procesos en 2º plano

Texto de tooltip Ventana de estado de procesos en 2º plano

Texto de ayuda Ventana de estado de procesos en 2º plano

Texto de icono Procesos en 2º plano

Icono CFG_ICO@vDiseño

Tecla aceleradora 2


Comando Archivo: Procesos en segundo plano

Propiedades de la acción UTI_INS_1


Nombre Punto de insercción 1 en el menú PRN_UTI


Comentarios Primer punto de inserción en el menú PRN_UTI

Tabla asociada





Comentarios Segundo punto de inserción en el menú PRN_UTI

Tabla asociada













Manual de consulta





Comentarios Tercer punto de inserción en el menú PRN_UTI

Tabla asociada





Comentarios Cuarto punto de inserción en el menú PRN_UTI

Tabla asociada

2.2.5 Menú Ayuda

Propiedades:

Identificador PRN_AYU

Nombre Ayuda













Manual de consulta

Estilos

Comentarios Ayuda de la aplicación

Modo Icono y texto

Icono

Lanzadores de acción del menú ayuda Propiedades de la acción de menú AYU_INS_1

Identificador AYU_INS_1


Estilos

Comentarios

Modo Acción

Acción AYU_INS_1@vDiseño

Propiedades de la acción de menú ACERCA_DE

Identificador ACERCA_DE

Nombre Acerca de

Estilos

Comentarios

Modo Acción

Acción ACERCA_DE@vDiseño

Acciones asociadas al menú ayuda Propiedades de la acción AYU_INS_1

Identificador AYU_INS_1

Nombre Punto de insercción 1 en el menú PRN_AYU













Manual de consulta


Comentarios Primer punto de inserción en el menú PRN_AYU

Tabla asociada

Propiedades de la acción ACERCA_DE

Identificador ACERCA_DE

Nombre Acerca de

Estilos

Comentarios

Tabla asociada

Texto de estado Acerca de

Texto de tooltip Acerca de

Texto de ayuda Acerca de

Texto de icono Acerca de

Icono AYU_ICO@vDiseño



Comando Ayuda: Acerca de...

3. Bloque uno. Barra Lateral DescripciónDenominamos bloque 1 al formulario MEN_APP ubicado en el dock con el identificador MEN_APP situado por defecto a la izquierda del marco AUTOEXEC.













Manual de consulta

Detalle Bloque uno













Manual de consulta

Propiedades del formulario MEN_APP

Identificador MEN_APP

Nombre Menú general

Estilos

Comentarios

Tabla asociada

Ancho 210

Alto 400

Siempre cuadro de diálogo Falso













Manual de consulta

Especial para búsquedas Falso

Condición de activo

Título opcional getProjectName()

Icono

Centrar Falso

Color de fondo #ffffff (Blanco)

Dibujo de fondo

Aspecto de dibujo Original

Timer (milisegundos) 0

Layout Vertical

Alineamiento horizontal Izquierda

Alineamiento vertical Arriba

Espaciado 0

Margen izquierdo 0

Margen derecho 0

Margen superior 0

Margen inferior 0

Descripción de los controles del formularioEn 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 Pol. Ind. A Granxa, Edificio vCenterRúa D, esquina paralela 336400 Porriño (Pontevedra)España












Manual de consulta

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 LAY_1

Nombre Layout general

Estilos

Comentarios

Tipo Layout

Ancho 210

Alto 400

Posición X 0

Posición Y 0

Tooltip



Tipo de layout Horizontal

Espaciado -1

Margen izquierdo -1

Margen derecho -1

Margen superior -1

Margen inferior -1

Ancho en layout Fijo

Alto en layout Por defecto

Propiedades del control LAY_2













Manual de consulta

Identificador LAY_2

Nombre Layout bloque izquierdo

Estilos

Comentarios

Tipo Layout

Ancho 20

Alto 400

Posición X 0

Posición Y 0

Tooltip



Tipo de layout Vertical

Espaciado 0

Margen izquierdo 0

Margen derecho 0

Margen superior 0

Margen inferior 0



Propiedades del control COL_BAS

Identificador COL_BAS

Nombre Barra vertical color base

Estilos

Comentarios













Manual de consulta

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 Ventana

Color del primer plano Texto ventana

Fondo opaco Falso



Dibujo COL_BAS@vDiseño

Aspecto del dibujo Estirar / Encoger


Espaciado 0

Margen izquierdo 0

Margen derecho 0

Margen superior 0

Margen inferior 0



Tipo de menú de contexto Por defecto













Manual de consulta

Propiedades del control BTN_INI

Identificador BTN_INI

Nombre

Estilos

Comentarios Botón de inicio

Tipo Botón

Ancho 20

Alto 20

Posición X 1

Posición Y 44

Tooltip Mostrar inicio

Seleccionable con Tab Falso



Contenido

Color de botón Base

Color de botón Texto botón

Fondo opaco Falso

Fuente Sistema



Plano Verdadero

Icono INI_ICO@vDiseño

Tamaño del icono Original

Botón por defecto Falso













Manual de consulta

Comando Acción

Objeto FRM_INI@vDiseño


Alto en layout Fijo



Identificador LAY_3

Nombre Layout bloque derecho

Estilos

Comentarios

Tipo Layout

Ancho 190

Alto 400

Posición X 20

Posición Y 0

Tooltip




Espaciado -1

Margen izquierdo 0

Margen derecho 0

Margen superior 0

Margen inferior 0














Manual de consulta


Propiedades del control COL_APP

Identificador COL_APP

Nombre Barra horizontal color aplicación

Estilos

Comentarios

Tipo Dibujo

Ancho 106

Alto 20

Posición X 80

Posición Y 4

Tooltip


Borde Ninguno

Tamaño del borde 0


Color del primer plano Texto ventana

Fondo opaco Falso

Alineamiento horizontal Derecha

Alineamiento vertical Centrado

Dibujo COL_APP@vDiseño



Espaciado -1

Margen izquierdo 0













Manual de consulta

Margen derecho 0

Margen superior 0

Margen inferior 0

Ancho en layout Por defecto

Alto en layout Fijo


Propiedades del control NOM_USR

Identificador NOM_USR

Nombre Nombre del usuario

Estilos

Comentarios

Tipo Texto estático

Ancho 27

Alto 13

Posición X 109

Posición Y 8

Tooltip



Borde Ninguno

Tamaño del borde 0

Contenido sysUserName


Color del primer plano #ffffff (Blanco)

Fondo opaco Falso













Manual de consulta

Fuente Sistema



Multilineas Falso




Propiedades del control ESP_1

Identificador ESP_1

Nombre Espaciador para el nombre del usuario

Estilos

Comentarios

Tipo Espaciador

Ancho 10

Alto 10

Posición X 145

Posición Y 10

Tooltip



Tipo de espaciador Espaciador fijo


Identificador LAY_4

Nombre Layout botón crear nuevo

Estilos













Manual de consulta

Comentarios

Tipo Layout

Ancho 186

Alto 35

Posición X 23

Posición Y 40

Tooltip




Espaciado -1

Margen izquierdo 10

Margen derecho 10

Margen superior 15

Margen inferior 15



Propiedades del control BTN_ALT

Identificador BTN_ALT

Nombre Botón crear nuevo

Estilos

Comentarios

Tipo Botón

Ancho 172

Alto 27













Manual de consulta

Posición X 30

Posición Y 44

Tooltip Mostrar inicio

Seleccionable con Tab Verdadero



Contenido

Color de botón #ffffff (Blanco)

Color de botón Texto botón

Fondo opaco Falso

Fuente Sistema



Plano Falso

Icono ALT_ICO@vDiseño

Tamaño del icono Pequeño


Comando Menú

Objeto BTN_ALT@vDiseño

Ancho en layout Proporcional



Propiedades del control MEN_APP_CAJ

Identificador MEN_APP_CAJ

Nombre Caja de formulario del menú de aplicación













Manual de consulta

Estilos

Comentarios

Tipo Caja de formularios

Ancho 190

Alto 286

Posición X 20

Posición Y 90

Tooltip




Borde Caja a nivel

Tamaño del borde 0

Color de primer plano #ffffff (Blanco)

Color de base #ffffff (Blanco)

Color de botón #ffffff (Blanco)

Color texto de botón #808080

Fondo opaco Falso

Fuente Sistema





Identificador ESP_2

Nombre Espaciador en el pie













Manual de consulta

Estilos

Comentarios

Tipo Espaciador

Ancho 190

Alto 20

Posición X 20

Posición Y 380

Tooltip


Alineamiento vertical Abajo

Tipo de espaciador Espaciador expansible

4. Bloque dos. Menú de aplicación DescripciónSe 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.













Manual de consulta

Detalle Bloque dos













Manual de consulta

La caja de formularios contiene en su interior un formulario por cada subobjeto.Cada subobjeto contiene en su interior un formulario sin origen.













Manual de consulta

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.













Manual de consulta

Controles del bloque 2 Propiedades de la caja de formularios MEN_APP_CAJ

Identificador MEN_APP_CAJ

Nombre Menú principal

Estilos

Comentarios Menú principal incrustado en el dock lateral

Tipo Caja de formularios

Ancho 190

Alto 286

Posición X 20

Posición Y 90

Tooltip


Condición visible

Condición activo

Borde Caja a nivel

Tamaño del borde 0

Color de primer plano #ffffff

Color de base #ffffff

Color de botón #ffffff

Color texto del botón #808080

Fondo opaco Falso

Fuente Sistema, +0,5













Manual de consulta

Ancho de layout Fijo

Alto de layout Por defecto


Subcontroles de la caja de formulario Propiedades del subcontrol MEN_APP_1

Identificador MEN_APP_1

Nombre Menú de aplicación 1

Estilos

Comentarios

Formulario MEN_APP_1@proyectoapp

Icono MEN_APP_OPC_ICO@vDiseño


Propiedades del subcontrol MEN_APP_2



Estilos

Comentarios



















Manual de consulta

Estilos

Comentarios







Estilos

Comentarios




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



Estilos

Comentarios

Tabla asociada

Ancho 190













Manual de consulta

Alto 170 (40px por cada opción contenida. 1 opción 50px, 2 opciones=90px, 3 opciones=130px, 4 opciones=170px)




Titulo opcional

Icono

Centrar Falso

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

Identificador BTN_OPC_1

Nombre Opción 1 (Sustituir opción 1)

Estilos

Comentarios

Tipo Botón

Ancho 170

Alto 30

Posición X 10













Manual de consulta

Posición Y 10

Tooltip Abrir opción 1 (Sustituir opción 1)


Condición visible

Condición activo

Contenido

Color del botón Botón


Fondo opaco Falso

Fuente Sistema



Plano Verdadero

Icono APP_ICO@vDiseño (Sustituir por el icono representativo de la opción con un tamaño de 16x16 px)



Comando Acción

Objeto MEN_APP_OPC@vDiseño (Sustituir por la acción a ejecutar)


Propiedades del control BAR_SEP_1

Identificador BAR_SEP_1

Nombre Barra de separación 1













Manual de consulta

Estilos

Comentarios

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 Ventana

Color de primer plano Texto ventana

Fondo opaco Falso




Tipo de menú de contexto Por dfecto

Propiedades del control BTN_OPC_2



Estilos

Comentarios

Tipo Botón













Manual de consulta

Ancho 170

Alto 30

Posición X 10

Posición Y 50



Condición visible

Condición activo

Contenido



Fondo opaco Falso

Fuente Sistema



Plano Verdadero




Comando Acción















Manual de consulta




Estilos

Comentarios

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



Fondo opaco Falso




















Manual de consulta

Estilos

Comentarios

Tipo Botón

Ancho 170

Alto 30

Posición X 10

Posición Y 90



Condición visible

Condición activo

Contenido



Fondo opaco Falso

Fuente Sistema



Plano Verdadero




Comando Acción













Manual de consulta






Estilos

Comentarios

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



Fondo opaco Falso

















Manual de consulta




Estilos

Comentarios

Tipo Botón

Ancho 170

Alto 30

Posición X 10

Posición Y 130



Condición visible

Condición activo

Contenido



Fondo opaco Falso

Fuente Sistema



Plano Verdadero














Manual de consulta



Comando Acción



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













Manual de consulta













Manual de consulta

DescripciónEl 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













Manual de consulta

5.1 Botón de inicio - Formulario de inicio DescripciónCuando 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.













Manual de consulta

Propiedades del formulario INI

Identificador INI

Nombre Inicio

Estilos

Comentarios

Tabla asociada













Manual de consulta

Ancho 500

Alto 400




Título opcional

Icono

Centrar Falso

Color de fondo #ffffff

Dibujo de fondo






Espaciado -1

Margen izquierdo -1

Margen derecho -1

Margen superior -1

Margen inferior -1

Controles del formulario INI Propiedades del control BTN_CNC

Identificador BTN_CNC













Manual de consulta

Nombre

Estilos

Comentarios Botón cancelar para permitir cerrar la pestaña con la tecla ESC

Tipo Botón

Ancho 0

Alto 0

Posición X 0

Posición Y 0

Tooltip


Condición visible

Condición activo

Contenido


Color texto del botón Texto botón

Fondo opaco Falso

Fuente Sistema

Tecla aceleradora Escape


Plano Falso

Icono















Manual de consulta

Comando Cancelar


Alto en layout Fijo


Propiedades del control TIT_TXT

Identificador TIT_TXT

Nombre Inicio

Estilos

Comentarios


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


Fondo opaco Falso

Fuente Sistema +3, negrita













Manual de consulta



Multilíneas Falso


Alto en layout Fijo




Nombre Banda con color de fondo de la aplicación

Estilos

Comentarios

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 texto del botón Texto ventana

Fondo opaco Falso














Manual de consulta




Alto en layout Fijo



Identificador ESP_1

Nombre Espaciador superior

Estilos

Comentarios

Tipo Espaciador

Ancho 140

Alto 70

Posición X 180

Posición Y 60

Tooltip




Propiedades del control LOGO_APP

Identificador LOGO_APP

Nombre Logotipo de la aplicación

Estilos













Manual de consulta

Comentarios

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



Fondo opaco Falso

Dibujo LOGO_APP@vDiseño

Aspecto del dibujo Original centrado






Identificador ESP_2

Nombre Espaciador inferior

Estilos

Comentarios













Manual de consulta

Tipo Espaciador

Ancho 140

Alto 70

Posición X 180

Posición Y 280

Tooltip




Propiedades del control COL_BAS

Identificador COL_BAS

Nombre Banda con color base

Estilos

Comentarios

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














Manual de consulta


Fondo opaco Falso





Alto en layout Fijo



Identificador ESP_3

Nombre Espaciador pie

Estilos

Comentarios

Tipo Espaciador

Ancho 140

Alto 10

Posición X 180

Posición Y 380

Tooltip



Tipo de espaciador Espaciador expansible













Manual de consulta

5.2 Estilo migas en las pestañas DescripciónEn 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ónCuando 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.













Manual de consulta

PlantillaEn 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

Identificador FRM_PLA

Nombre Formulario de ejemplo

Estilos

Comentarios

Tabla asociada

Ancho 500

Alto 400














Manual de consulta



Título opcional

Icono

Centrar Falso

Color de fondo #ffffff

Dibujo de fondo






Espaciado -1

Margen izquierdo -1

Margen derecho -1

Margen superior -1

Margen inferior -1

Controles del formulario FRM_PLA Propiedades del control BTN_CNC


Nombre

Estilos

Comentarios Botón cancelar para permitir cerrar el formulario con la tecla ESC













Manual de consulta

Tipo Botón

Ancho 0

Alto 0

Posición X 0

Posición Y 0

Tooltip


Condición visible

Condición activo

Contenido



Fondo opaco Falso

Fuente Sistema

Tecla aceleradora Escape


Plano Falso

Icono



Comando Cancelar


Alto en layout Fijo














Manual de consulta



Nombre Título de ejemplo (A sustituir)

Estilos

Comentarios


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



Fondo opaco Falso




Multilíneas Falso














Manual de consulta

Alto en layout Fijo




Nombre Banda con color de fondo de la aplicación

Estilos

Comentarios

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



Fondo opaco Falso





Alto en layout Fijo













Manual de consulta



Identificador LAY_1

Nombre Layout botones

Estilos

Comentarios

Tipo Layout

Ancho 480

Alto 50

Posición X 10

Posición Y 60

Tooltip




Espaciado -1

Margen izquierdo -1

Margen derecho -1

Margen superior -1

Margen inferior -1



Propiedades del control BTN_ALT













Manual de consulta


Nombre Nuevo

Estilos

Comentarios

Tipo Botón

Ancho 100

Alto 30

Posición X 20

Posición Y 70

Tooltip




Contenido



Fondo opaco Falso

Fuente Sistema


Combinación de tecla aceleradora Tecla

Plano Falso

Icono ALT_ICO@vDiseño















Manual de consulta

Comando Aceptar






Nombre Opción 1 (Sustituir)

Estilos

Comentarios

Tipo Botón

Ancho 100

Alto 30

Posición X 130

Posición Y 70

Tooltip




Contenido



Fondo opaco Falso

Fuente Sistema














Manual de consulta


Plano Falso

Icono PAR_ICO@vDiseño (Sustituir)



Comando Ejecutar evento

Evento BTN_ALT






Nombre Opción 2 (Sustituir)

Estilos

Comentarios

Tipo Botón

Ancho 100

Alto 30

Posición X 240

Posición Y 70

Tooltip
















Manual de consulta

Contenido



Fondo opaco Falso

Fuente Sistema



Plano Falso

Icono PAR_ICO@vDiseño (Sustituir)



Comando Aceptar (Sustituir)




Propiedades del control BTN_OPC_MAS

Identificador BTN_OPC_MAS

Nombre Más opciones

Estilos

Comentarios

Tipo Botón

Ancho 100

Alto 30

Posición X 350













Manual de consulta

Posición Y 70

Tooltip




Contenido



Fondo opaco Falso

Fuente Sistema



Plano Falso




Comando Menú

Objeto (Seleccionar el menú con opciones)




Propiedades del control OBJ_LST

Identificador OBJ_LST

Nombre Objeto de lista como la rejilla, casillero, etc.













Manual de consulta

Estilos

Comentarios

Tipo Control objeto

Ancho 480

Alto 230

Posición X 10

Posición Y 130

Tooltip




Borde Ninguno

Tamaño del borde 0

Fondo opaco Falso

Barras de scroll Automático

Objeto 1 (Seleccionar objetos para mostrar la lista de registros)





Identificador ESP_1

Nombre Espaciador pie

Estilos













Manual de consulta

Comentarios

Tipo Espaciador

Ancho 140

Alto 70

Posición X 180

Posición Y 380

Tooltip




Eventos del formulario Propiedades del evento BTN_ALT


Nombre Botón Alta

Estilos

Comentarios

Instrucciones del evento

6. Rejilla La recomendaciones para conseguir la mejor sensación del usuario al usar el objeto rejilla son las siguientes:













Manual de consulta

● 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.

Identificador [email protected] (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)

Nombre Rejilla de YYY de XXX (Ejemplo: Rejilla de facturas de venta)

Estilos

Comentarios Rejilla del menú principal

Tabla Asociada La que corresponda

Formulario de alta El que corresponda

Formulario de modificación El que corresponda

Formulario de baja El que corresponda

Tipo de menú de contexto Por defecto (Aunque se puede usar un menú personalizado para controlar las opciones disponibles por lo usuarios o también aplicar la opción ninguno)

Multiselección Falso

Modo ver cabeceras Horizontal













Manual de consulta

Editable Falso

Alto de cabecera 29

Color de cara cabecera Ventana

Color de luz de cabecera Luz

Color de sombra de cabecera Sombra

Alto de cuerpo 21

Color de fondo de cuerpo Base

Color de fondo par de cuerpo Base alternativo

Mostrar líneas de rejilla Falso

Pie activo Falso

Alto de pie

Color de fondo de pie

Toolbar

Longitud de columnas

7. Formularios DescripciónEn esta sección se describe como sería el formulario recomendado para el mantenimiento (Alta, Baja y Modificación) de una tabla.













Manual de consulta

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ónLa 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.













Manual de consulta

Controles de la cabecera del formulario Propiedades del control LAY_1

Identificador LAY_1

Nombre Layout cabecera

Estilos

Comentarios













Manual de consulta

Tipo Layout

Ancho 580

Alto 50

Posición X 10

Posición Y 0

Tooltip




Espaciado 5

Margen izquierdo -1

Margen derecho -1

Margen superior 0

Margen inferior 10





Nombre Registro (A sustituir)

Estilos

Comentarios


Ancho 560

Alto 20













Manual de consulta

Posición X 20

Posición Y 10

Tooltip

Condición visible

Condición activo

Borde Ninguno

Tamaño del borde 0

Contenido choose(#ID, "Registro", "Nuevo registro") (Sustituir Registro por el nombre de la tabla)



Fondo opaco Falso




Multilíneas Falso




Propiedades del control TIT_SEP

Identificador TIT_SEP

Nombre Separador del título

Estilos

Comentarios













Manual de consulta

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



Fondo opaco Falso




Ancho en layout Proporcional

Alto en layout Fijo


7.2 Cuerpo DescripciónEl 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. Pol. Ind. A Granxa, Edificio vCenterRúa D, esquina paralela 336400 Porriño (Pontevedra)España












Manual de consulta













Manual de consulta

Controles del cuerpo del formulario Propiedades del control LAY_2

Identificador LAY_2

Nombre Layout cuerpo

Estilos

Comentarios

Tipo Layout

Ancho 580

Alto 210

Posición X 10

Posición Y 60

Tooltip













Manual de consulta




Espaciado -1

Margen izquierdo -1

Margen derecho -1

Margen superior 10

Margen inferior 10



Propiedades del control DAT_TXT

Identificador DAT_TXT

Nombre (Sustiuit por el nombre de campo del dato)

Estilos

Comentarios

Tipo Nombre de campo

Ancho 100

Alto 20

Posición X 30

Posición Y 80

Tooltip

Condición visible

Condición activo

Borde Ninguno













Manual de consulta

Tamaño del borde 0



Fondo opaco Falso

Fuente Sistema



Multilíneas Falso

Campo (Seleccionar el campo a mostrar)




Propiedades del control DAT

Identificador DAT

Nombre Dato (Sustituir por el nombre del campo)

Estilos

Comentarios

Tipo Edición

Ancho 430

Alto 20

Posición X 140

Posición Y 80

Tooltip














Manual de consulta

Condición visible

Condición activo

Sólo lectura

Contenido (Sustituir por el campo a editar)

Color de base Base

Color de texto Texto

Fondo opaco Falso

Fuente Sistema



Contraseña Falso

Máscara




Tipo de menú de botón Botón izquierda

Menú de botón (Selecionar el menú a mostrar)

7.2.1 Menú de botón para campos puntero a maestro DescripciónCuando 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:













Manual de consulta

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ónEl 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.













Manual de consulta

Controles del pie del formulario Propiedades del control ESP_1

Identificador ESP_1

Nombre Espaciador entre cuerpo y pie

Estilos

Comentarios

Tipo Espaciador

Ancho 580

Alto 10

Posición X 10

Posición Y 270

Tooltip













Manual de consulta



Tipo de espaciador Espaciador expandible


Identificador LAY_3

Nombre Layout pie general

Estilos

Comentarios

Tipo Layout

Ancho 580

Alto 60

Posición X 10

Posición Y 280

Tooltip




Espaciado -1

Margen izquierdo 0

Margen derecho 0

Margen superior 0

Margen inferior 0















Manual de consulta


Identificador LAY_4

Nombre Layout pie botones derecha

Estilos

Comentarios

Tipo Layout

Ancho 230

Alto 40

Posición X 350

Posición Y 290

Tooltip




Espaciado -1

Margen izquierdo -1

Margen derecho 0

Margen superior 0

Margen inferior 0



Propiedades del control BTN_ACE

Identificador BTN_ACE













Manual de consulta

Nombre Aceptar

Estilos

Comentarios

Tipo Botón

Ancho 100

Alto 34

Posición X 360

Posición Y 292

Tooltip


Condición visible

Condición activo

Contenido



Fondo opaco Falso

Fuente Sistema

Tecla aceleradora F12


Plano Falso

Icono BTN_ACE_ICO@vDiseño



Comando Aceptar













Manual de consulta




Propiedades del control BTN_CNC


Nombre Cancelar

Estilos

Comentarios

Tipo Botón

Ancho 100

Alto 34

Posición X 470

Posición Y 292

Tooltip


Condición visible

Condición activo

Contenido



Fondo opaco Falso

Fuente Sistema















Manual de consulta

Plano Falso

Icono BTN_CNC_ICO@vDiseño



Comando Cancelar





Identificador ESP_2

Nombre Espaciador entre layouts de botones

Estilos

Comentarios

Tipo Espaciador

Ancho 190

Alto 40

Posición X 150

Posición Y 290

Tooltip



Tipo de espaciador Espaciador expandible














Manual de consulta

Identificador LAY_5

Nombre Layout pie botones izquierda

Estilos

Comentarios

Tipo Layout

Ancho 120

Alto 40

Posición X 20

Posición Y 290

Tooltip




Espaciado -1

Margen izquierdo 0

Margen derecho -1

Margen superior 0

Margen inferior 0



Propiedades del control BTN_SUP

Identificador BTN_SUP

Nombre Eliminar

Estilos













Manual de consulta

Comentarios

Tipo Botón

Ancho 100

Alto 34

Posición X 30

Posición Y 292

Tooltip


Condición visible

Condición activo

Contenido



Fondo opaco Falso

Fuente Sistema

Tecla aceleradora E


Plano Falso

Icono BTN_BAJ_ICO@vDiseño



Comando Eliminar controlado















Manual de consulta


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 Identificador Descripción

COL_APP@vDiseño Color de la aplicación utilizado para fondo y líneas de separadores.

LOGO_APP@vDiseño Logotipo de la aplicación.













Manual de consulta

Dibujos de la interfaz


ALT_ICO@vDiseño Nuevo.

APP_ICO@vDiseño Aplicación.

COL_BAS@vDiseño Color neutro utilizado para fondos y líneas de separadores.

INI_ICO@vDiseño Inicio.

MEN_APP_OPC_ICO@vDiseño Opción de aplicación.

USR_ICO@vDiseño Usuario.

Dibujos del menú archivo


CRR_ICO@vDiseño Salir.

PRT_ICO@vDiseño Impresora.

Dibujos del menú editar

3Icono Identificador Descripción

COP_ICO@vDiseño Copiar.

COR_ICO@vDiseño Cortar.

PEG_ICO@vDiseño Pegar.

Dibujos del menú configurar













Manual de consulta


CACHE_ICO@vDiseño Caché.

CFG_ICO@vDiseño Configuración.

PAR_ICO@vDiseño Parámetros.

PWD_ICO@vDiseño Contraseña.

UTI_ICO@vDiseño Utilidades.

Dibujos del menú ayuda


AYU_ICO@vDiseño Ayuda.

Dibujos de los botones


BTN_ACE_ICO@vDiseño Aceptar.

BTN_ALT_ICO@vDiseño Alta.

BTN_BAJ_ICO@vDiseño Baja / Eliminar / Suprimir.

BTN_CNC_ICO@vDiseño Cancelar.

BTN_DUP_ICO@vDiseño Duplicar.

BTN_LOC_ICO@vDiseño Localizar.

BTN_MOD_ICO@vDiseño Modificar / Editar.













Manual de consulta

Apéndices

Apéndice 1: Galería de iconos Galería de iconos recomendadahttp://www.famfamfam.com/lab/icons/silk/


























Guía de diseño de la interfaz vDiseño: Manual de...

Documents

Transcript of Guía de diseño de la interfaz vDiseño: Manual de...