Componentes básicos: JLabel y JButton


Una GUI (Graphic User Interface) cuenta con 2 tipos de objetos:
  • Componentes:
    • Cada elemento individual de una gui.
  • Contenedor:
    • Sirve para contener componentes.
*Ventanas y marcos son los principales contenedores.

*Los componentes básicos son objetos de clases predefinidas en el paquete SWING.
  • JLabel
  • JButton
  • JTextField
  • JTextArea
  • JCheckBox
  • JComboBox
 

  • La metodología de implementación es siempre la misma:
    • Crear objeto de un componente:
      • Ejemplo:
        • JButton boton = new JButton("Aceptar");
    • Adañirlo a un contenedor:
      • Ejemplo:
        • JPanel panel = new JPanel();
        • panel.add(boton);

JLabel

Class JLabel

java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.JComponent
javax.swing.JLabel
El componente JLabel son etiquetas que permite añadir texto, este no puede ser modificado por el usuario. Ademas de texto tambien admite gráfico de la clase ImageIcon

Constructores JLabel

JLabel cuenta 6 constructores:
  • JLabel()
    • Crea un objeto etiqueta sin texto ni imagen.

  • JLabel(Icon image)
    • Crea un objeto etiqueta con una imagen.
      • Ejemplo:
        • ImageIcon icono = new ImageIcon("src/miPaquete/Miarchivo.jpg");
        • Jlabel etiqueta = new JLabel(icono);

  • JLabel(Icon image, int horizontalAlignment)
    • Crea un objeto etiqueta con una imagen y una alineación horizontal. La alinacion debe ser una constante defina de SwingConstants: LEFT, CENTER, RIGHT, LEADING o TRAILING.
    • Ejemplo:
      • ImageIcon icono = new ImageIcon("src/miPaquete/Miarchivo.jpg", SwingConstants.CENTER);
      • Jlabel etiqueta = new JLabel(icono);

  • JLabel(String text)
    • Crea un objeto etiqueta con el texto indicado.
      • Ejemplo:
        • JLabel etiqueta = new JLabel("Hola Mundo");

  • JLabel(String text, int horizontalAlignment)
    • Crea un pbjeto etiqueta con un texto como contenido y una alineación horizontal.
      • Ejemplo:
        • JLabel etiqueta = new JLabel("Hola Mundo", SwingConstants.RIGHT);

  • JLabel(String text, Icon icon, int horizontalAlignment)
    • Crea un objeto etiqueta con un texto y una imagen más una alineacion horizontal.
      • Ejemplo:
        • JLabel etiqueta = new JLabel("Hola Mundo", "src/miPaquete/Miarchivo.jpg", SwingConstants.LEFT);
  1. import javax.swing.*;
  2. import java.awt.*;
  3. public class ComponentesBasicos {
  4.     public static void main(String[] args) {
  5.         JPanel panel = new JPanel();
  6.         ImageIcon icono = new ImageIcon("src/ily.jpg");
  7.         JLabel etiqueta1 = new JLabel("Hola Mundo", SwingConstants.LEFT);
  8.         JLabel etiqueta2 = new JLabel(icono, SwingConstants.CENTER);
  9.         JLabel etiqueta3 = new JLabel("Chau Mundo", SwingConstants.RIGHT);
  10.        
  11.         JFrame marco = new JFrame();
  12.         GridLayout flow = new GridLayout(3,1);
  13.         panel.setLayout(flow);
  14.         panel.add(etiqueta1);panel.add(etiqueta2);panel.add(etiqueta3);
  15.         marco.add(panel);
  16.         marco.setTitle("Componentes Basicos: JLabel - Etiquetas");
  17.         marco.setSize(550, 350);
  18.         marco.setResizable(true);
  19.         marco.setLocationRelativeTo(null);
  20.         marco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  21.         marco.setVisible(true);
  22.     }
  23. }
El resultado será:


JButton

Class JButton

