8.3.1 Disposición en caja

 

Hola a todos, ya vimos las disposiciones en el apartado de Layouts en esta ocasión las vamos a ver de forma más avanzada empezaremos viendo la disposición en caja o en box.

Algunas disposiciones que vimos, concretamente, tres en el apartado Layouts:

·         FlowLayout

·         BorderLayout

·         GridLayout

La disposición en caja consiste en crear una caja y dentro de esa caja meter varios elementos, por ejemplo, botones, campos de texto, etiquetas… Podemos tener en un marco varias cajas y en cada caja contener varios elementos distribuidos de una forma organizada. A diferencia de los layouts o disposiciones que vimos en su día y que se han comentado al principio del post, la disposición de caja permite la distribución de los elementos en la ventana de forma más eficiente.

Para crear disposición en caja se utiliza la clase Box que tiene entre otros estos métodos:

·         createHorizontalBox(): posicionar las cajas una al lado de otra de forma horizontal.

·         createVerticalBox(): posicionar las cajas una al lado de otra de forma vertical.

·         createVerticalStrut(int height): separación de las cajas una de la otra cuando están en vertical.

·         createHorizontal(Strut(int width): separación de las cajas una de la otra cuando están en horizontal.

·         createGlue(): es un elemento invisible cuyos elementos visibles, por ejemplo, botones tienen un ancho máximo o alto.

Dentro de un marco podemos crear una caja vertical, dentro de esta caja vertical podemos crear una o varias cajas de forma horizontal, algo así:

Con varias cajas horizontales:

Esta última imagen vamos a hacerla mediante una práctica. Dentro del marco crearemos una caja vertical, dentro de esta caja vertical crearemos tres cajas horizontales. En la primera caja horizontal crearemos una etiqueta “Usuario” y un campo de texto. En la segunda caja crearemos otra etiqueta “Contraseña” y un campo de texto. Y en la tercera caja dos botones Aceptar y Cancelar.

Nos creamos nuestra primera clase PruebaDisposiciones.java con el siguiente código:

package graficas;

 

import javax.swing.JFrame;

 

public class PruebaDisposiciones {

 

      public static void main(String[] args) {

           

            MarcoCaja mimarco = new MarcoCaja();

           

            mimarco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

           

            mimarco.setVisible(true);

 

      }

 

}

class MarcoCaja extends JFrame {

     

      public MarcoCaja() {

           

            setTitle("Marco en la caja");

           

            setBounds(600, 350, 200, 200);

      }

     

}

Es un código muy fácil que ya hemos visto, tenemos la clase MarcoCaja dentro del constructor de esta clase está el tamaño del marco y el título, en la clase principal instanciamos la clase MarcoCaja, el método que finaliza la aplicación el botón cerrar de la barra de título y la ventana visible mediante el método setVisible.

Nos situamos dentro del constructor y creamos los dos primeros elementos que van a ir a la primera caja horizontal que es una etiqueta y un campo de texto:

             JLabel rotulo1 = new JLabel("Usuario");

 

         JTextField user = new JTextField(10); //Establecemos un tamaño de 10

Establecemos el tamaño máximo para no tener problemas al redimensionar la ventana:

user.setMaximumSize(user.getPreferredSize());

Creamos la primera caja horizontal:

Box cajaH1 = Box.createHorizontalBox();

Añadimos la etiqueta y el campo de texto, entre estos dos objetos añadimos una separación createHorizontalStrut():

         cajaH1.add(rotulo1);

 

         cajaH1.add(Box.createHorizontalStrut(10));

 

         cajaH1.add(user);

Creamos los dos objetos para la segunda caja horizontal que es la etiqueta Contraseña y el campo de texto, creamos una separación entre estos dos elementos:

         JLabel rotulo2 = new JLabel("Contraseña");

 

         JTextField pass = new JTextField(10); //Establecemos un tamaño de 10

 

         pass.setMaximumSize(pass.getPreferredSize());

Creamos la segunda caja horizontal y añadimos los objetos:

         Box cajaH2 = Box.createHorizontalBox();

 

         cajaH2.add(rotulo2);

 

         cajaH2.add(Box.createHorizontalStrut(10));

 

         cajaH2.add(pass);

Hacemos lo mismo para la tercera caja, pero en este caso serán dos botones, utilizamos el método createGlue para que haya una separación entre ellos cuando se redimensione la ventana, creamos la tercera caja y añadimos los objetos a la caja:

         JButton boton1 = new JButton("Aceptar");

 

         JButton boton2 = new JButton("Cancelar");

 

         Box cajaH3 = Box.createHorizontalBox();

 

         cajaH3.add(boton1);

 

         cajaH3.add(Box.createGlue());

 

         cajaH3.add(boton2);

Ahora tenemos que meter estos tres contenedores horizontales en un contenedor vertical, que va ser el contendor padre:

Box cajaV = Box.createVerticalBox();

 

         cajaV.add(cajaH1);

 

         cajaV.add(cajaH2);

 

         cajaV.add(cajaH3);

 

         add(cajaV, BorderLayout.CENTER); //Disposición en el centro del marco

Probamos:

Si redimensionamos la ventana vemos cómo funciona el método setMaximumSize() que es la separación entre la etiqueta y el campo de texto y el método createGlue() que separan los botones:

Y esto ha sido todo en cuanto a la disposición en caja os espero en el siguiente post seguiremos viendo las disposiciones. Saludos!

8.2 BARRA DE HERRAMIENTAS II << >> 8.3.2Disposición en muelle