Para este ejemplo vamos a crear el marco de aplicación que se presenta en la captura de pantalla siguiente:

Transcripción

1 En este tutor vamos a ver a fondo las posibilidades que nos ofrece el objeto marco; objeto que nos permite definir cómo será el interfaz del usuario cuando ejecuta el proyecto de aplicación con Velneo vclient V7. Nos permite definir cuál es el formulario de fondo de nuestra aplicación, el menú principal del marco y los docks que compondrán el interfaz, que podrán contener toolbars u otros formularios. Para este ejemplo vamos a crear el marco de aplicación que se presenta en la captura de pantalla siguiente: Este marco contiene: Un menú en la parte superior del mismo que contiene una serie de comandos en stock: Un formulario de fondo que contiene un dibujo: 1

2 Una toolbar en la parte inferior del mismo: Y dos formularios en la parte derecha del mismo, incluidos en separadores, par mostrar el Acerca de... y la ayuda de la aplicación, respectivamente: 2

3 En el de ayuda se mostrará el texto siguiente: Y en el del Acerca de determinada información del sistema: 3

4 Creación del formulario de fondo Para crear el fondo del marco crearemos un formulario con un dibujo de fondo, por lo tanto, necesitaremos añadir dos objetos a nuestro proyecto de aplicación: El dibujo y el formulario. Para crear el dibujo hacer doble clic sobre el icono de la galería de objetos (Tecla Insert). Esto hará que se abra directamente el editor de imágenes. Desde él podremos tanto importar una imagen alojada en el disco como pegarla a través del portapapeles del sistema. Una vez creada la imagen deseada, podremos cerrar el editor. Al nuevo dibujo le daremos el Identificador FONDO_APLI. 4

5 El siguiente paso será crear el formulario, para ello hacer doble clic sobre el icono de la galería de objetos (Tecla Insert). Al nuevo formulario de estableceremos las propiedades siguientes:» Identificador: FONDO_APLI.» Nombre: Tutor sobre marcos.» Dibujo de fondo: Aspecto de dibujo: Proporcionar sin ampliar. El dibujo se mostrará a escala proporcional ajustado al tamaño del formulario, sin superar el tamaño original de éste. Creación del menú principal Tal y como habíamos comentado al comienzo de este tutor, el marco de aplicación que vamos a crear incluirá un menú con una serie de comandos en stock. Un menú es el objeto de proyecto de aplicación que permite agrupar acciones y otros menús y presentarlos como un menú desplegable. El menú puede ser usado en el marco de la aplicación, en otros menús o en botones de formulario. Para crear un objeto de este tipo hacer doble clic sobre el icono (Tecla Insert) y estableceremos las propiedades siguientes: de la galería de objetos Identificador: PRINCIPAL. Nombre: Principal. Podemos definir una etiqueta por cada idioma declarado en el proyecto. Estilo: Texto. Una vez establecidas las propiedades, estableceremos el contenido del menú, es decir, los siguientes menús en stock: Ficha, Lista, Navegante y Ver. Es lo que se llama Lanzadores de acción. Lanzadores de acción Incluiremos las acciones a disparar desde este menú a través del editor de menús, que es abierto en el panel central de Velneo vdevelop V7: 5

6 En la parte superior del mismo se muestra una previsualización del menú y en la parte inferior se muestran dos paneles. En el izquierdo se muestra la lista de acciones disponibles y en el derecho la lista de acciones que seleccionemos. Para añadir una acción al menú hacer doble clic sobre ella en el panel de acciones disponibles o seleccionarla y pulsar el botón. Esta será añadida al final de la lista de acciones del panel de acciones seleccionadas y el botón será añadido a la previsualización del menú. Añadiremos las cuatro acciones en stock indicadas anteriormente: 6

7 Creación de la toolbar del marco Para componer la toolbar necesitaremos tres dibujos y tres menús, uno para cada botón de la toolbar. Hemos usado los siguientes dibujos para cada botón de la toolbar: (Para el botón Localizadores). Al dibujo que creemos le asignaremos el identificador OPC_LOC. (Para el botón Búsquedas). Al dibujo que creemos le asignaremos el identificador OPC_BUS. 7

