Sesion12-componentes Visuales java

Taller de Programación II :: JAVA ::

Trabajando con Componentes dentro de contenedores
j p

Al fi l d esta presentación el participante será capaz d
final de t t ió l ti i t á de:
Identificar los componente básicos (Label, TextField y
Button).
B tt )
Implementar clases con interfaces WindowListener y
ActionListener.

Ing.
Ing Manuel Sánchez Chero, MSc
Chero
manuelsanchezchero@gmail.com


Componentes básicos
Los componentes básicos Label, TextField
y Button del paquete AWT:

Label

Las etiquetas son como los cuadro de textos , salvo
que el usuario no puede editarlas.
l i d di l

Controles de tipo
Label.
L b l

Se puede utilizar las etiquetas para presentar
textos que no se pueden editarlas, o como su
nombre indica para etiquetar otros componentes.

Label

Este es el diagrama de herencia de la clase Label.

Los constructores de la clase Label se muestra a
continuación.
Constructor
C t t Descripción
D i ió
Label( ) Construye una etiqueta vacía
Label(String Texto) Construye una etiqueta con el texto indicado
Label(String Texto, int Construye una etiqueta que presenta la cadena
alineación) especificada con la alineación indicada

Label

Los métodos de la clase Label se muestra a
continuación.

Métodos
Mét d Descripción
D i ió
String getText ( ) Obtiene el Texto del Label
void setText(String Texto) Establece el texto que va en el Label

El texto de una etiqueta se puede justificar
pasándole al constructor del Label los campos
Label.LEFT, Label.CENTER y Label.RIGHT

Label

Un ejemplo en un applet, utilizando la clase Label,
con su constructor L b l(S i
Label(String T
Texto, i alineación)
int li ió )

