Universidad Carlos III de Madrid

Ingeniería de Telecomunicación

Enero-Mayo 2010 / January-May 2010

Interfaces Gráficas de Usuario

Tabla de contenidos

1. Laboratorio: Interfaces Gráficas de Usuario
1.1. Elementos pasivos en GUIs
1.2. Practicar con el Manejador de Ventanas
1.3. Introducción a los diferentes LayOuts
2. Actividades para casa
2.1. Practicar diferentes Layouts
2.2. Layout del proyecto

Lab Section1. Laboratorio: Interfaces Gráficas de Usuario

Time90 min

Exercise Section1.1. Elementos pasivos en GUIs

Time30 min

Probablemente uno de los elementos gráficos más sencillos y más habituales son las etiquetas de texto (javax.swing.JLabel). A continuación tienes el código de una GUI muy sencilla que muestra una ventana con una etiqueta de texto (En este caso la opción add de nuestro proyecto Catalogo): 

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;  

class GUIcat_v0 {

    public static void main(String args[]) {
        JFrame frame = new JFrame("GUI catalogue_v0");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel contentPane = (JPanel) frame.getContentPane();
        JLabel label = new JLabel("1. Add catalogue item");
        contentPane.add(label);

        frame.setSize(300,75);
        frame.setVisible(true);
    }
}

Descargar este código

  1. Compila y prueba este programa

  2. Enumera en un papel los nombres de las clases de los objetos que se crean en una ejecución de este programa.

  3. Abre la API de Java y localiza dichas clases. ¿En qué paquete las puedes encontrar?

  4. Enumera los métodos que se invocan en una ejecución de este programa, acompáñalos de las clases a las que pertenecen (siguiendo su estructura de herencia). No olvides los constructores.

  5. Intenta explicar, por escrito, qué hace cada una de las líneas de este código. Cuando acabes todos los ejercicios de esta práctica vuelve a este apartado y repasa tus notas a ver si puedes añadir algo nuevo.

  6. Escribe un programa HelloWorldGUIBig igual que HelloWorldGUI donde la ventana sea 4 veces más grande.

  7. Escribe un programa HelloWorldGUIColor igual que HelloWorldGUI donde el fondo de la etiqueta tenga color azul.

Soluciones

Las soluciones para los apartados 1-5 no se muestran aquí. Preguntad al profesor. 

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;  

class HelloWorldGUI {

    public static void main(String args[]) {
        JFrame frame = new JFrame("HelloWorldGUI window title");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel contentPane = (JPanel) frame.getContentPane();
        JLabel label = new JLabel("Hello World!");
        contentPane.add(label);

        frame.setSize(100,50);
        frame.setVisible(true);
    }
}

La solución del apartado 6 es la siguiente: 

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;

class HelloWorldGUIBig {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;

        frame = new JFrame("HelloWorldGUIBig");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane = (JPanel) frame.getContentPane();
        label = new JLabel("Hello World!");
        contentPane.add(label);

        frame.setSize(400,200);
        frame.setVisible(true);
    }
}

El apartado 7 se resuelve con el siguiente código: 

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import java.awt.Color;

class HelloWorldGUIColor {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;

        frame = new JFrame("HelloWorldGUIColor");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane = (JPanel) frame.getContentPane();
        label = new JLabel("Hello World!");
        label.setOpaque(true);
        label.setBackground(Color.BLUE);
        contentPane.add(label);

        frame.setSize(100,50);
        frame.setVisible(true);
    }
}

Exercise Section1.2. Practicar con el Manejador de Ventanas

Time40 min

Un Manejador de Ventanas es un programa que se encarga de controlar las ventanas presentes en un entorno gráfico. Los Manejadores de Ventanas permiten al usuario tratar las ventanas sin necesidad de comunicarse con los programas que las han creado. Así, un Manejador de Ventanas permite al usuario realizar las siguientes operaciones sobre las ventanas de su entorno gráfico: crear y destruir ventanas, mover y redimensionar ventanas, cambiar la ventana activa (selección de foco) y ocultar y hacer reaparecer ventanas ocultas.