8 (Para el botón Procesos). Al dibujo que creemos le asignaremos el identificador OPC_PRO. Crearemos tres menús; para este tutor basta con crear los tres objetos, no vamos a incluir ninguna acción en ninguno. Para crear una acción hacer doble clic sobre el icono de objetos (Tecla Insert). de la galería Crearemos un menú con las propiedades siguientes:» Identificador: LOC.» Nombre: Localizar.» Estilo: Icono y texto.» Icono: OPC_LOC@. Crearemos otro menú con las propiedades siguientes:» Identificador: BUS.» Nombre: Buscar.» Estilo: Icono y texto.» Icono: OPC_BUS@. Y un último menú con las propiedades siguientes:» Identificador: PRO.» Nombre: Procesos.» Estilo: Icono y texto.» Icono: OPC_PRO@. El siguiente paso será crear la toolbar. Para crearla hacer doble clic sobre el icono estableceremos las propiedades siguientes: de la galería de objetos (Tecla Insert) y» Identificador: PRINCIPAL.» Nombre: Principal.» Estilo: Icono y texto debajo.» Tamaño del icono: Mediano. Una vez establecidas las propiedades, estableceremos el contenido de la toolbar, es decir, los tres menús que acabamos de crear. Para ello usaremos el editor de toolbars, que es abierto en el panel central de Velneo vdevelop: 8

9 En la parte superior del mismo se muestra una previsualización de la toolbar y en la parte inferior se muestran dos paneles. En el izquierdo se muestra la lista de acciones disponibles y en el derecho la lista de acciones que seleccionemos. Para añadir una acción a una toolbar hacer doble clic sobre ella en el panel de acciones disponibles o seleccionarla y pulsar el botón. Esta será añadida al final de la lista de acciones del panel de acciones seleccionadas y el botón será añadido a la previsualización de la toolbar. Tendremos que añadir los tres menús creados anteriormente: 9

10 Creación del Acerca de Para componer el Acerca de de nuestra aplicación solamente necesitaremos crear un formulario. Como puede verse en la captura de pantalla anterior el contenido de la ventana incluye distintas fuentes y formatos, para ello crearemos en el formulario un control de tipo Caja de texto enriquecido ya que este tipo de control permite visualizar un texto con formato que 10

11 permite establecer distintas fuentes, estilos, alineación, etc. El formato se define mediante tags HTML. Para crear el formulario hacer doble clic sobre el icono y estableceremos las propiedades siguientes: de la galería de objetos (Tecla Insert)» Identificador: ACERCA_DE.» Nombre: Acerca de.» Ancho: 110.» Alto: 110.» Tipo de layout: Estableceremos un tipo de layout para que el contenido del formulario crezca en función del espacio disponible, en este caso seleccionaremos el valor Layout vertical, aunque podría ser cualquier otro valor distinto a.ninguno, ya que el formulario contendrá un único control. Una vez establecidas las propiedades del formulario, estableceremos su contenido que, como habíamos dicho al comienzo de este capítulo, será un control de tipo Caja de texto enriquecido. Para crearlo pulsar el botón de la barra de controles del editor de formularios, hacer un clic con el botón izquierdo del ratón dentro del área del formulario y, sin soltar el botón del ratón, arrastrarlo hacia abajo y hacia la derecha hasta obtener el tamaño deseado. Soltar el botón del ratón para finalizar la creación del control. Estableceremos las propiedades siguientes:» Ancho: 100.» Alto: 100.» Posición X: 5.» Posición Y: 5.» Sólo lectura: 1. Esto hará que el control sea de sólo lectura y, por tanto, que su contenido no pueda ser modificado por los usuarios de la aplicación.» Contenido: Permite establecer el contenido a editar en el control. Éste lo estableceremos mediante una fórmula que podremos escribir usando el asistente para edición de fórmulas. Para ello pulsar el botón que aparece al editar esta propiedad. Al final de este capítulo explicaremos cuál va a ser dicho contenido.» Alineamiento horizontal: Izquierda.» Alineamiento vertical: Arriba.» Barras de scroll: Automático: Las barras de scroll solamente se verán en el caso de que el tamaño del control no permita ver la totalidad de su contenido.» Ancho en layout: Permite establecer cómo se comportará el control dentro del layout. El valor a aplicar será Por defecto: Asume el comportamiento que tiene establecido el tipo de control en el sistema. Los controles de texto enriquecido, por defecto, crecerán en anchura proporcionalmente a la anchura del formulario.» Alto en layout: Permite establecer cómo se comportará el control dentro del layout. El valor a aplicar será Por defecto: Asume el comportamiento que tiene establecido el tipo de 11

