Tutor de rejillas
Última actualización
Última actualización
En este tutor vamos a ver las posibilidades que nos ofrece el objeto rejilla; objeto que sirve para presentar listas de registros de las tablas. Para este ejemplo vamos a hacer uso de la tabla de contactos (CTT_M) de vTutor, que encontraremos en el proyecto de datos de la solución, que está enlazada con la tabla de clientes (CLT_M).
Y en el proyecto de aplicación de vTutor es donde se crea la rejilla.
La rejilla se llama CTT_M y la encontraremos en la carpeta tablas usadas en tutores y buenas prácticas/contactos.
Para explicar este objeto nos centraremos en la creación de una rejilla para la tabla de Contactos. Se tratará de crear una rejilla que muestre los datos siguientes:
Columna 1: id del contacto. Columna 2: nombre del contacto. Columna 3: el nombre de la empresa del contacto (enlace a la tabla de clientes). Columna 4: su categoría profesional. Columna 5: la fecha de alta del registro. Columna 6: la hora de alta del registro. Columna 7: los ingresos que tiene. Columna 8: si es el contacto por defecto de la empresa o no. Columna 9: las observaciones de la ficha del contacto. Columna 10: la foto del contacto.
Nota: si bien, por cuestiones de rendimiento, sobre todo pensando en la ejecución de la aplicación a través de Internet, no se recomienda la visualización en rejillas de campos tipo objeto, en este tutor, usaremos este tipo de campos igualmente.
Además, se quiere hacer lo siguiente:
Condicionar la visualización de la columna que muestra los datos económicos de la persona (Columna 7), para lo cual se hará uso de una variable global en memoria de tipo booleano creada en el proyecto de datos, cuyo identificador es BOL.
Acumular en el pie de la rejilla los importes mostrados en la columna ingresos.
Añadirle una toolbar con opciones para dar de alta, modificar y borrar fichas.
Esto provocará la apertura de un asistente para la creación de la rejilla.
En el primer paso del asistente seleccionaremos la tabla asociada a la rejilla y le daremos un nombre. Además, incluye tres eventos (alta, modificación y baja) en los que podremos asociar el formulario a utilizar en cada uno de ellos, es decir, podremos indicar qué formulario queremos usar para añadir un nuevo registro desde esa rejilla (alta), para editar un registro presentado en esa rejilla (modificación) y/o para borrar un registro contenido en la misma (baja); si no especificamos un formulario en uno de esos parámetros, en tiempo de ejecución no podrá dispararse desde la rejilla el evento correspondiente. Es decir, que si no asociamos un formulario para altas, no podremos añadir registros desde el evento de formulario de alta de esa rejilla.
Si pulsamos el botón “siguiente” , pasaremos al siguiente paso del asistente. En él haremos la selección de campos a incluir en la rejilla.
Columna 9: las observaciones de la ficha del contacto. Columna 10: la foto del contacto.
Para la columna 1 (nombre) seleccionaremos el campo ID de la tabla de contactos.
Para la columna 2 (nombre) seleccionaremos el campo NAME de la tabla de contactos.
Para la columna 3 (nombre de la empresa del contacto) pulsar sobre al nodo que aparece a la izquierda del campo enlazado a CLI y seleccionar el campo NAME del cliente:
Para la columna 4 desplegar el nodo que encontraremos a la izquierda del campo enlazado a la tabla estática de categorías profesionales y seleccionaremos el campo NAME de la categoría.
Para la columna 5 seleccionaremos el campo FCH del contacto.
Para la columna 6 seleccionaremos el campo HOR del contacto.
Para la columna 7 seleccionaremos el campo ING del contacto.
Para la columna 8 seleccionaremos el campo CTT_DEF del contacto.
Para la columna 9 seleccionaremos el campo OBS del contacto.
Para la columna 9 seleccionaremos el campo FTO del contacto.
Pulsar el botón “siguiente” para pasar al siguiente paso del asistente. En éste especificaremos la paleta de colores y fuentes a utilizar. En este caso dejaremos los valores que se proponen por defecto. Pulsar el botón “siguiente” para pasar al siguiente paso del asistente y pulsar el botón “finalizar” para finalizar el asistente. Una vez hecho esto la rejilla será añadida al proyecto y editada.
En el panel de propiedades de Velneo vDevelop se mostrarán las propiedades globales de la rejilla.
Veamos las propiedades de la rejilla que acabamos de crear.
Identificador: etiqueta alfanumérica que identifica al objeto. El sistema establecerá como identificador el mismo que la tabla.
Nombre: etiqueta alfanumérica que servirá como descriptor de la rejilla. Este dato lo hemos especificado en el primer paso del asistente.
Estilos: podemos definir los estilos siguientes:
Privado que limita el acceso del usuario final a la rejilla. Lo dejaremos inactivo.
Heredable, que permite que la rejilla pueda ser usada cuando la caja sea heredada. Lo dejaremos inactivo.
Arrastrable para copiar: cuando la rejilla va a ser el origen en un evento de drag and drop, si está activado este estilo, en ejecución los ítems arrastrados no serán quitados de la misma tras ejecutar el evento de drop. Ver el tutor sobre drag & drop para ampliar información al respecto. Lo dejaremos inactivo.
Arrastrable para mover: cuando la rejilla va a ser el origen en un evento de drag and drop, si está activado este estilo, en ejecución los ítems arrastrados serán quitados de la misma tras ejecutar el evento de drop. Ver el tutor sobre drag & drop para ampliar información al respecto. Lo dejaremos inactivo.
Comentarios: en esta propiedad podremos escribir cualquier comentario aclaratorio sobre el uso de la rejilla.
Tabla asociada: aparecerá asignada la tabla que habíamos seleccionado en el paso 1 del asistente.
Formulario de alta, formulario de modificación y formulario de baja: estarán asignados los formularios que hayamos indicado en el paso 1 del asistente.
Tipo de menú de contexto: el menú de contexto es el que aparece cuando el usuario final hace clic con el botón derecho del ratón. Los valores posibles son:
Ninguno: la rejilla carecerá de menú de contexto.
Por defecto: la rejilla dispondrá de un menú de contexto creado automáticamente por el sistema.
Personalizado: el menú de contexto de la rejilla será un objeto menú contenido en el proyecto.
En este caso seleccionaremos el valor Por defecto.
Multiselección: esta propiedad tiene dos valores posibles: falso y verdadero. Permitirá que en tiempo de ejecución se pueda realizar una selección múltiple de registros en la rejilla sobre los que se podrá lanzar una acción determinada, como por ejemplo un proceso o un evento de drag and drop. En este caso mantendremos el valor Falso.
Modo ver cabeceras: permite configurar qué cabeceras de la rejilla serán visualizadas. Los valores posibles son:
Horizontal y vertical: se mostrará horizontalmente, en la parte superior de la rejilla, un encabezado con los títulos de cada columna y verticalmente, en la parte izquierda de la rejilla, un encabezado que mostrará la posición del registro dentro de la tabla.
Horizontal: se mostrará horizontalmente, en la parte superior de la rejilla, un encabezado con los títulos de cada columna. Este será el valor que seleccionemos.
Vertical: se mostrará verticalmente, en la parte izquierda de la rejilla, un encabezado que mostrará la posición de cada registro en disco.
Ninguna: no se mostrará ningún encabezado.
Editable: si activamos esta propiedad los usuarios podrán añadir y modificar registros directamente en la rejilla. En este caso no la activaremos.
Alto de cabecera: altura, en píxeles, que tendrá la sección de la cabecera de la rejilla. El valor por defecto es de 29 píxeles. Lo dejaremos así.
Color de cara de cabecera: la cabecera de una rejilla es creada a modo de botón tridimensional. En esta propiedad seleccionaremos el color de la cara de la cabecera. Por defecto, se tomará el color para ventana de la paleta asociada a la rejilla. Junto al nombre del color se presenta una muestra del mismo, pulsar sobre ella para editarlo y o seleccionar otro color.
Color de luz de cabecera: en esta propiedad seleccionaremos el color de luz de la cabecera. Por defecto, se tomará el color para luz de la paleta asociada a la rejilla.
Color de sombra de cabecera: en esta propiedad seleccionaremos el color de la cara de la cabecera. Por defecto, se tomará el color para sombra de la paleta asociada a la rejilla.
Alto de cuerpo: altura, en píxeles, que tendrá la sección del cuerpo de la rejilla. El valor por defecto es de 21 píxeles. Dado que en la rejilla queremos mostrar una foto de la persona, estableceremos una altura de 75 píxeles.
Color de fondo de cuerpo: esta propiedad establece el color de fondo del cuerpo. Por defecto, se tomará el color base de la paleta asociada a la rejilla. Dejaremos el valor creado por defecto.
Color de fondo par de cuerpo: esta propiedad establece el color de fondo para las líneas pares del cuerpo. El color definido en la propiedad anterior será el que se use para las líneas impares. Por defecto, se tomará el color base alternativo de la paleta asociada a la rejilla. Dejaremos el valor creado por defecto.
Mostrar líneas de rejilla: permite configurar si queremos que las líneas divisorias de la rejilla sean o no visibles.
Color de líneas de rejilla: esta propiedad establece el color que se usará para pintar las líneas que delimitan cada celda de la rejilla. Por defecto, se tomará el color para texto ventana de la paleta asociada a la rejilla. Dejaremos el valor creado por defecto.
Pie activo: nos permite configurar si queremos que la rejilla tenga o no un pie, en el que podremos totalizar columnas, por ejemplo. En este caso seleccionaremos el valor Verdadero.
Alto pie: nos permite configurar la altura del pie de rejilla. Estableceremos un valor de 25 píxeles.
Color de fondo de pie: esta propiedad establece el color de fondo del pie de la rejilla. Por defecto, se tomará el color base de la paleta asociada a la rejilla. Dejaremos el valor creado por defecto.
Toolbar: permite asociar un objeto toolbar a la rejilla; esto implica que el cualquier punto que aparezca la rejilla ésta llevará embebida la toolbar que seleccionemos en este parámetro. En este caso hemos asociado una toolbar llamada LST, que hemos creado en el proyecto que dispara tres acciones (Ficha: formulario de alta, Ficha: formulario de modificación, Ficha: formulario de baja). Estos comandos permitirán añadir, editar o eliminar fichas en la rejilla, usando para ello los formularios asociados en las propiedades Formulario de alta, Formulario de modificación y Formulario de baja.
Posición de la toolbar: nos permite indicar en qué posición, con respecto a la rejilla se ubicará la toolbar especificada en el parámetro anterior.
Longitud de columnas: se trata de una propiedad de carácter informativo, no puede ser modificada. Muestra el ancho total, en píxeles, de la rejilla.
En una rejilla, además de columnas, podemos crear otra serie de subobjetos, tales como variables locales, eventos, conexiones de eventos, drops y condiciones de estilo. Pero no son objeto de este tutor.
Existen dos formas de editar las propiedades de una columna:
1) Seleccionando la columna cuyas propiedades queremos editar en el editor de rejillas.
2) A través del panel de subobjetos de la rejilla, haciendo doble clic sobre el subobjeto columna que se desea editar.
Iremos viendo, una por una, las propiedades de cada columna creada y las modificaciones que llevaremos a cabo en cada caso, pero antes de ello, vamos a recordar las columnas que pretendemos mostrar en esta rejilla:
Columna 1: ID del contacto. Columna 2: nombre del contacto. Columna 3: el nombre de la empresa del contacto (enlace a la tabla de clientes). Columna 4: su categoría profesional. Columna 5: la fecha de alta del registro. Columna 6: la hora de alta del registro. Columna 7: los ingresos que tiene. Columna 8: si es el contacto por defecto de la empresa o no. Columna 9: las observaciones de la ficha del contacto. Columna 10: la foto del contacto.
En el asistente habíamos seleccionado el campo ID de la tabla, por tanto, el campo ya estará asignado en la propiedad contenido cuerpo. En esta columna modificaremos las propiedades siguientes:
Alineamiento horizontal texto cabecera: derecha, para que el texto de la cabecera quede alineado a la derecha de la celda.
Alineamiento horizontal texto cuerpo: derecha, para que el número quede alineada a la derecha de la celda.
Formato numérico local cuerpo: verdadero, para que el número mostrado tome la configuración numérica (separador y carácter de miles) que se tenga configurado en el sistema operativo.
En el asistente habíamos seleccionado el campo NAME de la tabla, por tanto, el campo ya estará asignado en la propiedad contenido cuerpo. En esta columna solamente modificaremos la propiedad tipo de ancho la que asignaremos el valor máximo disponible. Esto hará que la columna crezca a lo ancho para adaptarse al ancho de la pantalla.
En el asistente habíamos seleccionado el campo NAME de la tabla enlazada a CLT, por tanto, el campo ya estará asignado en la propiedad contenido cuerpo, al igual que en la columna anterior, en esta columna solamente modificaremos la propiedad tipo de ancho la que asignaremos el valor máximo disponible. Esto hará que la columna crezca a lo ancho para adaptarse al ancho de la pantalla.
En el asistente habíamos seleccionado el campo NAME del campo enlazado a la tabla estática, por tanto, el campo ya estará asignado en la propiedad contenido cuerpo. De esta columna modificaremos las propiedades siguientes:
Icono cuerpo: le asignamos el icono de la tabla estática enlazada. Esto nos permitirá mostrar el icono del registro de la tabla estática seleccionado en el campo.
En el asistente habíamos seleccionado el campo FCH de la tabla, por tanto, el campo ya estará asignado en la propiedad contenido cuerpo. De esta columna modificaremos las propiedades siguientes:
Alineamiento horizontal texto cabecera: derecha, para que el texto de la cabecera quede alineado a la derecha de la celda.
Alineamiento horizontal texto cuerpo: derecha, para que la fecha quede alineada a la derecha de la celda.
En el asistente habíamos seleccionado el campo HOR de la tabla, por tanto, el campo ya estará asignado en la propiedad contenido cuerpo. De esta columna modificaremos las propiedades siguientes:
Alineamiento horizontal texto cabecera: derecha, para que el texto de la cabecera quede alineado a la derecha de la celda.
Alineamiento horizontal texto cuerpo: derecha, para que la hora quede alineada a la derecha de la celda.
En el asistente habíamos seleccionado el campo ING de la tabla, por tanto, el campo ya estará asignado en la propiedad contenido cuerpo. De esta columna modificaremos las propiedades siguientes:
Alineamiento horizontal texto cabecera: derecha, para que el texto de la cabecera quede alineado a la derecha de la celda.
Alineamiento horizontal texto cuerpo: derecha, para que el número quede alineada a la derecha de la celda.
Formato numérico local cuerpo: verdadero, para que el número mostrado tome la configuración numérica (separador y carácter de miles) que se tenga configurado en el sistema operativo.
Recordemos que queríamos totalizar los importes de esta columna en el pie de rejilla, por tanto, estableceremos también las siguientes propiedades:
Alineamiento horizontal texto pie: derecha, para que el total quede alineada a la derecha de la celda.
Formato numérico local cuerpo: verdadero, para que el número mostrado tome la configuración de números que se tenga configurado en el sistema operativo.
Decimales pie: 2 (el número lo mostraremos con 2 decimales).
Tipo contenido pie: en este parámetro indicaremos al sistema cuál va a ser el contenido del pie de la columna, en este caso lo que haremos será usar el valor suma acumulada de toda la columna.
Recordemos además que la visibilidad de esta columna debía condicionarse según el valor de una variable global creada en el proyecto de datos. Para establecerla editaremos la propiedad condición visible, pulsaremos la tecla F4 o el botón para abrir el asistente para edición de fórmulas y estableceremos la fórmula siguiente:
$BOL@velneo_vTutor_dat.dat
Se trata de la variable global de tipo booleano creada en el proyecto de datos. De este modo, al ejecutar la aplicación si el valor de la variable es 1 la columna será visible, si es 0, no lo será.
En el asistente habíamos seleccionado el campo CTT_DEF de la tabla, por tanto, el campo ya estará asignado en la propiedad contenido cuerpo. De esta columna modificaremos las propiedades siguientes:
Alineamiento horizontal texto cuerpo: centrado, para que el dato se muestre centrado dentro de la celda.
Cuando creamos una rejilla con el asistente, el sistema, calculará en ancho en función del tamaño del campo seleccionado. En es caso, al tratarse de un campo booleano el ancho de la columna es insuficiente para contener el la rejilla.
En esta columna la única propiedad que modificaremos será multilíneas cuerpo a la que le asignaremos el valor verdadero, ya que se trata de un campo de texto que puede tener más de una línea.
En esta columna no será necesario modificar ninguna propiedad.
Ya tenemos lista la rejilla.
Para crear la rejilla, editaremos el proyecto de aplicación con Velneo vDevelop, pulsaremos la tecla Insert para abrir la galería de objetos y haremos doble clic sobre el siguiente icono:
En la parte superior de la ventana se muestra la lista de campos de la rejilla y en la inferior se mostrarán los campos que vayamos seleccionando. En este punto podemos, o bien seleccionar todos los campos, pulsando el botón , o bien, ir seleccionándolos uno a uno, haciendo doble clic sobre el campo deseado o seleccionándolo en la lista superior y pulsando el botón . En este caso, lo haremos uno a uno, y seleccionaremos, según las indicaciones dadas al comienzo los campos siguientes:
