Swing - Tutorial (Interfaces Graficas)
Swing - Tutorial (Interfaces Graficas)
FRAMES
Un JFrame es una ventana GUI para agregar componentes. En este punto, no agregamos ningún
componente. En primer lugar, creamos una instancia de un JFrame:
1. import javax.swing.JFrame;
1. frame.setVisible(true);
1. frame.setSize(420,420);
2. //420, 420: componentes x e y de las dimensiones.
Para evitar que el usuario cambie el tamaño de la ventana, se usa el siguiente comando. Esto también
impide que se pueda poner en pantalla completa
1. frame.setResizable(false);
Cuando haces click en la “X”, la ventana se va a “esconder”, pero el programa no se cerrará, va a estar
ejecutándose en segundo plano. Se puede programar que el programa se cierre pulsando la “X”:
1. frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Para cambiar el icono de la ventana (que aparece en la esquina superior izquierda), tienes que poner la
imagen en la carpeta del proyecto. Entonces se crea un nuevo objeto imagen y se asigna al frame:
1. frame.getContentPane().setBackground(Color.green);
Dentro de la función setBackground() se puede poner el color. Hay algunos colores predeterminados,
como el rojo o el verde. Si no te gustan ninguno de esos colores, puedes crear un nuevo color:
1. frame.getContentPane().setBackground(new Color(0,0,0));
Los ceros representan los valores R-G-B. 0-0-0 es y 255-255-255 es blanco. Puedes jugar con la cantidad
de rojo, verde y azul para crear cualquier color. También puedes poner un número en hexadecimal.
Otra forma de crear JFrames es usar la herencia. Vas a crear una clase que herede de la clase JFrame y
vas a crear el constructor con todas las informaciones del JFrame. Después, el frame se instancia en la
clase main.
1. import javax.swing.JFrame;
2. public class MyFrame extends JFrame{
3. MyFrame(){
4. this.setTitle("Hello World");
5. //aquí se pone todo lo referente al JFrame
6. }
7. }
8.
9. //En la clase principal:
10. MyFrame frame = new MyFrame();
2. LABELS
Un JLabel es un componente GUI que muestra un texto, una imagen o ambas cosas. Primero, se debe
crear un JFrame para poder colocar etiquetas en ellos. Después, se crean las etiquetas:
1. label1.setText("Hello World");
1. frame.add(label1);
Es posible agregar una imagen al JLabel. En primer lugar, pon la imagen en la carpeta del proyecto, luego
se crea un objeto tipo imagen y se asigna la imagen al JLabel:
1. label1.setHorizontalTextPosition(JLabel.CENTER);
2. //Posibles opciones: LEFT, CENTER, RIGHT
3. label1.setVerticalTextPosition(JLabel.TOP);
4. //Posibles opciones TOP, CENTER, BOTTOM
1. label1.setForeground(new Color(0,0,0));
Para cambiar la distancia entre un texto y el icono (imagen) asociado a ese texto:
1. label1.setIconTextGap(100);
Es posible cambiar el número, o incluso ponerlo negativo para acercar texto e imagen.
Para cambiar el color de fondo de las JLabels. Debes activar la opacidad o de lo contrario no se mostrará
el color de fondo:
1. label1.setBackground(new Color(0,0,0));
2. label1.setOpaque(true);
Normalmente, los textos o imágenes están centrados verticalmente y se ponen a la izquierda del todo.
Si quieres modificar la posición del texto o imagen dentro del JLabel, hay dos funciones que nos van a
ayudar (cambiar posición vertical y horizontal):
1. label.setVerticalAlignment(JLabel.TOP);
2. //posibilidades: TOP, CENTER, BOTTOM
3. label.setHorizontalAlignment(JLabel.CENTER);
4. //posibilidades: RIGHT, CENTER, LEFT
Los JLabels ocupan el máximo tamaño posible (y por tanto el color de fondo también se extiende a todo
el JFrame) con el layout predeterminado. Para limitar el tamaño del JLabel dentro del JFrame, se usa el
siguiente comando:
1. frame.setLayout(null);
2. label.setBounds(x, y, width, length);
Atención, se debe tomar en primer lugar el JFrame, no el JLabel. Si no se especifican las coordenadas y
dimensiones del label, el predeterminado será 0,0 y no se verá nada en pantalla.
Nota: La posición (x,y) es dónde va a estar el JLabel dentro del JFrame y las dimensiones (width, length)
es el tamaño del JLabel. Si se cambia el tamaño del JFrame, el JLabel se va a quedar siempre en el mismo
sitio.
El siguiente método es bastante útil y va a cambiar el tamaño de todos los componentes para
acomodarlos al JFrame. Debes añadir todos los componentes antes de usarlo, o no va a funcionar bien:
1. frame.pack();
3. PANELS
Los JPanels son componentes GUI que funcionan como “contenedores” para almacenar otros
componentes. Puede servir para dividir secciones dentro de un JFrame. Primero se debe crear el JFrame.
Crear un JPanel:
1. panel.setBackground(Color.red);
1. panel.setBounds(x,y,width,length);
1. frame.add(panel);
Cuando creas una etiqueta, puedes añadirla al JFrame, o a cualquiera de los JPanel que se hayan creado:
1. panel.add(label);
Todos los componentes que se añadan, por defecto, se colocarán en el centro (horizontalmente) y
pegados a la parte superior del JPanel hasta que se llene la fila. Cuando se llene, se irán colocando
debajo. Para cambiar este comportamiento y que se comporte igual que el JFrame, se cambia el Layout
(distribución de componentes) de la siguiente manera. Se deben elegir una de las dos posibilidades:
Posibilidad 1:
1. panel.setLayout(new BorderLayout());
2. label.setVerticalAlignment(JLabel.TOP);
Posibilidad 2:
3. panel.setLayout(null);
4. label.setBounds(x, y, width, length);
4. BUTTONS
Un JButton puede ayudar a ejecutar acciones cuando se hace click sobre él. Se debe crear un JFrame y
agregar el JButton a dicho JFrame. La clase que contenga JButtons debe implementar la clase
ActionListener para poder añadir funcionalidades al JButton. Para crear el JButton:
Esta línea de código se debe crear fuera del constructor (en la clase), para que el método que creemos
posteriormente para añadir funcionalidades pueda acceder al JButton. De lo contrario, el JButton será
un objeto local y no podremos acceder a él.
1. button.setBounds(x,y,width, length);
1. frame.add(button);
Nota: Se observa que con todos los elementos se procede de la misma manera (crear componente,
añadirlo al JFrame y seleccionar la posición dentro de él).
Una vez que se implemente la clase ActionListener, el frame va a esperar eventos. Se debe crear un
método, que se ejecutará al pulsar el JButton:
1. button.addActionListener(this);
2. //Se pone this porque toda la clase está implementando de
ActionListener.
Hay un shortcut para no tener que implementar ActionListener y usar el método actionPerformed. Se
implementa un ActionListener al JButton. Dentro, se pone “e” y una flecha seguido de lo que quieres
que el botón haga al ser pulsado:
Ese JButton imprimirá Hola en la consola cada vez que sea pulsado.
1. button.setText("Texto de ejemplo");
El texto del botón va a tener un borde que va a impedir que se muestre completamente. Para eliminar
este borde:
1. button.setFocusable(false);
Se pueden usar todos los métodos que se han usado con el JLabel (por ejemplo, el setIconTextGap(),
setForeground(), setBackground(), setBorder(), etc…)
Hay un método para desactivar un JButton. Esto puede colocarse dentro del actionPerformed si quieres
que el JButton sólo pueda clickarse una vez.
1. button.setEnabled(false);
Es posible modificar los componentes dentro de un JFrame cuando se haya hecho click en un JButton.
Por ejemplo, se puede añadir un JLabel cuando se haya pulsado el botón. Para ello, se declaran estos
componentes fuera del constructor (para que el actionPerformed tenga acceso a ellos). Dentro del
actionPerformed, se añade el comando para hacer visible este JLabel (hasta que no se pulse el botón, el
JLabel estará oculto)
1. label.setVisible(true);
5. BORDER LAYOUT
Un BorderLayout permite colocar componentes en cinco diferentes areas (Norte, Sur, Este, Oeste y
Centro).
Si creas 5 paneles diferentes, puedes poner cada uno en una de las areas.
1. frame.add(panel1,BorderLayout.NORTH);
2. frame.add(panel2,BorderLayout.SOUTH);
3. //etc...
Los NORTH y SOUTH se expandirán horizontalmente, y los otros verticalmente. El CENTER ocupará todo
el espacio restante. Esto es útil, por ejemplo, para usar NORTH como título, el WEST para hacer scroll o
una barra de navegación y SOUTH para poner un footer. CENTER sería para el contenido principal.
Para implementarlo:
1. frame.setLayout(new BorderLayout());
1. panel.setPreferredSize(new Dimension(100,50));
Esto va a añadir 10 píxeles de separación entre los paneles EAST, WEST y el centro, y 10 píxeles entre los
NORTH, SOUTH y el centro.
También es posible implementar esta estructura dentro de un panel. Es decir, añadir paneles dentro de
otro panel:
1. panelA.add(panelB,BorderLayout.NORTH);
6. FLOW LAYOUT
Este layout coloca los componentes en una fila de un tamaño determinado. Si los componentes ocupan
toda la fila, empezarán a saltar a la fila inferior. Para implementarlo:
1. frame.setLayout(new FlowLayout());
Esto puede servir para crear una línea de botones con diferentes acciones cada uno.
Los dos ceros representan la distancia entre los bordes. Se puede ajustar para, por ejemplo, poner la fila
de botones en la parte de debajo de la aplicación.
1. panel.setLayout(new FlowLayout());
2. panel.add(new JButton(“1”));
3. frame.add(panel);
7. GRID LAYOUT
Este layout coloca los componentes en una estructura de filas y columnas. Todas las celdas tienen el
mismo tamaño.
1. frame.setLayout(new GridLayout(3,3,0,0));
El primer número dentro del paréntesis es el número de filas y el segundo de columnas. El primer cero
es el espaciado horizontal entre los elementos, y el cuarto es el espaciado vertical.
Para distribuir elementos en un JFrame, tienes la opción de usar uno de estos layouts o usar el comando
.setBounds() para colocar manualmente cada elemento.
8. LAYERED PANE
Los JLayeredPane son contenedores que ofrecen una tercera dimensión. Los JPanel solo ofrecen dos
dimensiones. Esto puede ser útil para apilar paneles o crear capas. Obviamente, se necesita un JFrame
para poderlo crear. Para crear el JLayeredPane:
Es posible agregar componentes a los JLayeredPane como si fuesen JPanel normales. El primer
componente que se agregue va a aparecer encima. El segundo, va a estar debajo. O, con otras palabras,
el primer elemento añadido se va a superponer al resto. Así es cómo se crean las diferentes capas.
1. panel.add(label1, Integer.valueOf(0))
El 0 es la capa en la que se colocará el elemento. El número más grande estará encima y sobrescribirá
todo.
9. NUEVAS VENTANAS
Es posible crear programas que dispongan de varias ventanas. Se deben crear dos clases (una para cada
ventana). Debes desarrollar cada ventana independientemente (JFrame) y colocar los componentes
necesarios.
Cuando estén las dos ventanas creadas, vamos a implementar un JButton que permita pasar a otra
ventana. Colocar un botón en la ventana principal e implementar el ActionListener. El método
actionPerformed debería contener:
1. if(e.getSource() == mybutton){
2. frame.dispose();
3. NewWindow myWindow = new NewWindow();
4. }
El comando frame.dispose(); va a hacer desaparecer la ventana principal, y después hay una instancia de
un objeto de la segunda clase (NewWindow). Se va a generar el objeto de esa clase.
El JOptionPane va a crear una ventana pop-up, es decir, que se va a mostrar y va a alertar al usuario de
algo, o va a solicitar una información. Esto puede ser útil para mostrar errores o para pedir una
contraseña. No es necesario tener un JFrame para crear un JOptionPane. Para crearlo:
Si quieres que aparezcan varios mensajes de error, se pueden meter en un bucle while. Ej: while(true){
“display option pane”}
Para preguntar una confirmación al usuario, es exactamente igual, pero se modifica showMessage por
showConfirm. Es decir:
1. textfield.setPreferredSize(new Dimension(x,y));
Para poder enviar un texto, se va a necesitar implementar un JButton (por eso se necesita la clase
ActionListener y el método actionPerformed). Aquí está lo que se debe introducir en el método
actionPerformed para capturar el texto del JTextField:
Tanto el JButton como el JTextField deben estar fuera del constructor para ser reconocidos por el
método actionPerformed.
Para cambiar la apariencia del JTextField, se puede hacer lo siguiente: Cambiar la fuente (.setFont), el
color de fuente (.setForeground), el color del background (.setBackground), cambiar el color de la línea
que muestra dónde estás escribiendo (.setCaretColor), cambiar el texto predeterminado dentro del
JTextField (.setText). Para evitar que alguien modifique lo que hay en un JTextField, se utiliza
.setEditable(false). Esto se puede poner en el actionPerformed para que sólo se pueda cambiar el
contenido del texto una vez.
Se usa el método .setText para añadir texto al lado de las JCheckBox. Esto es útil para añadir
descripciones y saber qué se está seleccionando. Para eliminar el borde que aparece en el texto de la
JCheckBox, se debe utilizar el método .setFocusable(false). También es posible cambiar el color de la
fuente del texto con .setFont.
Es posible crear un JButton que no se pueda pulsar hasta que la JCheckBox no esté seleccionada. Esto es
útil por ejemplo en el caso de términos y condiciones. Se deben declarar fuera del constructor. Dentro
del método actionPerformed:
1. box.isSelected();
El método .isSelected() va a devolver un boolean, true o false, dependiendo de si está seleccionado o no.
Esto puede ser útil para encadenar nuevos eventos dependiendo de lo que se haya seleccionado.
Es posible modificar la apariencia de un JCheckBox y cambiarlo por dos imágenes (una para cuando está
seleccionado y otra deseleccionado). Debes poner las imágenes en la carpeta del proyecto y crear los
objetos tipo imagen. Entonces:
1. box.setIcon(imageX);
2. //cuando esta deseleccionado
3. box.setSelectedIcon(imageOK);
4. //cuando está seleccionado
Puedes usar el método .setText para añadir texto y descripción a los botones y saber qué se está
seleccionando.
Es necesario colocar los JRadioButton en el mismo grupo, o de lo contrario se podrán seleccionar todos.
Es posible crear varios grupos si quieres hacer varias preguntas. Para crear el grupo:
Cada vez que se selecciona una de las opciones, se dispara un evento. Es posible añadir un
ActionListener a los botones e implementar un actionPerformed para detectar qué botón se ha
seleccionado.
1. if(e.getSource() == pizza){
2. System.out.println("Has pedido pizza");
3. }
4. else if(e.getSource() == hamburger){
5. System.out.println("Has pedido hamburguesa");
6. }
También es posible cambiar los iconos de los JRadioButton. Usar el método .setIcon y el método
.setSelectedIcon.
14. COMBO BOXES
Un JComboBox combina un botón o un campo editable con una lista. Necesita JFrame y ActionListener.
Con esto se ha creado el JComboBox, pero esto necesita una serie de opciones que el usuario pueda
elegir. Para introducir esas opciones en el JComboBox, se crea un array (por ejemplo de Strings) y se
envía al JComboBox. Se puede hacer directamente:
Cada vez que se seleccione una de las opciones, se está disparando un evento. Se puede crear un
actionPerformed para que el programa responda según la opción elegida.
1. if(e.getSource() == combobox){
2. combobox.getSelectedItem();
3. }
El comando anterior puede registrar lo que se haya elegido en una variable String.
El método .getSelectedIndex va a devolver el índice (por ejemplo, “perro” devuelve 0, “gato” devuelve 1
y “pez” devuelve 2)
El siguiente método permite escribir en el interior de la lista para buscar las opciones más fácilmente:
1. combobox.setEditable(true);
1. combobox.getItemCount();
1. combobox.addItem("caballo");
1. combobox.insertItemAt("objeto", indice);
1. combobox.setSelectedIndex(indice);
1. combobox.removeItem("gato");
Para eliminar una opción en un cierto índice:
1. combobox.removeItemAt(índice);
1. combobox.removeAll();
15. SLIDERS
Un JSlider es un componente que permite ajustar un parámetro usando un mando deslizable. Esto
puede servir por ejemplo para seleccionar una temperatura. Necesita JFrame e implementar
ChangeListener. Para crear el JSlider, se le deben añadir los valores:
Con un JSlider se puede tener un espectro de valores. El primer número dentro del JSlider es el mínimo,
y el segundo es el máximo. El tercer valor es el punto en el que comienza el JSlider por defecto.
Es necesario añadir marcadores (ya que no aparecen números en el JSlider al ejecutar la aplicación):
1. slider.setPaintTicks(true);
2. slider.setMinorTickSpacing(10);
3. slider.setMajorTickSpacing(25);
4. slider.setPaintLabels(true);
El 10 representa cada cuántos números quieres que aparezcan los valores, y cada 25 unidades, hay un
marcador más grande. Es posible cambiar la fuente de esos marcadores con slider.setFont()
1. slider.setOrientation(SwingConstants.VERTICAL);
Es posible añadir una etiqueta que muestre el valor que el JSlider está seleccionando a tiempo real:
1. slider.addChangeListener(this);
16. PROGRESS BAR
Los JProgressBar permiten que el usuario sepa que una operación se está realizando y cuánto queda
para que se acabe. Esto puede servir para que el usuario sepa que algo está pasando y no cierre la
aplicación porque crea que está congelado. Necesita JFrame y ChangeListener.
1. bar.setStringPainted(true);
Si quieres que el valor de la barra cambie, se debe poner el siguiente comando cada vez que suceda
algo, donde el número entre paréntesis es el porcentaje que quieres mostrar:
1. bar.setValue(0);
Otra forma de implementar JProgressBar es dentro de bucles while, donde el JProgressBar avanzará en
cada iteración.
1. Thread.sleep(1000);
Donde el número son los milisegundos (1000ms = 1s). Esto puede servir para aumentar el valor del
JProgressBar cada cierto tiempo.
También es posible mostrar texto en el JProgressBar, lo cual puede servir para mostrar un mensaje
cuando se haya completado:
1. bar.setString("Completado");
Para cambiar la fuente del texto en el JProgressBar se usa .setFont(). Para cambiar el color del relleno
del JProgressBar se usa .setForeground(). Para cambiar el color del fondo del JProgressBar se usa
.setBackground().
También es posible comenzar el JProgressBar al 100% y que descienda hasta cero, lo cual puede ser útil
para mostrar la salud en algún videojuego. También se puede cambiar el valor mínimo y máximo del
JProgressBar:
Un JMenuBar es lo que aparece en la parte superior de los programas y que muestra las diferentes
opciones que ofrece. Debe usar JFrame y ActionListener.
La diferencia es que los JMenuBar no se “agregan” al JFrame, se debe usar el método .setJMenuBar().
1. frame.setJMenuBar(menubar);
Si se ejecuta ahora, no aparecerá nada. Se deben agregar los menús y las opciones. Por ejemplo, para
crear menús para “Archivo”, “Ver” y “Ayuda”:
Es posible crear submenús dentro de un menú: Cuando se hace click en las opciones, se despliega una
lista de opciones. Por ejemplo, si se hace click en “Archivo”, se despliega “Cargar”, “Guardar” y “Salir”.
Hasta ahora, si se ejecuta la aplicación, los botones no tienen implementadas ninguna funcionalidad. Se
debe implementar ActionListener a los elementos que necesiten tener funcionalidad. En el método
actionPerformed se especifica la funcionalidad.
Es posible asociar los diferentes elementos a una tecla, para que se ejecute ese elemento pulsando una
tecla. Por ejemplo, para asociar “Cargar” a la tecla C.
1. loadItem.setMnemonic(KeyEvent.VK_C);
Si se hace con JMenu en lugar de con JMenuItem, debes mantener Alt y pulsar la tecla asignada para
que funcione.
Es posible añadir iconos a los JMenuItem. En primer lugar se crea un objeto tipo imagen y se asignan con
el método .setIcon().
18. SELECT A FILE
En primer lugar se debe implementar un JButton y dentro del método actionPerformed se implementa
el JFileChooser:
1. if(e.getSource() == button){
2. JFileChooser filechooser = new JFileChooser();
3. //para abrir / seleccionar archivo:
4. filechooser.showOpenDialog(null);
5. }
El siguiente comando permite seleccionar un archivo para salvarlo. Sin embargo, para crear un archivo
se necesitan unos pasos extra.
2. filechooser.showSaveDialog(null);
La clase JColorChooser permite al usuario elegir colores. Necesita JFrame y ActionListener. Se coloca
dentro del método actionPerformed y se debe implementar un botón:
El color elegido puede guardarse en una variable de tipo color y asignarse a cualquier componente del
programa.
20. KEY LISTENER
Esta interfaz nos permite programar eventos que se activen al pulsar ciertas teclas. Debemos
implementar KeyListener para poder usar esta funcionalidad. Antes de nada, se debe añadir un
KeyListener al JFrame:
1. this.addKeyListener(this);
Esto va a permitir poder usar los métodos del KeyListener, que son:
1. e.getKeyChar();
2. e.getKeyCode();
El código puede servir, por ejemplo, para cuando se pulsan las flechas o el Shift, porque estas teclas no
generan ningún carácter.
Es posible crear una etiqueta y moverla alrededor del JFrame mediante el método keyPressed. Esto
puede ser útil para programar movimientos en videojuegos. Para ello, se puede crear una estructura
switch-case:
1. switch(e.getKeyChar){
2. case 'a' : label.setLocation(label.getX()-1, label.getY();
3. break;
4. case 'd' : label.setLocation(label.getX()+1, label.getY();
5. break;
6. //etc...
7. }
Esta interfaz permite programar eventos que se activen con el ratón. La clase debe extender JFrame e
implementar MouseListener. El componente debe tener añadido un MouseListener. Los métodos que se
van a poder utilizar son: