Diseñar formularios

Los términos más importantes

Formulario

Una ventana que se proporciona para introducir y presentar los datos fácilmente en la pantalla del equipo.

Fuente de los datos del formulario

Los datos proporcionados por la tabla o consulta de la base de datos se muestran en el formulario. La fuente de datos es necesaria porque los formularios por sí mismos solo son herramientas para mostrar e introducir datos, mientras que las tablas y las consultas son las fuentes de datos. Los nuevos formularios vacíos no tienen ninguna fuente de datos asignada, por lo que no muestran ningún dato de la base de datos a menos que se les asigne una fuente de datos.

Campo del formulario

Es el equivalente directo de una columna en una tabla o consulta. Lo más frecuentemente utilizados son los campos para mostrar texto y números. Introducir un valor nuevo o cambiar el valor existente de uno de estos campos provoca un cambio en la columna de la tabla o consulta vinculada (después de aceptar el cambio).

Diseño del formulario

Las tareas que se realizan para definir la apariencia y las funciones de un formulario. Para ello, debe proporcionar una fuente de datos, insertar campos de formulario de varios tipos y colocarlos en la posición apropiada.

Elementos gráficos del formulario

Los elementos del formulario. Los principales tipos de elementos gráficos son:

  • Elementos gráficos que muestran información, por ejemplo una casilla de texto o unacaja de imagen. Cada elemento gráfico de este tipo puede estar vinculado a un campo de una fuente de datos (la columna de una tabla o una consulta). Además, estos elementos gráficos se llaman campos de formulario en resumen.

  • Elementos gráficos capaces de realizar una acción específica, por ejemplo un botón de pulsación que puede cerrar el formulario activo. En otras aplicaciones este tipo de elemento gráfico se denomina a veces control de formulario puesto que puede realizar una acción definida con anterioridad que controla el comportamiento de la aplicación de base de datos.

  • Otros elementos gráficos que permiten enriquecer la apariencia del formulario, por ejemplo un «elemento gráfico línea» puede separar visualmente dos zonas de un formulario.

Elemento gráfico contenedor

Un elemento gráfico que puede contener otros elementos gráficos en su interior. Por ejemplo, un elemento gráfico marco o un elemento gráfico pestaña son contenedores. La propia superficie del formulario también es un contenedor. Un botón de orden no puede considerarse un contenedor porque no es posible insertar ningún elemento gráfico en su interior. En los casos más complejos, los elementos gráficos contenedores se pueden insertar dentro de otro contenedor, por lo que la anidación es posible.

Comparación entre formularios y tablas

En el capítulo Introducir datos en las tablas aprendió a introducir datos directamente en las tablas utilizando la vista de hoja de datos. Sin embargo, en muchos casos los formularios son más adecuados para la entrada de datos:

  • Una tabla puede contener demasiadas columnas para mostrarlas en pantalla. Un formulario puede mostrar estos datos utilizando varias filas.

  • Un formulario permite dividir visualmente los campos de datos en grupos lógicos, aumentando así la legibilidad. Se pueden insertar etiquetas con información adicional para dar a los usuarios más indicaciones sobre como utilizar el formulario o sobre que significa un campo de datos dado.

  • Los botones de órdenes se pueden utilizar en los formularios para llevar a cabo las órdenes más habituales, de modo que los usuarios puedan utilizar los formularios de una forma similar a las aplicaciones que conocen.

En la vista de hoja de datos mostrar campos de datos de texto de varias filas o imágenes es tan fácil como en los formularios.

Trabajar con el diseño de formularios

Al igual que con el diseño de tablas y de consultas, es posible utilizar la vista de datos y la vista de diseño. El diseño de formularios se realiza en la vista de diseño. Normalmente nos referiremos a la ventana de diseño de formularios por el nombre de Diseñador de formularios.

  1. Para crear un formulario nuevo vacío, seleccione Formulario en la barra de herramientas. Opcionalmente, puede utilizar la orden Crear objeto: Formulario del botón desplegable de la barra de herramientas del navegador del proyecto o la orden Crear objeto: Formulario del menú contextual del navegador del proyecto.

  2. Aparecerá un nuevo marco. El tamaño del formulario se puede modificar moviendo los bordes. El formulario está cubierto con una rejilla que simplifica el posicionamiento preciso de los elementos gráficos.

Al igual que ocurría en el diseño de tablas, el diseñador de formularios proporciona un panel editor de propiedades. Para ahorrar espacio en la pantalla, el panel tiene tres pestañas relacionadas con el formulario seleccionado en ese momento:

La pestaña propiedades

Contiene la lista de propiedades del elemento gráfico que está seleccionado.

La pestaña origen de datos

Contiene las propiedades relacionadas específicamente con el origen de datos del elemento gráfico que esté seleccionado o del propio formulario.

La pestaña elementos gráficos