Es por eso que los programas que abren ventanas, además de comunicarse con el usuario, tienen que comunicarse con el Manejador de Ventanas, es decir un programa gráfico tendrá que tener las siguientes interfaces de comunicación:

  • Una interfaz para que el usuario se comunique con el programa. Puede ser la entrada estándar y/o botones y otros elementos gráficos que se muestren en la ventana.

  • Una interfaz para que el programa se comunique con el usuario. Puede ser la salida estándar y/o etiquetas de texto y dibujos que pinte en la ventana.

  • Una interfaz para que la ventana se comunique con el manejador de ventanas y viceversa. Por ejemplo, cuando el usuario se comunica con el manejador de ventanas pidiendo que se cierre la ventana (pulsando el botón en forma de aspa de una ventana Windows), el Manejador de Ventanas le pasa el mensaje a la ventana y esta al programa que la controla para que se termine su ejecución.

La mayoría de los entornos gráficos modernos permiten correr sobre ellos diferentes Manejadores de Ventanas, cada uno con diferentes maneras de trabajar, unos más cómodos otros menos, unos más bonitos y otros más toscos. En el sistema operativo Windows XP, solo utiliza, por defecto, un único Manejador de Ventanas. Probablemente este es el único Manejador de Ventanas que conozcas, pero hay muchos más (cientos).

Normalmente, los Manejadores de Ventanas se comunican con el usuario mediante una serie de decoraciones que añaden a las ventanas (por ejemplo, un borde fino, una barra de título y algunos botones). Estas decoraciones, junto con algunas combinaciones de teclas (Alt-Tab por ejemplo), permiten al usuario mandar instrucciones al Manejador de Ventanas sobre lo que se quiere hacer con sus ventanas (maximizarlas, ocultarlas...).

La clase JFrame tiene una serie de métodos que permiten a la ventana comunicarse con el Manejador de Ventanas y viceversa:

  • setVisible(boolean b)

    Por defecto, las nuevas ventanas no se hacen visibles en la pantalla. Utiliza este método para hacer una ventana visible. No lo hagas nada más crearla, probablemente quieras configurar algunos detalles de tu ventana antes de hacerla visible.

  • setLocation(int x, int y)

    Por defecto, las nuevas ventanas que crees aparecen en la posición (0,0), que es la esquina superior izquierda de la pantalla. Con este método puedes elegir donde quieres que aparezca. El eje x crece hacia la derecha el y hacia abajo

  • setUndecorated(boolean b)

    Por defecto, el Manejador de Ventanas añade su propia decoración a las ventanas que tú creas (normalmente una barra de título y algunos botones para manejar la ventana), si quieres que no lo haga utiliza este método. Nota: Es ilegal cambiar la decoración de la ventana una vez esta ya ha sido hecha visible.

    Nota

    Algunos Manejadores de Ventanas, como el de Windows XP se comunican principalmente con el usuario mediante estas decoraciones, si las quitas puede ser difícil para el usuario manejar las ventanas.

  • setExtendedEstate(int state)

    Las ventanas pueden estar en varios estados dentro del Manejador de Ventanas, pueden estar visibles, iconificadas (ocultas), maximizadas... Utiliza este método para modificar el estado de la ventana. No todos los sistemas admiten todos los estados.

  • setDefaultLookAndFeelDecorated(boolean b)

    Por defecto, las nuevas ventanas están decoradas según las preferencias del Manejador de Ventanas en que estamos trabajando. Este decorado puede ser sobreescrito por el del "Look and Feel" que hayamos escogido previamente.

  • setDefaultCloseOperation(int operation)

    Cuando un usuario le pide a su Manejador de Ventanas que cierre una ventana, el Manejador de Ventanas le pide a la ventana que ejecute una cierta operación, normalmente matar el proceso. Mediante este método podemos configurar el comportamiento de nuestra ventana para que realice otras operaciones, por ejemplo ignorar el mensaje o realizar alguna operación alternativa (como mostrar un diálogo de confirmación de cierre)

