AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / Editores / Editor de ventanas y de páginas / Editor de páginas
  • Presentación
  • ¿Cómo implementar la gestión de los anclajes?
  • Visualización de las anclas: flechas rojas o azules
  • Caso específico de los controles del Looper: Anclaje en relación con el contenido y el número máximo de filas por Page
  • Caso especial: Anclaje en relación con el contenido
  • Caso especial: Anclaje de los controles de un contenedor
  • Por ejemplo
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
En una Page, los anclajes definen cómo se comportará el contenido de una Page cuando el usuario de la Web amplíe la Page.
Por ejemplo, un control puede ser anclado:
  • en posición, y por lo tanto se mueve cuando se redimensiona el navegador.
  • en tamaño, y por lo tanto ser ampliado en anchura o en altura cuando se redimensiona el navegador.
¿Cómo implementar la gestión de los anclajes?
Para definir el ancla de un elemento:
  1. Seleccione el elemento solicitado (control, área de diseño, celda, ...).
  2. Definir el elemento de anclaje:
    • en la pestaña "UI" de la ventana del elemento description.
    • mediante la opción "Anclar" del menú contextual del elemento deseado.
Si la opción "Anclaje" es Grayed, significa que el modo de generación de la Page no permite gestionar los anclajes. Para modificar el modo de generación de la Page:
  • En la pestaña "Página", en el grupo "Descripción", haga clic en "Descripción".
  • En la pestaña "General", seleccione "Editar en "zonificación", posicionamiento por bloques y anclaje en controles".
  • Validar.
Si el desbordamiento de control es Invisible, el anclaje puede no ser Visible en el navegador. En ese caso:
  • Visualice la pestaña "Estilo" del control description.
  • Seleccione el elemento "Desbordamiento.
  • Seleccione "Visible" para el desbordamiento vertical y el desbordamiento horizontal.
  • Validar.
3. Se muestra la ventana para definir los anclajes.:
Observación: Si la control es apilable, se muestra una ventana específica para definir las anclas. Para obtener más información, consulte Ancla de controles apilados.
4. Esta ventana se utiliza para definir:
  • el anclaje en posición, que determina cómo se mueve la control según los cambios de tamaño del navegador o del contenedor.
  • el anclaje horizontal y vertical, que determina cómo se amplía la control en función de los cambios de tamaño del navegador o del contenedor . En este caso, debe especificar si la ampliación de la control se realiza en relación con el navegador (o contenedor) o en relación con el contenido.
5. Seleccione el posicionamiento a utilizar. Las opciones disponibles son:
Sin anclajesLa control no se modifica cuando se modifica el tamaño del navegador o el tamaño del elemento contenedor (celda, looper, ...).
Horizontalmente centradoLa control permanece centrada en anchura en el navegador (o en el elemento contenedor) independientemente de la anchura del navegador.
DerechoLa control se desplaza hacia la derecha cuando se amplía el navegador o el elemento contenedor (celda, looper, ...).
Centrado verticalmenteLa control permanece centrada verticalmente en el navegador (o en el elemento contenedor) independientemente de la altura del navegador (o de la altura del elemento contenedor).
centradoLa control permanece centrada en altura y en anchura en el navegador (o en el elemento contenedor) independientemente del tamaño del navegador (o del tamaño del elemento contenedor).
Centrado verticalmente a la derechaLa control permanece centrada verticalmente en el navegador (o en el elemento contenedor) independientemente de la altura del navegador (o de la altura del elemento contenedor). Sin embargo, la control está anclada a la derecha y se desplaza hacia la derecha cuando se amplía el navegador o el elemento contenedor (celda, looper, ...).
AbajoLa control se desplaza hacia el fondo cuando el navegador (o el elemento contenedor) se amplía hacia el fondo.
Centrado horizontalmente abajoLa control permanece centrada horizontalmente en el navegador, independientemente del ancho del mismo.. Sin embargo, la control está anclada en la parte inferior y se desplaza hacia abajo cuando se amplía el navegador.
Derecha y abajoLa control se mueve a la derecha y al fondo cuando el tamaño del navegador (o el tamaño del elemento contenedor: de la célula, el looper, ....) se incrementa.
6. Seleccione el anclaje horizontal y vertical:
  • Anclaje horizontal: permite definir cómo reaccionará la control (horizontalmente) cuando la reference control sea redimensionada. La lata de control superpuesta:
    • conservar el mismo ancho,
    • adaptarse al contenido,
    • seguir el comportamiento del navegador.
  • Anclaje vertical: permite definir cómo reaccionará la control (verticalmente) cuando la reference control sea redimensionada. La lata de control superpuesta:
    • conservar la misma altura,
    • adaptarse al contenido,
    • seguir el comportamiento del navegador.