Como puede observar en el código (import
p g ( p
java.applet.*), esto indica que es un applet.

TextField

Los TextField son los componentes básicos de awt,
para soportar textos.
Estos componentes gestionan cadena de textos de
una dimensión
dimensión.
Permite visualizar el texto que el usuario escribe.

Controles de tipo
TextField.

TextField

Estos componentes puede visualizar una sola línea
de texto y el usuario puede editarlo, este es el
diagrama de herencia de la clase TextField.

Los constructores de la clase TextField se muestra
a continuación.
Constructor
C t t Descripción
D i ió
TextField() Construye un cuadro de Texto
TextField(int Columnas) Construye un cuadro de texto vacio con el número de
columnas indicadas
TextField(String Texto) Construye un cuadro de texto con el texto indicado
TextField(String Texto, int
(S Construye un cuadro de texto con el texto indicado y
C
Columnas) con el número de columnas indicadas

TextField

Los métodos de la clase TextField se muestra a
continuación.

Métodos
Mét d Descripción
D i ió
void addActionListener Añade el ActionListener indicado para recibir
(ActionListener) eventos
int getColumns() Obtiene el número de columnas del TextField

void setColumns(int columnas)
( ) Establece el número de columnas del TextField
void setText(String Texto) Establece el texto que va en el TextField

TextField

Un ejemplo, utilizando la clase TextField, con sus
constructores y el ActionListener.

Palabra reservada this
this,
es útil para hacer
referencial al objeto
actual, en este caso al
Frame.

Cuando el usuario
ingresa
g texto en el
primer TextField y
presiona enter pasa el
focus al segundo
TextField.

Botones

Los botones proporcionan al usuario una forma de
iniciar alguna acción.
i i i l ió

Controles de
tipo Button.

Todo usuario de GUI está familiarizado con los
botones, esos controles elementales sobre los que
se hace clic para indicar a un programa que debe
empezar a realizar alguna acción
acción.

Botones

Los botones están soportado en la clase
java.awt.Button, esta es l j
j B la jerarquía d l clase.
í de la l

Los constructores de la clase Button se muestra a
continuación.

Constructor Descripción
Button
B tt Construye un botón sin etiqueta
C t b tó i ti t
Button(String Etiqueta) Construye un botón con etiqueta

Botones

Un ejemplo, utilizando la clase Button, con sus
constructores en un applet.
l

Botones

Para gestionar los eventos de los botones se usa la
interfaz A i Li
i f ActionListener, esta i
interfaz tiene como
f i
único método actionPerformed, al que se le pasa
un objeto a la clase ActionEvent cuando se hace
clic sobre el b tó
li b l botón.

ActionListener

Método Descripción
void addActionListener(ActionListener) Añade el ActionListener indicado para
recibir eventos del botón
String getActionCommand( ) Obtiene el comando del evento producido
p
por el botón.

Botones

Este es el diagrama de la herencia de la clase
g
ActionEvent.

Todos los métodos de la clase ActionEvent, se
muestran a continuación.

Método Descripción
String getActionCommand( ) Obtiene la cadena del comando
String paramString( ) Obtiene una cadena que identifica el evento.

Botones

Implementando una clase BotonesConColores de tipo Frame he
implementando la interfaz ActionListener.

Botones

Hay dos formas para determinar qué botón se seleccionó, usando el
método getSource y usando comando.

Primero, veremos
cómo se hace esto
con getSource, he
aquí un ejemplo.

Botones
También se puede obtener el comando para el botón sobre el que se
hizo clic, usando el método getActionCommand

Veremos cómo se
hace esto con
getActionCommand,
he aquí un ejemplo.

Actividad

Realizar la siguiente interfaz gráfica, que permita ingresar
dos número y mostrar el resultado al hacer clic en el botón
ú ó
Calcular

clic

Sugerencias
Importar el paquete java.awt.*
Utilizar herencias extends Frame.
Implementar los Listener ActionListener y WindowListener

Solución
Realizar los siguientes pasos:
Crear la Clase Sumar que herede la Clase Frame
Implementar
Implementa las inte faces ActionListene y Windo Listene
interfaces ActionListener WindowListener
Implementar el método main y su constructor.

package ClasesGraficas;
import java.awt.*;
import java.awt.event.*;
public class Sumar extends Frame implements WindowListener, ActionListener {
Método
p
public Sumar() { }
Constructor

public void windowActivated(WindowEvent arg0) { }
public void windowClosed(WindowEvent arg0) { } Métodos
public void windowClosing(WindowEvent arg0) { } Implementados
por
public
bli void
id windowDeactivated(WindowEvent arg0) { }
i d i d( i d 0)
WindowListener
public void windowDeiconified(WindowEvent arg0) { }
public void windowIconified(WindowEvent arg0) { }
public void windowOpened(WindowEvent arg0) { } Método
Implementado p
p por
public void actionPerformed(ActionEvent arg0) { } ActionListener

public static void main(String[] args) { } Método main
}

Solución

Realizar los siguientes pasos:
Declarar los objetos en la clase

package ClasesGraficas;
import java.awt.*;
import java.awt.event.*;
public class Sumar extends Frame implements WindowListener, ActionListener {

Label lblvalor1=new Label( Numero 1");
Label("Numero 1 );
Label lblvalor2=new Label("Numero 2");
Label lblresultado=new Label("Resultado");
TextField txtvalor1=new TextField();
();
Declaración de
D l ió d
TextField txtvalor2=new TextField(); Objetos en la
TextField txtresultado=new TextField(); clase
Button cmdlimpiar=new Button("Limpiar");
Button cmdcalcular=new Button("Calcular");
Button( Calcular );
Button cmdcerrar=new Button("Cerrar");

}

Solución
Ir al método constructor y escribir el siguiente código

public Sumar() {
super("Operaciones");
setLayout(null);
setBackground(Color.lightGray);
setSize(300,150);
show();
addWindowListener(this);
ddWi d Li t (thi )
lblvalor1.setBounds(20,40,60,20);
txtvalor1.setBounds(90,40,60,20);
lblresultado.setBounds(20,90,60,20);
lblresultado setBounds(20 90 60 20);
txtresultado.setBounds(90,90,60,20);
Código dentro del
cmdlimpiar.setBounds(160,40,60,20);
método constructor
cmdcalcular.setBounds(160,65,60,20);
cmdcerrar.setBounds(160,90,60,20);
add(lblvalor1);
add(txtvalor1);
add(lblvalor2);
add(txtvalor2);
add(lblresultado);
txtresultado.setEnabled(false);
txtresultado setEnabled(false);
add(txtresultado);
add(cmdlimpiar);
cmdlimpiar.addActionListener(this);
add(cmdcalcular);
cmdcalcular.addActionListener(this);
add(cmdcerrar);
cmdcerrar.addActionListener(this);

}

Solución

public Sumar() {
super( Operaciones );
super("Operaciones");
setLayout(null);
setBackground(Color.lightGray);
setSize(300,150);
show();
addWindowListener(this);
}

Descripción del Código
Se llama al método super del constructor para ponerle un título al
Frame.
Se utiliza un gestor de esquema para poder poner los componentes
en diferente ubicación para ello se utiliza setLayout(null).
Para colocar un determinado color de fondo se utiliza
setBackground(Color.lightGray).
tB k d(C l li htG )
Para determinar el tamaño del frame, se utiliza setSize(300,150).
Para mostrar el Frame, se utiliza show().
Y por último indicamos que el Frame pueda escuchar los eventos con
el método addWindowListener(this).

Solución

public Sumar() {
lblresultado.setBounds(20,90,60,20);
txtresultado.setBounds(90,90,60,20);
txtresultado setBounds(90 90 60 20);
cmdlimpiar.setBounds(160,40,60,20);
cmdcalcular.setBounds(160,65,60,20);
cmdcerrar.setBounds(160,90,60,20);
}

Antes de mostrar los componentes utilizamos el método setBounds, para
fijar la posición y tamaño de los componentes dentro del frame.
void java.awt.Component.setBounds(int x, int y, int ancho, int altura)

Solución
public Sumar() {
….
…..
add(lblvalor1);
add(txtvalor1);
add(lblvalor2);
add(txtvalor2);
add(lblresultado);
txtresultado.setEnabled(false);
add(txtresultado);
add(cmdlimpiar);
cmdlimpiar.addActionListener(this); Se le da la funcionalidad a
add(cmdcalcular); los botones para que
cmdcalcular.addActionListener(this); escuche los eventos y
adicionamos los
add(cmdcerrar); componentes al frame
cmdcerrar.addActionListener(this);
}

Después de haber fijado la posición y tamaño de los componentes dentro
del frame, se procede adicionarlos para ser mostrados add(componente)
Para que los Botones escuchen los eventos se utiliza
cmdlimpiar.addActionListener(this);

Solución
Ir al método actionPerformed y escribir el siguiente código
public void actionPerformed(ActionEvent e) {
double 1 0 2 0 0
d bl v1=0,v2=0,r=0;
if(e.getSource()==cmdlimpiar){
txtvalor1.setText("");
txtvalor2.setText("");
txtresultado.setText("");
txtresultado setText("");
txtvalor1.requestFocus(); }

if(e.getSource()==cmdcalcular){
v1=Double.valueOf(txtvalor1.getText()).doubleValue();
v1=Double valueOf(txtvalor1 getText()) doubleValue(); Código para el botón
v2=Double.valueOf(txtvalor2.getText()).doubleValue(); cmdcalcular, para mostrar el
r=v1+v2; resultado de la operación
realizada
txtresultado.setText(Double.toString(r)); }

if(e.getSource()==cmdcerrar){
System.exit(0); }
}

Pregunta por el nombre del objeto.
Convierte una cadena a un valor double.
double
v1=Double.valueOf(txtvalor1.getText()).doubleValue();
Muestra el Resultado txtresultado.setText(Double.toString(r));

Solución
public void windowClosing(WindowEvent e) {
System.exit(0);
}

public static void main(String[] args) {
bli t ti id i (St i [] )
Sumar frmsuma= new Sumar( ); }
}
Creación de un objeto
frmsuma de tipo Sumar


Ir al método windowClosing para indicarle al frame que cuando se haga clic en el boton , se
debe cerrar .
Y por último crear el objeto frmsuma en el método main,
Sumar frmsuma= new Sumar( );

Nota :
Se adjunta el código completo de la Clase Sumar, el
participante puede importar dicha clase.


Muy bien, hemos aprendido a
utilizar los componentes Label,
TextField y Button y su
implementación de los
Listener, ahora inténtalo en tu
computador.
computador

Recuerda que puedes ver este
tutorial las veces que deseas.

FELICITACIONES!!
C CO S


Créditos

CREDITOS

Este tutorial fue realizado y
editado por:

Manuel Jesús Sánchez Chero
Tutor Virtual de Educación a
Distancia
Chiclayo - Perú
Versión 1.0

Sesion12-componentes Visuales java

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Sesion12-componentes Visuales java

Similar a Sesion12-componentes Visuales java (20)

Más de Universidad Nacional de Frontera

Más de Universidad Nacional de Frontera (20)

Último

Último (20)

Sesion12-componentes Visuales java