Para la realización de este ejercicio, realiza las siguientes tareas que se enumeran a continuación:

  1. Consulta el API de Java e intenta entender la descripción de cada uno de estos métodos.

  2. Escribe un programa HelloWorldGUIDeaf parecido a HelloWorldGUI que ignore el mensaje de cierre del Manejador de Ventanas. Pruébalo. ¿Cómo se puede cerrar la ventana ahora?

  3. Escribe un programa HelloWorldGUIUndecorated parecido a HelloWorldGUI que no utilice ninguna decoración del Manejador de Ventanas.

  4. Escribe un programa HelloWorldGUIDecorated parecido a HelloWorldGUI que utilice el "Look and Feel" por defecto de Java en vez de el del manejador de ventanas que estés utilizando.

Soluciones

Las soluciones se pueden ver en los siguientes listados:

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;

class HelloWorldGUIDeaf {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;

        frame = new JFrame("HelloWorldGUIDeaf");
        frame.setDefaultCloseOperation(JFrame.DO_NOTHING_ON_CLOSE);

        contentPane = (JPanel) frame.getContentPane();
        label = new JLabel("Hello World!");
        contentPane.add(label);

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

	  
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;

class HelloWorldGUIUndecorated {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;

        frame = new JFrame("HelloWorldGUIUndecorated");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane = (JPanel) frame.getContentPane();
        label = new JLabel("Hello World!");
        contentPane.add(label);

        frame.setSize(100,50);
        frame.setUndecorated(true);
        frame.setVisible(true);
    }
}
	  
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;

class HelloWorldGUIDecorated {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;

        JFrame.setDefaultLookAndFeelDecorated(true);
        frame = new JFrame("HelloWorldGUIDecorated");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        contentPane = (JPanel) frame.getContentPane();
        label = new JLabel("Hello World!");
        contentPane.add(label);

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

Exercise Section1.3. Introducción a los diferentes LayOuts

Time20 min

Normalmente, las interfaces gráficas de un programa contienen un número elevado de componentes, que pueden ser de diferentes tipos. Por ello, hace falta un método para distribuir dichos componentes sobre la ventana que los contiene.

Los diferentes Layouts de Swing cubren esta necesidad. A través de políticas estándar de posicionamiento, se indican unas directrices genéricas de forma que el LayoutManager se encarga de cumplirlas lo más fielmente posible.

Cada JPanel tiene una política de posicionamiento asociada, la cual se puede configurar según la necesidad. En este ejercicio se trabajará con un tipo de Layout denominado BorderLayout (notese que en inglés "border" quiere decir "frontera"), que además está configurado por defecto en el contentPane de un JFrame.

  1. Escribe una primera versión de un programa llamado CompassSimple que sea igual que HelloWorldGUIColor pero que muestre la etiqueta en fondo negro, el texto blanco y la ventana de tamaño 400x200.

  2. Modifica el programa CompassSimple para que muestre 4 etiquetas:

    • Texto: "North", color del fondo: negro, color del texto: blanco

    • Texto: "South", color del fondo: blanco, color del texto: negro

    • Texto: "East", color del fondo: azul, color del texto: rojo

    • Texto: "West", color del fondo: rojo, color del texto: azul

    Cada una de ellas debe estar colocada en la ventana según las directrices que marca su texto en un BorderLayout. No hagas consideraciones estéticas sobre el resultado. Te será útil consultar en el API de Java información sobre métodos y atributos de las siguientes clases. 

    java.awt.Container //especialmente las variantes del método add()

java.awt.BorderLayout //tiene una serie de interesantes atributos estáticos

    Mediante el manejador de ventanas, modifica el tamaño de la ventana y comprueba cómo las etiquetas se posicionan correctamente de forma automática.

  3. Cuando creas una etiqueta, ¿qué alineado horizontal tiene por defecto su texto? ¿y vertical?

Solución

Las soluciones se pueden ver en los siguientes listados: 

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import java.awt.Color;
import java.awt.BorderLayout;
import java.awt.Frame;

class CompassSimple {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;

        frame = new JFrame("CompassSimple");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        contentPane = (JPanel) frame.getContentPane();

