Diseño de página

Aunque es posible crear una página mediante el método de arrastrar y soltar widgets, las propiedades de diseño pueden acelerarlo en gran medida. Ofrecen control inmediato y preciso sobre el tamaño y la posición del widget.

La propiedad de diseño

Los widgets de panel tienen una propiedad layout en su grupo de propiedades principal que define cómo se organizan los widgets secundarios. La propiedad tiene tres valores posibles:

  • Fijo: organiza los widgets secundarios según los bordes del panel.
  • Horizontal: organiza los widgets secundarios uno al lado del otro, en una línea horizontal.
  • Vertical: organiza los widgets secundarios por encima y por debajo de cada uno, en una línea vertical.

La opción fija ubica a los secundarios de manera absoluta en referencia al panel principal. Las opciones horizontal y vertical organizan a los widgets de manera relativa, a la derecha o a la izquierda y por encima o por debajo de otros widgets en el panel. Los widgets de posición relativa fluyen con los widgets que los rodean. De hecho, se dice que los widgets que se ubican de esa manera están en flujo.

Propiedades de diseño

Todos los widgets tienen un grupo de propiedades de Diseño que determina su tamaño y su posición. El contenido del grupo de Diseño cambia según la propiedad layout del panel principal de un widget.

Propiedades de Diseño de panel fijo

Los widgets en paneles fijos tienen propiedades de diseño que establecen su tamaño y posición en relación con los bordes del panel. Las propiedades exactas que se muestran varían según el tipo de widget y tus selecciones, pero todas se dividen en cuatro tipos básicos:

Tipo Descripción Propiedades
Posición Las propiedades de posición determinan la distancia a la que debe estar un widget de los bordes del widget principal. Las casillas de verificación que estén al lado de las propiedades de posición las inhabilitan. Si inhabilitas la última propiedad en un eje, App Maker habilita de forma automática la propiedad opuesta. top, bottom, left, right
Tamaño absoluto Las propiedades de tamaño absoluto determinan el tamaño del widget, excepto cuando esté habilitada la propiedad de tamaño automático correspondiente. Las casillas de verificación que estén al lado de las propiedades de tamaño las inhabilitan. Si inhabilitas una propiedad de tamaño absoluto, el tamaño del widget se determina por las propiedades de posición de ese eje. width, height
Tamaño automático Las propiedades de tamaño automático escalan el tamaño de un widget de forma automática según su contenido. Esta propiedad solo está disponible para algunos tipos de widgets y solo si no inhabilitaste la propiedad de tamaño absoluto correspondiente. autoWidth, autoHeight
Restricciones de tamaño Las propiedades de restricción de tamaño establecen restricciones de tamaño mínimo y máximo en ejes de tamaño absoluto y de tamaño automático. Ingresa un valor a fin de establecer el mayor o menor tamaño permitido para una dimensión. minWidth, maxWidth, minHeight, maxHeight

Propiedades de Diseño de panel de flujo

Los widgets en paneles verticales y horizontales también tienen propiedades de Diseño que controlan su tamaño y posición, aunque las opciones para controlar la posición son más limitadas que en los paneles fijos. Las propiedades del panel de flujo se organizan en dos columnas: horizontal y vertical. Cada columna controla su respectivo eje.

Tipo Descripción Propiedades
Tamaño El tamaño controla cómo se configura el tamaño del widget para cada eje. Selecciona entre fixed, fit to content y fill parent. size
Tamaño absoluto Las propiedades de tamaño absoluto determinan el tamaño del widget, cuando sus propiedades de size son fixed. width, height
Restricciones de tamaño Las propiedades de restricción establecen restricciones de tamaño mínimo y máximo cuando las propiedades de size del widget son fit to content o fill parent. minWidth, maxWidth, minHeight, maxHeight
Alineación La alineación controla la posición de los ejes sin flujo del panel. Determina la alineación vertical del widget en paneles horizontales y la alineación horizontal en los verticales. align

Espaciado

Usa el espaciado para controlar el margen y el relleno de los widgets individuales.

Tipo Descripción Propiedades
Margen Define la cantidad de espacio entre los bordes del widget y los objetos cercanos en la página. margin top, margin bottom, margin left, margin right
Relleno Controla la cantidad de espacio entre el contenido de un widget y sus bordes. padding top, padding bottom, padding left, padding right

Propiedades de flujo

Al contrario de los paneles fijos, la mayoría del posicionamiento de widgets en paneles de flujo sucede a nivel de panel. Para posicionar widgets en flujo, usa las propiedades en el grupo de Flujo del panel principal:

Propiedad Descripción
wrap Esta propiedad controla cómo el panel organiza los widgets que de otra manera serían más anchos que sus ejes de flujo.
justify Esta propiedad controla cómo el panel organiza los widgets junto con sus ejes de flujo.
alignChidren Esta propiedad controla cómo el panel organiza los widgets junto con sus ejes sin flujo.
wrapAlign Esta propiedad controla cómo el panel organiza los widgets que unen, cuando la propiedad wrap está habilitada.

Propiedades de tamaño

El grupo de propiedades de tamaño enumera todas las propiedades de tamaño del grupo de Diseño como propiedades normales. Esto les permite a los datos vincular las propiedades para alterar sus valores de manera dinámica. Las propiedades de este grupo se pueden editar en simultáneo y te permiten establecer valores que pueden estar en conflicto. Por ejemplo, puedes establecer los valores left, right y width para números incompatibles. App Maker no garantiza el comportamiento coherente para las propiedades de tamaño conflictivas.

Descripción

La pestaña Descripción ubicada a la derecha del lienzo, te permite ocultar o bloquear los widgets. Los widgets bloqueados no se pueden seleccionar en el lienzo y eso evita que los muevas por accidente. Los widgets ocultos no se procesan en el lienzo y eso te permite interactuar con los widgets que, de otra manera, estarían debajo de ellos. Los widgets ocultos se muestran aún en el tiempo de ejecución de la app. Para reposicionar o editar un widget que está oculto o bloqueado, selecciona su nombre de la Descripción.