clase swingparte1

Oscar Bedoya

[email protected]

Programación interactiva

Interfaces gráficas con Java Swing

• Una interfaz gráfica con el usuario (GUI) es un mecanismo incorporado en las aplicaciones para hacer más amigable y entendible la interacción con el usuario

•Las GUIs se crean a partir de componentes, éstos permiten que el usuario interactúe mediante el ratón, teclado y otras formas de entrada.

Swing

Estructura de las aplicaciones GUI

•Declarar una clase que herede de la superclase JFrame

•Declarar cada componente que hará parte de la GUI

•Dentro del método constructor, crear y organizar los componentes

•Declarar el método main

Swing

Swing

JFrame

Clase

Clase()

main()

import java.awt.*;

import java.awt.event.*;

import javax.swing.*;

public class GUI extends JFrame {

public GUI()

{

super( "Título de la GUI" );

Container contenedor = getContentPane();

contenedor.setLayout( new FlowLayout() );

setSize( 275, 170 );

setVisible( true );

}

public static void main( String a[] )

{

GUI aplicacion = new GUI();

aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );

}

}

Swing

JFrame

GUI

GUI()

main()

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{



}

}

Toda GUI debe heredar de la clase JFrame

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{



}

}

Se debe DECLARAR cada componente que hará

parte de la GUI

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{



}

}

Método constructor

CREAR cada componente y organizarlo de acuerdo a lo

que se requiere

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{


aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE);

}

}

Se crea un objeto de la aplicación

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{



}

}

Método constructor

Establecer el título de la ventana

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{



}

}

Crear el contenedor. Es el espacio que mantiene el contenido de la ventana

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{



}

}

Crear el contenedor. Es el espacio que mantiene el contenido de la ventana

Contenedor

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{



}

}

Se establecen las dimensiones de la

ventana

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{



}

}

Algunos componentes que se pueden agregar al contenedor:

•JLabel

•JButton

•JTextField

•JCheckButtton

•JRadioButton

•JList

import java.awt.*;




public GUI()

{




setSize( 275, 170 );

setVisible( true );

}


{



}

}

Algunos componentes que se pueden agregar al contenedor:

•JLabel

•JButton

•JTextField

•JCheckButtton

•JRadioButton

•JList

Declarar

Crear y organizar

JLabel (Etiqueta)

•Las etiquetas son componentes que permiten mostrar un mensaje, en texto o gráfico, de tal manera que el usuario tenga una idea más clara de cómo interactuar con la aplicación

Swing

Etiqueta

Etiqueta

JLabel (Etiqueta)

•Declarar la etiqueta

private JLabel etiqueta1;

•Crear la etiqueta

Se tienen varias formas

etiqueta1=new JLabel(“Texto de la etiqueta”);

contenedor.add(etiqueta1);

Swing

JLabel (Etiqueta)







Swing

Inicialmente el contenedor está vacío


JLabel (Etiqueta)






etiqueta1.setToolTipText( "Esta es la etiqueta 1" );


Swing

JLabel (Etiqueta)








Swing

El método setToolTipText permite establecer el texto que se mostrará en caso de que el usuario

pase el mouse por encima de la etiqueta

JLabel (Etiqueta)








Swing

Otra forma consiste en crear una etiqueta con icono

Icon imagen = new ImageIcon( "image1.gif" );