12 control en el sistema. Los controles de texto enriquecido, por defecto, crecerán en altura proporcionalmente a la altura del formulario. Para establecer el Contenido, tal y como hemos indicado anteriormente, especificaremos una fórmula para cuya creación nos apoyaremos en el asistente para edición de fórmulas. En dicha fórmula usaremos etiquetas html para formatear el texto y funciones estándar: <H2> + getprojectname() + + GetProjectVersion() + </H2> + País: + getsyscountry() + ( + getsyscountrycode() + ) + Idioma: + getsyslanguage() + ( + getsyslanguagecode() + ) + Zona horaria: UTC + choose(getsystimezone() > 0, +, ) + getsystimezone() + + Formato de fecha: + getsysdateformat(0) + + Formato de hora: + getsystimeformat(0) + + Separador decimal: + getsysdecimalpoint() + + Nombre de la máquina: + getsysmachinename() + Creación de la ayuda Para componer la ventana de Ayuda de nuestra aplicación solamente necesitaremos crear un formulario. Como puede verse en la captura de pantalla anterior el contenido de la ventana incluye distintas fuentes y formatos, para ello crearemos en el formulario un control de tipo Caja de texto enriquecido ya que este tipo de control permite visualizar un texto con formato que permite establecer distintas fuentes, estilos, alineación, etc. El formato se define mediante tags HTML. Para crear el formulario hacer doble clic sobre el icono y estableceremos las propiedades siguientes: de la galería de objetos (Tecla Insert)» Identificador: AYUDA.» Nombre: Ayuda.» Ancho: 110.» Alto:

13 » Tipo de layout: Estableceremos un tipo de layout para que el contenido del formulario crezca en función del espacio disponible, en este caso seleccionaremos el valor Layout vertical, aunque podría ser cualquier otro valor distinto a.ninguno, ya que el formulario contendrá un único control. Una vez establecidas las propiedades del formulario, estableceremos su contenido que, como habíamos dicho al comienzo de este capítulo, será un control de tipo Caja de texto enriquecido. Para crearlo pulsar el botón de la barra de controles del editor de formularios, hacer un clic con el botón izquierdo del ratón dentro del área del formulario y, sin soltar el botón del ratón, arrastrarlo hacia abajo y hacia la derecha hasta obtener el tamaño deseado. Soltar el botón del ratón para finalizar la creación del control. Estableceremos las propiedades siguientes:» Ancho: 100.» Alto: 100.» Posición X: 5.» Posición Y: 5.» Sólo lectura: 1. Esto hará que el control sea de sólo lectura y, por tanto, que su contenido no pueda ser modificado por los usuarios de la aplicación.» Contenido: Permite establecer el contenido a editar en el control. Éste lo estableceremos mediante una fórmula que podremos escribir usando el asistente para edición de fórmulas. Para ello pulsar el botón que aparece al editar esta propiedad. Al final de este capítulo explicaremos cuál va a ser dicho contenido.» Alineamiento horizontal: Izquierda.» Alineamiento vertical: Arriba.» Barras de scroll: Automático: Las barras de scroll solamente se verán en el caso de que el tamaño del control no permita ver la totalidad de su contenido.» Ancho en layout: Permite establecer cómo se comportará el control dentro del layout. El valor a aplicar será Por defecto: Asume el comportamiento que tiene establecido el tipo de control en el sistema. Los controles de texto enriquecido, por defecto, crecerán en anchura proporcionalmente a la anchura del formulario.» Alto en layout: Permite establecer cómo se comportará el control dentro del layout. El valor a aplicar será Por defecto: Asume el comportamiento que tiene establecido el tipo de control en el sistema. Los controles de texto enriquecido, por defecto, crecerán en altura proporcionalmente a la altura del formulario. Para establecer el Contenido, tal y como hemos indicado anteriormente, especificaremos una fórmula para cuya creación nos apoyaremos en el asistente para edición de fórmulas. En dicha fórmula usaremos etiquetas html para formatear el texto y funciones estándar (haz clic sobre cualquier función de fórmulas para acceder a la ayuda sobre la misma): <H2> + getprojectname() + + GetProjectVersion() + </H2> + Esta aplicación es un tutor avanzado sobre el uso del objeto Marco + El marco de la aplicación contiene: + <UL><LI>Un menú en la parte superior de la ventana que contiene comandos en stock de Velneo V7.</LI> + <LI>Un formulario central con el logotipo de la aplicación.</li> + 13