java.lang.Object
java.awt.Component
java.awt.Container
javax.swing.JComponent
javax.swing.AbstractButton
javax.swing.JButton
El objeto JButton es un botón pulsable con una etiqueta o una imagen.
El boton es muy similar a una etiqueta con la diferencia del pulsado, para que al hacer click haga algo hay que implementar la interface de eventos y asignarle un vigilante al boton, para saber cuando este es pulsado y describir en los metodos de la interface que es lo que queremos que haga.
  1. import javax.swing.*;
  2. import java.awt.*;
  3. public class ComponentesBasicos {
  4.     public static void main(String[] args) {
  5.         JPanel panel = new JPanel();
  6.         ImageIcon icono = new ImageIcon("src/smile.png");
  7.         JButton boton1 = new JButton("Hola Mundo");
  8.         JButton boton2 = new JButton(icono);
  9.         JButton boton3 = new JButton("Chau Mundo");
  10.        
  11.         JFrame marco = new JFrame();
  12.         FlowLayout flow = new FlowLayout();
  13.         panel.setLayout(flow);
  14.         panel.add(boton1);
  15.         boton2.setToolTipText("También podés hacer botones con imagenes");
  16.         panel.add(boton2);
  17.         panel.add(boton3);
  18.         marco.add(panel);
  19.         marco.setTitle("Componentes Basicos: JButtons");
  20.         marco.setSize(400, 150);
  21.         marco.setResizable(true);
  22.         marco.setLocationRelativeTo(null);
  23.         marco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  24.         marco.setVisible(true);
  25.     }
  26. }
El resultado será:

JFrame

Class JFrame

java.lang.Object
java.awt.Component
java.awt.Container
java.awt.Window
java.awt.Frame
javax.swing.JFrame

La clase JFrame pertenece al paquete swing y será necesario importarlo al momento de querer usarlo. Es sub-clase de Frame, Window, container y component de awt y por supuesto sub-clase de Object como todas, de estas clases hereda sus atributos y cmportamientos.

Atributos JFrame

Contiene la variable de clase entera EXIT_ON_CLOSE que cierra la ventana por defecto, entre otras variables propias más todas la que hereda, ver el resume de la clase en la documentación oficial.


Constructores JFrame

Existen 4 constructores para la clase:

  • JFrame()
    • Crea un nueva ventana inicializada como invisible.
  • JFrame(String title)
    • Crea una nueva ventana inicializada como invisible y utiliza el String del parámetro como el titulo del marco.
  • Los otros 2 configuran gráficos en la pantalla

Métodos JFrame

  • setDefaultCloseOperation(int operation)
    • Establece la operación que va a pasar de forma predeterminada cuando el usuario "cierra" el marco.
  • setLayout(LayoutManager manager)
    • Establece el controlador de distribución (LayoutManager).

Métodos heredados de la clase java.awt.Frame

  • setIconImage(Image image)
    • Establece la imagen que se mostrará como el icono de esta ventana.
  • setResizable(boolean resizable)
    • Establece si este marco puede cambiar de tamaño por el usuario.
  • setTitle(String title)
    • Configura el titulo de la ventana con el String.

Métodos heredados de la clase java.awt.Window

  • pack()
    • Modifica la ventana para tener el tamaño para ajustarse al tamaño preferido y diseños de sus subcomponentes.
  • setBackground(Color bgColor)
    • Configura el color de fondo de la ventana
  • setBounds(int x, int y, int width, int height)
    • Establece los limite y posición de la ventana, alto y ancho (x,y) y posición (width,height)
  • setLocation(int x, int y) ó setLocation(Point p)
    • Configura la posición de la ventana en parametros de x e y o como un objeto Point tambien x e y.
  • setLocationRelativeTo(Component c)
    • Establece la ubicación de la ventana con respecto al componente especificado. Si el parámetro es nulo estará centrado.
  • setSize(int width, int height)
    • Configura el tamaño de la ventana en valores de ancho y alto.
  • setVisible(boolean b)
    • configura la visibilidad de la ventana.

Métodos heredados de la clase java.awt.Container

  • add(Component comp)
    • Añade el componente especificado al final de este contenedor.
  • remove(Component comp) ó removeAll()
    • Remueve el componente del contenedor ó quita todos los componentes.
  • setFont(Font f)
    • Establece la fuente de este contenedor (ver clase Font).
  • setLayout(LayoutManager mgr)
    • Configurar el Layout para este contenedor.

Métodos heredados de la clase java.awt.Component

  • setBackground(Color c)
    • configura el fondo del componente. (ver clase Color)
  • setEnabled(boolean b)
    • Activa o desactiva este componente, en función del valor del parámetro b.
  • setFont(Font f)
  • setLocation(int x, int y)
  • setSize(int width, int height)
  • setVisible(boolean b)

