Interfaz grafica de usuario

Ing. Rogelio Cesar Rodriguez Cervantes

http://cesar.crbyte.com
cesarrdz@gmail.com
JFC (Java Foundation Classes)
Grupo de caractersticas para ayudar a construir
interfaces grficas de usuario
Librerias:
AWT
Java 2D
Accessibility
Drag and Drop
Swing
Swing
Escrito totalmente en java
Se apoya sobre AWT y aade JComponents
Utiliza el modelo de eventos
Seleccin de diferentes apariencias
Proporciona utilidades para facilitar creacin de
aplicaciones grficas
Apariencia
GUI independiente de la plataforma existente
Identica apariencia en distintas plataformas
Permite usar diferentes apariencia
Pueden programarse nuevas apariencia
Paquetes principales
javax.swing
javax.swing.event
Componentes
Contenedores de alto nivel:
JFrame, JApplet, JWindow, JDialog
Componentes ligeros:
JButton, JPanel, JTree, etc.
Los contenedores de alto nivel prestan
funcionalidad a los componentes ligeros:
Espacio donde pintarse, Manejo de eventos, etc.
Un componente puede contener otros
componentes
Ejemplo: un boton con una imagen
// TestHolaSwing.java
import javax.swing.*;

class HolaSwing extends JFrame{

HolaSwing(){
JLabel lblHola = new JLabel( "Hola a todos!" );

setDefaultCloseOperation(EXIT_ON_CLOSE);

getContentPane().add( lblHola );

setSize(200, 100);
setVisible( true );
}
}

public class TestHolaSwing {

public static void main( String argv[] ) {
HolaSwing hola = new HolaSwing();
}
}
 Lista de componentes
Componente Descripcin
JButton Botn
JCheckBox Botn de comprobacin.
JCheckBoxMenuItem Botn de comprobacin para usar en mens
JColorChooser Selector de colores
JComboBox Entrada de texto con lista de valores
JComponent Raz de la jerarquia de componentes Swing
JEditorPane Editor de texto. Normalmente HTML o RTF
JFileChooser Selector de ficheros
JLabel Etiqueta
JList Lista
JMenu Men dentro de un JMenuBar o dentro de otro men
JMenuBar Barra de Mens
JMenuItem Elemento seleccionable en un men
JOptionPane Ventanas de dialogo
JPasswordField Entrada de passwords
JPopupMenu Ventana con un men
JProgressBar Barra de progreso
 Lista de componentes, cont.
Componente Descripcin
JRadioButton Botn excluyente
JRadioButtonMenuItem Botn excluyente para usar en mens
JScrollBar Barra de desplazamiento
JSeparator Lneas de separacin
JSlider Deslizador
JTable Tabla
JTextArea Edicin de mltiples lneas de texto plano
JTextComponent Raz de los editores de texto
JTextField Edicin de una lnea de texto plano
JTextPane Subclase de JEditorPane para hacer procesadores de texto
JToggleButton Padre de JCheckBox y JRadioButton
JToolBar Barra de herramientas o acciones
JToolTip Ventana informativa
JTree rboles
 Contenedores
