DESARROLLO DE GUIs

Algoritmia y Programación
Oscar Bedoya
oscar.bedoya@correounivalle.edu.co
http://eisc.univalle.edu.co/~oscarbed/Algoritmia/
• Desarrollo de GUIs (Interfaz Gráfica con el Usuario)
Aplicaciones que presentan una interfaz gráfica avanzada
CalcuGUI.java
Traductor.java
UsoVideoGUI.java
JFrame
JLabel (etiqueta)
JButton (botón)
JTextField (campo de texto)
¿Cuántas etiquetas, campos de texto y
botones tiene el JFrame?
¿Cuántas etiquetas, campos de texto y
botones tiene el JFrame?
* JLabel(etiqueta): Mensaje que aparece en un JFrame
para aclararle(informarle) al usuario cómo interactuar
con la ventana
* JButton(botón): Se asocia a una operación a realizar
en el JFrame
* JTextField(campo de texto): Puede permitir tanto la
entrada como la salida de datos
JLabel (etiqueta)
JButton (botón)
JTextField (campo de texto)
JLabel
JTextField
JButton
JLabel
JTextField
JLabel
JTextField
JButton
JLabel
JTextField
¿Qué diferencia a dos etiquetas?
¿Qué diferencia a dos campos de texto?
Elementos básicos de una GUI:
- JLabel
- JTextField
- JButton
Elementos básicos de una GUI:
- JLabel
- JTextField
- JButton
Cada elemento se debe
* Declarar
* Crear
int n;
Declarar
n=Integer.parseInt(JOptionPane… ));
Crear
double precio, iva;
precio = cantidad*8000;
iva = precio * 0.16;
Declarar 2 variables
Crear
Elementos básicos de una GUI:
- JLabel
- JTextField
- JButton
¿Cómo declarar y
crear una etiqueta?
•
Etiquetas (JLabel)
Declarar una etiqueta:
JLabel nombre;
Crear una etiqueta:
nombre = new JLabel(“Valor a ”);
Texto que se
muestra al usuario
JLabel con texto
“Valor a”
•
Etiquetas (JLabel)
Declarar una etiqueta:
JLabel LValorA;
Crear una etiqueta:
LValorA = new JLabel(“Valor a ”);
JLabel con texto
“Valor a”
JLabel con texto
“Resultado”
¿Cómo declarar y crear
las dos etiquetas?
•
Etiquetas (JLabel)
Declarar las etiquetas:
JLabel LValorA, LResultado;
Crear las etiquetas:
LValorA = new JLabel(“Valor a ”);
LResultado = new JLabel(“Resultado”);
Problema: Presente la declaración y creación de las etiquetas
•
Declarar las etiquetas:
•
Crear las etiquetas:
Problema: Presente la declaración y creación de las etiquetas
LEspañol
LTraducción
•
Declarar las etiquetas:
•
Crear las etiquetas:
Problema: Presente la declaración y creación de las etiquetas
•
Declarar las etiquetas:
JLabel LEspañol, LTraducción;
•
Crear las etiquetas:
LEspañol = new JLabel(“Ingrese la palabra en español”);
LTraducción = new JLabel(“Traducción”);
Elementos básicos de una GUI:
- JLabel
- JTextField
- JButton
¿Cómo declarar y crear
un campo de texto?
•
Campo de texto (JTextField)
Declarar un campo de texto:
JTextField nombre;
Crear un campo de texto:
nombre=new JTextField(5);
5 es el tamaño del campo
de texto (columnas)
JTextField de 5 columnas
JTextField de 5 columnas
¿Cuántas columnas tiene
este campo de texto?
•
Campo de texto (JTextField)
Declarar un campo de texto:
JTextField TFValorA;
Crear un campo de texto:
TFValorA=new JTextField(5);
JTextField de 5 columnas
JTextField de 10 columnas
•
Campo de texto (JTextField)
Declarar los campos de texto:
JTextField TFValorA, TFResultado;
Crear los campos de texto:
TFValorA=new JTextField(5);
TFResultado =new JTextField(10);
Problema: Presente la declaración y creación de los campos de texto.
Los campos de texto son de 10 columnas
•
Declarar los campos de texto:
•
Crear los campos de texto:
Problema: Presente la declaración y creación de los campos de texto.
Los campos de texto son de 10 columnas
TFEspañol
(10 columnas)
TFTraduccion
(10 columnas)
•
Declarar los campos de texto:
•
Crear los campos de texto:
Problema: Presente la declaración y creación de los campos de texto.
Los campos de texto son de 10 columnas
•
Declarar los campos de texto:
JTextField TFEspañol, TFTraduccion;
•
Crear los campos de texto:
TFEspañol =new JTextField(10);
TFTraduccion =new JTextField(10);
Elementos básicos de una GUI:
- JLabel
- JTextField
- JButton
¿Cómo declarar y
crear un botón?
•
Botones (JButton)
Declarar un botón:
JButton nombre;
Crear un botón:
nombre=new JButton(“ Calcular a^2 “ );
texto que aparece
en el botón
JButton
•
Botones (JButton)
Declarar un botón:
JButton BEncontrarPotencia;
Crear un botón:
BEncontrarPotencia=new JButton(“ Calcular a^2” );
Problema: Presente la declaración y creación de los botones
•
Declarar los botones:
•
Crear los botones:
Problema: Presente la declaración y creación de los botones
BIngles
BFrances
BAleman
•
Declarar los botones:
•
Crear los botones:
Problema: Presente la declaración y creación de los botones
•
Declarar los botones:
JButton BIngles, BFrances, BAleman;
•
Crear los botones:
BIngles =new JButton(“Inglés”);
BFrances =new JButton(“Francés”);
BAleman =new JButton(“Alemán”);
LValorA
TFValorA
BEncontrarPotencia
LResultado
TFResultado
Declarar los elementos:
JLabel LValorA, LResultado;
JTextField TFValorA, TFResultado;
JButton BEncontrarPotencia;
Crear los elementos:
LValorA=new JLabel(“Valor a”);
LResultado=new JLabel(“Resultado”);
TFValorA=new JTextField(5);
TFResultado=new JTextField(10);
BEncontrarPotencia=new JButton(“Calcular a^2”);
Problema: Complete la declaración y creación de elementos
de la siguiente GUI
5 columnas
5 columnas
10 columnas
• Declarar los elementos:
• Crear los elementos:
• Declarar los elementos:
JLabel LNumA, LNumB, LResultado;
JTextField TFNumA, TFNumB, TFResultado;
JButton BSuma, BMultiplicacion, BDivision;
• Crear los elementos:
LNumA=new JLabel(“Número a”);
LNumB=new JLabel(“Número b”);
LResultado=new JLabel(“Resultado”);
TFNumA=new JTextField(5);
TFNumB=new JTextField(5);
TFResultado=new JTextField(10);
BSuma=new JButton(“+”);
BMultiplicacion=new JButton(“*”);
BDivision=new JButton(“/”);
LValorA
LResultado
TFResultado
TFValorA
BEncontrarPotencia
LValorA
LResultado
¿Cómo colocar los elementos
en el JFrame de tal manera
que aparezcan de la forma
deseada?
TFResultado
TFValorA
BEncontrarPotencia
Barra de título
Contenedor
• Se adicionan, uno por
uno, los elementos a la
ventana
• Se adicionan, uno por
uno, los elementos a la
ventana
• El orden en el que se
adicionan los elementos
al contenedor es
importante
•
Contenedor (Container)
Declarar un contenedor:
Container contenedor;
Crear un contenedor:
contenedor = getContentPane();
Declarar un contenedor:
Container contenedor;
Crear un contenedor:
contenedor = getContentPane();
• Para adicionar un elemento al contenedor se coloca:
contenedor.add(elemento);
contenedor.add(LValorA)
• Para adicionar un elemento al contenedor se coloca:
contenedor.add(elemento);
contenedor.add(LValorA)
LValorA=new JLabel(“Valor a”);
contenedor.add(LValorA);
contenedor.add(TFValorA);
contenedor.add(BEncontrarPotencia);
contenedor.add(LValorA);
contenedor.add(TFValorA);
contenedor.add(BEncontrarPotencia);
LValorA=new JLabel(“Valor a”);
TFValorA=new JTextField(5);
BEncontrarPotencia=new JButton(“Calcular a^2”);
contenedor.add(LValorA);
contenedor.add(TFValorA);
contenedor.add(BEncontrarPotencia);
El orden en el cual se adicionen los
elementos al contenedor determina el
orden en el que aparecerán en la ventana
contenedor.add(LValorA);
contenedor.add(TFValorA);
contenedor.add(BEncontrarPotencia);
contenedor.add( ??? );
contenedor.add( ??? );
contenedor.add(LValorA);
contenedor.add(TFValorA);
contenedor.add(BEncontrarPotencia);
contenedor.add(LResultado);
contenedor.add(TFResultado);
Problema: Presente la adición de los elementos al contenedor
contenedor.add(LEspañol);
contenedor.add( ??? );
contenedor.add( ??? );
contenedor.add( ??? );
contenedor.add( ??? );
contenedor.add( ??? );
contenedor.add( ??? );
Problema: Presente la adición de los elementos al contenedor
contenedor.add(LEspañol);
contenedor.add(TFEspañol);
contenedor.add(BIngles);
contenedor.add(BFrances);
contenedor.add(BAleman);
contenedor.add(LTraduccion);
contenedor.add(TFTraduccion);
Para organizar los componentes en el contenedor se
pueden usar 2 clases:
- FlowLayout
- GridLayout
FlowLayout: permite centrar los elementos del contenedor
•
FlowLayout
Declarar el FlowLayout:
FlowLayout miFlow;
Crear el FlowLayout:
miFlow = new FlowLayout();
contenedor.setLayout(miFlow);
import javax.swing.*;
contenedor = getContentPane();
import java.awt.*;
miFlow = new FlowLayout();
import java.awt.event.*;
contenedor.setLayout(miFlow);
public class Programa extends JFrame
implements ActionListener{
Container contenedor;
contenedor.add(LValorA);
FlowLayout miFlow;
contenedor.add(TFValorA);
JLabel LValorA, LResultado;
contenedor.add(BEncontrarPotencia);
JTextField TFValorA, TFResultado;
contenedor.add(LResultado);
JButton BEncontrarPotencia;
contenedor.add(TFResultado);
Programa(){
LValorA = new JLabel(“Valor a");
LResultado = new JLabel("Resultado ");
TFValorA = new JTextField(5);
TFResultado = new JTextField(10);
BEncontrarPotencia = new JButton(" Calcular a^2");
}
}
import javax.swing.*;
contenedor = getContentPane();
import java.awt.*;
miFlow = new FlowLayout();
import java.awt.event.*;
contenedor.setLayout(miFlow);
public class Programa extends JFrame
implements ActionListener{
Container contenedor;
FlowLayout miFlow;
JLabel LValorA, LResultado;
JTextField TFValorA, TFResultado;
JButton BEncontrarPotencia;
Declarar
los
elementos
de la
ventana
contenedor.add(LValorA);
contenedor.add(TFValorA);
contenedor.add(BEncontrarPotencia);
contenedor.add(LResultado);
contenedor.add(TFResultado);
Programa(){
LValorA = new JLabel(“Valor a");
LResultado = new JLabel("Resultado ");
TFValorA = new JTextField(5);
TFResultado = new JTextField(10);
BEncontrarPotencia = new JButton(“Calcular a^2");
}
}
import javax.swing.*;
contenedor = getContentPane();
import java.awt.*;
miFlow = new FlowLayout();
import java.awt.event.*;
contenedor.setLayout(miFlow);
public class Programa extends JFrame
implements ActionListener{
Container contenedor;
contenedor.add(LValorA);
FlowLayout miFlow;
contenedor.add(TFValorA);
JLabel LValorA, LResultado;
contenedor.add(BEncontrarPotencia);
JTextField TFValorA, TFResultado;
contenedor.add(LResultado);
JButton BEncontrarPotencia;
Programa(){
contenedor.add(TFResultado);
Constructor
LValorA = new JLabel(“Valor a");
LResultado = new JLabel("Resultado ");
TFValorA = new JTextField(5);
TFResultado = new JTextField(10);
BEncontrarPotencia = new JButton(" Calcular a^2");
}
}
import javax.swing.*;
contenedor = getContentPane();
import java.awt.*;
miFlow = new FlowLayout();
import java.awt.event.*;
contenedor.setLayout(miFlow);
public class Programa extends JFrame
implements ActionListener{
Container contenedor;
contenedor.add(LValorA);
FlowLayout miFlow;
contenedor.add(TFValorA);
JLabel LValorA, LResultado;
contenedor.add(BEncontrarPotencia);
JTextField TFValorA, TFResultado;
contenedor.add(LResultado);
JButton BEncontrarPotencia;
contenedor.add(TFResultado);
Programa(){
LValorA = new JLabel(“Valor a");
LResultado = new JLabel("Resultado ");
TFValorA = new JTextField(5);
TFResultado = new JTextField(10);
BEncontrarPotencia = new JButton(" Calcular a^2");
}
}
El programa y el
constructor deben
tener el mismo nombre
import javax.swing.*;
contenedor = getContentPane();
import java.awt.*;
miFlow = new FlowLayout();
import java.awt.event.*;
contenedor.setLayout(miFlow);
public class Programa extends JFrame
implements ActionListener{
Container contenedor;
contenedor.add(LValorA);
FlowLayout miFlow;
contenedor.add(TFValorA);
JLabel LValorA, LResultado;
contenedor.add(BEncontrarPotencia);
JTextField TFValorA, TFResultado;
contenedor.add(LResultado);
JButton BEncontrarPotencia;
contenedor.add(TFResultado);
Programa(){
LValorA = new JLabel(“Valor a");
LResultado = new JLabel("Resultado ");
TFValorA = new JTextField(5);
TFResultado = new JTextField(10);
BEncontrarPotencia = new JButton(" Calcular a^2");
}
}
Crear los elementos
gráficos definidos
* version0.java
Problema: Desarrollar la siguiente GUI
¿Cuál es el resultado en cada caso?
TFValorA
TFResultado
¿Cuál es la secuencia de
acciones que debe ocurrir
cuando se presione el botón
Calcular a^2?
TFValorA
Al presionar el botón se debe
hacer:
1. Tomar el número en el campo
de texto TFValorA
2. Elevar el número al cuadrado
3. Colocar el resultado en el
campo de texto TFResultado
TFResultado
TFValorA
Para conocer qué valor escribió el
usuario en el campo de texto, se
coloca:
TFValorA.getText()
TFResultado
TFValorA
Para conocer qué valor escribió el
usuario en el campo de texto, se
coloca:
TFValorA.getText()
Nombre del
campo de
texto
TFResultado
Operación que permite
conocer lo que está
escrito en el campo
JTextField (TFBase)
JTextField (TFAltura)
JTextField (TFArea)
JTextField (TFPerimetro)
Indique qué valores se obtienen en los siguientes casos:
• TFAltura.getText()
• TFArea.getText()
• TFBase.getText()
TFValorA
Para conocer qué valor escribió el
usuario en el campo de texto, se
coloca:
TFValorA.getText()
Nombre del
campo de
texto
TFResultado
Operación que permite
conocer lo que está
escrito en el campo
Al presionar el botón se debe hacer:
TFValorA
1. Tomar el número en el campo de texto TFValorA
a=TFValorA.getText();
TFResultado
Al presionar el botón se debe hacer:
TFValorA
1. Tomar el número en el campo de texto TFValorA
a=Integer.parseInt(TFValorA.getText());
TFResultado
Al presionar el botón se debe hacer:
TFValorA
1. Tomar el número en el campo de texto TFValorA
a=Integer.parseInt(TFValorA.getText());
2. Elevar el número al cuadrado
TFResultado
Al presionar el botón se debe hacer:
TFValorA
1. Tomar el número en el campo de texto TFValorA
a=Integer.parseInt(TFValorA.getText());
2. Elevar el número al cuadrado
potencia=a*a;
TFResultado
Al presionar el botón se debe hacer:
TFValorA
1. Tomar el número en el campo de texto TFValorA
a=Integer.parseInt(TFValorA.getText());
2. Elevar el número al cuadrado
potencia=a*a;
TFResultado
3. Colocar el resultado en TFResultado
TFValorA
Para colocar un valor en un campo
de texto, se coloca:
TFResultado.setText(valor)
Nombre del
campo de
texto
TFResultado
Operación que permite
colocar un valor en el
campo
Al presionar el botón se debe hacer:
TFValorA
1. Tomar el número en el campo de texto TFValorA
a=Integer.parseInt(TFValorA.getText());
2. Elevar el número al cuadrado
potencia=a*a;
TFResultado
3. Colocar el resultado en TFResultado
TFResultado.setText( ??? );
Al presionar el botón se debe hacer:
TFValorA
1. Tomar el número en el campo de texto TFValorA
a=Integer.parseInt(TFValorA.getText());
2. Elevar el número al cuadrado
potencia=a*a;
TFResultado
3. Colocar el resultado en TFResultado
TFResultado.setText( potencia );
Al presionar el botón se debe hacer:
TFValorA
1. Tomar el número en el campo de texto TFValorA
a=Integer.parseInt(TFValorA.getText());
2. Elevar el número al cuadrado
potencia=a*a;
TFResultado
3. Colocar el resultado en TFResultado
TFResultado.setText(String.valueOf(potencia));
String.valueOf convierte un número a String
a=Integer.parseInt(TFValorA.getText());
potencia=a*a;
TFResultado.setText(String.valueOf(potencia));
a=Integer.parseInt(TFValorA.getText());
potencia=a*a;
TFResultado.setText(String.valueOf(potencia));
a=Integer.parseInt(TFValorA.getText());
potencia=a*a;
TFResultado.setText(String.valueOf(potencia));
¿En qué momento se deben
ejecutar estas instrucciones?
Java utiliza la metáfora del OYENTE
public void actionPerformed(ActionEvent e){
int a, potencia;
a=Integer.parseInt(TFValorA.getText());
potencia=a*a;
TFResultado.setText(String.valueOf(potencia));
}
public void actionPerformed(ActionEvent e){
int a, potencia;
a=Integer.parseInt(TFValorA.getText());
potencia=a*a;
TFResultado.setText(String.valueOf(potencia));
}
Oyente
public void actionPerformed(ActionEvent e){
int a, potencia;
a=Integer.parseInt(TFValorA.getText());
potencia=a*a;
TFResultado.setText(String.valueOf(potencia));
}
El oyente debe distinguir
sobre qué botón se hizo clic
Oyente
public void actionPerformed(ActionEvent e){
if (e.getSource() == BEncontrarPotencia ){
int a, potencia;
a=Integer.parseInt(TFValorA.getText());
potencia=a*a;
TFResultado.setText(String.valueOf(potencia));
}
}
Si la fuente del clic fue el
botón BEncontrarPotencia…
public void actionPerformed(ActionEvent e){
if (e.getSource() == BEncontrarPotencia ){
int a, potencia;
a=Integer.parseInt(TFValorA.getText());
potencia=a*a;
TFResultado.setText(String.valueOf(potencia));
}
}
*
Si la fuente del clic fue el
botón BEncontrarPotencia…
BEncontrarPotencia.addActionListener(this);
Esta línea relaciona el botón con el oyente
BSumar
BRestar
public void actionPerformed(ActionEvent e){
if (e.getSource() == BSumar ){
//Completar
}
if (e.getSource() == BRestar){
//Completar
}
}
BSumar
TFValorA
TFValorB
BRestar
TFResultado
completar Programa2.java
• Estructura del programa
public static void main(String a[]){
Programa aplicacion = new Programa();
aplicacion.setSize(150,160);
aplicacion.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
aplicacion.show();
}
• Estructura del programa
public static void main(String a[]){
Programa aplicacion = new Programa();
aplicacion.setSize(150,160);
aplicacion.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
aplicacion.show();
}
Debe coincidir
con el nombre
del archivo
Debe coincidir
con el nombre
del archivo
• Estructura del programa
public static void main(String a[]){
Programa aplicacion = new Programa();
aplicacion.setSize(150,160);
aplicacion.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
aplicacion.show();
}
Ancho y Alto del
JFrame
Problema: presente el oyente de tal forma que se calcule
el área y el perímetro de un rectángulo
JTextField (TFBase)
JTextField (TFAltura)
JButton (BCalcular)
JTextField (TFArea)
JTextField (TFPerimetro)
Rectangulo.java
public void actionPerformed(ActionEvent e){
if (e.getSource()==BCalcular){
}
}
JTextField (TFBase)
JTextField (TFAltura)
JButton (BCalcular)
JTextField (TFArea)
JTextField (TFPerimetro)
public void actionPerformed(ActionEvent e){
if (e.getSource()==BCalcular){
int base, altura, area, perimetro;
base=Integer.parseInt(TFBase.getText());
altura=Integer.parseInt(TFAltura.getText());
area = base*altura;
perimetro = 2*base + 2*altura;
TFArea.setText(String.valueOf(area));
TFPerimetro.setText(String.valueOf(perimetro));
}
}
JTextField (TFBase)
JTextField (TFAltura)
JButton (BCalcular)
JTextField (TFArea)
JTextField (TFPerimetro)