Configurando Marco

Veamos como funcionan los métodos en unos ejemplos : (Hice uso de otros componentes como JPanel, JLabel y JButton)

  1. import java.awt.*;
  2. import javax.swing.*;
  3.  
  4. public class PrimeraVentana extends JFrame{
  5.     JPanel panel = new JPanel();
  6.     JLabel etiqueta = new JLabel("Hola Mundo");
  7.     JButton boton = new JButton();
  8.     JButton salir = new JButton("Salir");
  9.     public PrimeraVentana(){
  10.         super("Mi Primera Ventana");
  11.         //setSize(300,100);
  12.         //setLocationRelativeTo(null);
  13.         setBounds(500,100,300,150);
  14.         setResizable(false);
  15.         setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  16.        
  17.         boton.setText("Chau!");
  18.         boton.setEnabled(false);
  19.         etiqueta.setFont( new Font("MONOSPACED", 0, 36));
  20.         panel.add(etiqueta);
  21.         panel.add(boton);
  22.         panel.add(salir);
  23.         panel.setBackground(Color.  ORANGE);
  24.        
  25.         add(panel);
  26.         setVisible(true);
  27.     }
  28.     public static void main(String[] args) {
  29.         new PrimeraVentana();
  30.     }
  31. }

Resultado:


Segundo Ejemplo

Para este segundo ejemplo use 3 imagenes jpg que tenia previamente en la carpeta de proyectos de mi IDE.


  1. import java.awt.Color;
  2. import java.awt.FlowLayout;
  3. import javax.swing.ImageIcon;
  4. import javax.swing.JButton;
  5. import javax.swing.JFrame;
  6. import javax.swing.JPanel;
  7.  
  8. public class Instanciando {
  9.     static JPanel panel = new JPanel();
  10.     static ImageIcon icono1 = new ImageIcon("src/versentir/kratoslbp.jpg");
  11.     static ImageIcon icono2 = new ImageIcon("src/versentir/kratoslego.jpg");
  12.     static ImageIcon icono3 = new ImageIcon("src/versentir/imagen1.jpg");
  13.     static JButton boton1 = new JButton(icono1);
  14.     static JButton boton2 = new JButton(icono2);
  15.     static JButton boton3 = new JButton(icono3);
  16.     public static void main(String[] args) {
  17.         JFrame marco = new JFrame();
  18.         marco.setTitle("Kratos el Dios de la Guerra");
  19.         marco.setSize(500, 210);
  20.         marco.setLocationRelativeTo(null);
  21.  
  22.         panel.setBackground(Color.BLUE);
  23.         FlowLayout layout = new FlowLayout();
  24.         panel.setLayout(layout);
  25.         panel.add(boton1);panel.add(boton2);panel.add(boton3);
  26.         marco.add(panel);
  27.        
  28.         marco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  29.         marco.setVisible(true);
  30.     }
  31.  
  32. }

AWT y SWING

AWT

Abstract Window Toolkit (AWT)(Kit de Herramientas de Ventana Abstracta en español) es una paquete que contiene clases e interfaces, y funciona como un kit de herramientas de gráficos, interfaz de usuario, y sistema de ventanas independiente de la plataforma original de Java.

SWING

SWING es otro paquete con clases e interfaces que viene a resolver algunos inconvenientes que presenta AWT mejorando y agregando clases e interfaces, Swing está desarrollado sobre las partes de AWT

Según Wikipedia

  • La arquitectura Swing Es un framework MVC para desarrollar interfaces gráficas para Java con independencia de la plataforma. Sigue un simple modelo de programación por hilos, y posee las siguientes características principales:
    • Independencia de plataforma.
    • Extensibilidad: es una arquitectura altamente particionada: los usuarios pueden proveer sus propias implementaciones modificadas para sobrescribir las implementaciones por defecto. Se puede extender clases existentes proveyendo alternativas de implementación para elementos esenciales..
    • Personalizable: dado el modelo de representación programático del framework de swing, el control permite representar diferentes estilos de apariencia "look and feel" (desde apariencia MacOS hasta apariencia Windows XP pasando por apariencia GTK+, IBM UNIX o HP UX entre otros). Además, los usuarios pueden proveer su propia implementación de apariencia, que permitirá cambios uniformes en la apariencia existente en las aplicaciones Swing sin efectuar ningún cambio al código de aplicación.
  • Ventajas
    • El diseño en Java puro posee menos limitaciones de plataforma.
    • El desarrollo de componentes Swing es más activo.
    • Los componentes de Swing soportan más características.