Contenedor Descripcin
Box Posiciona hijos usando BoxLayout
JApplet Applets
JDesktopPane Desktop que contiene JInternalFrame(s)
JDialog Presentacin de dialogos
JFrame Ventana
JInternalFrame Ventana interna. Suele usarse dentro de un JDesktopPane
JLayeredPane Contenedores apilados
JPanel Agrupar hijos
JRootPane Usado por JApplet, JDialog, JFrame, JInternalFrame y
JWindow Proporciona muchas caracterssticas
JScrollPane Aade barras de desplazamiento a su hijo
JSplitPane Muestra dos hijos pudiendo ajustar sus tamaos relativos
JTabbedPane Solapas para mostrar diferentes hijos
JViewPort Muestra una parte de sus hijo. Tpicamente usado por
JScrollPane
JWindow Ventana sin decoracin
// TestCForma.java
import javax.swing.*;
class CForma extends JFrame {
JLabel usernameLabel = new JLabel("Username : ");
JLabel passwordLabel = new JLabel("Password : ");
JTextField username = new JTextField(15);
JPasswordField password = new JPasswordField(15);
JButton btnAcepta= new JButton("Acepta");
public CForma() {
super("Forma"); // Titulo de la forma
setDefaultCloseOperation(EXIT_ON_CLOSE);
setSize(260, 140);
JPanel panel = new JPanel();
panel.add(usernameLabel);
panel.add(username);
panel.add(passwordLabel);
panel.add(password);
panel.add(btnAcepta);
setContentPane(panel);
setVisible(true); Ejercicio sugerido:
} - Realize la clase principal
}
Manejador de eventos
Cada vez que el usuario interacta con la
aplicacin se dispara un evento
Para que una componente reaccione frente a un
evento, debe tener un "escuchador"
El escuchador debe tener al menos un mtodo
que se ejecutar al escuchar un evento en
particular
Ejemplos de eventos y sus escuchadores
Accin que dispara un evento Tipo de escuchador
El usario hace un click, presiona Return
en un rea de texto o selecciona un men ActionListener

El usuario escoje un frame (ventana principal) WindowListener

El usuario hace un click sobre una componente MouseListener

El usuario pasa el mouse sobre una componente MouseMotionListener

Una componente se hace visible ComponentListener

Una componente adquiere el foco del teclado FocusListener

Cambia la seleccin en una lista o tabla ListSelectionListener

import javax.swing.*;
import java.awt.event.*;
class CAreaC extends JFrame implements ActionListener {
JLabel lblLado = new JLabel("Lado");
JTextField txtLado = new JTextField("0", 5);
JButton btnCalcula = new JButton("Calcula Area");
JLabel lblArea = new JLabel("Area ");
JLabel lblResultado = new JLabel("");
public CAreaC() {
super("Calcula el area de un cuadrado");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(300, 100);

JPanel panel = new JPanel();

panel.add(lblLado);
panel.add(txtLado);
panel.add(btnCalcula);
panel.add(lblArea);
panel.add(lblResultado);
setContentPane(panel);
Programa continua siguiente pagina
 btnCalcula.addActionListener(this);
setVisible(true);
}
public void actionPerformed(ActionEvent evento) {
int lado;
Object fuente = evento.getSource();

if (fuente == btnCalcula) {
try {
lado = Integer.parseInt(txtLado.getText());
lblResultado.setText("" + (lado * lado));
}
catch (NumberFormatException e) {
txtLado.setText("0");
lblResultado.setText("0");
}
}
}
}
Programa continua siguiente pagina
class TestAreaC {
public static void main(String[] arguments) {
CAreaC area = new CAreaC();
}
}

Ejercicio sugerido:
- Realize un programa que calcule el area de un triangulo
utilizando el swing
Administrador de diseo
Utilizado para organizar los componentes que se
agregan a un contenedor y mostrarlos a la vez en
un orden preestablecido
Cada contenedor tiene asignado un administrador
de diseo de forma predeterminada
Administradores de diseo
FlowLayout. Coloca los componentes de izquierda a
derecha (igual que se coloca el texto en un prrafo)

BorderLayout. Divide un contenedor en cinco secciones

denominadas: norte, sur, este, oeste y centro. Los
componentes se colocarn en una seccin u otra segn
decidamos

GridLayout. Coloca los componentes en filas y columnas

CardLayout. Permite colocar grupos diferentes de

componentes en instantes diferentes de la ejecucin (similar a
los paneles con pestaas)
Administradores de diseo, cont.
GridBagLayout. Coloca los componentes en filas y
columnas. A diferencia de GridLayout, permite que un
componente pueda ocupar ms de una columna

BoxLayout. Coloca los componentes en una nica fila o

columna, ajustndose al espacio que haya
// TestCBordes.java
import javax.swing.*;
import java.awt.*;

