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:
// Xtend
val unPanel = new Panel(panelPadre)
unPanel.layout = new VerticalLayout // en realidad no hace falta dado que es el default

// Java
Panel unPanel = new Panel(panelPadre);
mainPanel.setLayout(new VerticalLayout());

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:

// Xtend
def void createGridActions(Panel mainPanel) {
    val actionsPanel = new Panel(mainPanel)  // mainPanel es el panel padre que contiene al nuevo panel
    actionsPanel.layout = new HorizontalLayout
    val edit = new Button(actionsPanel)
    // ... etc.

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:
// Xtend
override def createFormPanel(Panel mainPanel) {
    new Panel(mainPanel) => [
        layout = new ColumnLayout(2)
        new Label(it) => [
            ...
        ]
    ]
    // etc.


// Java
@Override
public void createFormPanel(Panel mainPanel) {
    Panel searchFormPanel = new Panel(mainPanel);
    searchFormPanel.setLayout(new ColumnLayout(2));
    var labelNumero = new Label(searchFormPanel);
    // etc.

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

El lector interesado puede estudiar los layouts presentes en otras tecnologías
Comments