Composición

Tabla de contenidos

• Flujo de componentes
  • Colapso de márgenes
  • Posicionamiento absoluto
• Posicionamiento de un contenedor <div>
• Tamaños

La composición de una escena con LibUIGL sigue una serie de reglas.

Flujo de componentes

Si los controles que se encuentran en un contenedor <scene> o div> no tienen definida una posición fija, se sitúan automáticamente de izquierda a derecha y de arriba hacia abajo, empezando desde la coordenada superior izquierda del contendor.

El atributo spacing del contenedor indica la separación entre los diferentes, controles, si es 0 (por defecto) los controles están pegados sin separación adicional.

Si un control define la propiedad margin, esta toma precedencia sobre el atributo spacing del contenedor donde se encuentra. Este atributo tiene el mismo funcionamiento que el modelo de caja CSS, definiendo un espacio alrededor del control.

Los atributos spacing y margin pueden definir entre 1 y 4 valores separados por espacios. El significado de los valores es el mismo que en el modelo de caja CSS:

Nº valores	Significado
1	superior, izquierda, inferior, derecha
2	1=superior e inferior, 2=izquierda y derecha
3	1=superior, 2=izquierda y derecha, 3=inferior
4	1=superior, 2=derecha, 3=inferior, 4=izquierda

Colapso de márgenes

Los márgenes adyacentes se colapsan, es decir:

• derecha c1 e izquierda c2 no se suman, sino que se establece la anchura del mayor de ambos
• inferior c1 y superior c2 on se suman, sino que se establece la altura del mayor de ambos

Posicionamiento absoluto

Puede indicarse una posición fija en uno de los controles, y el flujo continuará a partir de este último control, sin tener en cuenta otros controles que pudieran haberse colocado antes. No es recomendable mezclar posiciones fijas y automáticas dentro de un mismo contenedor, ya que el resultado puede no ser el deseado. Sí que puede utilizarse esta característica para indicar la posición del primer control, y permitir que el flujo automático siga a partir de ahí.

Los atributos right y bottom que definen el posicionamiento de la parte derecha e inferior del control, aceptan valores negativos. En este caso, se interpreta que la distancia es al borde derecho/inferior del contenedor, útil para anclar los controles a esas zonas al redimensionar la escena.

Por ejemplo:

<button left="40" right="-40" />

Significa que el control tiene su margen derecho a 40px del borde derecho de su contenedor. Al redimensionar la escena, la distancia se mantiene constante, redimensionando el botón automáticamente.

Posicionamiento de un contenedor <div>

El atributo align aplicado a un elemento <div> con una anchura inferior al 100%, permite alinearlo dentro del espacio disponible. El el resto de controles, este atributo se usa para alinear el texto dentro del control.

<div width="50%" align="center" >
...
</div>

Tamaños

Si un control no tiene definido un tamaño específico mediante los atributos width y height, se asigna un tamaño automático de la siguiente forma:

1. si contiene una imagen con el atributo image, obtiene el tamaño de la imagen asociada
2. si dispone de atributos left, top, right y bottom, calcula el ancho y/o alto haciendo la resta entre los extremos
3. si no ha podido establecer tamaño, se ocupa el 100% de la anchura del contenedor
4. si no tiene altura pero el estilo contiene una fuente, asigna la altura requerida para una línea de texto

Las reglas para el tamaño de un contenedor <div> que contiene otros controles es la siguiente:

1. el atributo width permite especificar la anchura absoluta en píxeles o relativa en porcentaje respecto al contenedor pariente
2. para ajustar la anchura automáticamente al contenido se utiliza el valor especial width="content"
3. si no se indica width, se asume el 100% del espacio disponible
4. el atributo height indica la altura mínima del contenedor, en píxeles
5. la altura se expande automáticamente para alojar todos los controles necesarios en caso de que no quepan