14 <LI>Una toolbar en la parte inferior.</li> + <LI>Dos formularios en la parte derecha, incluidos dentro de un separador de subformularios, uno que muestra el \cacerca de \c de la aplicación y otro que muestra la Ayuda.</LI> Creación del marco Una vez creados todos los elementos que van a conformar el marco de nuestro proyecto, solamente nos quedará crear el marco propiamente dicho. Para crear un objeto de este tipo hacer doble clic sobre el icono (Tecla Insert). de la galería de objetos Sus propiedades son: Identificador: Debe llevar el identificador AUTOEXEC. Este identificador indica al sistema que este será el marco que será presentado al ejecutar la aplicación. Nombre: Tutor sobre marcos. Icono: Objeto Dibujo que será usado como icono en la barra de título de la ventana que contendrá al marco. Si no especificamos ninguno, se usará el icono de Velneo vclient V7: Título: En esta propiedad podemos definir, mediante una fórmula, cuál será el título de la ventana que contendrá el marco, para ello usaremos el asistente para edición de fórmulas, y estableceremos la fórmula siguiente: getprojectname() + + GetProjectVersion() Formulario principal: Seleccionaremos el formulario FONDO_APLI. Modo de arranque: Seleccionaremos el valor Tab; esto provocará que cada ventana que se abra en la aplicación sea abierta en una nueva pestaña dentro del marco. Menú principal: Seleccionaremos el menú PRINCIPAL. Por último, solamente nos queda añadir la toolbar y los formularios de Ayuda y Acerca de. Para ello crearemos tres docks dentro del marco. En primer lugar crearemos el dock correspondiente a la toolbar, para ello pulsaremos sobre el botón opción Dock: del panel de subobjetos y seleccionaremos la 14

15 El dock creado será mostrado en el panel de subobjetos: Para editar sus propiedades hacer doble clic sobre el mismo. Estableceremos las propiedades siguientes:» Identificador: TOOLBAR.» Objeto: Seleccionaremos la toolbar PRINCIPAL. 15

16 » Posición: Abajo.» Modo de aparcar: Es indistinto el valor que seleccionemos, pues solamente vamos a incluir una única toolbar en esa posición. A continuación crearemos el dock correspondiente al formulario del Acerca de, para ello seguimos los pasos que indicamos para crear el dock anterior, pero estableceremos las propiedades siguientes:» Identificador: ACERCA_DE.» Objeto: Seleccionaremos el formulario ACERCA_DE.» Posición: Derecha.» Modo de aparcar: Dado que es el primer dock a incluir en la posición derecha, es indistinto el valor que seleccionemos. Por último, solamente nos queda añadir el dock correspondiente al formulario de Ayuda, para ello seguimos los pasos que indicamos para crear los docks anteriores, pero estableceremos las propiedades siguientes:» Identificador: AYUDA.» Objeto: Seleccionaremos el formulario AYUDA.» Posición: Derecha.» Modo de aparcar: Añadir, de esta forma éste formulario y el anterior serán creados en una misma vista, con separadores para poder acceder a los mismos: 16