Primera Ventana con AWT

NOTA: Con la creación de esta ventana básica solo lograremos que esta se muestre, NO responderá a los eventos del usuario cuando desee cerrarla, es decir no se cierra la ventana al pulsar sobre la "X" de la esquina superior derecha, yo tengo abierto el administrador de tareas para finalizar el proseco. Para que la ventana responda a la petición de cierre será necesario agregar un "escucha de evento".
Para poder crear una ventana básica con awt podemos hacerlo de 2 maneras:

Heredando:

  • Crear nuestra clase y hacerla sub-clase de Frame con extends
    • public class Ventana extends Frame
  • Crear un constructor con al menos una instrucción la de visibilidad:
    • setVisible(true);
    • Opcionalmente le agregamos algunos métodos para configurar la ventana:
      • Editamos el titulo con el String
        • super("Primera Ventana");
      • Configuramos el tamaño de 300px por 100px
        • setSize(300,100);
  • Llamamos a nuestro constructor desde el main:
    • new Ventana();
  1. import java.awt.*;
  2. public class Ventana extends Frame{
  3.     public Ventana(){
  4.         super("Primera Ventana");
  5.         setSize(300,100);
  6.         setVisible(true);
  7.     }
  8.     public static void main(String[] arg){
  9.         new Ventana();
  10.     }
  11. }

Instanciando Frame

  • Desde el main crear un objeto Frame
    • Frame marco = new Frame( "Primera Ventana" );
  • El objeto llamará a sus métodos para configurar la visibilidad, también el tamaño:
    • marco.setSize(new Dimension(300,100));
    • marco.setVisible(true);
  1. import java.awt.Frame;
  2. import java.awt.Dimension;
  3. public class Ventana {
  4.    
  5.     public static void main(String[] args) {
  6.             Frame marco = new Frame( "Primera Ventana" );
  7.             marco.setSize(new Dimension(300,100));
  8.             marco.setVisible(true);
  9.     }
  10. }

En ambos casos el resultado será:

Primera Ventana con SWING

Como deciamos antes SWING viene a resolver los problemas que traia AWT, de momento podremos lograr que los botones del marco(minimizar, maximizar, cerrar) funcionen por si solo a través de un métodos específico. Los pasos a seguir y formas de hacerlo los mismos:

Heredando:

  • Crear nuestra clase y hacerla sub-clase de Jframe con extends
    • public class PrimeraVentana extends JFrame
  • Crear un constructor con al menos una instrucción la de visibilidad y forma de cierre:
    • setVisible(true);
    • setDefaulCloseOperacion(JFrame.EXIT_ON_CLOSE);
    • Opcionalmente le agregamos algunos métodos para configurar la ventana:
      • Editamos el titulo con el String
        • super("Mi Primera Ventana");
      • Configuramos el tamaño de 300px por 100px
        • setSize(300,100);
  • Llamamos a nuestro constructor desde el main:
    • new Ventana();
  1. import javax.swing.JFrame;
  2. public class PrimeraVentana extends JFrame{
  3.     public PrimeraVentana(){
  4.         super("Mi Primera Ventana");
  5.         setSize(300,100);
  6.         setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  7.         setVisible(true);
  8.     }
  9.     public static void main(String[] args) {
  10.         new PrimeraVentana();
  11.     }
  12. }

Instanciando JFrame

  • Desde el main crear un objeto JFrame
    • JFrame marco = new JFrame( " Mi Primera Ventana" );
  • El objeto llamará a sus métodos para configurar la visibilidad, forma de cierre y también el tamaño:
    • marco.setSize(new Dimension(300,100));
    • marco.setDefaulCloseOperation(JFrame.EXIT_ON_CLOSE);
    • marco.setVisible(true);
  1. import javax.swing.JFrame;
  2. public class Instanciando {
  3.     public static void main(String[] args) {
  4.         JFrame marco = new JFrame("Mi Primera Ventana");
  5.         marco.setSize(300, 100);
  6.         marco.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  7.         marco.setVisible(true);
  8.     }
  9. }
Como resultado seguiremos teniendo la misma ventanita.