Algoritmia y Programacin

Java
Escuela de Ingeniera de Sistemas y Computacin.
Curso: Algoritmia y Computacin

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

Contenido
o GUIs (Graphic User Interfaces)
Qu son?
Estructura General de una GUI
Componentes Grficos
Jlabel
JTextField
Jbutton
Jpanel

Layouts

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

GUI: Definicin
o Una interfaz grfica de usuario es un mecanismo incorporado en las aplicaciones
para hacer mas amigable la interaccin con el usuario.
o Las GUIs se crean a partir de componentes, stos permiten que el usuario
interacte mediante el ratn, el teclado y otras formas de entrada.

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

GUI: Estructura
o Estructura General: En general la estructura de una aplicacin con una GUI
cumple lo siguiente:
Se declara una clase que herede de la clase JFrame
Esta misma clase debe implementar la interfaz ActionListener
Se declaran como atributos los componentes grficos de la interfaz
En el mtodo constructor se instancian los componentes grficos
En el mtodo constructor u otro mtodo especializado se organizan los
elementos de la interfaz
Se declara un mtodo para atender los distintos eventos ejecutados por el
usuario
Se declara un mtodo main y se crea un objeto de la propia clase

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

GUI: Estructura
public class UsaGUI {
public static void main( String args[]){
GUI aplicacion = new GUI();
}

Se crea un objeto de la clase GUI

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

GUI: Estructura
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class GUI extends JFrame {
Container contenedor;

Una GUI debe heredar de JFrame

public GUI( ){
Asigna un ttulo a la ventana
super( "Ttulo de la GUI" );
contenedor = getContentPane();
contenedor.setLayout( new FlowLayout() );
Para terminar el programa
this.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE);
this.setSize( 275, 170 );
Especifica el tamao
this.setVisible( true );
Hace visible la ventana
Escuela de Ingeniera de Sistemas y Computacin.
Curso: Algoritmia y Computacin

GUI: Estructura

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

GUI: Componentes
o Las GUIs estn compuestas por diferentes elementos como etiquetas, campos de
texto, reas de texto, botones, mens y otros elementos.

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

GUI: Componentes
JFrame : Es la ventana sobre la que se construye la GUI.
JLabel : Etiquetas para mostrar mensajes o indicaciones al usuario.
JButton : Se asocia a una operacin que realizar el usuario.
JTextField : Puede permitir tanto la entrada como la salida de datos.
JPanel : Sirve como contenedor para los elementos JLabel, JButton y JTextField.
JFrame

JLabel

JTextField

JButton
JTextArea
JPanel (3 botones)

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

10

GUI: JLabel
JLabel : Etiquetas para mostrar mensajes o indicaciones al usuario.
Cmo se declara una etiqueta?
JLabel label1;
Cmo se crea una etiqueta?
label1 = new JLabel(Soy un JLabel);

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

11

GUI: JTextField
JTextField : Puede permitir tanto la entrada como la salida de datos.
Cmo se declara un campo de texto?
JTextField textField1
Cmo se crea un campo de texto?
textField1 = new JTextField(Ingrese algo,12);

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

12

GUI: JButton
JButton : Se asocia a una operacin que realizar el usuario.
Cmo se declara un bton?
JButton button1;
Cmo se crea un botn?
button1 = new JButton(Soy un JButton);

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

13

GUI: JPanel
JPanel : Sirve como contenedor para los elementos JLabel, JButton y JTextField.
Cmo se declara un panel?
JPanel panel1;
Cmo se crea un panel?
panel1 = new Jpanel(new GridLayout(3, 1));
panel1.add(label1);
panel1.add(textField1);
panel1.add(button1);

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

14

GUI: Eventos y Oyentes

o Java utiliza una metfora llamada oyente para hacer que la GUI escuche
continuamente los eventos que pueden suceder sobre sus componentes.
Algunos de los eventos que pueden ocurrir son:
Clic sobre los botones
Completar campos de texto y oprimir la tecla Enter
Hacer clic sobre alguna opcin de un men
Ejecutar un comando con el teclado
Seguir el rastro del ratn
Entre otros.

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

15

GUI: Eventos y Oyentes

o Los oyentes en Java se han clasificado de acuerdo al componente que genera los
eventos y para su manipulacin hay que hacer uso de interfaces como:
ActionListener
MouseListener
ItemListener
KeyListener
o Cada componente que puede generar un evento, debe tener un manejador que
indica las acciones que deben ocurrir si se genera un evento

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

16

GUI: Eventos y Oyentes

o Para crear una interfaz de usuario como se muestra en la siguiente figura, se debe
utilizar el oyente ActionListener.

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

17

GUI: Eventos y Oyentes

public class UsaSaluda {
public static void main(String[] args) {
Saluda aplicacion = new Saluda();
aplicacion.organizarGUI();
}
}

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

18

GUI: Eventos y Oyentes

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setSize(250,100);
this.setVisible(true);

public class Saluda extends JFrame implements ActionListener {

Container contenedor;
JLabel lNombre;
JTextField tfNombre;
JButton bNombre;

public void organizarGUI(){

contenedor.add(lNombre);
contenedor.add(tfNombre);
contenedor.add(bNombre);
}

public Saluda(){
public void actionPerformed(ActionEvent e){
if (e.getSource()==bNombre){
JOptionPane.showMessageDialog(null,"Hola " +
tfNombre.getText());
}
}

super("Ttulo de la GUI");
contenedor = getContentPane();
contenedor.setLayout(new FlowLayout());
lNombre = new JLabel("Nombre : ");
tfNombre = new JTextField(10);
bNombre = new JButton("Saludar");
bNombre.addActionListener(this);

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

19

GUI: Layouts

Existen interfaces mas complejas que requieren de layouts diferentes al

FlowLayout empleado en las diapositivas anteriores para organizar los elementos
grficos.

Por ejemplo como se deben organizar los elementos para obtener las siguientes
interfaces:

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

20

GUI: Layouts

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

21

FIN

Escuela de Ingeniera de Sistemas y Computacin.

Curso: Algoritmia y Computacin

22