        label = new JLabel("North");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        contentPane.add(label, BorderLayout.NORTH);

        label = new JLabel("South");
        label.setOpaque(true);
        label.setBackground(Color.WHITE);
        label.setForeground(Color.BLACK);
        contentPane.add(label, BorderLayout.SOUTH);

        label = new JLabel("East");
        label.setOpaque(true);
        label.setBackground(Color.BLUE);
        label.setForeground(Color.RED);
        contentPane.add(label, BorderLayout.EAST);

        label = new JLabel("West");
        label.setOpaque(true);
        label.setBackground(Color.RED);
        label.setForeground(Color.BLUE);
        contentPane.add(label, BorderLayout.WEST);

        if (frame.getToolkit().isFrameStateSupported(Frame.MAXIMIZED_BOTH))
            frame.setExtendedState(Frame.MAXIMIZED_BOTH);
        else
            frame.setSize(frame.getToolkit().getScreenSize());
        frame.setVisible(true);
    }
}

Homework Section2. Actividades para casa

Time180 min

Exercise Section2.1. Practicar diferentes Layouts

Time45 min

Partiremos del ejercio de introducción de los diferentes tipos de Layouts que se ha realizado en la sesión de laboratorio. Para ello, realiza los siguientes apartados que se enuncian a continuación:

  1. Escribe un programa CompassBetter que centre el texto de las etiquetas en cada etiqueta y tengan todas color de fondo negro y texto blanco.

  2. Ya sabes que las etiquetas pueden contener texto, pero también pueden contener imágenes. Escribe un programa CompassMuchBetter parecido a CompassBetter pero que incluya una etiqueta con esta imagen en el centro. Ten cuidado con el path de la imagen.

    El resultado debería ser algo como esto (los bordes son la decoración del manejador de ventanas donde se tomó la imagen, en tu sistema pueden ser diferentes):

  3. El método JFrame.pack() calcula el tamaño mínimo de una ventana para que pueda acomodar todos los componentes que contiene de forma razonable y llama a JFrame.setSize() sobre ese tamaño. Escribe un programa CompassMuchBetterSmall parecido a CompassMuchBetter pero que la ventana que muestre sea del tamaño mínimo necesario.

  4. Escribe un programa HelloWorldGUICentered parecido a HelloWorldGUI que muestre su ventana centrada en la pantalla y con el tamaño calculado automáticamente.

    Sugerencia

    El tamaño de la pantalla se puede obtener mediante JFrame.getToolkit().getScreenSize() y el tamaño de la ventana se puede obtener mediante JFrame.getWidth() y JFrame.getHeight().

  5. Escribe un método centerAndShowFrame(JFrame frame, double xScale, double yScale) que centre una ventana en la pantalla, la redimensione al tamaño mínimo necesario escalado por los valores de xScale e yScale y la haga visible. Utiliza dicho método en un programa CompassMuchBetterCentered. Puedes encapsular este método en una clase FrameUtilities y utilizarlo para el resto de los programas que hagas en el futuro.

Soluciones

Las soluciones se pueden ver en los siguientes listados:

BorderTest

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import java.awt.Color;
import java.awt.GridLayout;
import javax.swing.border.TitledBorder;
import javax.swing.border.LineBorder;

class BorderTest {
    private static final int NUM_ROWS = 20;

    private static boolean isEven(int i) {
        if (i % 2 == 0)
            return true;
        else
            return false;
    }

    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;

        JFrame.setDefaultLookAndFeelDecorated(true);
        frame = new JFrame("BorderTest");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        contentPane = (JPanel) frame.getContentPane();
        contentPane.setLayout(new GridLayout(NUM_ROWS,1));
        contentPane.setBorder(new TitledBorder(
                    new LineBorder(Color.BLACK, 1)
                    , "contentPane(GridLayout)"));

        for (int i=0; i<NUM_ROWS; i++) {
            label = new JLabel("label " + i);
            label.setOpaque(true);
            if (isEven(i)) {
                label.setBackground(Color.WHITE);
                label.setForeground(Color.BLACK);
            } else {
                label.setBackground(Color.BLACK);
                label.setForeground(Color.WHITE);
            }
            label.setHorizontalAlignment(JLabel.CENTER);
            label.setVerticalAlignment(JLabel.CENTER);
            contentPane.add(label);
        }