Contiene una jerarquía de todos los elementos gráficos del formulario. La lista simplifica la búsqueda de elementos gráficos por su nombre y permite navegar entre ellos.

En la primera y en la segunda pestañas se muestra información sobre el nombre y el tipo del elemento gráfico actualmente seleccionado.

También están disponibles algunas barras de herramientas adicionales:

  • La barra de herramientas elementos gráficos se utiliza para insertar nuevos elementos gráficos en el formulario. Seleccione Diseño de formulario para mostrarla.

Uso de la pestaña de elementos gráficos

La pestaña de elementos gráficos del panel de propiedades proporciona una lista de los elementos gráficos del formulario y su jerarquía. Cada elemento gráfico se presenta en la jerarquía junto a los demás elementos gráficos que están en el mismo nivel (el mismo contenedor padre). Los elementos gráficos hijos (dentro de contenedores) se presentan sangrando sus nombres.

Cada elemento gráfico se muestra con su nombre y tipo. El tipo también tiene un icono: el mismo que se muestra en la barra de herramientas utilizada mientras se realiza el diseño del formulario.

Nota

  • Un cambio en la selección actual de la lista provoca la correspondiente selección en el formulario diseñado. Esto permite una búsqueda más fácil de elementos gráficos por su nombre y una navegación más sencilla. Por ejemplo, es posible seleccionar un elemento gráfico por su nombre, y luego cambiar a la pestaña propiedades para modificar las propiedades del elemento gráfico.

  • Mantener pulsada la tecla Ctrl mientras se selecciona un elemento de la lista de elementos gráficos permite seleccionar varios elementos gráficos a la vez. Mantener pulsada la tecla Mayúsculas permite seleccionar listas enteras de elementos gráficos.

Dar nombres razonables a los elementos gráficos puede ser útil pero no es obligatorio. Tenga en cuenta que el nombre de un elemento gráfico es una propiedad que no es visible para el usuario del formulario. Los usuarios solo verán el texto del elemento gráfico, dado por la propiedad texto o similar.

Inserción de elementos gráficos - campos de texto

Vamos a crear un formulario que proporcione información sobre personas, es decir un formulario conectado con la tabla personas.

Si el formulario que se está diseñando debe presentar datos obtenidos de la base de datos, deberá colocar los campos apropiados en él. Para hacer esto, utilice los botones de la barra de herramientas de elementos gráficos. Cada botón corresponde a un único tipo de elemento gráfico.

  1. Pulse en el botón casilla de texto de la barra de herramientas de elementos gráficos.

  2. Pulse sobre la superficie del formulario con el botón izquierdo del ratón. En el lugar donde haya hecho clic aparecerá un nuevo elemento gráfico «casilla de texto». Antes de soltar el botón del ratón, puede arrastrarlo para especificar el tamaño deseado para el elemento gráfico.

  3. Si es necesario, desplace el elemento gráfico insertado arrastrándolo y soltándolo en la posición deseada. Puede redimensionar el elemento gráfico arrastrando uno de los pequeños cuadrados que se encuentran en sus esquinas. Tenga en cuenta que los cuadrados solo son visibles cuando el elemento gráfico está seleccionado. Si selecciona otro elemento gráfico o la superficie del formulario, los cuadros desaparecerán.

  4. Haga clic otra vez en el botón casilla de texto de la barra de herramientas y luego en la superficie del formulario para insertar otro elemento gráfico. Repita esta acción hasta que tenga tres casillas de texto más insertadas en el formulario. En aras de la simplicidad, nos limitaremos a cinco campos de texto.

Nota

  • Hay un menú contextual disponible en el modo de diseño del formulario, que se puede activar haciendo clic con el botón derecho del ratón sobre el elemento gráfico deseado o la superficie del formulario. El menú ofrece ordenes como cortar, copiar, pegar, borrar y otras, más complejas. También hay disponibles accesos rápidos de teclado para estas ordenes. Algunas de las ordenes están disponibles solo para ciertos tipos de elementos gráficos.

  • Las ordenes cortar, copiar y pegar posibilitan mover o copiar elementos gráficos entre formularios, incluso entre proyectos de bases de datos independientes.

  • Mantener pulsada la tecla Ctrl mientras se hace clic sobre un elemento gráfico permite seleccionar varios widgets.

  • En lugar de utilizar las ordenes copiar y pegar, para duplicar un elemento gráfico dentro del mismo formulario también se puede presionar la tecla Ctrl mientras se mueve el elemento gráfico. Una vez que se suelte el botón del ratón, el elemento gráfico arrastrado no será movido sino copiado en la nueva posición.

Asignación de los orígenes de datos

Los campos que ha insertado hasta el momento aún no tienen un origen de datos asignado, por lo que no pueden mostrar información de la base de datos. Para asignar un origen de datos, utilice la pestaña (Origen de los datos) del panel editor de propiedades

