Administradores de diseño

PDF ????

El administrador de diseño determina el tamaño y la posición de los componentes dentro de un contenedor. Como alternativa al uso de estos administradores, es posible asignar una posición absoluta mediante coordenadas de píxeles. La posición absoluta se obtiene definiendo la propiedad de diseño de un contenedor con el valor null. El posicionamiento absoluto no puede trasladarse de una plataforma a otra. Aspectos como el tamaño de los tipos de letra y las pantallas hacen que una posición que sea correcta según sus coordenadas, sea potencialmente inservible en otras plataformas.

Los distintos administradores de diseño son los siguientes:

BorderLayout
FlowLayout
BoxLayout
CardLayout
GridLayout
GridBagLayout
GroupLayout

BORDERLAYOUT

BorderLayout organiza los componentes en cinco zonas diferentes: CENTER, NORTH, SOUTH, EAST y WEST (centro, norte, sur, este y oeste, respectivamente). Este administrador de diseño limita a uno el número de componentes que pueden agregarse a cada zona.

Es necesario especificar la posición del componente. Si no se especifica, se coloca automáticamente en el centro. Cualquier espacio sobrante lo usa el componente de la zona central.

BorderLayout es el diseño predeterminado para los objetos JFrame, JDialog y JApplet.

Ejemplo de código

import java.awt.*;
import javax.swing.*;

public class EjemploBorderLayout {

    private JFrame f;
    private JButton bn, bs, bw, be, bc;

    public EjemploBorderLayout() {
        f = new JFrame("Border Layout");
        bn = new JButton("Button 1");
        bc = new JButton("Button 2");
        bw = new JButton("Button 3");
        bs = new JButton("Button 4");
        be = new JButton("Button 5");
    }

    public void launchFrame() {
        f.add(bn, BorderLayout.NORTH);
        f.add(bs, BorderLayout.SOUTH);
        f.add(bw, BorderLayout.WEST);
        f.add(be, BorderLayout.EAST);
        f.add(bc, BorderLayout.CENTER);
        f.setSize(400, 200);
        f.setVisible(true);
    }

    public static void main(String args[]) {
        EjemploBorderLayout guiWindow2 = new EjemploBorderLayout();
        guiWindow2.launchFrame();
    }
}

import java.awt.*;

import javax.swing.*;

public class EjemploBorderLayout {

private JFrame f;

private JButton bn, bs, bw, be, bc;

public EjemploBorderLayout() {

f = new JFrame("Border Layout");

bn = new JButton("Button 1");

bc = new JButton("Button 2");

bw = new JButton("Button 3");

bs = new JButton("Button 4");

be = new JButton("Button 5");

}

public void launchFrame() {

f.add(bn, BorderLayout.NORTH);

f.add(bs, BorderLayout.SOUTH);

f.add(bw, BorderLayout.WEST);

f.add(be, BorderLayout.EAST);

f.add(bc, BorderLayout.CENTER);

f.setSize(400, 200);

f.setVisible(true);

}

public static void main(String args[]) {

EjemploBorderLayout guiWindow2 = new EjemploBorderLayout();

guiWindow2.launchFrame();

}

Documentación oficial

FLOWLAYOUT

FlowLayout coloca los componentes en una fila. En su forma predeterminada, coloca los componentes de izquierda a derecha (LEFT_TO_RIGHT). Esta orientación puede cambiarse con la propiedad ComponentOrientation para que sea RIGHT_TO_LEFT, es decir, de derecha a izquierda. Es posible especificar el espacio vertical y horizontal que debe haber entre los componentes. Si no se especifica, se utiliza una distancia predeterminada de cinco unidades en ambas direcciones.

Ejemplo en el cual se disponen los componentes en la misma fila:

package ejemplolayouts;

import java.awt.*;
import javax.swing.*;

public class EjemploFlowLayout {

    private JFrame f;
    private JButton b1, b2, b3, b4, b5;

    public EjemploFlowLayout() {
        f = new JFrame("Flow Layout");
        b1 = new JButton("Button 1");
        b2 = new JButton("Button 2");
        b3 = new JButton("Button 3");
        b4 = new JButton("Button 4");
        b5 = new JButton("Button 5");
    }

    public void launchFrame() {
        f.setLayout(new FlowLayout());
        f.add(b1);
        f.add(b2);
        f.add(b3);
        f.add(b4);
        f.add(b5);
        f.pack();
        f.setVisible(true);
    }

