Gestores de Diseño: FlowLayout y BorderLayout

Los Gestores de Diseño son objetos que tienen la capacidad de organizar los componentes de una GUI bajo sus propias normas cuando estos son agregados, darle tamaño minimo/maximo que resulte visible, posicionamiento, reacomodar los elementos si se cambia el tamaño del marco, etc.

• FlowLayout
  • Organiza los componentes en un flujo de izquierda a derecha.
• BorderLayout
  • Organiza los componentes en uno de los 5 paneles que corresponde a una de las coordenadas(Norte, Sur, Este, Oeste) y el centro.
• GridLayout
  • Organiza los componentes una "parrilla" de filas y columnas.
• GridBagLayout
  • coloca componentes en rectángulos (células) en una cuadrícula, y luego utiliza los tamaños preferidos de los componentes para determinar qué tan grande debe ser las células.
• BoxLayout
  • Los componentes están alineados de manera horizontal o verticalmente.
• CardLayout
  • Organiza los componentes en una pila, como una pila de cartas.

---

Paso para configurar un gestor de diseño:

• Creamos un contenedor(JPanel por ejemplo) llamando a su constructor:
  
  
  • JPanel panel = new JPanel();


• Llamamos al método setLayout de la clase "java.awt.Container" (Heredada en JPanel) para aplicar el gestor a este contenedor:
  
  
  • panel.setLayout(new FlowLayout() );


• También podemos crear el objeto "gestor" y pasarlo como parámetro del método setLayout
  
  
  • FlowLayout flow = new FlowLayout();
  • panel.setLayout(flow);


• Añadimos componentes al contenedor llamando al método add(componente)
  
  
  • JTextField campoNombre = new JTextField (80);
  • panel.add(campoNombre);

---

Clase FlowLayout

java.lang.Object
java.awt.FlowLayout

Flow (en español "flujo") ordena los componentes en un flujo direccional, al igual que las líneas de texto en un párrafo, por defecto es de izquierda a derecha, si no encuentra más espacio para un componente utiliza una nueva linea. La alineación de la línea se determina por la propiedad "align", sus valores posibles son las variables de la clase.

FlowLayout es clase del paquete awt, veamos sus constructore, variables y métodos:

Constructores:

• FlowLayout()
  • Constructor básico sin parámetros, con valores predeterminados de alineación centrada y 5 unidades de espacio horizontal y vertical.
• FlowLayout(int align)
  • Construye un nuevo FlowLayout con la alineación "align" especificada y un valor predeterminado de 5 unidades de espacio horizontal y vertical.
• FlowLayout(int align, int hgap, int vgap)
  • Construye un nuevo FlowLayout con la alineación indicada y los espacios horizontales y verticales indicados.

---

Variables de Clase

• public static final int LEFT = 0; Izquierda
• public static final int CENTER = 1;, centro (Default)
• public static final int RIGHT = 2; Derecha
• public static final int LEADING = 3; Iniciales
• public static final int TRAILING = 4; Finales

Podemos usar el nombre de las variables o bien su valor en el constructor: FlowLayout(int align) de la linea 17

1. package gestores;
2. import java.awt.*;
3. import javax.swing.*;
4.  
5. public class Flujo {
6.  
7.     public static void main(String[] args) {
8.         JButton boton1 = new JButton("Hola");
9.         JToggleButton btn = new JToggleButton("Pulsado");
10.        
11.         JFrame marco = new JFrame();
12.         marco.setTitle("FlowLayout - Disposición de Flujo");
13.         marco.setSize(400,300);
14.         marco.setLocationRelativeTo(null);
15.         marco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
16.         marco.setVisible(true);
17.         marco.setLayout(new FlowLayout() );
18.         marco.add(boton1);marco.add(btn);
19.     }
20. }

---

Métodos

entre otros... para configurar si no lo hicimos en el constructor.

• getAlignment(int align) y/o setAlignment(int align)
  • Obtiene o configura la alineación para este diseño.
• getHgap(int hgap) y/o setHgap(int hgap)
  • Obtiene o configura la distancia horizontal entre los componentes y entre los componentes y las fronteras del contenedor.
