ALGORITMICA Y PROGRAMACION POR OBJETOS I

Nivel 5
Construyendo la Interfaz Grfica

Marcela Hernndez Hoyos

Motivacin
Interfaz usuario

Modelo del mundo

Usuario

nico medio de comunicacin entre el usuario y el modelo del mundo

Motivacin
Interfaz usuario

Modelo del mundo

Usuario

A travs de la interfaz:

Ejecuta operaciones sobre el modelo del mundo. Ve el resultado de sus acciones.

Aspectos importantes

Diseo funcional y grfico

Colores Distribucin de elementos grficos (mens, botones, )

Arquitectura
Estructura clara Fcil de mantener

Qu vamos a aprender en este nivel:

Cmo proponer una arquitectura para un programa simple:
Repartir responsabilidades entre interfaz, mundo y pruebas.

Cmo construir las clases que implementan una interfaz usuario Cmo integrar las clases de la interfaz con las clases del mundo

Caso de estudio: Calculador de Impuestos

El Calculador de Impuestos
Funcionalidad Interfaz usuario Requerimientos Funcionales Arquitectura
Mundo Interfaz

El Calculador de Impuestos Funcionalidad

Calcula el valor de los impuestos que una persona debe pagar por su carro Vehculo se caracteriza por:
Marca, lnea, modelo y precio

Clculo de impuestos como porcentaje del precio del vehculo (% determinado por un rango) Hay tres tipos de descuento
Pronto pago, servicio pblico, traslado de cuenta

El Calculador de Impuestos Interfaz usuario

Ventana Principal 3 Zonas de trabajo:
Informacin del vehculo Descuentos Clculo de impuestos + inicializar la aplicacin

El Calculador de Impuestos Requerimientos Funcionales

R1 R2 RNF Buscar el avalo de un vehculo Calcular el pago de impuesto de un vehculo Requerimiento NO FUNCIONAL (inicializar la aplicacin sin tener que volver a ejecutarla)

Tarea No. 1
RF1: Buscar el avalo de un vehculo
Resumen:
Dada la informacin del vehculo, presentar el valor de avalo del mismo

Entradas:

Resultado:

Tarea No. 1
RF2:Calcular el pago de impuesto de un vehculo
Resumen:
Dada la informacin de un vehculo, y el conjunto de descuentos que le aplican, dar el valor a pagar por los impuestos del vehculo

Entradas:

Resultado:

El Calculador de Impuestos Arquitectura

Mundo

Interfaz

El Calculador de Impuestos (Mundo)

0 .. n rangos

0 .. n marcas 0 .. n lineas 0 .. n modelos

Tarea No. 2
CalculadorImpuestos
Constantes Asociaciones

Marca
Atributos Asociaciones

Linea
Atributos Asociaciones

Modelo
Atributos

RangoImpuesto
Atributos

Mtodos de la clase CalculadorImpuestos (pag. 3)

buscarAvaluoVehiculo
/** * Retorna el valor de avalo de un vehiculo de la marca, lnea y modelo dado. * @param unaMarca - marca del vehiculo * @param unaLinea - linea del vehiculo * @param unModelo - modelo del vehiculo * @return precio de avalo del vehiculo * @throws Exception si no encuentra la marca o la linea o el modelo registrados */ public double buscarAvaluoVehiculo( String unaMarca, String unaLinea, String unModelo ) throws Exception

Mtodos de la clase CalculadorImpuestos (pag. 3)

calcularPago
/** * Calcular el pago de impuesto que debe hacer un vehculo de un modelo dado. Si no encuentra un rango para el modelo devuelve 0 * @param unaMarca - marca del vehiculo * @param unaLinea - linea del vehiculo * @param unModelo - modelo del vehiculo * @param descProntoPago - indica si aplica el descuento por pronto pago * @param descServicioPublico - indica si aplica el descuento por servicio pblico * @param descTrasladoCuenta - indica si aplica el descuento por traslado de cuenta * @return valor a pagar * @throws Exception si no encuentra el vehiculo dado por la marca, la linea y el modelo */ public double calcularPago( String unaMarca, String unaLinea, String unModelo, boolean descProntoPago, boolean descServicioPublico, boolean descTrasladoCuenta ) throws Exception

Construccin de interfaces grficas

El Calculador de Impuestos Interfaz usuario

Ventana Principal 3 Zonas de trabajo:
Informacin del vehculo Descuentos Clculo de impuestos + inicializar la aplicacin

El Calculador de Impuestos Interfaz usuario

InterfazImpuestosCarro (JFrame) 3 Zonas de trabajo:
PanelVehiculo (JPanel) PanelDescuentos (JPanel) PanelResultados (JPanel)

El Calculador de Impuestos Interfaz usuario

InterfazImpuestosCarro (JFrame)

PanelVehiculo (JPanel) PanelDescuentos (JPanel) PanelResultados (JPanel)

Clases JAVA

Entidades
Mundo del Problema
Estudiante Tienda Banco Recurso Avion

Mundo Grfico y de Interaccin

Ventana (JFrame) Panel (JPanel) Botn (JButton) Zona de texto (JTextField) Etiqueta (JLabel) Caja de chequeo (JCheckBox)

Entidades del mundo grfico y de interaccin

Ventana

Entidades del mundo grfico y de interaccin

Panel

Entidades del mundo grfico y de interaccin

Zona de texto

Entidades del mundo grfico y de interaccin

Caja de chequeo

Entidades del mundo grfico y de interaccin

Etiqueta

Entidades del mundo grfico y de interaccin

Boton

El Calculador de Impuestos (Interfaz)

