AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Disposición
  • Presentación del control Disposición
  • Crear un control Disposición
  • Crear control
  • Crear un control Disposición por refactorización
  • Control Disposición en un control Looper
  • Características del control Disposición
  • Pestaña General
  • Pestaña Detalles
  • Ejemplo de diferentes tipos de desbordamiento
  • Control Disposición y Responsive Web Design
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Presentación del control Disposición
El control Disposición simplifica la implementación de interfaces dinámicas en las que se muestran u ocultan controles mediante programación. Cuando se oculta un control (por ejemplo, mediante la propiedad Visible), el control Disposición reposiciona automáticamente los demás controles para mantener la interfaz ordenada y evitar los "espacios".
Los controles Disposición están disponibles en modo vertical y horizontal.
El control Disposición está compuesto por celdas. Las celdas contienen los controles que se encuentran en el control Disposición. Cada celda puede contener cualquier tipo de control, incluyendo otro control Disposición. Los controles se pueden mostrar u ocultar.
Las celdas se pueden crear en la pestaña "General" de la descripción del control o en el menú contextual del control Disposición.
Crear un control Disposición

Crear control

Para crear un control Disposición:
  1. En la pestaña "Creación", en el grupo "Contenedores", despliegue "Disposición " y elija la orientación: horizontal o vertical.
  2. Haga clic en la ventana o página en la ubicación en la que desea crear el control. El control aparece en el editor.
    Observación: Las dimensiones del control que se creó se optimizan para ocupar el espacio disponible en la ubicación indicada. Si es necesario, cambie el tamaño del control usando los controladores de tamaño.
  3. Agregue celdas en el control Disposición. Las celdas se pueden agregar:
    • mediante el menú contextual del control (opción "Insertar una celda").
    • en la pestaña "General" de la descripción del control (botón "Agregar").
  4. Agregue controles en las celdas del control Disposición.
  5. Configure los anclajes de los controles que están dentro del control Disposición y especifique cómo se adaptan al contenido. Para obtener más información, consulte:
Para ver las características del control, seleccione la opción "Descripción" en el menú contextual.
Para manipular un control Disposición, consulte Manipular un control Disposición mediante programación.

Crear un control Disposición por refactorización

Un control Disposición también se puede crear a partir de los controles existentes:
  1. Seleccione los controles que desea incluir en el control Disposición.
  2. En la pestaña "Modificación", en el grupo "Transformaciones", despliegue "Refactorización y permutaciones" y seleccione "Crear una disposición a partir de la selección".
  3. Un control Disposición se crea automáticamente, y también se crea una celda por cada control ubicado en una fila diferente.

Control Disposición en un control Looper

WINDEVAndroidiPhone/iPad En una ventana, un control Disposición puede ser utilizado en un Looper:
  • Cree un control Looper.
  • En la ventana de descripción del control, vaya la pestaña "Contenido" y seleccione la opción "Utilizar una Ventana interna por fila (función LooperAddIW)".
  • Crear una ventana interna. La ventana interna contendrá el control Disposición con los controles necesarios.
Para obtener más información, consulte Mostrar un contenido diferente en cada fila.
WEBDEV - Código ServidorWEBDEV - Código Navegador En una página, el control Disposición puede utilizarse dentro de un control en un control Looper. Por ejemplo, si desea utilizar un control Looper para optimizar la interfaz :
  • Cree un control Looper de tipo Ajax, rellenado mediante programación.
  • En la pestaña "General" de la ventana de descripción, establezca el número máximo de filas visibles. Para este ejemplo, seleccione la opción "Sin límite - Sin barra de desplazamiento".
  • Cree un control Disposición con los controles necesarios y ubíquelos en una fila del control Looper.
Características del control Disposición
Las características del control Disposición se encuentran en las pestañas "General" y "Detalles" de la ventana de descripción del control.

Pestaña General

La pestaña "General" permite gestionar las diferentes celdas del control Disposición. Es posible:
  • agregar, duplicar o eliminar celdas.
  • modificar el orden de las celdas usando las flechas.
  • modificar los parámetros de la celda actual. Es posible:
    • Hacer que la celda se muestre o no (estado inicial).
    • Definir el alto y alto máximo de la celda:
      • El alto corresponde al tamaño mínimo de la celda.
      • Si se especifica el alto máximo de la celda, este no se podrá exceder.
    • Ocupar todo el espacio disponible. Esta opción está disponible si no se seleccionó la opción "En caso de desbordamiento: "Ampliar control y desplazar los controles que están alrededor" (en la pestaña "Detalles" de la ventana de descripción del control).
WEBDEV - Código ServidorPHP La pestaña "General" también permite definir el estilo CSS de la celda actual.

Pestaña Detalles