        FrameUtilities.centerAndShowFrame(frame, 3.0, 1.2);
    }
}

CompassBetter

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import java.awt.Color;
import java.awt.BorderLayout;
import java.awt.Frame;

class CompassBetter {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;

        frame = new JFrame("CompassBetter");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        contentPane = (JPanel) frame.getContentPane();

        label = new JLabel("North");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.NORTH);

        label = new JLabel("South");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.SOUTH);

        label = new JLabel("East");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.EAST);

        label = new JLabel("West");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.WEST);

        if (frame.getToolkit().isFrameStateSupported(Frame.MAXIMIZED_BOTH))
            frame.setExtendedState(Frame.MAXIMIZED_BOTH);
        else
            frame.setSize(frame.getToolkit().getScreenSize());
        frame.setVisible(true);
    }
}

CompassMuchBetter

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import java.awt.Color;
import java.awt.BorderLayout;
import java.awt.Frame;
import javax.swing.ImageIcon;

class CompassMuchBetter {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;
        ImageIcon arrow;

        frame = new JFrame("CompassMuchBetter");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        contentPane = (JPanel) frame.getContentPane();

        label = new JLabel("North");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.NORTH);

        label = new JLabel("South");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.SOUTH);

        label = new JLabel("East");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.EAST);

        label = new JLabel("West");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.WEST);

        arrow = new ImageIcon("./arrow.jpg");
        label = new JLabel(arrow);
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.CENTER);

        frame.setSize(200,200);
        frame.setVisible(true);
    }
}

CompassMuchBetterCentered

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import java.awt.Color;
import java.awt.BorderLayout;
import java.awt.Frame;
import javax.swing.ImageIcon;

class CompassMuchBetterCentered {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;
        ImageIcon arrow;

        frame = new JFrame("CompassMuchBetter");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        contentPane = (JPanel) frame.getContentPane();

        label = new JLabel("North");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.NORTH);

        label = new JLabel("South");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.SOUTH);

        label = new JLabel("East");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.EAST);

        label = new JLabel("West");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.WEST);

        arrow = new ImageIcon("./arrow.jpg");
        label = new JLabel(arrow);
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.CENTER);

        FrameUtilities.centerAndShowFrame(frame, 1.2, 1.2);
    }
}

CompassMuchBetterSmall

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import java.awt.Color;
import java.awt.BorderLayout;
import java.awt.Frame;
import javax.swing.ImageIcon;

class CompassMuchBetterSmall {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;
        ImageIcon arrow;

        frame = new JFrame("CompassMuchBetter");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        contentPane = (JPanel) frame.getContentPane();

        label = new JLabel("North");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.NORTH);

        label = new JLabel("South");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.SOUTH);

        label = new JLabel("East");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.EAST);

        label = new JLabel("West");
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setForeground(Color.WHITE);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.WEST);

        arrow = new ImageIcon("./arrow.jpg");
        label = new JLabel(arrow);
        label.setOpaque(true);
        label.setBackground(Color.BLACK);
        label.setHorizontalAlignment(JLabel.CENTER);
        label.setVerticalAlignment(JLabel.CENTER);
        contentPane.add(label, BorderLayout.CENTER);

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

HelloWorldGUICentered

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import java.awt.Dimension;

class HelloWorldGUICentered {
    public static void main(String args[]) {
        JFrame frame;
        JPanel contentPane;
        JLabel label;
        Dimension screenDim;
        int screenWidth, screenHeight;
        int frameWidth, frameHeight;

        frame = new JFrame("HelloWorldGUIiCentered");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        screenDim = frame.getToolkit().getScreenSize();
        screenWidth = (int) screenDim.getWidth();
        screenHeight = (int) screenDim.getHeight();

        contentPane = (JPanel) frame.getContentPane();
        label = new JLabel("Hello World!");
        contentPane.add(label);

        frame.pack();
        frameWidth = frame.getWidth();
        frameHeight = frame.getHeight();
        frame.setLocation(screenWidth/2 - frameWidth/2,
                screenHeight/2 - frameHeight/2);
        frame.setVisible(true);
    }
}