principal

principal

El Calculador de Impuestos Interfaz usuario

InterfazImpuestosCarro (JFrame) 3 Zonas de trabajo:
PanelVehiculo (JPanel) PanelDescuentos (JPanel) PanelResultados (JPanel)

El Calculador de Impuestos Interfaz usuario

InterfazImpuestosCarro (JFrame)

PanelVehiculo (JPanel) PanelDescuentos (JPanel) PanelResultados (JPanel)

Clases JAVA

El Calculador de Impuestos Interfaz usuario

InterfazImpuestosCarro (JFrame)

PanelVehiculo (JPanel) PanelDescuentos (JPanel) PanelResultados (JPanel)

Se encuentran en una biblioteca grfica (swing) Paquete: java.swing Deber ser importado

Elementos grficos estructurales

La Ventana Principal

La Ventana Principal
Contiene TODOS los elementos de visualizacin e interaccin (con los que el usuario va a utilizar el programa) UNICA FUNCION:
Servir como marco para los dems elementos de la interfaz (AGRUPA)

Es un contenedor grfico

La Ventana Principal
Ttulo Controles para cerrar el programa

La Ventana Principal

principal

principal

Ventana principal = Objeto de la clase InterfazImpuestosCarro

Clase InterfazImpuestosCarro
Como cualquier clase:
Est declarada en su propio archivo: InterfazImpuestosCarro.java (pag. 8) Sigue las mismas reglas que cualquier clase del mundo

Diferencia:
Est declarada en otro paquete: uniandes.cupi2.impuestosCarro.interfaz (ver en Eclipse)

Clase InterfazImpuestosCarro
package uniandes.cupi2.impuestosCarro.interfaz; import java.awt.*; import javax.swing.*; import uniandes.cupi2.impuestosCarro.mundo.*; /** * Interfaz de clculo de impuestos de carros */ public class InterfazImpuestosCarro extends JFrame { }

Clase InterfazImpuestosCarro
package uniandes.cupi2.impuestosCarro.interfaz;

La clase se declara dentro del paquete de las clases de la interfaz usuario

Clase InterfazImpuestosCarro
package uniandes.cupi2.impuestosCarro.interfaz; import java.awt.*; import javax.swing.*;

Se importan las clases de los dos paquetes mostrados (swing y awt)

Clase InterfazImpuestosCarro
package uniandes.cupi2.impuestosCarro.interfaz; import java.awt.*; import javax.swing.*; import uniandes.cupi2.impuestosCarro.mundo.*;

Se importan las clases del modelo del mundo

Clase InterfazImpuestosCarro

principal

principal

Clase InterfazImpuestosCarro
package uniandes.cupi2.impuestosCarro.interfaz; import java.awt.*; import javax.swing.*; import uniandes.cupi2.impuestosCarro.mundo.*; /** * Interfaz de clculo de impuestos de carros */ public class InterfazImpuestosCarro extends JFrame { }
La clase se declara con la misma sintxis de las clases del modelo del mundo

Clase InterfazImpuestosCarro
package uniandes.cupi2.impuestosCarro.interfaz; import java.awt.*; import javax.swing.*; import uniandes.cupi2.impuestosCarro.mundo.*; /** * Interfaz de clculo de impuestos de carros */ public class InterfazImpuestosCarro extends JFrame { }
Se agrega extends JFrame para indicar que es una ventana

Clase InterfazImpuestosCarro
Clase de swing que se est extendiendo

principal

principal

Clase InterfazImpuestosCarro
Cmo cambiar el estado (apariencia) de la ventana?

Clase InterfazImpuestosCarro
Cmo cambiar el estado (apariencia) de la ventana? R// Con los mtodos de la clase JFrame
Cambiar el ttulo de la ventana Cambiar el tamao de la ventana Agregar componentes grficos

Mtodos de JFrame
setSize ( ancho, alto ) setResizable ( true/false ) setTitle ( titulo ) setDefaultCloseOperation ( EXIT_ON_CLOSE) setVisible ( true/false ) add ( componente )

Configuracin de la ventana en el mtodo Constructor

public InterfazImpuestosCarro( ) { setTitle( "Clculo impuestos" ); setSize( 290, 350 ); setResizable( false ); setDefaultCloseOperation( EXIT_ON_CLOSE ); setLayout( new BorderLayout( ) ); }

Distribuidor grfico de elementos (layout)

Se encarga de distribuir los elementos (NO tenemos que hacerlo) Slo tenemos que asociar a la ventana un objeto de este tipo (clase) que se encargue de hacerlo Java (swing) tiene varios distribuidores grficos (varias clases). En APO1 vamos a ver dos:
BorderLayout GridLayout

Configuracin de la ventana en el mtodo Constructor

public InterfazImpuestosCarro( ) { setTitle( "Clculo impuestos" ); setSize( 290, 350 ); setResizable( false ); setDefaultCloseOperation( EXIT_ON_CLOSE ); setLayout( new BorderLayout( ) ); }

Divisiones y Paneles

El Calculador de Impuestos Interfaz usuario

InterfazImpuestosCarro (JFrame) 3 Zonas de trabajo:
PanelVehiculo (JPanel) PanelDescuentos (JPanel) PanelResultados (JPanel)

Un Panel
Se encarga de agrupar elementos grficos por contenido y uso Facilita al usuario su localizacin y su uso Cada panel se implementa como una clase aparte en el modelo
PanelVehiculo PanelDescuentos PanelResultados

El Calculador de Impuestos (Interfaz)

principal

principal

Clase InterfazImpuestosCarro

