Blog

Configuración de Layouts en formularios

Los controles de layout permiten distribuir, ajustar el tamaño y alinear, de manera organizada y automática, los controles que contienen, permitiendo además organizar otros controles de layout contenidos.

Facilitan el ajuste de los controles al contenido, adaptándose a los nombres y contenidos, incluyendo multi-idioma, ajustándose los tamaños en función de la traducción correspondiente, además de ajustar el alto y ancho en función del tamaño del formulario, según la pantalla o el tamaño a que se redimensione éste en modal.

También distribuyen los controles en el formulario teniendo en cuenta condiciones de visibilidad, haciendo que unos controles ganen el espacio de los controles que no se visualizan.

Configuración de Layouts en formularios 1

Hay dos tipos de controles de layout. Por un lado el control específico de layout, que permite tres opciones agurpadoras: Layout horizontal, layout vertical, layout rejilla, y por otro lado un control de espaciado que permite dos opciones: espaciador fijo, espaciador expandible.

Cada una de las tres opciones de layout distribuye los controles que contienen bien en horizontal, bien en vertical, bien en cuadrícula, pudiendo cambiar el tipo de layout en cualquier momento.

La opción de espaciador fijo permite generar un espacio de tamaño fijo, mientras que el espaciador expandible genera un espacio que crecerá con el formulario.

El anidamiento de controles de layout permite organizar los controles de forma más eficiente, ya que un control de layout también organiza los controles de layout que contiene.

Configuración de Layouts en formularios 2

El formulario y los controles de formulario, además de los layouts, tienen propiedades de layout. En el formulario podemos configurar si la agrupación generada por éste será vertical, horizontal o grid.

Cómo se comportarán los controles dentro de un layout lo podemos configurar en el propio layout, usando para ello las propiedades ancho en layout y alto en layout, siendo fijo, por defecto o proporcional las opciones disponibles, bien para horizontal o bien para vertical.

Así, por defecto los controles se comportarán de acuerdo al tipo: los editores de campo crecerán a lo ancho y no a lo alto de forma proporcional, mientras que las cajas de texto lo harán tanto a lo ancho como a lo alto. Pero podremos asignarles las opciones fijo o proporcional según queramos modificar el comportamiento por defecto del control.

Tanto el formulario como los layouts indican por medio de una flecha la dirección en la que distribuyen los elementos que están incluidos. Para alinear los elementos dentro de un layout debemos definir la propiedad alineamiento vertical y horizontal, que nos permite organizar los controles hacia la izquierda, hacia la derecha, centrado o justificado. Esta opción está disponible tanto para los controles de layout como para el formulario.

La opción de aplicar layout  Configuración de Layouts en formularios 3 de la barra de herramientas nos permite ver cómo se organizará el formulario en ejecución. Pulsando en el fondo del formulario y usando la tecla fin podremos ver también cómo se adaptarán los controles del formulario en ejecución tanto al tamaño como a las etiquetas, incluyendo multi-idioma, pudiendo modificar el tamaño del formulario para ver cómo se adaptan los controles al nuevo tamaño.

Configuración de Layouts en formularios 4

En el formulario de ejemplo el tipo de layout es vertical, para que distribuya en esa dirección los controles que contiene. El primer layaout es de tipo grid, para que organice los controles en forma de rejilla.

Configuración de Layouts en formularios 5

El segundo layout tiene otros dos layouts que organiza de forma horizontal y que contienen a su vez controles que distribuye de forma vertical, de forma que la imagen quedará en paralelo con las dos cajas de texto, estando estas últimas una encima de la otra.

Configuración de Layouts en formularios 6

El último de los layout agrupa los botones, alineándolos a la derecha con ayuda de la propiedad alineamiento horizontal.

Configuración de Layouts en formularios 7

Todos los controles tienen ancho y alto en layout por defecto.

Aplicando el layout o pulsando fin sobre el fondo del formulario nos permitirá ver el resultado.

Configuración de Layouts en formularios 8

Si cambiamos el tamaño del formulario o lo visualizamos en un idioma distinto, los controles se ajustarán a la nueva configuración.

Configuración de Layouts en formularios 9

Y en ejecución, teniendo en cuenta incluso las condiciones de visibilidad de los distintos controles y ganando el resto de los controles el espacio que ocupen los que no son visibles.

10 thoughts on “Configuración de Layouts en formularios

  1. Hola

    observo que en el ejemplo que se menciona UNIVERSO al ejecutar la aplicación con vClient al expandir el formulario de OBJETO-UNIVERSO efectivamente se proporcionan los controles contenidos al nuevo tamaño, pero no ocurre lo mismo en vDevelop en el prediseño del formulario con tecla INICIO, únicamente se proporciona el DIBUJO de fondo.

    Siguiendo con UNIVERSO en edición soy incapaz de seleccionar el segundo control LAYOUT anidado dentro del segundo LAYOUT del formulario.

    un saludo

  2. Estimado Fernando:

    Para previsualizar formularios con Layout has de usar la tecla de fin, no la de inicio.

    Si no puedes seleccionar un control de un formulario, puedes seleccionar varios y deseleccionar los que no quieras o cambiar el orden físico para que esté por encima del resto de controles.

    Un saludo.

  3. Buenas tardes

    efectivamente me estaba equivocando de tecla, con la tecla INICIO tambien previsualiza pero no proporciona al expandir-contraer el formulario.

    En cuanto a la selección de controles la solución fué como dices respetando en ORDEN FISICO el orden jerarquico de controles anidados.

    Sigo aprendiendo V7

    gracias

    un saludo

  4. Pingback: Layouts « velnear

Dejar un comentario