class CBordes extends JFrame {

ImageIcon icon = new ImageIcon("mundo.gif");

JButton boton1 = new JButton("Norte");

JButton boton2 = new JButton("Sur", icon);
JButton boton3 = new JButton("Este");
JButton boton4;
JButton boton5;

CBordes() {
super("Border Layout");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(640, 480);
boton3.setIcon(icon);
boton4 = new JButton("Oeste");
boton5 = new JButton(icon);
Programa continua siguiente pagina
 BorderLayout lm = new BorderLayout();
JPanel panel = new JPanel();

panel.setLayout(lm);
panel.add("North", boton1);
panel.add("South", boton2);
panel.add("East", boton3);
panel.add("West", boton4);
panel.add("Center",boton5);
setContentPane(panel);

// reduce el tamano de la ventana a lo necesario:

pack();
setVisible(true);
}
}

class TestCBordes {
public static void main(String[] arguments) {
CBordes borde = new CBordes();
}
}
import javax.swing.*;
import java.awt.*;
class CGrid extends JFrame {
JButton[] boton = new JButton[6];
int i;
CGrid() {
super("Border Layout");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(640, 480);
GridLayout lm = new GridLayout(3, 2, 10, 10);
JPanel panel = new JPanel();

panel.setLayout(lm);
for (i = 0; i < 6; i++) {
boton[i] = new JButton("TEST "+ i);
panel.add(boton[i]);
}
setContentPane(panel);
pack();
setVisible(true);
}
}
// Varios Layout managers: 2 GridLayouts
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.util.*;

class CAdivina extends JFrame implements

ActionListener, FocusListener {
int iMiNumero;
int iTuNumero;
Random random;

JLabel lblNumero = new JLabel("Numero (1 - 5)");

JTextField txtNumero = new JTextField(15);
JLabel lblAdivina= new JLabel();
JButton btnAcepta = new JButton("Acepta");
JButton btnSalir = new JButton("Salir");

Font fBold;

Programa continua siguiente pagina

CAdivina(){
super("Adivina el numero que estoy pensando");
setSize(400, 300);
setDefaultCloseOperation(EXIT_ON_CLOSE);

fBold = new Font("Monospaced", Font.BOLD, 16);

lblAdivina.setFont(fBold);

GridLayout mainGrid = new GridLayout(3,1,20,20);

GridLayout grid = new GridLayout(1, 2, 10, 10);

JPanel panel = new JPanel();

JPanel secPanel = new JPanel();
JPanel btnPanel = new JPanel();

btnAcepta.addActionListener(this);
btnSalir.addActionListener(this);
txtNumero.addFocusListener(this);

Programa continua siguiente pagina

 random = new Random();
iMiNumero = random.nextInt(5) + 1;

secPanel.setLayout(grid);
secPanel.add(lblNumero);
secPanel.add(txtNumero);

btnPanel.setLayout(grid);
btnPanel.add(btnAcepta);
btnPanel.add(btnSalir);

panel.setLayout(mainGrid);
panel.add(secPanel);
panel.add(lblAdivina);
panel.add(btnPanel);

panel.setBackground(Color.yellow);
setContentPane(panel);
pack();
setVisible(true);
} Programa continua siguiente pagina
public void actionPerformed(ActionEvent evento) {
Object fuente = evento.getSource();

if (fuente == btnAcepta) {
try {
iTuNumero = Integer.parseInt(
txtNumero.getText());
}
catch(NumberFormatException e) {
iTuNumero = 0;
}
if (iTuNumero == iMiNumero) {
lblAdivina.setForeground(Color.red);
lblAdivina.setText("ADIVINASTE!!!");
iMiNumero = random.nextInt(5) + 1;
}
else {
lblAdivina.setForeground(Color.black);
lblAdivina.setText("NO ADIVINASTE.");
}
} Programa continua siguiente pagina
 if (fuente == btnSalir)
System.exit(0);
}

public void focusGained(FocusEvent evento) {

txtNumero.setText("");
}

public void focusLost(FocusEvent evento) { }

}

Ejercicio sugerido:
- Realize un programa cambie de dolares a pesos, pida el tipo
de cambio, utilize varios layout managers