    public static void main(String args[]) {
        EjemploFlowLayout guiWindow2 = new EjemploFlowLayout();
        guiWindow2.launchFrame();
    }
}

package ejemplolayouts;

import java.awt.*;

import javax.swing.*;

public class EjemploFlowLayout {

private JFrame f;

private JButton b1, b2, b3, b4, b5;

public EjemploFlowLayout() {

f = new JFrame("Flow Layout");

b1 = new JButton("Button 1");

b2 = new JButton("Button 2");

b3 = new JButton("Button 3");

b4 = new JButton("Button 4");

b5 = new JButton("Button 5");

}

public void launchFrame() {

f.setLayout(new FlowLayout());

f.add(b1);

f.add(b2);

f.add(b3);

f.add(b4);

f.add(b5);

f.pack();

f.setVisible(true);

}

public static void main(String args[]) {

EjemploFlowLayout guiWindow2 = new EjemploFlowLayout();

guiWindow2.launchFrame();

}

Documentación oficial

BOXLAYOUT

BoxLayout organiza los componentes en disposición vertical u horizontal.

El constructor de BoxLayout utiliza un parámetro llamado “axis” (eje) que debe utilizarse para indicar la dirección en la que se alinearán los componentes. Este parámetro puede adoptar los siguientes valores:

X_AXIS: los componentes se organizan horizontalmente, de izquierda a derecha.
Y_AXIS: los componentes se organizan verticalmente, de arriba abajo.
LINE_AXIS: los componentes se colocan en la misma dirección que las palabras de una línea.
PAGE_AXIS: los componentes se colocan en la misma dirección que las líneas de una página.

Ejemplo:

ge ejemplolayouts;

import java.awt.*;
import javax.swing.*;

public class EjemploBoxLayout {

    private JFrame f;
    private JButton b1, b2, b3, b4, b5;

    public EjemploBoxLayout() {
        f = new JFrame("Box Layout");
        b1 = new JButton("Button 1");
        b2 = new JButton("Button 2");
        b3 = new JButton("Button 3");
        b4 = new JButton("Button 4");
        b5 = new JButton("Button 5");
    }

    public void launchFrame() {
        // añade los botones en la misma fila
       // f.setLayout(new BoxLayout(f.getContentPane(), BoxLayout.X_AXIS));

        // añade los botones en la misma columna
         f.setLayout(new BoxLayout(f.getContentPane(), BoxLayout.Y_AXIS));
        
        // Abre el JFrame en el centro de a pantalla
        f.setLocationRelativeTo(null);
        f.add(b1);
        f.add(b2);
        f.add(b3);
        f.add(b4);
        f.add(b5);
        f.pack();
        f.setVisible(true);
    }

    public static void main(String args[]) {
        EjemploBoxLayout guiWindow2 = new EjemploBoxLayout();
        guiWindow2.launchFrame();
    }
}

ge ejemplolayouts;

import java.awt.*;

import javax.swing.*;

public class EjemploBoxLayout {

private JFrame f;

private JButton b1, b2, b3, b4, b5;

public EjemploBoxLayout() {

f = new JFrame("Box Layout");

b1 = new JButton("Button 1");

b2 = new JButton("Button 2");

b3 = new JButton("Button 3");

b4 = new JButton("Button 4");

b5 = new JButton("Button 5");

}

public void launchFrame() {

// añade los botones en la misma fila

// f.setLayout(new BoxLayout(f.getContentPane(), BoxLayout.X_AXIS));

// añade los botones en la misma columna

f.setLayout(new BoxLayout(f.getContentPane(), BoxLayout.Y_AXIS));

// Abre el JFrame en el centro de a pantalla

f.setLocationRelativeTo(null);

f.add(b1);

f.add(b2);

f.add(b3);

f.add(b4);

f.add(b5);

f.pack();

f.setVisible(true);

}

public static void main(String args[]) {

EjemploBoxLayout guiWindow2 = new EjemploBoxLayout();

guiWindow2.launchFrame();

}

Documentación oficial.

CARDLAYOUT

CardLayout organiza los componentes como una baraja de cartas. Cada carta acepta un único componente para su representación en pantalla.

Este único componente se convierte en un contenedor, con lo que es posible representar múltiples componentes dentro de una carta. Sólo puede verse una carta cada vez.

Los botones Button1, Button2 y Button3 se colocan en Carta1 y los botones Button4 y Button5 se colocan en Carta2. Se ha utilizado un cuadro combinado para elegir la carta de debe aparecer en la pantalla.

A continuación vemos un ejemplo de este administrador de contenido.

En primer lugar vemos la declaración de la clase y las propiedades que utilizaremos:

public class EjemploCardLayout implements ActionListener{

