Arena - Layouts

El layout es la forma en la que se disponen los controles a medida que los creamos. Arena trae tres tipos de layout:

  • VerticalLayout (el default)
  • HorizontalLayout
  • ColumnLayout

Vertical Layout

En el layout vertical cada nuevo control se ubica uno abajo de otro.

Todos los paneles que heredan de SimpleWindow utilizan este layout por defecto. Esta configuración resulta útil para paneles laterales (a izquierda y derecha), ventanas sencillas, etc. Ejemplo:

Horizontal Layout

En el layout horizontal cada control se ubica uno al lado del otro.

Esta configuración resulta útil para botoneras, o bien para trabajar una ventana que tiene columnas de diferente tamaño. Ejemplo:

Column Layout

En este tipo de layout se debe especificar la cantidad de columnas, cada control se ubica en la columna siguiente hasta completar la fila. Entonces el próximo control genera una nueva fila y se ubica en la primera columna. En el siguiente gráfico vemos la posición de cada control en un panel con dos columnas:

Esta configuración resulta útil para armar formularios. Ejemplo:

Combinación de Layouts

Cuando necesitamos resolver un formulario complejo, no nos alcanza con utilizar un único layout para definir el posicionamiento de los controles. Por ejemplo, pensemos en la siguiente vista:

Vemos que

  • parece haber dos columnas de diferente tamaño en la pantalla principal: esto nos conviene manejarlo con un HorizontalLayout
    • en la primera columna tenemos el List y un botón ubicados uno abajo del otro. Deberíamos tener entonces un nuevo container que trabaje en forma vertical, ya que el contenedor principal trabaja en forma horizontal y queremos modificar esa configuración
    • la segunda columna la tenemos que dividir en tres secciones, que se ubican una abajo de la otra: nuevamente aparece otro container o panel con un layout vertical:
      • el formulario que edita los datos del equipo se divide en dos columnas, debemos entonces generar un nuevo container con un column layout de 2
      • luego tenemos una grilla que funciona como su propio container
      • y por último tenemos una botonera en un container de layout horizontal

Dejamos la solución final, donde se muestra:

  • en naranja, los paneles con layout horizontal
  • en azul, los paneles con layout vertical
  • en verde, los paneles con layout en columnas (en líneas azules separamos filas y columnas)

Este otro diagrama muestra el grafo de objetos con la misma convención de colores.

Layouts en otras tecnologías