etiqueta2 = new JLabel( "Etiqueta con texto e icono“);

etiqueta2.setIcon(imagen);

etiqueta2.setHorizontalTextPosition(SwingConstants.RIGHT);

etiqueta2.setToolTipText( "Esta es la etiqueta2" );

contenedor.add( etiqueta2 );

Swing

Otra formaetiqueta3 = new JLabel();

etiqueta3.setText( "Etiqueta con icono y texto en parte inferior" );

etiqueta3.setIcon( imagen );

etiqueta3.setVerticalTextPosition( SwingConstants.BOTTOM );



Swing







Swing

El texto debe aparecer debajo del icono







Swing

Las constantes de posición horizontal en SwingConstants son: LEFT, CENTER, RIGHT y

en la posición vertical son TOP, CENTER, BOTTOM







Swing

PruebaEtiqueta

Métodos setFont y setForegroundetiqueta3 = new JLabel();



etiqueta3.setFont(new Font("Arial", Font.BOLD, 14));

etiqueta3.setForeground(Color.black);

Swing

Se puede cambiar el tipo de fuente, tamaño y color

JTextField y JPasswordField (Campos de texto)

•Los JTextField son áreas de una sola línea en las que el usuario puede introducir texto mediante el teclado o bien, el programa puede mostrar un resultado

Swing

Campo de texto en el que el programa

muestra un resultado

Campo de texto en el que el

usuario ingresadatos


•Los JPasswordField son áreas en los que el texto se representa con simbolos * para ocultarlo de otros usuarios

Swing

JTextField

JPasswordField

JTextField (Campo de texto)

•Declarar el campo

private JTextField campoTexto1;

•Crear el campo


campoTexto1=new JTextField(10);

contenedor.add(campoTexto1);

Swing




•Crear el campo


campoTexto1=new JTextField(10);


Swing

Crea un campo de texto con 10 columnas




•Crear el campo


campoTexto2=new JTextField(“Escriba el texto aquí”);


Swing




•Crear el campo


campoTexto2=new JTextField(“Escriba el texto aquí”);


Swing

Crea un campo de texto con texto

predeterminado. El tamaño del campo estará dado por la

longitud del mensaje




•Crear el campo


campoTexto2=new JTextField(“Escriba el texto aquí”,20);


Swing

Cuando se crea un campo de texto con texto predeterminado, el tamaño del

campo queda determinado por la longitud del mensaje, si se quiere establecer un valor diferente se puede utilizar este

constructor




•Crear el campo


campoTexto3=new JTextField(“Campo de texto no editable”,20);

campoTexto3.setEditable(false);


Swing




•Crear el campo


campoTexto3=new JTextField(“Campo de texto no editable”,20);

campoTexto3.setEditable(false);


Swing

Crea un campo de texto no editable, es decir, no se puede cambiar su contenido hasta que

se ejecute el comando

campoTexto3.setEditable(true);

JPasswordField


private JPasswordField campoContraseña;

•Crear el campo

Se tienen los mismos constructores que para JTextField

campoContraseña=new JPasswordField(6);

contenedor.add(campoContraseña);

Swing

Crea un campo para contraseña

Eventos y metáfora del oyente

Java utiliza la metáfora del oyente para indicar que cualquier GUI está escuchando continuamente que suceda un evento

Los eventos que pueden ocurrir en una GUI son:

•Hacer clic sobre un botón

•Completar un campo de texto y hacer clic

•Hacer clic sobre una opción de un menú

•Ejecutar un comando con teclado

Swing


Los oyentes se han clasificado de acuerdo al componente que genera los eventos y se tienen interfaces que ayudan a manejar tales eventos

ActionListener

MouseListener

ItemListener

KeyListener

Swing

Swing

Tipo de evento Interfaz

ActionEvent ActionListener

MouseEvent MouseListener, MouseMotionListener

KeyEvent KeyListener

ItemEvent ItemListener


Cada componente que pueda generar un evento, debe tener un manejador que indique las acciones que deben ocurrir si se genera un evento

Swing


•Los campos de texto, a diferencia de las etiquetas, generan eventos!!!

•Cuando se escribe en el campo de texto y se da Enter, se genera un evento

•Concepto de FOCO: es el componente de la GUI que está actualmente siendo utilizado, cuando un campo de texto genera un evento, se dice que tiene el foco

Swing

Recuerde los oyentes (interfaces)

ActionListener

MouseListener

ItemListener

KeyListener

Entre estos, un campo de texto genera un evento de acción (ActionEvent)

Utilizar un objeto manejador de una clase que implemente la interfaz ActionListener!!!

Swing

Algunos métodos de las clases JTextField y JPasswordField

Swing

Método Descripción

setText(mensaje) Permite colocar un mensaje de tipo String en el campo

getText() Permite obtener el valor escrito en el campo

addActionListener(manejador) Adicionar el manejador de eventos al campo. El manejador es un objeto de una clase que implemente la interfaz ActionListener

Para que una aplicación pueda capturar los eventos que allí se generen debe:

-Crear la clase que implemente la interfaz

-Crear un objeto de esa clase (manejador)

-Registrar el manejador en cada componente que pueda generar un evento del tipo considerado en la interfaz

Swing

private class ManejadorCampoTexto implements ActionListener

{

public void actionPerformed( ActionEvent evento )

{

if ( evento.getSource() == campoTexto1 )

{

//Instrucciones que se deben ejecutar si la fuente del evento fue el campoTexto1

}

} // fin del método actionPerformed

} // fin de la clase interna privada ManejadorCampoTexto


{


{


{


}



La clase ManejadorCampoTexto

implementa ActionListener


{


{


{


}



Método que maneja un evento ActionEvent


{


{


{


}



Si la fuente del evento es el campoTexto1


{


{


{


}


{


}



Para que una aplicación pueda capturar los eventos que allí se generen debe:

• Crear la clase que implemente la interfaz

Se puede colocar en el mismo archivo de la GUI

• Crear un objeto de esa clase (manejador)

ManejadorCampoTexto manejador = new ManejadorCampoTexto();

• Registrar el manejador en cada componente que pueda generar un evento del tipo considerado en la interfaz

campoTexto1.addActionListener( manejador );



campoContraseña.addActionListener( manejador );

Swing

Para que una aplicación pueda capturar los eventos que alli se generen debe:

• Crear la clase que implemente la interfaz

Se puede colocar en el mismo archivo de la GUI

• Crear un objeto de esa clase (manejador)

ManejadorCampoTexto manejador = new ManejadorCampoTexto();

• Registrar el manejador en cada componente que pueda generar un evento del tipo considerado en la interfaz




campoContraseña.addActionListener( manejador );

Swing

PruebaCampoTexto

Problema: Desarrolle un traductor EspañolInglés con dos campos de texto, de tal forma que cuando se escriba un palabra en uno de los campos y se de enter, aparezca la traducción en el otro campo de texto. Se deben considerar 5 palabras.

Swing

Problema: Desarrolle una GUI con una etiqueta y un campo de texto. El contenido inicial de la etiqueta es el número 0. Cada vez que se de enter en el campo, se mostrará en la etiqueta la cantidad de veces que esto ha ocurrido. Utilice tamaño 40 para el texto en la etiqueta.

Swing

Problema: Desarrolle una GUI con una etiqueta y un campo de texto. El contenido inicial de la etiqueta es el número 0. Cada vez que se de enter en el campo, se mostrará en la etiqueta la cantidad de veces que esto ha ocurrido. Utilice tamaño 40 para el texto en la etiqueta.

String.valueOf( int var ) : convierte un entero a String

Swing

JButton (Botón)

•Es un componente en el que el usuario hace clic para desencadenar cierta acción

• Un programa puede utilizar varios tipos de botones

-Botones de comando

-Casillas de verificación

-Botones interruptores

-Botones de opción

Swing

JButton (Botón)

•Declarar el botón

private JButton botonSimple;

•Crear el campo


botonSimple=new JButton(“Botón simple”);

contenedor.add(botonSimple);

Swing

JButton (Botón)



•Crear el campo


botonSimple=new JButton(“Botón simple”);

contenedor.add(botonSimple);

Botón que solo tiene texto

Swing

JButton (Botón)



•Crear el campo


Icon image1 = new ImageIcon( "image6.gif" );


botonElegante = new JButton( "Botón elegante", image1 );

botonElegante.setRolloverIcon( image2 );

botonElegante.setToolTipText( "Muestra un mensaje" );

botonElegante.setMnemonic('M');

contenedor.add( botonElegante );

Swing

JButton (Botón)



•Crear el campo








contenedor.add( botonElegante ); Imagen inicial del botón

Swing

JButton (Botón)



•Crear el campo









Imagen cuando se pase el mouse por encima del

botón

Swing

JButton (Botón)



•Crear el campo









Un nemómico es un atajo con teclado

Swing









Botón inicial Botón cuando se pasa el mouse por encima

Swing

JButton (Botón)

•Un botón (de comando) genera un evento ActionEvent cuando el usuario hace clic en él

Utilizar un objeto manejador de una clase que implemente la interfaz ActionListener!!!

Swing

private class ManejadorBoton implements ActionListener {

// manejar evento de botón


{

if (evento.getSource()==botonSimple)

JOptionPane.showMessageDialog( null, "Usted oprimió el boton simple");

if (evento.getSource()==botonElegante)

JOptionPane.showMessageDialog( null, "Usted oprimió el boton elegante");

}

} // fin de la clase interna privada ManejadorBoton

private class ManejadorBoton implements ActionListener {

// manejar evento de botón


{

if (evento.getSource()==botonSimple)

JOptionPane.showMessageDialog( null, "Usted oprimió el boton simple");

if (evento.getSource()==botonElegante)

JOptionPane.showMessageDialog( null, "Usted oprimió el boton elegante");

}

} // fin de la clase interna privada ManejadorBoton

PruebaBoton

Problema: Modifique la GUI anterior de tal manera que se indique la cantidad de veces que se ha oprimido cada botón

Swing

JButton (Botón)

•Método setEnabled()

Permite habilitar o deshabilitar un botón

nombreBoton.setEnabled(false);

Swing

Deshabilita el botón, no ejecuta el oyente

JButton (Botón)

•Método setEnabled()

Permite habilitar o deshabilitar un botón

nombreBoton.setEnabled(false);

Swing

Deshabilita el botón, no ejecuta el oyente

PruebaBoton2

Problema: Desarrolle una GUI que tenga dos botones. Inicialmente uno de los dos está deshabilitado pero se puede habilitar si se hace clic en el segundo botón. Si esto ocurre, el botón dos se deshabilita y solo se podrá habilitar si se hace clic en el botón uno.

Swing

Problema: Desarrolle el traductor con botones. Un botón para traducir a inglés y otro para alemán

Swing

JCheckBox (Casilla de verificación)

Swing

En un checkbox, se tienen varias casillas, se pueden

marcar todas

JCheckBox (Casilla de verificacion)

•Un ChekBox genera un evento ItemEvent cuando el usuario hace clic en él

Utilizar un objeto manejador de una clase que implemente la interfaz ItemListener!!!

Swing

JChekbox (Casilla de verificación)

•Declarar

private JChekBox negrita, cursiva;

•Crear

negrita = new JCheckBox( "Negrita" );

contenedor.add( negrita );

cursiva = new JCheckBox( "Cursiva" );

contenedor.add( cursiva );

Swing

JChekbox (Casilla de verificacion)

•Declarar

private JChekBox negrita, cursiva;

•Crear

negrita = new JCheckBox( "Negrita" );

contenedor.add( negrita );

cursiva = new JCheckBox( "Cursiva" );

contenedor.add( cursiva );

ManejadorCasillaVerificacion manejador = new ManejadorCasillaVerificacion();

negrita.addItemListener( manejador );

cursiva.addItemListener( manejador );

Swing

Se adiciona el manejador, un objeto de una clase que implementa la interfaz ItemListener, por medio del

método addItemListener

private class ManejadorCasillaVerificacion implements ItemListener {

private int valNegrita = Font.PLAIN;

private int valCursiva = Font.PLAIN;

// responder a eventos de casilla de verificación

public void itemStateChanged( ItemEvent evento )

{

// procesar eventos de casilla de verificación negrita

if ( evento.getSource() == negrita )

valNegrita = negrita.isSelected() ? Font.BOLD : Font.PLAIN;

// procesar eventos de casilla de verificación cursiva

if ( evento.getSource() == cursiva )

valCursiva = cursiva.isSelected() ? Font.ITALIC : Font.PLAIN;

// establecer tipo de letra del campo de texto

campo.setFont( new Font( "Serif", valNegrita + valCursiva, 14 ) );

} // fin del método itemStateChanged

} // fin de la clase interna privada ManejadorCasillaVerificacion






{











Se implementa la interfaz ItemListener






{











El evento ItemEvent se maneja por medio del

método itemStateChanged






{











PruebaCasillaVerificacion

JRadioButton (Botones de opción)

Swing

En un RadioButton, solo una de las opciones se puede seleccionar al

tiempo


•Un RadioButton genera un evento ItemEvent cuando el usuario hace clic en él


Swing


•Declarar

private JRadioButton botonSimple, botonNegrita…

private ButtonGruop grupoBotonesOpcion;

Swing

Como existe una relación entre los botones (no se puede seleccionar más de un botón al tiempo), se

debe agrupar en un componente ButtonGroup

Después de crear cada RadioButton, se deben adicionar a un único ButtonGroup


•Crear botonSimple = new JRadioButton( "Simple", true );

contenedor.add( botonSimple );

botonNegrita = new JRadioButton( "Negrita", false );

contenedor.add( botonNegrita );

botonCursiva = new JRadioButton( "Cursiva", false );

contenedor.add( botonCursiva );

botonNegritaCursiva = new JRadioButton( "Negrita/Cursiva", false );

contenedor.add( botonNegritaCursiva );

Swing










Swing

Se puede indicar cuál de las opciones estará activa en el

momento de iniciar la aplicación










ManejadorBotonOpcion manejador = new ManejadorBotonOpcion();

botonSimple.addItemListener(manejador);

botonNegrita.addItemListener(manejador);

botonCursiva.addItemListener(manejador);

botonNegritaCursiva.addItemListener(manejador);

Swing

Se adiciona el oyente a cada RadioButton

botonSimple = new JRadioButton( "Simple", true );













grupoBotonesOpcion = new ButtonGroup();

grupoBotonesOpcion.add( botonSimple );

grupoBotonesOpcion.add( botonNegrita );

grupoBotonesOpcion.add( botonCursiva );

grupoBotonesOpcion.add( botonNegritaCursiva );

Se crea el ButtonGroup y se le adicionan los RadioButton

botonSimple = new JRadioButton( "Simple", true );













grupoBotonesOpcion = new ButtonGroup();

grupoBotonesOpcion.add( botonSimple );

grupoBotonesOpcion.add( botonNegrita );

grupoBotonesOpcion.add( botonCursiva );

grupoBotonesOpcion.add( botonNegritaCursiva );

PruebaBotonOpcion

Ver Oyente

JComboBox (Cuadro combinado)

•Un ComboBox, conocido como lista desplegable proporciona una lista de elementos de la cual el usuario puede seleccionar solamente uno

•Los objetos ComboBox generan eventos ItemEvent cuando el usuario hace clic en una de las opciones de la lista


Swing


•Declarar

private JComboBox cuadroCombImagenes;

private String nombres[] = { "image3.gif", "image10.gif",

"image5.gif", "image8.gif" };

Swing


•Declarar

private JComboBox cuadroCombImagenes;

private String nombres[] = { "image3.gif", "image10.gif",

"image5.gif", "image8.gif" };

Swing

Se debe crear una arreglo con los datos que

aparecerán en la lista


•Crear

cuadroCombImagenes = new JComboBox( nombres );

cuadroCombImagenes.setMaximumRowCount(4);

Swing

Se pasa al constructor el arreglo con los datos que



•Crear



Swing

Se establece la cantidad máxima de ítems que puede tener la lista sin necesitar la barra de desplazamiento


•Crear



Swing

Aparece la barra si se coloca el valor en 2 y hay 4

elementos en la lista

private class ManejadorCombo implements ItemListener {


{

if ( evento.getStateChange() == ItemEvent.SELECTED ){

int index=cuadroCombImagenes.getSelectedIndex();

System.out.println("Seleccionó el item " + index + " en la lista");

etiqueta.setIcon( iconos[index ] );

}

}

}



{





}

}

} Método que permite conocer que un ítem cambio de estado



{





}

}

}

Método del ComboBox que permite saber cuál de los ítems fue seleccionado.

Retorna el índice (comenzando en 0)



{





}

}

}

PruebaCuadroComb

JList (listas de selección)

•Una lista de selección permite al usuario seleccionar uno (Listas de selección simple) o varios elementos de una lista (Listas de selección múltiple)

•Las listas de selección se combinan con la clase JScrollPane

Swing

JList

JScrollPane

•Una lista de selección genera eventos ListSelectionEvent cuando el usuario hace clic en una de las opciones de la lista

Utilizar un objeto manejador de una clase que implemente la interfaz ListSelectionListener!!!

Para adicionar este escucha se debe utilizar el método addListSelectionListener

Swing


•Declarar

private JList listaColores;

private JScrollPane scroll;

private final String nombresColores[] = { "Negro", "Azul", "Cyan", "Gris oscuro“,

"Gris", "Verde", "Gris claro", "Magenta", "Naranja", "Rosa", "Rojo", "Blanco", "Amarillo" };

Swing

Se debe crear un arreglo con los datos que



•Crear

listaColores = new JList( nombresColores );

listaColores.setVisibleRowCount( 5 );

listaColores.setSelectionMode( ListSelectionModel.SINGLE_SELECTION );

scroll = new JScrollPane(listaColores);

contenedor.add(scroll);

Swing


•Crear






Swing

Se pasa al constructor la lista con los nombres

Se especifica que es una lista de selección simpleSe adiciona la lista

a un scroll


•Crear






ManejadorLista manejador = new ManejadorLista();

listaColores.addListSelectionListener(manejador);

Swing

private class ManejadorLista implements ListSelectionListener {

public void valueChanged( ListSelectionEvent evento )

{

int index=listaColores.getSelectedIndex();

contenedor.setBackground(colores[index] );

}

}

Se implementa el método valueChange de la interfaz ListSelectionListener

private class ManejadorLista implements ListSelectionListener {

public void valueChanged( ListSelectionEvent evento )

{

int index=listaColores.getSelectedIndex();

contenedor.setBackground(colores[index] );

}

}

PruebaLista


Swing

JList de selección múltiple

JList de selección

simple


•Crear



listaColores.setSelectionMode(ListSelectionModel.MULTIPLE_INTERVAL_SELECTION);

scroll1 = new JScrollPane(listaColores);

contenedor.add(scroll1);

Swing

Se especifica que se permite

selección múltiple

public class ManejadorMultiple implements ActionListener

{


{

listaCopia.setListData( listaColores.getSelectedValues() );

}

}

Se captura el evento por medio del botón

Retorna los valores de listaColores seleccionados

Establecer los datos que aparecerán en la lista

public class ManejadorMultiple implements ActionListener

{


{

listaCopia.setListData( listaColores.getSelectedValues() );

}

}

PruebaSeleccionMultiple

Explicar ancho y alto de la lista que no tiene elementos

clase swingparte1

Software