    private JFrame f;
    private JButton b1, b2, b3, b4, b5;
    public CardLayout cardLayout;
    public JPanel panelSuperior, panelInferior, panelInf1, panelInf2;
    public JComboBox combo;
    public String[] vectorCadena = {"Button 1,2,3", "Button 4,5"};

public class EjemploCardLayout implements ActionListener{

private JFrame f;

private JButton b1, b2, b3, b4, b5;

public CardLayout cardLayout;

public JPanel panelSuperior, panelInferior, panelInf1, panelInf2;

public JComboBox combo;

public String[] vectorCadena = {"Button 1,2,3", "Button 4,5"};

Ahora podemos ver los métodos que utilizamos para construir los diferentes paneles. El panel superior donde a través de un combo se elije que carta ver, un panel inferior que será el encargado de mostrar la carta elegida y otros dos paneles inferiores que contendrán cada una de las cartas.

public void construyePanelSuperior() {
        panelSuperior = new JPanel();
        combo = new JComboBox(vectorCadena);
        panelSuperior.setLayout(new FlowLayout());
        panelSuperior.add(combo);
        panelSuperior.getPreferredSize();
    }

    public void construyePanelInferior() {
        panelInferior = new JPanel();
        cardLayout = new CardLayout();
        panelInferior.setLayout(cardLayout);
        /*Al agregar necesitamos 2 argumentos, el objeto a agregar y un nombre referencial */
        panelInferior.add(panelInf1, "Button 1,2,3");
        panelInferior.add(panelInf2, "Button 4,5");
    }

    public void construyePanelInf1() {
        panelInf1 = new JPanel(new FlowLayout());
        panelInf1.add(b1);
        panelInf1.add(b2);
        panelInf1.add(b3);
    }