• getVgap(int vgap) y/o setVgap(int vgap)
  • Obtiene o configura la distancia vertical entre los componentes y entre los componentes y las fronteras del contenedor.

---

Ejemplo

Hago uso del constructor FlowLayout(FlowLayout.LEFT, 150,0) para que:

• Los ordene de izquierda a derecha
• alineados a la izquierda (Mucho no se nota)
• Cada elemento tome 150px de margen horizontal, empezando desde la izquierda como es su alineación
• Tomen 0px de distancia vertical(Van a estar pegados uno arriba del otro)

1. package gestores;
2. import java.awt.*;
3. import javax.swing.*;
4.  
5. public class Flujo {
6.  
7.     public static void main(String[] args) {
8.         JButton boton1 = new JButton("Hola");
9.         JToggleButton btn = new JToggleButton("Como estan?");
10.         JLabel etiqueta = new JLabel("Saludos y");
11.         JTextField campo = new JTextField("Adios..", 12);
12.         JFrame marco = new JFrame();
13.         marco.setTitle("FlowLayout(int align, int hgap, int vgap)");
14.         marco.setSize(400,300);
15.         marco.setLocationRelativeTo(null);
16.         marco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
17.         marco.setVisible(true);
18.        
19.         marco.setLayout(new FlowLayout(FlowLayout.LEFT, 150,0) );
20.        
21.         marco.add(boton1);marco.add(btn);
22.         marco.add(etiqueta);marco.add(campo);
23.     }
24. }

---

Clase BorderLayout

java.lang.Object
java.awt.BorderLayout

El gestor BorderLayout (borde, margen) divide el contenedor en 5 partes como se muestra en la siguiente imagen:

Básicamente luego de crear el objeto del gestor borde y configurarlo para un contenedor, a la hora de agregar componentes, el método add necesitará 2 parámetros:

• add(Componente, Coordenada)
  -estas coordenadas tienen que ser Strings de clase de BorderLayout:
  • NORTH, para el panel superior (Norte)
  • LEFT, para el panel izquierdo
  • CENTER, para el panel central
  • RIGHT, para el panel derecho
  • SOUTH, para el panel inferior (Sur)

Por ejemplo: miPanel.add(boton, BorderLayout.NORTH); de esta manera agregamos el componente al contenedor y en el lugar que el gestor lo dividio.

---

Constructores

• BorderLayout()
  • Construye un gestor BorderLayout y sin espacios entre los componentes.
• BorderLayout(int hgap, int vgap)
  • Construye un diseño BorderLayout con los espacios entre los componentes especificados. La distancia horizontal se especifica mediante hgap y la distancia vertical se especifica por vgap.

---

Ejemplo:

1. package gestores;
2. import java.awt.*;
3. import javax.swing.*;
4. public class Borde {
5.  
6.     public static void main(String[] args) {
7.         JButton norte = new JButton("Boton 1 (PÁGINA_INICIO)");
8.         JButton oeste = new JButton("Boton 2 (LÍNEA_INICIO)");
9.         JButton centro = new JButton("Boton 3 (CENTRO)");
10.         JButton este = new JButton("Boton 4 (LÍNEA_FIN)");
11.         JButton sur = new JButton("Boton 5 (PÁGINA_FIN)");
12.        
13.         JFrame marco = new JFrame();
14.         marco.setTitle("BorderLayout");
15.         marco.setSize(500,250);
16.         marco.setLocationRelativeTo(null);
17.         marco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
18.         marco.setVisible(true);
19.        
20.         marco.setLayout(new BorderLayout(10, 60) );
21.        
22.         marco.add(norte, BorderLayout.NORTH);
23.         //marco.add(oeste, BorderLayout.WEST);
24.         marco.add(centro, BorderLayout.CENTER);
25.         marco.add(este, BorderLayout.EAST);
26.         //marco.add(sur, BorderLayout.SOUTH);
27.     }
28. }

*Como vemos le dimos 10px de distancia horizontal entre los componentes(por ejemplo entre los botones 3 y 4) y además 60px de manera vertical (por ejemplo el boton 1 con los demás).

*También hay que notar que comente los paneles izquierdo y sur, con lo que estos espacios no forman siempre parte del marco, hay que agregarlos sino el gestor de diseño se las ingeniará para crear cosas como estas.