FrameUtilities

import javax.swing.JFrame;
import java.awt.Dimension;

class FrameUtilities {
    public static void centerAndShowFrame(JFrame frame, double xScale, double yScale) {
        Dimension screen;
        int screenWidth, screenHeight;
        int frameWidth, frameHeight;

        screen = frame.getToolkit().getScreenSize();
        screenWidth  = (int) screen.getWidth();
        screenHeight = (int) screen.getHeight();

        frame.pack();
        frameWidth  = frame.getWidth();
        frameHeight = frame.getHeight();
        frame.setSize((int)(frameWidth*xScale), (int)(frameHeight*yScale));
        frameWidth  = frame.getWidth();
        frameHeight = frame.getHeight();
        frame.setLocation(screenWidth/2 - frameWidth/2,
                screenHeight/2 - frameHeight/2);
        frame.setVisible(true);
    }
}

Exercise Section2.2. Layout del proyecto

Time45 min

Vamos a realizar el diseño del layout del proyecto. Lo haremos por etapas para llegar al diseño final.

  1. Escribe un programa GUIcat_menu.java que muestra las etiquetas que componen el menu de nuestro CardDeck de acuerdo a la figura

  2. Escribe un programa GUIcat_buttons.java que muestra los botones de selección de Cards dentro de nuestro CardDeck de acuerdo a la figura

  3. Escribe un programa GUIcat_form.java que presenta las opciones del formulario

Soluciones

Las soluciones se pueden ver en los siguientes listados:

GUIcat_menu

package ProjectCatalogue;

import java.awt.Container;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.GridLayout;
import java.awt.Toolkit;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class GUI_0 extends JFrame{

	private static final long serialVersionUID = 1L;

	private Container contenedor;
	private JPanel labels;
	
	  ////////////////////////////////////////////////////////////////////////////////////////////////////////////

	  // set up GUI 
	GUI_0 (){

		super( "Catalogue GUI" );
		contenedor = getContentPane();
		
		contenedor.setLayout(new FlowLayout()); 
		
		labels = new JPanel(new GridLayout(8,1));

		labels.add(new JLabel("1. Add catalogue item"));
		labels.add(new JLabel("2. Remove catalogue item (by name)"));
		labels.add(new JLabel("3. Retrieve catalogue item (by name)"));
		labels.add(new JLabel("4. Sort catalogue (by rate)"));
		labels.add(new JLabel("5. Print catalogue"));
		labels.add(new JLabel("6. Remove all elements"));
		labels.add(new JLabel("7. Undo"));
		labels.add(new JLabel("8. Exit" ));
		
		contenedor.add(labels);
						 
		pack();
		
		// Shows this window in the middle of the screen
		Dimension screen = Toolkit.getDefaultToolkit().getScreenSize();
		int X = (screen.width / 2) - (this.getWidth() / 2); // Center horizontally.
		int Y = (screen.height / 2) - (this.getHeight() / 2); // Center vertically.

		setBounds(X,Y , this.getWidth(),this.getHeight());		
		 		
		setVisible( true );   
		
	} // 


	
	public static void main(String [] args){

		GUI_0 application = new GUI_0();
		application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
	}

} // end class GUIcatalogo

GUIcat_buttons

package ProjectCatalogue;