Creacin de los paneles en el mtodo Constructor

public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) );

Se declara un atributo por cada una de las divisiones

Creacin de los paneles en el mtodo Constructor

public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) );

Se asocia a la ventana un distribuidor grfico

Creacin de los paneles en el mtodo Constructor

public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) ); panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }

Se crea una instancia de cada uno de los paneles

Creacin de los paneles en el mtodo Constructor

public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) ); panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }

Se agrega cada panel en una posicin de las definidas en el distribuidor grfico

Creacin de los paneles en el mtodo Constructor

public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) ); panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }

Analicemos la creacin del panelVehiculo

Atributo panelVehiculo de la clase InterfazImpuestosCarro

panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH );

Analicemos la creacin del panelVehiculo

Llamado al constructor de la clase PanelVehiculo

panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH );

Analicemos la creacin del panelVehiculo

Concepto nuevo

Parmetro del mtodo constructor de la clase PanelVehiculo

panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH );

Analicemos la creacin del panelVehiculo

panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH );

Mtodo de la clase JFrame para adicionar un componente

Analicemos la creacin del panelVehiculo

panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH );

Objeto que se va a adicionar

Analicemos la creacin del panelVehiculo

panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH );

Zona (posicin relativa dentro de la ventana) donde se va a adicionar el objeto. Es una constante de la clase BorderLayout.

Concepto nuevo

Dos conceptos nuevos

BorderLayout this

Dos conceptos nuevos

BorderLayout
Distribuidor grfico en los Bordes Divide el espacio de la ventana en 5 zonas: NORTH, CENTER, SOUTH, WEST, EAST. Al agregar un componente a la ventana, SE DEBE pasar como parmetro la zona donde se va a ubicar. Ejemplo: add( panelVehiculo, BorderLayout.NORTH ); Utiliza el tamao definido para cada uno de los componentes y asigna TODO el espacio sobrante al componente que se encuentre en la zona del centro WEST

NORTH

CENTER

EAST

SOUTH

Dos conceptos nuevos

Otro distribuidor: GridLayout
Distribuidor grfico en Malla Divide el espacio de la ventana en filas y columnas. La cantidad de filas y columnas se establecen en el mtodo constructor del GridLayout. Ejemplo: setLayout( new GridLayout ( 4, 3 ) ); Al agregar un componente a la ventana, NO SE DEBE especificar la posicin. Esta es asignada en el orden de llegada (fila 1, fila 2, ) Ignora el tamao definido para cada componente. Hace una distribucin uniforme del espacio.

Fila 1 Fila 2 Fila 3 Fila 4

1 2 3 4 5 6 7 8 9 10 11 12

Dos conceptos nuevos

BorderLayout this

Dos conceptos nuevos

this
Es una variable de JAVA Hace referencia al objeto que est ejecutando un mtodo

Ejemplo de uso de this

public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) ); panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }

Ejemplo de uso de this

Es la ventana principal, (objeto de la clase InterfazImpuestosCarro, que es el padre del panel)

panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH );

Para qu sirve? VER MAS ADELANTE

Hasta aqu hemos visto

Cmo construir la clase de la ventana principal (InterfazImpuestosCarro)

Ahora vamos a ver

Cmo construir las clases de los paneles (PanelVehiculo, PanelDescuentos, PanelResultados)

Construccin de las clases de los paneles

Proceso similar a la construccin de la clase de la ventana principal Al igual que la ventana principal, los paneles tambin son contenedores grficos Ventana Principal

JFrame

Construccin de las clases de los paneles

Proceso similar a la construccin de la clase de la ventana principal Al igual que la ventana principal, los paneles tambin son contenedores grficos Ventana Principal Panel

JFrame

JPanel