7. También es posible definir el comportamiento del control cuando el contenido es más grande que el propio control. Es posible:
  • ampliar el control y empujar los otros controles de la página,
  • truncar el contenido,
  • activar siempre una barra de desplazamiento,
  • mostrar una barra de desplazamiento solo cuando el contenido es más grande que el control.
8. Validar. Los mandos se anclan automáticamente según estas indicaciones. Los anclajes se representan con flechas rojas o azules en el editor.

Visualización de las anclas: flechas rojas o azules

Para ver los anclajes, en la pestaña "Vista", en el grupo "Mostrar (todos los controles)", seleccione "Anclajes" (o presione F6).
Pueden aparecer dos tipos de flechas:
  • Las flechas rojas representan los anclajes implementados por el desarrollador.
  • Las flechas azules representan los anclajes deducidos por WEBDEV para cumplir con las restricciones HTML.
Ejemplo:
En este ejemplo, el anclaje se realizó en la control Looper (flechas rojas). La control Botón junto a la control Looper fue anclada automáticamente por WEBDEV (flechas azules).
Si se producen conflictos de anclaje y si WEBDEV no puede corregirlos, aparece un error específico de UI.

Caso específico de los controles del Looper: Anclaje en relación con el contenido y el número máximo de filas por Page

La opción "Número máximo de filas por Page" de los controles Looper permite definir el número de filas mostradas en la Page.
  • Si el número de líneas es mayor que el número de líneas especificado: una regla puede ser mostrada debajo de la control por ejemplo.
  • Si el número de filas es inferior al número de filas especificado: el espacio para el número máximo de filas está reservado por Default. Si hay controles debajo de la control Looper, aparecerá un espacio vacío.
Para evitar tener este espacio, basta con especificar que el anclaje vertical de la control Looper es relativo al contenido.

Caso especial: Anclaje en relación con el contenido

Cuando un contenedor está anclado (looper, área de diseño, celda,...), los controles que se encuentran en este contenedor heredan automáticamente de la posición de anclaje..
En este caso, le aconsejamos que no defina ningún anclaje en posición porque:
  • la carga de las páginas será más lenta.
  • pueden aparecer efectos inesperados.

Caso especial: Anclaje de los controles de un contenedor

Cuando todos los controles que se encuentran en un contenedor están anclados en su posición (por ejemplo, por selección múltiple), si el contenedor no está anclado, el contenedor se anclará automáticamente en su posición como todos los controles contenidos en él..
Por ejemplo
Veamos un ejemplo simple: una control Estático que contiene un texto que ocupa más o menos espacio. Para la tercera control Estático, el desbordamiento se definió en la pestaña "Estilo" de la ventana de control description.
  • control Estático no anclada:
  • control Estático anclada en anchura:
  • control Estático anclada en anchura y adaptada al contenido: independientemente del tamaño del navegador y si no existe ninguna otra restricción HTML, la estática se adapta al contenido.
Versión mínima requerida
  • Versión 17
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 13/06/2023

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