El primer paso es especificar el origen de datos del formulario, es decir el lugar del que se obtendrán los datos mostrados. Como se mencionó anteriormente, en este ejemplo se va a utilizar la tabla personas como origen de los datos para el nuevo formulario.

  1. Pulse en la superficie del formulario, ya que va a modificar sus propiedades.

  2. Cambie a la pestaña (Origen de los datos) e introduzca el nombre de la tabla personas en la lista desplegable Origen de datos del formulario. De forma alternativa se puede seleccionar el nombre de la propia lista desplegable.

Ha asignado el origen de datos del formulario. Ahora necesita especificar el origen de datos del elemento gráfico.

  1. Pulse en el primer elemento gráfico «casilla de texto» de la parte superior del formulario.

  2. En la pestaña (Origen de datos) del panel de propiedades introduce el nombre del campo nombre en la lista desplegable Origen de datos del elemento gráfico. De forma alternativa, puede seleccionar este nombre desde la lista desplegable.

  3. Haga clic en el siguiente elemento gráfico campo de texto e introduzca apellido como el origen de los datos.

  4. Introduzca los orígenes de datos para los campos de texto calle, numero_casa y ciudad de un modo similar.

Ahora ya puede guardar el diseño del formulario (no es obligatorio probar el formulario en acción). Para guardarlo, haga clic en el botón Guardar de la barra de herramientas. Al guardar se le pedirá que introduzca el nombre del formulario. Introduzca Personas como titulo y pulse el botón Aceptar. El nombre del formulario se rellenará automáticamente.

Este es el momento adecuado para probar el formulario. Haga clic en el botón Datos de la barra de herramientas. A menos que haya cometido un error al introducir los orígenes de los datos, debería ver los campos del formulario rellenados con los datos de la tabla Personas.

Nota

  • Si desea eliminar la asignación de un origen de datos del elemento gráfico para un elemento gráfico particular del formulario, puede usar el botón de la casilla Origen de datos del elemento gráfico.

  • Utilice el botón (Ir al origen de datos del formulario seleccionado) para seleccionar la tabla o la consulta apropiada en el navegador del proyecto, de modo que pueda abrir rápidamente una tabla o una consulta que sea el origen de datos del formulario.

Insertar etiquetas de texto

Para facilitarle al usuario del formulario la identificación del significado de cada campo de control, estos deberían tener anexadas etiquetas de texto con los títulos correspondientes. Para crear etiquetas de texto se utiliza el elemento gráfico etiqueta.

Inserte tres elementos gráficos «etiqueta de texto» en el formulario, colocándolos a la izquierda de los campos de texto (o a la derecha, si su sistema operativo utiliza una disposición de derecha a izquierda). Al insertar una nueva etiqueta, aparecerá un cursor de texto en la posición donde se puede introducir el título deseado. Introduzca consecutivamente: Nombre, Apellido, Calle, Número de casa y Ciudad. Además, añada otra etiqueta en la parte superior del formulario para mostrar el nombre del formulario, es decir Personas. Amplíe el tamaño de la etiqueta y aumente el tamaño del tipo de letra utilizando Tipo de letra en la pestaña Propiedades.

Acciones

Una acción es una actividad aislada de la aplicación, disponible para que el usuario la ejecute. También puede ser ejecutada automáticamente como reacción a un evento dado (por ejemplo después de abrir un formulario).

Asignar acciones a los botones del formulario

La mayor parte de las acciones se pueden asignar a los botones del formulario. La acción asignada se ejecutará después de que se pulse el botón.

Para asignar una acción:

  1. Cambie a la vista de diseño del formulario, si aún no lo ha hecho.

  2. Seleccione el elemento gráfico botón existente haciendo clic en él o ponga un nuevo elemento gráfico botón en el formulario. Si inserta un botón nuevo, introduzca su título y pulse la tecla Intro.

  3. Haga clic en el elemento gráfico botón con el botón derecho del ratón para mostrar el menú contextual.

  4. Desde el menú contextual seleccione la orden Asignar acción....

  5. Aparecerá una ventana de diálogo Asignar una acción al botón que presenta una lista de las acciones disponibles. Si el elemento gráfico ya tenía una acción asignada, entonces dicha acción ya estará seleccionada en la lista. En caso contrario, la lista Categoría de acción tendrá seleccionado el elemento Ninguna acción.

  6. En la lista Categoría de acción seleccione el elemento Acciones de aplicación. Se listarán todas las acciones de la aplicación disponibles.

  7. Seleccione una de las acciones de la lista (por ejemplo Eliminar objeto seleccionado).

Después de cambiar a la vista de datos del formulario puede probar si las acciones funcionan.