    public void construyePanelInf2() {
        panelInf2 = new JPanel(new FlowLayout());
        panelInf2.add(b4);
        panelInf2.add(b5);
    }

public void construyePanelSuperior() {

panelSuperior = new JPanel();

combo = new JComboBox(vectorCadena);

panelSuperior.setLayout(new FlowLayout());

panelSuperior.add(combo);

panelSuperior.getPreferredSize();

}

public void construyePanelInferior() {

panelInferior = new JPanel();

cardLayout = new CardLayout();

panelInferior.setLayout(cardLayout);

/*Al agregar necesitamos 2 argumentos, el objeto a agregar y un nombre referencial */

panelInferior.add(panelInf1, "Button 1,2,3");

panelInferior.add(panelInf2, "Button 4,5");

}

public void construyePanelInf1() {

panelInf1 = new JPanel(new FlowLayout());

panelInf1.add(b1);

panelInf1.add(b2);

panelInf1.add(b3);

}

public void construyePanelInf2() {

panelInf2 = new JPanel(new FlowLayout());

panelInf2.add(b4);

panelInf2.add(b5);

}

En el constructor construimos el JFrame y los botones:

public EjemploCardLayout() {
        f = new JFrame("Card Layout");
        b1 = new JButton("Button 1");
        b2 = new JButton("Button 2");
        b3 = new JButton("Button 3");
        b4 = new JButton("Button 4");
        b5 = new JButton("Button 5");
    }

public EjemploCardLayout() {

f = new JFrame("Card Layout");

b1 = new JButton("Button 1");

b2 = new JButton("Button 2");

b3 = new JButton("Button 3");

b4 = new JButton("Button 4");

b5 = new JButton("Button 5");

}

Como hemos visto en la declaración de la clase, esta implementa la interface ActionListener para poder manejar eventos.

El método que vemos a continuación pertenece a dicha interface y lo utilizamos para detectar el evento provocado por el usuario al elegir una carta u otra.

En función de lo que se ha seleccionado en el combo se mostrará un panel inferior u otro.

public void actionPerformed(ActionEvent evento) {
        if (evento.getSource() == combo) {
            if (combo.getSelectedIndex() == 0) {
                cardLayout.show(panelInferior, "Button 1,2,3");
            }
            if (combo.getSelectedIndex() == 1) {
                cardLayout.show(panelInferior, "Button 4,5");
            }
        }
    }

public void actionPerformed(ActionEvent evento) {

if (evento.getSource() == combo) {

if (combo.getSelectedIndex() == 0) {

cardLayout.show(panelInferior, "Button 1,2,3");

}

if (combo.getSelectedIndex() == 1) {

cardLayout.show(panelInferior, "Button 4,5");

}

Para terminar con nuestro ejemplo vemos el método launchFrame que será el encargado de construir toda la interface gráfica y el método main a través del cual se ejecutará:

public void launchFrame() {
        construyePanelSuperior();
        construyePanelInf1();
        construyePanelInf2();
        construyePanelInferior();

        f.setLayout(new BoxLayout(f.getContentPane(), BoxLayout.Y_AXIS));
        f.add(panelSuperior);
        f.add(panelInferior);
        f.getPreferredSize();
        f.pack();
        f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        f.setVisible(true);

        //creamos el objeto controlador de eventos
        combo.addActionListener(this);
    }

public void launchFrame() {

construyePanelSuperior();

construyePanelInf1();

construyePanelInf2();

construyePanelInferior();

f.setLayout(new BoxLayout(f.getContentPane(), BoxLayout.Y_AXIS));

f.add(panelSuperior);

f.add(panelInferior);

f.getPreferredSize();

f.pack();

f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

f.setVisible(true);

//creamos el objeto controlador de eventos

combo.addActionListener(this);

}

Descargar ejemplo completo

Documentación oficial

GRIDLAYOUT

GridLayout coloca los componentes en filas y columnas. Cada componente ocupa la misma cantidad de espacio en el contenedor.

Al crear el diseño de la cuadrícula, es preciso especificar el número de filas y columnas. Si no se especifica, el administrador crea una fila y una columna. También se puede indicar la distancia horizontal y vertical entre los componentes.

package ejemplolayouts;

import java.awt.*;
import javax.swing.*;

public class EjemploGridLayout {

    private JFrame f;
    private JButton b1, b2, b3, b4, b5;

    public EjemploGridLayout() {
        f = new JFrame("Grid Example");
        b1 = new JButton("Button 1");
        b2 = new JButton("Button 2");
        b3 = new JButton("Button 3");
        b4 = new JButton("Button 4");
        b5 = new JButton("Button 5");
    }

    public void launchFrame() {
        f.setLayout(new GridLayout(3, 2));

        f.add(b1);
        f.add(b2);
        f.add(b3);
        f.add(b4);
        f.add(b5);

        f.pack();
        f.setVisible(true);
    }

    public static void main(String args[]) {
        EjemploGridLayout grid = new EjemploGridLayout();
        grid.launchFrame();
    }
}

package ejemplolayouts;

import java.awt.*;

import javax.swing.*;

public class EjemploGridLayout {

private JFrame f;

private JButton b1, b2, b3, b4, b5;

public EjemploGridLayout() {

f = new JFrame("Grid Example");

b1 = new JButton("Button 1");

b2 = new JButton("Button 2");

b3 = new JButton("Button 3");

b4 = new JButton("Button 4");

b5 = new JButton("Button 5");

}

public void launchFrame() {

f.setLayout(new GridLayout(3, 2));

f.add(b1);

f.add(b2);

f.add(b3);

f.add(b4);

f.add(b5);

f.pack();

f.setVisible(true);

}

public static void main(String args[]) {

EjemploGridLayout grid = new EjemploGridLayout();

grid.launchFrame();

}

Documentación oficial.

GRIDBAGLAYOUT

GridBagLayout organiza los componentes en filas y columnas, de forma similar a la del diseñador de cuadrículas, pero, para mayor flexibilidad, incluye opciones para cambiar el tamaño y especificar la posición de los componentes. Es un diseño utilizado para crear interfaces complejas.

Las restricciones aplicadas a los componentes se especifican mediante la clase GridBagConstraints. Algunas restricciones de esta clase son gridwidth, gridheight, gridx, gridy, weightx y weighty.

En la siguiente figura vemos un ejemplo de este administrador de diseño.