import java.awt.Container;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.GridLayout;
import java.awt.Toolkit;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class GUIcat_buttons extends JFrame{

	private static final long serialVersionUID = 1L;

	private Container contenedor;
	
	private JPanel options;

	
	private JButton [] butOptions;
	

	  ////////////////////////////////////////////////////////////////////////////////////////////////////////////

	  // set up GUI 
	GUIcat_buttons (){

		super( "Catalogue GUI" );
		contenedor = getContentPane();
		contenedor.setLayout(new FlowLayout()); 
		
		options = new JPanel(new GridLayout(8,1));		

		////////////////////////////////
		
		butOptions = new JButton[8];
		
		for (int i = 0; i < 8; i++){
			butOptions[i] = new JButton(Integer.toString(i+1));
			options.add( butOptions[i]);
		}
				
		contenedor.add(options);

		
		pack();
		
		// Shows this window in the middle of the screen
		Dimension screen = Toolkit.getDefaultToolkit().getScreenSize();
		int X = (screen.width / 2) - (this.getWidth() / 2); // Center horizontally.
		int Y = (screen.height / 2) - (this.getHeight() / 2); // Center vertically.

		setBounds(X,Y , this.getWidth(),this.getHeight());		
		 		
		setVisible( true );   
		} 
	
	////////////////////////////////////////////////////////////////////////////////////////////////////
			
	public static void main(String [] args){
		GUIcat_buttons application = new GUIcat_buttons();
		application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
	}

} // end class GUIcatalogo

GUIcat_form

package ProjectCatalogue;

import java.awt.Container;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Font;
import java.awt.GridLayout;
import java.awt.Toolkit;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.SwingConstants;

public class GUI_4 extends JFrame{

	private static final long serialVersionUID = 1L;

	private Container contenedor;

	private JLabel lab1, lab2, lab3, lab4;
	private JTextField winForm1, winForm2; 
	private JTextField winForm3, winForm4;
	private JPanel panelAdd;
	private JPanel panel1, panel2, panel3, panel4;

	  ////////////////////////////////////////////////////////////////////////////////////////////////////////////

	  GUI_4 (){

		super( "Catalogue GUI" );
		contenedor = getContentPane();

		contenedor.setLayout(new FlowLayout()); 

		// RIGHT PANEL
		panelAdd = new JPanel(new GridLayout(5,1));

		// panel1 contains Options form field Name		 
		panel1 = new JPanel(new FlowLayout());
		lab1 =  new JLabel("name         :", SwingConstants.RIGHT);							  
		lab1.setFont(new Font("Helvetica", Font.PLAIN, 14));
		panel1.add(lab1);		
		winForm1 = new JTextField (20);
		panel1.add( winForm1);

		// panel2 contains Options form field Description         
		panel2 = new JPanel(new FlowLayout());
		lab2 =  new JLabel("description :", SwingConstants.RIGHT);			                   	
		lab2.setFont(new Font("Helvetica", Font.PLAIN, 14));
		panel2.add(lab2);
		winForm2 = new JTextField (20);		
		panel2.add( winForm2);

		// panel3 contains Options form field Category (a/b/c)
		panel3 = new JPanel(new FlowLayout());
		lab3 =  new JLabel("category    :", SwingConstants.RIGHT);	
		lab3.setFont(new Font("Helvetica", Font.PLAIN, 14));
		panel3.add(lab3);		
		winForm3 = new JTextField (20);		
		winForm3.setAlignmentX(LEFT_ALIGNMENT);
		panel3.add( winForm3);

		// panel4 contains Options form InfoRate
		panel4 = new JPanel(new FlowLayout());
		lab4 =  new JLabel( "info to rate :", SwingConstants.RIGHT);
		lab4.setFont(new Font("Helvetica", Font.PLAIN, 14));
		panel4.add(lab4);		
		winForm4 = new JTextField (20);		
		panel4.add( winForm4);

		panelAdd.add( panel1);
		panelAdd.add( panel2); 
		panelAdd.add( panel3);			
		panelAdd.add( panel4);	
		
		contenedor.add(panelAdd);

		pack();
		
		// Shows this window in the middle of the screen
		Dimension screen = Toolkit.getDefaultToolkit().getScreenSize();
		int X = (screen.width / 2) - (this.getWidth() / 2); // Center horizontally.
		int Y = (screen.height / 2) - (this.getHeight() / 2); // Center vertically.

		setBounds(X,Y , this.getWidth(),this.getHeight());		
		 		
		setVisible( true );   
		
	} // 


	
	public static void main(String [] args){

		GUI_4 application = new GUI_4();
		application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
	}

} // end class GUIcatalogo