Nota

  • Para eliminar una asignación de acción, seleccione el elemento Ninguna acción en la lista Categoría de acción de la ventana de diálogo Asignar una acción al botón.

  • Las acciones solo funcionan en la vista de datos del formulario. No cualquier asignación de acción es razonable. Por ejemplo, la acción Tipo de letra... está disponible en la vista de datos, pero solo si se tiene un elemento gráfico seleccionado en la vista de diseño. Si se realizan cambios a las preferencias del tipo de letra, dichos cambios se aplican al texto del elemento gráfico seleccionado.

Gestores de geometría de los elementos gráficos

En la mayoría de los casos los elementos gráficos deben ubicarse y alinearse convenientemente. Posicionar, alinear y redimensionar los elementos gráficos manualmente no es sencillo y esos parámetros no se reajustan cuando el usuario redimensiona el formulario. De hecho, la situación puede ser peor porque no puede asumirse que un formulario dado requiere un espacio determinado debido a que los usuarios tienen diferentes tamaños de letra y de resolución de pantalla.

Utilizar una herramienta especial llamada gestor de geometría de los elementos gráficos puede ayudarle a distribuir automáticamente los elementos gráficos en el formulario. Un gestor de geometría de elementos gráficos es una acción que agrupa a dos o más elementos gráficos de tal forma que los posiciona correctamente y les da los tamaños adecuados.

Utilizar un gestor de geometría en un formulario mejora la alineación. Además, su espacio se utiliza mejor. Los campos de texto están cerca unos de otros y el espaciado es constante.

Políticas de tamaño para los elementos gráficos dentro de un gestor de geometría

En lugar de establecer un tamaño fijo para los elementos gráficos, en Kexi se puede elegir entre varias políticas de tamaño para los elementos gráficos. Una política de tamaño es una estrategia flexible para controlar la forma en la que un elemento gráfico se estila (o se encoge) en función de los demás elementos gráficos vecinos y del espacio disponible dentro del formulario.

Después de poner los elementos gráficos en una línea, se redimensionarán para ajustar su texto texto visible.

Para cada elemento gráfico insertado en el formulario, hay preferencias para la política de tamaño disponibles en el editor de propiedades. Las preferencias se presentan como un grupo de propiedades llamado política de tamaño.

Este grupo de propiedades contiene:

Política de tamaño horizontal

define el tamaño horizontal del elemento gráfico,

Política de tamaño vertical

define el tamaño vertical del elemento gráfico,

Estiramiento horizontal

define la fuerza de la actividad de la política de tamaño horizontal,

Estiramiento vertical

define la fuerza de la actividad de la política de tamaño vertical

Valores de las políticas de tamaño

Los siguientes valores están disponibles en la listas desplegables política horizontal y política vertical visibles en el editor de propiedades:

Fijo

este valor significa que el widget no puede redimensionarse automáticamente. Debería mantener el valor constante definido en tiempo de diseño (anchura o altura).

Mínimo

este valor significa que el tamaño original del elemento gráfico se establece con el valor mínimo permitido, es suficiente y no se necesita para expandir el elemento gráfico, pero el elemento gráfico se expandirá si se necesita. Este tipo de política puede utilizarse para forzar al widget a que se expanda a la anchura o altura completa, especialmente si establece un valor de estiramiento superior a 0.

Máximo

este valor significa que el tamaño original del widget se establece como el valor máximo y puede reducirse sin romper la usabilidad y legibilidad del widget si los demás widgets necesitasen más espacio.

Preferido

este valor significa que el tamaño original del widget es el mejor y por tanto preferido. No obstante el widget puede acortarse o alargarse y permanecerá legible.

Expansible

este valor significa que el tamaño original del widget es razonable pero el widget puede acortarse. Puede agrandarse también para que ocupe el máximo espacio posible.

Mínimo expansible

este valor significa que el tamaño original del widget está permitido. Puede expandirse para que ocupe el máximo espacio posible.

Ignorado

este valor significa que el tamaño original del widget se ignorará. El widget puede expandirse para que ocupe el máximo espacio posible pero normalmente los demás widget no lo permitirán.

Los diferentes tipos de widget tienen diferentes políticas de tamaño predeterminadas. Por ejemplo, los widgets botón tienen establecida la política de tamaño Mínimo (en ambas direcciones), y sin embargo los widgets de campo de texto tienen la política vertical establecida a Fijo.

Las políticas de tamaño más frecuentemente utilizadas son Preferido, Mínimo y Máximo.

Estiramiento vertical y horizontal

Las propiedades estiramiento vertical y estiramiento horizontal aceptan valores enteros mayores o iguales que 0. Estas propiedades permiten afinar el comportamiento de las políticas de tamaño. El valor predeterminado para las propiedades es 0. Valores más grandes para el estiramiento significan que el elemento gráfico se expandirá más que los elementos gráficos que tengan especificado un valor de estiramiento más pequeño.