PanelVehiculo
public class PanelVehiculo extends JPanel { public PanelVehiculo( ) { setLayout( new GridLayout( 5, 2 ) ); setPreferredSize( new Dimension( 0, 130 ) );

Creacin y asociacin de un GridLayout de 5 filas y 2 columnas

PanelVehiculo
public class PanelVehiculo extends JPanel { public PanelVehiculo( ) { setLayout( new GridLayout( 5, 2 ) ); setPreferredSize( new Dimension( 0, 130 ) );

Definir la altura del panel. No se define el ancho porque va a ser igual al de la ventana

Clase de Java que permite definir un ancho y un alto usando un objeto

}

130

PanelVehiculo
public class PanelVehiculo extends JPanel { public PanelVehiculo( ) { setLayout( new GridLayout( 5, 2 ) ); setPreferredSize( new Dimension( 0, 130 ) ); TitledBorder border = BorderFactory.createTitleBorder (Datos del vehculo); border.SetTitleColor( Color.BLUE ); setBorder( border );

Se crea y se asocia un borde al panel para facilitar la identificacin de las divisiones dentro de la ventana

PanelDescuentos
public class PanelDescuentos extends JPanel { public PanelVehiculo( ) { setLayout( new GridLayout( 2, 2 ) );

Creacin y asociacin de un GridLayout de 2 filas y 2 columnas

PanelDescuentos
public class PanelDescuentos extends JPanel { public PanelVehiculo( ) { setLayout( new GridLayout( 2, 2 ) ); TitledBorder border = BorderFactory.createTitleBorder (Descuentos); border.SetTitleColor( Color.BLUE ); setBorder( border );

Se crea y se asocia un borde

Etiquetas y Zonas de Texto

Etiquetas
Permiten agregar un texto corto en la interfaz Son objetos de la clase JLabel de Java Algunos mtodos de la clase JLabel:
setText (texto); setForeground ( color );

Cualquier constante de la clase Color de Java (BLACK, GREEN, RED, BLUE, ) o un nuevo color creado con 3 ndices RGB

Zonas de texto
Cumplen dos funciones:
Permiten el ingreso de informacin por parte del usuario (ENTRADAS de los requerimientos funcionales) Permiten mostrar las respuestas calculadas por el programa

Son objetos de la clase JText de Java Algunos mtodos de la clase JLabel:

getText ( );
Retorna la cadena de caracteres tecleada por el usuario. SIEMPRE es String.

Zonas de texto
Cumplen dos funciones:
Permiten el ingreso de informacin por parte del usuario (ENTRADAS de los requerimientos funcionales) Permiten mostrar las respuestas calculadas por el programa

Son objetos de la clase JText de Java Algunos mtodos de la clase JLabel:

getText ( ); setText ( texto );
Despliega el texto que se pasa como parmetro. Se usa para mostrar los resultados del programa.

Zonas de texto
Cumplen dos funciones:
Permiten el ingreso de informacin por parte del usuario (ENTRADAS de los requerimientos funcionales) Permiten mostrar las respuestas calculadas por el programa

Son objetos de la clase JText de Java Algunos mtodos de la clase JLabel:

getText ( ); setText ( texto ); setEditable ( true / false)
Indica si el usuario puede o no modificar el texto (escribir encima)

Zonas de texto
Cumplen dos funciones:
Permiten el ingreso de informacin por parte del usuario (ENTRADAS de los requerimientos funcionales) Permiten mostrar las respuestas calculadas por el programa

Son objetos de la clase JTextField de Java Algunos mtodos de la clase JLabel:

getText ( ); setText ( texto ); setEditable ( true / false) setForeground (color ) setBackground ( color )

Definen respectivamente el color del texto y del fondo

Cmo agregar una etiqueta (o una zona de texto) a un panel

Declarar en el panel un atributo de la clase JLabel (o JTextField) Crear la etiqueta (o la zona de texto) (new) en el mtodo constructor del panel Configurar las caractersticas de la etiqueta (o de la zona de texto) con los mtodos de la clase JLabel (o JTextField) Agregar la etiqueta (o la zona de texto) al panel (add)

Ejemplo en PanelVehiculo
public class PanelVehiculo extends JPanel { private JLabel labMarca; private JLabel labLinea; private JLabel labModelo; Declarar private JLabel labValor; private JTextField txtMarca; private JTextField txtLinea; private JTextField txtModelo; private JTextField txtValor; }

en el panel los atributos de clases JLabel y JTextField

Ejemplo en PanelVehiculo
public PanelVehiculo ( ) { labMarca = new JLabel ( Marca ); labLinea = new JLabel ( Lnea ); labModelo = new JLabel ( Modelo ); labValor = new JLabel ( Valor ); txtMarca = new JTextField( ); txtLinea = new JTextField( ); txtModelo = new JTextField( ); txtValor = new JTextField( $ 0 ); }

Crear las etiquetas y las zonas de texto (new) en el mtodo constructor del panel

Ejemplo en PanelVehiculo
public PanelVehiculo ( ) { labMarca = new JLabel ( Marca ); labLinea = new JLabel ( Lnea ); labModelo = new JLabel ( Modelo ); labValor = new JLabel ( Valor ); txtMarca = new JTextField( ); txtLinea = new JTextField( ); txtModelo = new JTextField( ); txtValor = new JTextField( $ 0 ); txtValor.SetEditable(false); txtValor.SetForeground(Color.BLUE); txtValor.SetBackground(Color.WHITE); }

Configurar las caractersticas de las etiquetas o de las zonas de texto con los mtodos de las clases JLabel o JTextField

Ejemplo en PanelVehiculo
public PanelVehiculo ( ) { labMarca = new JLabel ( Marca ); labLinea = new JLabel ( Lnea ); labModelo = new JLabel ( Modelo ); labValor = new JLabel ( Valor ); txtMarca = new JTextField( ); txtLinea = new JTextField( ); txtModelo = new JTextField( ); txtValor = new JTextField( $ 0 ); txtValor.SetEditable(false); txtValor.SetForeground(Color.BLUE); txtValor.SetBackground(Color.WHITE); add( labMarca ); add( txtMarca ); add( labLinea ); add( txtLinea ); add( labModelo ); add( txtModelo ); add( labValor ); add( txtValor );

Agregar las etiquetas y las zonas de texto al panel (add)

Seleccin de Opciones por medio de Cajas de Chequeo

Cajas de chequeo
Permiten al usuario seleccionar o deseleccionar una opcin. Son objetos de la clase JCheckBox de Java Algunos mtodos de la clase JCheckBox:
isSelected ( );
Indica (true/false) si el usuario seleccion la opcin

Cajas de chequeo
Permiten al usuario seleccionar o deseleccionar una opcin. Son objetos de la clase JCheckBox de Java Algunos mtodos de la clase JCheckBox:
isSelected ( );
Marca como seleccionado o no, la caja de chequeo

setSelected ( true/false );

Ejemplo en PanelDescuentos
public class PanelDescuentos extends JPanel { private JCheckBox cbPago; Declarar private JCheckBox cbSPublico; atributos private JCheckBox cbTCuenta; }

en el panel los de clase JCheckBox

Ejemplo en PanelDescuentos
public PanelDescuentos ( ) { cbPago = new JCheckBox ( Pronto pago ); cbSPublico = new JCheckBox ( Servicio pblico ); cbTCuenta = new JCheckBox ( Traslado de cuenta ); }

Crear las cajas de chequeo (new) en el mtodo constructor del panel

Ejemplo en PanelDescuentos
public PanelDescuentos ( ) { cbPago = new JCheckBox ( Pronto pago ); cbSPublico = new JCheckBox ( Servicio pblico ); cbTCuenta = new JCheckBox ( Traslado de cuenta ); add( cbPago ); add( cbTCuenta ); add( cbSPublico );

Agregar las cajas de chequeo al panel (add)

Interaccin con la aplicacin mediante Botones

Botones
Permiten al usuario expresar sus rdenes al programa (es el mecanismo ms simple de interaccin). Son objetos de la clase JButton de Java La clase JButton tiene DOS METODOS especiales:
setActionCommand ( evento ); addActionListener ( panel );

Ejemplo en PanelResultados
public class PanelResultados extends JPanel { private JLabel labTotal; private JTextField txtTotal; private JButton butLimpiar; private JButton butCalcular; }

Declarar en el panel los atributos de clase JButton

Ejemplo en PanelResultados
public PanelResultados ( ) { labTotal = new JLabel ( Total a pagar ); txtTotal = new JTextField ( $ 0 ); butLimpiar = new JButton ( Limpiar ); butCalcular = new JButton ( Calcular ); }

Crear los botones (new) en el mtodo constructor del panel

Ejemplo en PanelResultados
public PanelResultados ( ) { labTotal = new JLabel ( Total a pagar ); txtTotal = new JTextField ( $ 0 ); butLimpiar = new JButton ( Limpiar ); butCalcular = new JButton ( Calcular ); txtTotal.SetEditable( false ); txtTotal.SetForeground( Color.BLUE ); txtTotal.SetBackground( Color.WHITE ); add( new Jlabel( ) ); add( new Jlabel( ) ); add(butLimpiar); add(labTotal); add(txtTotal); add(butCalcular);

Agregar los botones al panel (add)

Acciones del Usuario y Eventos de la aplicacin

Acciones y Eventos
evento llamada a un mtodo Interfaz usuario

Modelo del mundo Usuario

El usuario ejecuta acciones:

Hace click sobre un botn Chequea una caja de chequeo Selecciona una opcin de un Men

Las acciones se convierten en objetos llamados eventos:

Describen lo que el usuario hizo Se puede analizar su contenido para que el programa reaccione de acuerdo a la accin del usuario

Cmo manejar un evento con un botn de la interfaz en 3 pasos y no morir en el intento: Dar un nombre al evento y asociarlo a un botn
public class PanelResultados extends JPanel { public final static String LIMPIAR = limpiar; public final static String CALCULAR = calcular; public PanelResultados( ) { butLimpiar.SetActionCommand ( LIMPIAR ); butCalcular.SetActionCommand ( CALCULAR ); } }

En la clase del panel que contiene el botn

Se declaran constantes para los nombres de los eventos

Cmo manejar un evento con un botn de la interfaz en 3 pasos y no morir en el intento: Dar un nombre al evento y asociarlo a un botn
public class PanelResultados extends JPanel { public final static String LIMPIAR = limpiar; public final static String CALCULAR = calcular; public PanelResultados( ) { butLimpiar.SetActionCommand ( LIMPIAR ); butCalcular.SetActionCommand ( CALCULAR ); } }

En el mtodo constructor del panel Se asocian los nombres de los eventos con cada botn

Cmo manejar un evento con un botn de la interfaz en 3 pasos y no morir en el intento: Atender el evento
public class PanelResultados extends JPanel implements ActionListener { public void actionPerformed (ActionEvent evento ) { Agregar una declaracin String comando = evento.getActionCommand( ); en el encabezado de la if ( (comando.equals( LIMPIAR) ) clase del panel que { contiene el botn (para // Reaccin al evento de LIMPIAR que pueda percibir las } acciones del usuario) else if (comando.equals( CALCULAR ) ) // Reaccin al evento de CALCULAR } }

Cmo manejar un evento con un botn de la interfaz en 3 pasos y no morir en el intento: Atender el evento
public class PanelResultados extends JPanel implements ActionListener { Implementar en la clase del panel que contiene el public void actionPerformed (ActionEvent evento ) botn, el mtodo especial { actionPerformed String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { // Reaccin al evento de LIMPIAR parmetro del mtodo: } evento ocurrido en el else if (comando.equals( CALCULAR ) ) panel { // Reaccin al evento de CALCULAR } }

Cmo manejar un evento con un botn de la interfaz en 3 pasos y no morir en el intento: Atender el evento
public class PanelResultados extends JPanel implements ActionListener { Implementar en la clase del panel que contiene el public void actionPerformed (ActionEvent evento ) botn, el mtodo especial { actionPerformed String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { // Reaccin al evento de LIMPIAR parmetro del mtodo: } evento ocurrido en el else if (comando.equals( CALCULAR ) ) panel { // Reaccin al evento de CALCULAR } }

Cmo manejar un evento con un botn de la interfaz en 3 pasos y no morir en el intento: Atender el evento
public class PanelResultados extends JPanel implements ActionListener { public void actionPerformed (ActionEvent evento ) { String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { // Reaccin al evento de LIMPIAR Mtodos de la ventana } principal !!! else if (comando.equals( CALCULAR ) ) { // Reaccin al evento de CALCULAR } }

Cmo manejar un evento con un botn de la interfaz en 3 pasos y no morir en el intento: Atender el evento
public class PanelResultados extends JPanel implements ActionListener { public void actionPerformed (ActionEvent evento ) { Cada vez que el String comando = evento.getActionCommand( ); usuario hace click if ( (comando.equals( LIMPIAR) ) en un botn del { panel, se ejecuta el // Reaccin al evento de LIMPIAR mtodo } actionPerformed else if (comando.equals( CALCULAR ) ) { // Reaccin al evento de CALCULAR } }

Cmo manejar un evento con un botn de la interfaz en 3 pasos y no morir en el intento: Decir que el panel es el encargado de atender el evento
public class PanelResultados extends JPanel implements ActionListener { Mediante el mtodo public PanelResultados ( ) addActionListener de la { clase JButton butLimpiar.addActionListener (this); butCalcular.addActionListener (this); } }

parmetro del mtodo: el objeto que lo est ejecutando, es decir el panel mismo

Arquitectura y Distribucin de Responsabilidades

Qu vamos a aprender
Coordinar los elementos de la interfaz y del modelo del mundo para satisfacer los requerimientos funcionales Estructurar y repartir las responsabilidades Una propuesta de arquitectura:
Facilita la localizacin de componentes del programa Aumenta la claridad Facilita el mantenimiento

Por dnde comienza la ejecucin del programa?

Por el mtodo main de la ventana principal Su funcin: crear una instancia de la ventana y hacerla visible en la pantalla
public class InterfazImpuestosCarro extends JFrame { public static void main( String[] args ) { InterfazImpuestosCarro vent = new InterfazImpuestosCarro( ); vent.setVisible( true ); } }

Quin crea el modelo del mundo?

La interfaz En el mtodo constructor de la ventana principal
public class InterfazImpuestosCarro extends JFrame { private CalculadorImpuestos calculador; public InterfazImpuestosCarro( ) throws Exception { calculador = new CalculadorImpuestos( ); } }

Arquitectura propuesta
Los requerimientos funcionales se implementan en la ventana principal:
Hay UN mtodo por REQUERIMIENTO La ventana principal coordina todas las acciones

Reaccin a un evento generado por el usuario (1 de 6 pasos)

El usuario genera un evento oprimiendo un botn en uno de los paneles de la interfaz

Reaccin a un evento generado por el usuario (2 de 6 pasos)

public class PanelResultados extends JPanel implements ActionListener { public void actionPerformed (ActionEvent evento ) { String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { // Reaccin al evento de LIMPIAR } else if (comando.equals( CALCULAR ) ) { // Reaccin al evento de CALCULAR } }

El panel reacciona al evento con SU mtodo actionPerformed

Reaccin a un evento generado por el usuario (2 de 6 pasos)

public class PanelResultados extends JPanel implements ActionListener { public void actionPerformed (ActionEvent evento ) { String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { // Reaccin al evento de LIMPIAR Llamado a mtodos de la } ventana principal !!! else if (comando.equals( CALCULAR ) ) { // Reaccin al evento de CALCULAR Hay UN mtodo por } REQUERIMIENTO }

Reaccin a un evento generado por el usuario (2 de 6 pasos)

public class PanelResultados extends JPanel implements ActionListener { public void actionPerformed (ActionEvent evento ) { String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { Mtodo limpiar de la principal.limpiar( ); ventana principal } else if (comando.equals( CALCULAR ) ) { Mtodo calcularImpuestos principal.calcularImpuestos( ); de la ventana principal } }

Reaccin a un evento generado por el usuario (2 de 6 pasos)

public class PanelResultados extends JPanel implements ActionListener { public void actionPerformed (ActionEvent evento ) { String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { principal.limpiar( ); Quin es principal? } Dnde est ? else if (comando.equals( CALCULAR ) ) { Quin lo conoce ? principal.calcularImpuestos( ); } }

principal

principal

Quin es principal?
R// Es el objeto que contiene la ventana principal

Dnde est ?
R// Es un atributo (asociacin) de las clases panelResultados y panelVehiculo

Quin lo conoce ?

Entonces
public class PanelVehiculo extends JPanel implements ActionListener { La clase del panel private InterfazImpuestosCarro principal; contiene un atributo del public PanelVehiculo( InterfazImpuestosCarro v) { principal = v; } }

tipo de la ventana principal

Entonces
public class PanelVehiculo extends JPanel implements ActionListener { private InterfazImpuestosCarro principal; public PanelVehiculo( InterfazImpuestosCarro v) { principal = v; } }

El mtodo constructor del panel DEBE recibir como parmetro, el objeto correspondiente a la ventana principal

Entonces
public class PanelVehiculo extends JPanel implements ActionListener { private InterfazImpuestosCarro principal; public PanelVehiculo( InterfazImpuestosCarro v) { principal = v; } Se asigna el parmetro }

al atributo

Entonces
public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) ); panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }

En el mtodo constructor de la ventana principal

Entonces
public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) ); panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }

Cuando se crean los paneles

Entonces
public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) ); panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }

Se pasa como parmetro la ventana principal (this) a los mtodos constructores de los paneles que la necesitan

Entonces
public class InterfazImpuestosCarro extends JFrame { private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) ); panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }

En el mtodo constructor de la ventana principal

Se agrega cada panel en una posicin de las definidas en el distribuidor grfico

Recordemos (1 de 6 pasos)

El usuario genera un evento oprimiendo un botn en uno de los paneles de la interfaz

Recordemos (2 de 6 pasos)
public class PanelResultados extends JPanel implements ActionListener { public void actionPerformed (ActionEvent evento ) { String comando = evento.getActionCommand( ); El panel reacciona al if ( (comando.equals( LIMPIAR) ) evento con SU mtodo { actionPerformed dentro principal.limpiar( ); del cual se analiza el } evento y se llama al else if (comando.equals( CALCULAR ) ) mtodo correspondiente { de la ventana principal principal.calcularImpuestos( ); } }

Reaccin a un evento generado por el usuario (3 de 6 pasos)

public void calcularImpuestos( ) { String unaMarca = panelVehiculo.darMarca( ); String unaLinea = panelVehiculo.darLinea( ); String unModelo = panelVehiculo.darModelo( );

El mtodo de la ventana principal:

Completa la informacin necesaria, pidindola a los dems paneles

Entonces
public class PanelVehiculo extends JPanel implements ActionListener { public String darMarca( ) { return txtMarca.getText( ); }

En la clase del panel respectivo

Existen mtodos para pasar la informacin a la ventana principal

Volviendo al paso 3 de 6
public void calcularImpuestos( ) { String unaMarca = panelVehiculo.darMarca( ); String unaLinea = panelVehiculo.darLinea( ); String unModelo = panelVehiculo.darModelo( );

El mtodo de la ventana principal:

Completa la informacin necesaria, pidindola a los dems paneles

Volviendo al paso 3 de 6
public void calcularImpuestos( ) { String unaMarca = panelVehiculo.darMarca( ); String unaLinea = panelVehiculo.darLinea( ); String unModelo = panelVehiculo.darModelo( ); if( unaMarca.equals( "" ) || unaLinea.equals( "" ) || unModelo.equals( "" ) ) { JOptionPane.showMessageDialog( this, "Por favor llene todos los datos", "Clculo de Impuestos", JOptionPane.ERROR_MESSAGE ); } else { . Completa la informacin } }

El mtodo de la ventana principal:

necesaria, pidindola a los dems paneles Verifica que la informacin est completa y sea vlida

Volviendo al paso 3 de 6
public void calcularImpuestos( ) { String unaMarca = panelVehiculo.darMarca( ); String unaLinea = panelVehiculo.darLinea( ); String unModelo = panelVehiculo.darModelo( ); if( unaMarca.equals( "" ) || unaLinea.equals( "" ) || unModelo.equals( "" ) ) { JOptionPane.showMessageDialog( this, "Por favor llene todos los datos", "Clculo de Impuestos", JOptionPane.ERROR_MESSAGE ); } else { . En caso de problema, puede } cancelar la reaccin y notificar al }

usuario del problema

Reaccin a un evento generado por el usuario (4 de 6 pasos)

public void calcularImpuestos( ) { if( unaMarca.equals( "" ) || { JOptionPane.showMessageDialog } else { boolean descProntoPago = panelDescuentos.hayDescuentoProntoPago( ); boolean descServicioPublico = panelDescuentos.hayDescuentoServicioPublico( ); boolean descTrasladoCuenta = panelDescuentos.hayDescuentoTrasladoCuenta( ); try { double pago = calculador.calcularPago( unaMarca, unaLinea, unModelo, descProntoPago, descServicioPublico, descTrasladoCuenta ); panelResultados.refrescarPago( pago ); } catch( Exception e ) { JOptionPane.showMessageDialog( this, e.getMessage( ), "Clculo de Impuestos", JOptionPane.WARNING_MESSAGE ); } } }

El mtodo de la ventana principal:

Pide al modelo del mundo que haga una modificacin o calcule un valor

Entonces
La ventana principal DEBE conocer el mundo para poder llamar a sus mtodos

principal calculador

principal

Entonces
public class InterfazImpuestosCarro extends JFrame { /** Calculador de impuestos */ private CalculadorImpuestos calculador; .

public InterfazImpuestosCarro( ) throws Exception { // Crea el calculador de impuestos calculador = new CalculadorImpuestos( ); // Configura la informacin de la ventana setTitle( "Clculo impuestos" ); } }

La clase de la ventana principal contiene un atributo que es el objeto del mundo (de la clase principal del mundo)

Entonces
public class InterfazImpuestosCarro extends JFrame { /** Calculador de impuestos */ private CalculadorImpuestos calculador; .

public InterfazImpuestosCarro( ) throws Exception { // Crea el calculador de impuestos calculador = new CalculadorImpuestos( ); // Configura la informacin de la ventana setTitle( "Clculo impuestos" ); } }

En el mtodo constructor de la ventana principal, se crea el objeto del mundo

Volviendo al paso 4 de 6
public void calcularImpuestos( ) { if( unaMarca.equals( "" ) || { JOptionPane.showMessageDialog } else { boolean descProntoPago = panelDescuentos.hayDescuentoProntoPago( ); boolean descServicioPublico = panelDescuentos.hayDescuentoServicioPublico( ); boolean descTrasladoCuenta = panelDescuentos.hayDescuentoTrasladoCuenta( ); try { double pago = calculador.calcularPago( unaMarca, unaLinea, unModelo, descProntoPago, descServicioPublico, descTrasladoCuenta ); panelResultados.refrescarPago( pago ); } catch( Exception e ) { JOptionPane.showMessageDialog( this, e.getMessage( ), "Clculo de Impuestos", JOptionPane.WARNING_MESSAGE ); } } }

El mtodo de la ventana principal:

Pide al modelo del mundo que haga una modificacin o calcule un valor

Reaccin a un evento generado por el usuario (5 de 6 pasos)

public void calcularImpuestos( ) { if( unaMarca.equals( "" ) || { JOptionPane.showMessageDialog } else { boolean descProntoPago = panelDescuentos.hayDescuentoProntoPago( ); boolean descServicioPublico = panelDescuentos.hayDescuentoServicioPublico( ); boolean descTrasladoCuenta = panelDescuentos.hayDescuentoTrasladoCuenta( ); try { double pago = calculador.calcularPago( unaMarca, unaLinea, unModelo, descProntoPago, descServicioPublico, descTrasladoCuenta ); panelResultados.refrescarPago( pago ); } catch( Exception e ) { JOptionPane.showMessageDialog( this, e.getMessage( ), "Clculo de Impuestos", JOptionPane.WARNING_MESSAGE ); } } }

El mtodo de la ventana principal:

Pide al modelo del mundo que haga una modificacin o calcule un valor Si se pidi una modificacin, se llaman los mtodos que retornan los nuevos valores que se deben desplegar

Reaccin a un evento generado por el usuario (6 de 6 pasos)

public void calcularImpuestos( ) { if( unaMarca.equals( "" ) || { JOptionPane.showMessageDialog } else { boolean descProntoPago = panelDescuentos.hayDescuentoProntoPago( ); boolean descServicioPublico = panelDescuentos.hayDescuentoServicioPublico( ); boolean descTrasladoCuenta = panelDescuentos.hayDescuentoTrasladoCuenta( ); try { double pago = calculador.calcularPago( unaMarca, unaLinea, unModelo, descProntoPago, descServicioPublico, descTrasladoCuenta ); panelResultados.refrescarPago( pago ); } catch( Exception e ) { JOptionPane.showMessageDialog( this, e.getMessage( ), "Clculo de Impuestos", JOptionPane.WARNING_MESSAGE ); } } }

El mtodo de la ventana principal:

Pide a todos los paneles que tienen informacin que pudo haber cambiado, que actualicen sus valores (REFRESCO)

Entonces
/** * Cambia el valor desplegado del pago (Panelresultados) existe * @param pago - nuevo pago a desplegar el mtodo refrescarPago */ public void refrescarPago( double pago ) { //Despliega el valor del vehiculo DecimalFormat df = ( DecimalFormat )NumberFormat.getInstance( ); df.applyPattern( "$ ###,###.##" ); txtTotal.setText( df.format( pago ) ); }

En la clase del panel

Entonces
/** * Cambia el valor desplegado del pago Utiliza la clase * @param pago - nuevo pago a desplegar DecimalFormat de Java */ para dar un formato public void refrescarPago( double pago ) especial a un nmero { //Despliega el valor del vehiculo DecimalFormat df = ( DecimalFormat )NumberFormat.getInstance( ); df.applyPattern( "$ ###,###.##" ); txtTotal.setText( df.format( pago ) ); }

Entonces
/** * Cambia el valor desplegado del pago * @param pago - nuevo pago a desplegar */ public void refrescarPago( double pago ) { //Despliega el valor del vehiculo DecimalFormat df = ( DecimalFormat )NumberFormat.getInstance( ); df.applyPattern( "$ ###,###.##" ); txtTotal.setText( df.format( pago ) ); }

Pone el valor del pago en la zona de texto llamada txtTotal, en formato String

Validacin y Formateo de Datos

Qu pasa con la informacin tecleada por el usuario en una zona de texto

La informacin SIEMPRE es recibida por la interfaz como cadena de caracteres La interfaz tiene la responsabilidad de:
Convertirla al tipo adecuado (ej: entero o minsculas) Advertir al usuario si hay algn error, cuando el usuario teclea algo que no corresponde a lo esperado (ej: teclea una letra y se espera un nmero)

Para convertir la cadena de caracteres al tipo adecuado

A un nmero:
Se usa el mtodo parseInt de la clase Integer de Java. Se captura la excepcin NumberFormatException que lanza el mtodo parseInt si la cadena no se puede convertir en nmero try { int nCantidad = Integer.parseInt ( strCantidad ); } catch (NumberFormatException e) { // Mensaje al usuario }

Para convertir la cadena de caracteres al tipo adecuado

A maysculas/minsculas (y otros tipos de conversin de cadenas de caracteres):
La clase String de Java provee mtodos para transformar la cadena de caracteres tecledada por el usuario (y en general cualquier cadena de caracteres):
toLowerCase(): pasa a minsculas toUpperCase(): pasa a maysculas Trim: elimina espacios en blanco al inicio y final de la cadena

Mensajes al Usuario y Lectura Simple de Datos

Mensajes en la Consola
System.out.println(Este en un mensaje de prueba de ERROR);
Si se ejecuta desde eclipse, el mensaje aparece en la ventana Console

Si se ejecuta por fuera de eclipse (con run.bat)

Mensajes en una ventana

JOptionPane.showMessageDialog
Debe ser null si se usa en el main
JOptionPane.showMessageDialog( this, "Por favor llene todos los datos", "Calculo de Impuestos", JOptionPane.ERROR_MESSAGE );

JOptionPane.showMessageDialog( null, "La marca ferrari no est registrada", "Calculo de Impuestos", JOptionPane.WARNING_MESSAGE );

JOptionPane.showMessageDialog( this, "El valor total es de $12.000", "Calculo de Impuestos", JOptionPane.INFORMATION_MESSAGE );

Para pedir informacin al usuario

JOptionPane.showInputDialog
Debe ser null si se usa en el main

String clave = JOptionPane.showInputDialog( this, "Introduzca su clave"); if ( clave != null) {

JOptionPane.showConfirmDialog
int resp = JOptionPane.showConfirmDialog( null, "Est seguro que lo desea borrar?", "Confirmacion", JOptionPane.YES_NO_OPTION); if ( resp == JOptionPane.YES_OPTION) {

...
}