La pestaña "Detalles" permite definir los parámetros de presentación del control Disposición. Las opciones disponibles son:
  • Disposición: Permite especificar si el control Disposición gestiona la disposición de los controles vertical u horizontalmente.
    • Horizontal: Las celdas se muestran en una sola fila y ocupan todo el alto del control. Solo se puede modificar el ancho.
    • Vertical: Las celdas se muestran en una sola columna y ocupan todo el ancho del control. Solo se puede modificar el alto.
  • Fijar celdas: Permite especificar la alineación de las celdas en el control de acuerdo con la disposición seleccionada.
    • Si la disposición es vertical, las celdas se pueden alinear arriba o abajo.
    • Si la disposición es horizontal, las celdas se pueden alinear a la izquierda o a la derecha.
  • Gestionar desbordamiento:
    • Ampliar control y desplazar los controles que están alrededor: el control se amplía para mostrar todas las celdas.
      • Si hay controles abajo o a la derecha, estos se desplazan.
      • Si se reduce el tamaño de una o más celdas, el control Disposición se adapta sin reducirse más allá de su tamaño inicial.
      • Los controles que se encuentran abajo o a la derecha se mueven para adaptarse al nuevo tamaño.
      • La ventana nunca se reduce.
    • Mostrar una barra de desplazamiento automáticamente: el área cliente del control se amplía y se agregan barras de desplazamiento para desplazarse por el control.
    • Truncar contenido: No se aplica ninguna adaptación, las celdas se truncan.
    • WINDEVAndroidiPhone/iPad La opción "Reducir padre" permite reducir el padre si es necesario. Si la ventana es el padre, se reducirá la próxima vez que se abra.
      Observación: Cuando esta opción está habilitada, se deben ocultar las celdas o los controles de las celdas en el evento "Declaraciones globales" de la ventana, o en el evento "Inicialización" de los controles.
  • Margen entre celdas: Espacio entre las celdas del control Disposición. Este espacio se expresa en pixeles. Puede cambiarse mediante programación con la propiedad MarginInterCell.
WINDEVAndroidiPhone/iPad Observaciones:
  • Atención: un control Disposición no se puede ampliar si la ventana está maximizada y no tiene barras de desplazamiento.
  • Para reducir una ventana después de abrirla (por ejemplo, después de ocultar controles), utilice la función LayoutAdaptSize.
  • Caso especial: Control Estático RTF: En Windows 7 (y versiones anteriores), el ancho de un control Estático RTF no se puede calcular. Por lo tanto, no se puede adaptar el ancho del control.

Ejemplo de diferentes tipos de desbordamiento

Ejemplo: Control Disposición creado en el editor de ventanas.
Control Disposición: Ejemplo de diferentes tipos de desbordamiento
Este control Disposición contiene:
  • Varias celdas que permiten mostrar los diferentes controles de un formulario.
  • Un control Disposición horizontal con 2 botones, que se muestran u ocultan dependiendo de si hay un número de teléfono y/o dirección de correo electrónico.
Ejemplo 1: Ampliar control y desplazar los controles que están alrededor
  • Durante una prueba (Go), todos los controles se muestran en la ventana.
    Ampliar control y desplazar los controles que están alrededor
  • Al borrar el número de teléfono y la dirección de correo electrónico, el control Disposición se reduce, pero la ventana conserva el mismo tamaño.
  • Al ingresar el número de teléfono, la dirección de correo electrónico y un comentario, tanto el control Disposición como la ventana se amplían.
    Ampliar control y desplazar los controles que están alrededor
Ejemplo 2: Mostrar una barra de desplazamiento automáticamente
  • Durante una prueba (Go), todos los controles se muestran en la ventana.
  • Al agregar un comentario, una barra de desplazamiento se añade automáticamente en el control Disposición para desplazarse por los diferentes elementos.
    Mostrar una barra de desplazamiento automáticamente
Ejemplo 3: Truncar contenido
  • Durante una prueba (Go), todos los controles se muestran en la ventana.
  • Al agregar un comentario, el contenido que desborda el control Disposición no se muestra.
WINDEVAndroidiPhone/iPad Ejemplo 4: Opción Ampliar control y desplazar los controles que están alrededor con reducción de la ventana mediante programación
  • Durante una prueba (Go), todos los controles se muestran en la ventana.
  • Al borrar el número de teléfono y la dirección de correo electrónico, se reduce tanto el control Disposición, como la ventana.
    Al eliminar los controles Teléfono y Correo electrónico, la función LayoutAdaptSize cambia el tamaño del control Disposición para que no queden espacios vacíos, y también el tamaño de la ventana, permitiéndole volver a su tamaño inicial.
  • Al ingresar el número de teléfono, la dirección de correo electrónico y un comentario, tanto el control Disposición como la ventana se amplían.
Atención: Debe tener cuidado al utilizar esta funcionalidad: según el contenido de la ventana (además del control Disposición), se pueden producir efectos inesperados (por ejemplo, reducir una ventana con controles que deben mostrarse en otro plano).
WEBDEV - Código Servidor
Control Disposición y Responsive Web Design
El control Disposición está disponible en modo Responsive Web Design. Por cada rango de resolución, se pueden configurar los siguientes elementos:
  • el alto y alto máximo de las celdas,
  • la disposición del control (horizontal o vertical).
Las celdas se pueden ocultar al cambiar el rango de resolución en el evento "Cada vez que cambia el rango de resolución" de la página.
Versión mínima requerida
  • Versión 23
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 22/06/2023

Señalar un error o enviar una sugerencia | Ayuda local