ALGORITMICA Y PROGRAMACION POR OBJETOS I             Nivel 5        Construyendo la        Interfaz Gráfica           Marc...
Motivación                         Interfaz                         usuario  Modelo del mundo                             ...
Motivación                       Interfaz                       usuarioModelo del mundo                                   ...
Aspectos importantes    Diseño funcional y         Arquitectura          gráfico•    Colores               •   Estructura ...
Qué vamos a aprender en este            nivel:Cómo proponer una arquitectura para unprograma simple:– Repartir responsabil...
Caso de estudio: Calculador      de Impuestos
El Calculador de Impuestos•   Funcionalidad•   Interfaz usuario•   Requerimientos Funcionales•   Arquitectura    – Mundo  ...
El Calculador de Impuestos -           Funcionalidad•   Calcula el valor de los impuestos que una persona    debe pagar po...
El Calculador de Impuestos –       Interfaz usuario                            Ventana Principal3 Zonas de trabajo:Informa...
El Calculador de Impuestos –Requerimientos FuncionalesR1    Buscar el avalúo de un vehículoR2    Calcular el pago de impue...
Tarea No. 1• RF1: Buscar el avalúo de un vehículo  – Resumen:    • Dada la información del vehículo, presentar el      val...
Tarea No. 1• RF2:Calcular el pago de impuesto de un  vehículo  – Resumen:     • Dada la información de un vehículo, y el c...
El Calculador de Impuestos –         Arquitectura  Mundo             Interfaz
El Calculador de Impuestos                (Mundo)                           0 .. n                         rangos0 .. n ma...
Tarea No. 2• CalculadorImpuestos  – Constantes  – Asociaciones• Marca  – Atributos  – Asociaciones• Linea  – Atributos  – ...
Métodos de la clase        CalculadorImpuestos (pag. 3)                         buscarAvaluoVehiculo/**    * Retorna el va...
Métodos de la clase        CalculadorImpuestos (pag. 3)                                  calcularPago/**    * Calcular el ...
Construcción deinterfaces gráficas
El Calculador de Impuestos –       Interfaz usuario                            Ventana Principal3 Zonas de trabajo:Informa...
El Calculador de Impuestos –       Interfaz usuario                           InterfazImpuestosCarro (JFrame)3 Zonas de tr...
El Calculador de Impuestos –       Interfaz usuario                           InterfazImpuestosCarro                      ...
EntidadesMundo del Problema         Mundo Gráfico y de                              Interacción•   Estudiante        •   V...
Entidades del mundo gráfico y       de interacción                    Ventana
Entidades del mundo gráfico y       de interacción          Panel
Entidades del mundo gráfico y       de interacción       Zona de         texto
Entidades del mundo gráfico y       de interacción       Caja de       chequeo
Entidades del mundo gráfico y       de interacción       Etiqueta
Entidades del mundo gráfico y       de interacción          Boton
El Calculador de Impuestos         (Interfaz)    principal                principal
El Calculador de Impuestos –       Interfaz usuario                           InterfazImpuestosCarro (JFrame)3 Zonas de tr...
El Calculador de Impuestos –       Interfaz usuario                           InterfazImpuestosCarro                      ...
El Calculador de Impuestos –       Interfaz usuario                           InterfazImpuestosCarro                      ...
Elementos gráficos   estructurales
La Ventana Principal
La Ventana Principal• Contiene TODOS los elementos de  visualización e interacción (con los que el  usuario va a utilizar ...
La Ventana PrincipalTítulo                           Controles para                              cerrar el                ...
La Ventana Principal principal             principal                    Ventana principal =                     Objeto de ...
Clase InterfazImpuestosCarro• Como cualquier clase:  – Está declarada en su propio archivo:    InterfazImpuestosCarro.java...
Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;import u...
Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;La clase se declara dentro del paquete de las c...
Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;Se impor...
Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;import u...
Clase InterfazImpuestosCarro     principal                 principal
Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;import u...
Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;import u...
Clase InterfazImpuestosCarro                             Clase de swing                              que se está          ...
Clase InterfazImpuestosCarroCómo cambiar elestado (apariencia)de la ventana?
Clase InterfazImpuestosCarroCómo cambiar elestado (apariencia)de la ventana?                          R// Con los métodos ...
Métodos de JFrame•   setSize ( ancho, alto )•   setResizable ( true/false )•   setTitle ( titulo )•   setDefaultCloseOpera...
Configuración de la ventana en      el método Constructorpublic InterfazImpuestosCarro( )  {    setTitle( "Cálculo impuest...
Distribuidor gráfico de       elementos (layout)• Se encarga de distribuir los elementos  (NO tenemos que hacerlo)• Sólo t...
Configuración de la ventana en      el método Constructorpublic InterfazImpuestosCarro( )  {    setTitle( "Cálculo impuest...
Divisiones y Paneles
El Calculador de Impuestos –       Interfaz usuario                           InterfazImpuestosCarro (JFrame)3 Zonas de tr...
Un Panel• Se encarga de agrupar elementos gráficos  por contenido y uso• Facilita al usuario su localización y su uso• Cad...
El Calculador de Impuestos         (Interfaz)    principal                principal
Clase InterfazImpuestosCarro
Creación de los paneles en el          método Constructor public class InterfazImpuestosCarro extends JFrame{   private Pa...
Creación de los paneles en el          método Constructor public class InterfazImpuestosCarro extends JFrame{   private Pa...
Creación de los paneles en el          método Constructor public class InterfazImpuestosCarro extends JFrame{   private Pa...
Creación de los paneles en el          método Constructor public class InterfazImpuestosCarro extends JFrame{   private Pa...
Creación de los paneles en el          método Constructor public class InterfazImpuestosCarro extends JFrame{   private Pa...
Analicemos la creación del        panelVehiculoAtributo panelVehiculo de laclase InterfazImpuestosCarro panelVehiculo = ne...
Analicemos la creación del      panelVehiculo                  Llamado al constructor de la                      clase Pan...
Analicemos la creación del      panelVehiculo                            Parámetro del método                 Concepto    ...
Analicemos la creación del      panelVehiculopanelVehiculo = new PanelVehiculo( this );add( panelVehiculo, BorderLayout.NO...
Analicemos la creación del      panelVehiculopanelVehiculo = new PanelVehiculo( this );add( panelVehiculo, BorderLayout.NO...
Analicemos la creación del      panelVehiculopanelVehiculo = new PanelVehiculo( this );add( panelVehiculo, BorderLayout.NO...
Dos conceptos nuevos• BorderLayout   • this
Dos conceptos nuevos    • BorderLayout                                       NORTH•   Distribuidor gráfico “en los Bordes”...
Dos conceptos nuevos     • Otro distribuidor: GridLayout•   Distribuidor gráfico “en Malla”•   Divide el espacio de la ven...
Dos conceptos nuevos• BorderLayout   • this
Dos conceptos nuevos                 • this          • Es una variable de JAVA          • Hace referencia al objeto       ...
Ejemplo de uso de this public class InterfazImpuestosCarro extends JFrame{   private PanelVehiculo panelVehiculo;   privat...
Ejemplo de uso de this               Es la ventana principal, (objeto de                la clase InterfazImpuestosCarro,  ...
Hasta aquí hemos visto …• Cómo construir la clase de la ventana  principal (InterfazImpuestosCarro)       Ahora vamos a ve...
Construcción de las clases de         los paneles• Proceso similar a la construcción de la clase de  la ventana principal•...
Construcción de las clases de         los paneles• Proceso similar a la construcción de la clase de  la ventana principal•...
PanelVehiculo public class PanelVehiculo extends JPanel{   public PanelVehiculo( )   {                                    ...
PanelVehiculo public class PanelVehiculo extends JPanel{   public PanelVehiculo( )                          Definir la alt...
PanelVehiculo public class PanelVehiculo extends JPanel{   public PanelVehiculo( )                                        ...
PanelDescuentos public class PanelDescuentos extends JPanel{   public PanelVehiculo( )   {                                ...
PanelDescuentos public class PanelDescuentos extends JPanel{   public PanelVehiculo( )   {                                ...
Etiquetas       yZonas de Texto
Etiquetas• Permiten agregar un texto corto en la interfaz• Son objetos de la clase JLabel de Java• Algunos métodos de la c...
Zonas de texto• Cumplen dos funciones:   – Permiten el ingreso de información por parte del usuario     (ENTRADAS de los r...
Zonas de texto• Cumplen dos funciones:   – Permiten el ingreso de información por parte del usuario     (ENTRADAS de los r...
Zonas de texto• Cumplen dos funciones:   – Permiten el ingreso de información por parte del usuario     (ENTRADAS de los r...
Zonas de texto• Cumplen dos funciones:   – Permiten el ingreso de información por parte del usuario     (ENTRADAS de los r...
Cómo agregar una etiqueta (ouna zona de texto) a un panelDeclarar en el panel un atributo de la claseJLabel (o JTextField)...
Ejemplo en PanelVehiculo public class PanelVehiculo extends JPanel{  …  private JLabel labMarca;  private JLabel labLinea;...
Ejemplo en PanelVehiculo public PanelVehiculo ( ){   …   labMarca = new JLabel ( “Marca” );   labLinea = new JLabel ( “Lín...
Ejemplo en PanelVehiculo public PanelVehiculo ( ){   …   labMarca = new JLabel ( “Marca” );   labLinea = new JLabel ( “Lín...
Ejemplo en PanelVehiculo public PanelVehiculo ( ){  …  labMarca = new JLabel ( “Marca” );  labLinea = new JLabel ( “Línea”...
Selección de Opcionespor medio de Cajas de       Chequeo
Cajas de chequeo• Permiten al usuario seleccionar o deseleccionar una  opción.• Son objetos de la clase JCheckBox de Java•...
Cajas de chequeo• Permiten al usuario seleccionar o deseleccionar una  opción.• Son objetos de la clase JCheckBox de Java•...
Ejemplo en PanelDescuentospublic class PanelDescuentos extends JPanel{  …  private JCheckBox cbPago;  private JCheckBox cb...
Ejemplo en PanelDescuentospublic PanelDescuentos ( ){  …  cbPago = new JCheckBox ( “Pronto pago” );  cbSPublico = new JChe...
Ejemplo en PanelDescuentospublic PanelDescuentos ( ){  …  cbPago = new JCheckBox ( “Pronto pago” );  cbSPublico = new JChe...
Interacción con laaplicación mediante      Botones
Botones• Permiten al usuario expresar sus órdenes  al programa (es el mecanismo más  simple de interacción).• Son objetos ...
Ejemplo en PanelResultadospublic class PanelResultados extends JPanel{  …  private JLabel labTotal;  private JTextField tx...
Ejemplo en PanelResultadospublic PanelResultados ( ){  …  labTotal = new JLabel ( “Total a pagar” );  txtTotal = new JText...
Ejemplo en PanelResultadospublic PanelResultados ( ){  …  labTotal = new JLabel ( “Total a pagar”    );  txtTotal = new JT...
Acciones del Usuario          yEventos de la aplicación
Acciones y Eventos                                         llamada a                                         un método    ...
Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento:        Dar un nombre al evento y ...
Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento:        Dar un nombre al evento y ...
Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento:      Atender el eventopublic clas...
Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento:      Atender el eventopublic clas...
Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento:      Atender el eventopublic clas...
Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento:      Atender el eventopublic clas...
Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento:      Atender el eventopublic clas...
Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento:      Decir que el panel es el enc...
Arquitectura y Distribución deResponsabilidades
Qué vamos a aprender …• Coordinar los elementos de la interfaz y del  modelo del mundo para satisfacer los  requerimientos...
Por dónde comienza la        ejecución del programa?• Por el método main de la ventana principal• Su función: crear una in...
Quién crea el modelo del mundo?• La interfaz• En el método constructor de la ventana  principal public class InterfazImpue...
Arquitectura propuesta• Los requerimientos funcionales se  implementan en la ventana principal:  – Hay UN método por REQUE...
Reacción a un evento generado por el usuario (1 de 6 pasos)               El usuario genera un               evento oprimi...
Reacción a un evento generado    por el usuario (2 de 6 pasos)public class PanelResultados extends JPanel implements Actio...
Reacción a un evento generado    por el usuario (2 de 6 pasos)public class PanelResultados extends JPanel implements Actio...
Reacción a un evento generado    por el usuario (2 de 6 pasos)public class PanelResultados extends JPanel implements Actio...
Reacción a un evento generado    por el usuario (2 de 6 pasos)public class PanelResultados extends JPanel implements Actio...
principal                                   principal• Quién es “principal”?   R// Es el objeto que contiene la ventana pr...
Entonces …public class PanelVehiculo extends JPanel implements ActionListener{  …  private InterfazImpuestosCarro principa...
Entonces …public class PanelVehiculo extends JPanel implements ActionListener{  …  private InterfazImpuestosCarro principa...
Entonces …public class PanelVehiculo extends JPanel implements ActionListener{  …  private InterfazImpuestosCarro principa...
Entonces … public class InterfazImpuestosCarro extends JFrame{   private PanelVehiculo panelVehiculo;   private PanelDescu...
Entonces … public class InterfazImpuestosCarro extends JFrame{   private PanelVehiculo panelVehiculo;   private PanelDescu...
Entonces … public class InterfazImpuestosCarro extends JFrame{   private PanelVehiculo panelVehiculo;   private PanelDescu...
Entonces … public class InterfazImpuestosCarro extends JFrame{   private PanelVehiculo panelVehiculo;   private PanelDescu...
Recordemos (1 de 6 pasos)…             El usuario genera un             evento oprimiendo un             botón en uno de l...
Recordemos (2 de 6 pasos)…public class PanelResultados extends JPanel implements ActionListener{  …  public void actionPer...
Reacción a un evento generado     por el usuario (3 de 6 pasos)public void calcularImpuestos( )                   El métod...
Entonces … public class PanelVehiculo extends JPanel implements ActionListener{  …    public String darMarca( )           ...
Volviendo al paso 3 de 6public void calcularImpuestos( )                   El método de la ventana {                      ...
Volviendo al paso 3 de 6    public void calcularImpuestos( )     {       String unaMarca = panelVehiculo.darMarca( );     ...
Volviendo al paso 3 de 6    public void calcularImpuestos( )     {       String unaMarca = panelVehiculo.darMarca( );     ...
Reacción a un evento generado por el              usuario (4 de 6 pasos)public void calcularImpuestos( ) {   …   if( unaMa...
Entonces …La ventana principal DEBE conocer el mundo para poder llamar a susmétodos               principal               ...
Entonces … public class InterfazImpuestosCarro extends JFrame{  /** Calculador de impuestos */  private CalculadorImpuesto...
Entonces … public class InterfazImpuestosCarro extends JFrame{  /** Calculador de impuestos */  private CalculadorImpuesto...
Volviendo al paso 4 de 6public void calcularImpuestos( ) {   …   if( unaMarca.equals( "" ) || …   {       JOptionPane.show...
Reacción a un evento generado por el              usuario (5 de 6 pasos)public void calcularImpuestos( ) {                ...
Reacción a un evento generado por el              usuario (6 de 6 pasos)public void calcularImpuestos( ) {                ...
Entonces …/**                                                En la clase del panel   * Cambia el valor desplegado del pago...
Entonces …/**   * Cambia el valor desplegado del pago             Utiliza la clase   * @param pago - nuevo pago a desplega...
Entonces …/**   * Cambia el valor desplegado del pago   * @param pago - nuevo pago a desplegar   */  public void refrescar...
Validación y Formateo de          Datos
Qué pasa con la información tecleada por el usuario en una         zona de texto• La información SIEMPRE es recibida por l...
Para convertir la cadena de  caracteres al tipo adecuado …• A un número:  – Se usa el método parseInt de la clase Integer ...
Para convertir la cadena de  caracteres al tipo adecuado …• A mayúsculas/minúsculas (y otros tipos de  conversión de caden...
Mensajes al Usuario yLectura Simple de Datos
Mensajes en la ConsolaSystem.out.println(“Este en un mensaje de prueba de ERROR”);  Si se ejecuta desde eclipse, el mensaj...
Mensajes en una ventanaJOptionPane.showMessageDialog                                                Debe ser null si se us...
Para pedir información al usuarioJOptionPane.showInputDialog                             Debe ser null si se usa          ...
interfaz grafica
Upcoming SlideShare
Loading in …5
×

interfaz grafica

6,249 views

Published on

interfaz grafica

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,249
On SlideShare
0
From Embeds
0
Number of Embeds
2,066
Actions
Shares
0
Downloads
206
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

interfaz grafica

  1. 1. ALGORITMICA Y PROGRAMACION POR OBJETOS I Nivel 5 Construyendo la Interfaz Gráfica Marcela Hernández Hoyos
  2. 2. Motivación Interfaz usuario Modelo del mundo UsuarioÚnico medio de comunicación entre el usuario y el modelo del mundo
  3. 3. Motivación Interfaz usuarioModelo del mundo Usuario • Ejecuta operaciones A través de la interfaz: sobre el modelo del mundo. • Ve el resultado de sus acciones.
  4. 4. Aspectos importantes Diseño funcional y Arquitectura gráfico• Colores • Estructura clara• Distribución de • Fácil de mantener elementos gráficos (menús, botones, …)
  5. 5. Qué vamos a aprender en este nivel:Cómo proponer una arquitectura para unprograma simple:– Repartir responsabilidades entre interfaz, mundo y pruebas.Cómo construir las clases que implementan unainterfaz usuarioCómo integrar las clases de la interfaz con lasclases del mundo
  6. 6. Caso de estudio: Calculador de Impuestos
  7. 7. El Calculador de Impuestos• Funcionalidad• Interfaz usuario• Requerimientos Funcionales• Arquitectura – Mundo – Interfaz
  8. 8. El Calculador de Impuestos - Funcionalidad• Calcula el valor de los impuestos que una persona debe pagar por su carro• Vehículo se caracteriza por: – Marca, línea, modelo y precio• Cálculo de impuestos como porcentaje del precio del vehículo (% determinado por un rango)• Hay tres tipos de descuento – Pronto pago, servicio público, traslado de cuenta
  9. 9. El Calculador de Impuestos – Interfaz usuario Ventana Principal3 Zonas de trabajo:Información del vehículoDescuentosCálculo de impuestos +inicializar la aplicación
  10. 10. El Calculador de Impuestos –Requerimientos FuncionalesR1 Buscar el avalúo de un vehículoR2 Calcular el pago de impuesto de un vehículoRNF Requerimiento NO FUNCIONAL (inicializar la aplicación sin tener que volver a ejecutarla)
  11. 11. Tarea No. 1• RF1: Buscar el avalúo de un vehículo – Resumen: • Dada la información del vehículo, presentar el valor de avalúo del mismo – Entradas: – Resultado:
  12. 12. Tarea No. 1• RF2:Calcular el pago de impuesto de un vehículo – Resumen: • Dada la información de un vehículo, y el conjunto de descuentos que le aplican, dar el valor a pagar por los impuestos del vehículo – Entradas: – Resultado:
  13. 13. El Calculador de Impuestos – Arquitectura Mundo Interfaz
  14. 14. El Calculador de Impuestos (Mundo) 0 .. n rangos0 .. n marcas 0 .. n 0 .. n lineas modelos
  15. 15. Tarea No. 2• CalculadorImpuestos – Constantes – Asociaciones• Marca – Atributos – Asociaciones• Linea – Atributos – Asociaciones• Modelo – Atributos• RangoImpuesto – Atributos
  16. 16. Métodos de la clase CalculadorImpuestos (pag. 3) buscarAvaluoVehiculo/** * Retorna el valor de avalúo de un vehiculo de la marca, línea y modelo dado. * @param unaMarca - marca del vehiculo * @param unaLinea - linea del vehiculo * @param unModelo - modelo del vehiculo * @return precio de avalúo 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
  17. 17. Métodos de la clase CalculadorImpuestos (pag. 3) calcularPago/** * Calcular el pago de impuesto que debe hacer un vehículo de un modelo dado. Si noencuentra 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 público * @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
  18. 18. Construcción deinterfaces gráficas
  19. 19. El Calculador de Impuestos – Interfaz usuario Ventana Principal3 Zonas de trabajo:Información del vehículoDescuentosCálculo de impuestos +inicializar la aplicación
  20. 20. El Calculador de Impuestos – Interfaz usuario InterfazImpuestosCarro (JFrame)3 Zonas de trabajo:PanelVehiculo (JPanel)PanelDescuentos (JPanel)PanelResultados (JPanel)
  21. 21. El Calculador de Impuestos – Interfaz usuario InterfazImpuestosCarro (JFrame)PanelVehiculo (JPanel) ClasesPanelDescuentos (JPanel) JAVAPanelResultados (JPanel)
  22. 22. EntidadesMundo del Problema Mundo Gráfico y de Interacción• Estudiante • Ventana (JFrame)• Tienda • Panel (JPanel)• Banco • Botón (JButton)• Recurso • Zona de texto (JTextField)• Avion • Etiqueta (JLabel)• … • Caja de chequeo (JCheckBox)
  23. 23. Entidades del mundo gráfico y de interacción Ventana
  24. 24. Entidades del mundo gráfico y de interacción Panel
  25. 25. Entidades del mundo gráfico y de interacción Zona de texto
  26. 26. Entidades del mundo gráfico y de interacción Caja de chequeo
  27. 27. Entidades del mundo gráfico y de interacción Etiqueta
  28. 28. Entidades del mundo gráfico y de interacción Boton
  29. 29. El Calculador de Impuestos (Interfaz) principal principal
  30. 30. El Calculador de Impuestos – Interfaz usuario InterfazImpuestosCarro (JFrame)3 Zonas de trabajo:PanelVehiculo (JPanel)PanelDescuentos (JPanel)PanelResultados (JPanel)
  31. 31. El Calculador de Impuestos – Interfaz usuario InterfazImpuestosCarro (JFrame)PanelVehiculo (JPanel) ClasesPanelDescuentos (JPanel) JAVAPanelResultados (JPanel)
  32. 32. El Calculador de Impuestos – Interfaz usuario InterfazImpuestosCarro (JFrame)PanelVehiculo (JPanel) •Se encuentran en unaPanelDescuentos (JPanel) biblioteca gráfica (swing) •Paquete: java.swingPanelResultados (JPanel) •Deber ser importado
  33. 33. Elementos gráficos estructurales
  34. 34. La Ventana Principal
  35. 35. La Ventana Principal• Contiene TODOS los elementos de visualización e interacción (con los que el usuario va a utilizar el programa)• UNICA FUNCION: – Servir como marco para los demás elementos de la interfaz (AGRUPA)• Es un contenedor gráfico
  36. 36. La Ventana PrincipalTítulo Controles para cerrar el programa
  37. 37. La Ventana Principal principal principal Ventana principal = Objeto de la clase InterfazImpuestosCarro
  38. 38. 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)
  39. 39. Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;import uniandes.cupi2.impuestosCarro.mundo.*;/** * Interfaz de cálculo de impuestos de carros */public class InterfazImpuestosCarro extends JFrame{}
  40. 40. Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;La clase se declara dentro del paquete de las clases de la interfaz usuario
  41. 41. Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;Se importan las clases de los dos paquetes mostrados (swing y awt)
  42. 42. Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;import uniandes.cupi2.impuestosCarro.mundo.*;Se importan las clases del modelo del mundo
  43. 43. Clase InterfazImpuestosCarro principal principal
  44. 44. Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;import uniandes.cupi2.impuestosCarro.mundo.*;/** * Interfaz de cálculo de impuestos de carros */public class InterfazImpuestosCarro extends JFrame{} La clase se declara con la misma sintáxis de las clases del modelo del mundo
  45. 45. Clase InterfazImpuestosCarropackage uniandes.cupi2.impuestosCarro.interfaz;import java.awt.*;import javax.swing.*;import uniandes.cupi2.impuestosCarro.mundo.*;/** * Interfaz de cálculo de impuestos de carros */public class InterfazImpuestosCarro extends JFrame{} Se agrega extends JFrame para indicar que es una ventana
  46. 46. Clase InterfazImpuestosCarro Clase de swing que se está extendiendo principal principal
  47. 47. Clase InterfazImpuestosCarroCómo cambiar elestado (apariencia)de la ventana?
  48. 48. Clase InterfazImpuestosCarroCómo cambiar elestado (apariencia)de la ventana? R// Con los métodos de la clase JFrame Cambiar el Cambiar el Agregar título de la tamaño de la componentes ventana ventana gráficos
  49. 49. Métodos de JFrame• setSize ( ancho, alto )• setResizable ( true/false )• setTitle ( titulo )• setDefaultCloseOperation ( EXIT_ON_CLOSE)• setVisible ( true/false )• add ( componente )
  50. 50. Configuración de la ventana en el método Constructorpublic InterfazImpuestosCarro( ) { setTitle( "Cálculo impuestos" ); setSize( 290, 350 ); setResizable( false ); setDefaultCloseOperation( EXIT_ON_CLOSE ); setLayout( new BorderLayout( ) ); }
  51. 51. Distribuidor gráfico de elementos (layout)• Se encarga de distribuir los elementos (NO tenemos que hacerlo)• Sólo tenemos que asociar a la ventana un objeto de este tipo (clase) que se encargue de hacerlo• Java (swing) tiene varios distribuidores gráficos (varias clases). En APO1 vamos a ver dos: – BorderLayout – GridLayout
  52. 52. Configuración de la ventana en el método Constructorpublic InterfazImpuestosCarro( ) { setTitle( "Cálculo impuestos" ); setSize( 290, 350 ); setResizable( false ); setDefaultCloseOperation( EXIT_ON_CLOSE ); setLayout( new BorderLayout( ) ); }
  53. 53. Divisiones y Paneles
  54. 54. El Calculador de Impuestos – Interfaz usuario InterfazImpuestosCarro (JFrame)3 Zonas de trabajo:PanelVehiculo (JPanel)PanelDescuentos (JPanel)PanelResultados (JPanel)
  55. 55. Un Panel• Se encarga de agrupar elementos gráficos por contenido y uso• Facilita al usuario su localización y su uso• Cada panel se implementa como una clase aparte en el modelo – PanelVehiculo – PanelDescuentos – PanelResultados
  56. 56. El Calculador de Impuestos (Interfaz) principal principal
  57. 57. Clase InterfazImpuestosCarro
  58. 58. Creación de los paneles en el método Constructor public class InterfazImpuestosCarro extends JFrame{ private PanelVehiculo panelVehiculo; Se declara un private PanelDescuentos panelDescuentos; atributo por cada una private PanelResultados panelResultados; de las divisiones public InterfazImpuestosCarro( ) throws Exception { setLayout( new BorderLayout( ) ); }
  59. 59. Creación de los paneles en el método Constructor public class InterfazImpuestosCarro extends JFrame{ private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception { Se asocia a la setLayout( new BorderLayout( ) ); ventana un distribuidor gráfico }
  60. 60. Creación de los paneles en el método 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 ); Se crea una instancia panelDescuentos = new PanelDescuentos( ); de cada uno de los add( panelDescuentos, BorderLayout.CENTER ); paneles panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }
  61. 61. Creación de los paneles en el método 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 ); Se agrega cada panelDescuentos = new PanelDescuentos( ); panel en una posición add( panelDescuentos, BorderLayout.CENTER ); de las definidas en el distribuidor gráfico panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }
  62. 62. Creación de los paneles en el método 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 ); }
  63. 63. Analicemos la creación del panelVehiculoAtributo panelVehiculo de laclase InterfazImpuestosCarro panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH );
  64. 64. Analicemos la creación del panelVehiculo Llamado al constructor de la clase PanelVehiculopanelVehiculo = new PanelVehiculo( this );add( panelVehiculo, BorderLayout.NORTH );
  65. 65. Analicemos la creación del panelVehiculo Parámetro del método Concepto constructor de la nuevo clase PanelVehiculopanelVehiculo = new PanelVehiculo( this );add( panelVehiculo, BorderLayout.NORTH );
  66. 66. Analicemos la creación del panelVehiculopanelVehiculo = new PanelVehiculo( this );add( panelVehiculo, BorderLayout.NORTH );Método de la clase JFrame para adicionar un componente
  67. 67. Analicemos la creación del panelVehiculopanelVehiculo = new PanelVehiculo( this );add( panelVehiculo, BorderLayout.NORTH ); Objeto que se va a adicionar
  68. 68. Analicemos la creación del panelVehiculopanelVehiculo = new PanelVehiculo( this );add( panelVehiculo, BorderLayout.NORTH ); Zona (posición relativa dentro de la Concepto nuevo ventana) donde se va a adicionar el objeto. Es una constante de la clase BorderLayout.
  69. 69. Dos conceptos nuevos• BorderLayout • this
  70. 70. Dos conceptos nuevos • BorderLayout NORTH• Distribuidor gráfico “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 WEST CENTER EAST DEBE pasar como parámetro la zona donde se va a ubicar. Ejemplo: – add( panelVehiculo, SOUTH BorderLayout.NORTH );• Utiliza el tamaño definido para cada uno de los componentes y asigna TODO el espacio sobrante al componente que se encuentre en la zona del centro
  71. 71. Dos conceptos nuevos • Otro distribuidor: GridLayout• Distribuidor gráfico “en Malla”• Divide el espacio de la ventana en filas y columnas.• La cantidad de filas y columnas se establecen en el método constructor del GridLayout. Ejemplo: – setLayout( new GridLayout ( 4, 3 ) ); Fila 1 1 2 3• Al agregar un componente a la ventana, NO SE DEBE especificar la posición. Esta es asignada en Fila 2 4 5 6 el orden de llegada (fila 1, fila 2, …) Fila 3 7 8 9• Ignora el tamaño definido para cada componente. Hace una distribución uniforme del espacio. Fila 4 10 11 12
  72. 72. Dos conceptos nuevos• BorderLayout • this
  73. 73. Dos conceptos nuevos • this • Es una variable de JAVA • Hace referencia al objeto que está ejecutando un método
  74. 74. 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 ); }
  75. 75. 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
  76. 76. Hasta aquí hemos visto …• Cómo construir la clase de la ventana principal (InterfazImpuestosCarro) Ahora vamos a ver …• Cómo construir las clases de los paneles (PanelVehiculo, PanelDescuentos, PanelResultados)
  77. 77. Construcción de las clases de los paneles• Proceso similar a la construcción de la clase de la ventana principal• Al igual que la ventana principal, los paneles también son contenedores gráficos Ventana Principal JFrame
  78. 78. Construcción de las clases de los paneles• Proceso similar a la construcción de la clase de la ventana principal• Al igual que la ventana principal, los paneles también son contenedores gráficos Ventana Principal Panel JFrame JPanel
  79. 79. PanelVehiculo public class PanelVehiculo extends JPanel{ public PanelVehiculo( ) { Creación y asociación de … un GridLayout de 5 filas y setLayout( new GridLayout( 5, 2 ) ); setPreferredSize( new Dimension( 0, 130 ) ); 2 columnas … }
  80. 80. PanelVehiculo public class PanelVehiculo extends JPanel{ public PanelVehiculo( ) Definir la altura del panel. { No se define el ancho … porque va a ser igual al setLayout( new GridLayout( 5, 2 ) ); de la ventana setPreferredSize( new Dimension( 0, 130 ) ); … 130 Clase de Java que permite definir un ancho y un alto usando un objeto }
  81. 81. PanelVehiculo public class PanelVehiculo extends JPanel{ public PanelVehiculo( ) Se crea y se asocia un { borde al panel para … facilitar la identificación setLayout( new GridLayout( 5, 2 ) ); setPreferredSize( new Dimension( 0, 130 ) ); de las divisiones dentro TitledBorder border = BorderFactory.createTitleBorder de la ventana (“Datos del vehículo”); border.SetTitleColor( Color.BLUE ); setBorder( border ); … }
  82. 82. PanelDescuentos public class PanelDescuentos extends JPanel{ public PanelVehiculo( ) { Creación y asociación de … un GridLayout de 2 filas y setLayout( new GridLayout( 2, 2 ) ); 2 columnas … }
  83. 83. PanelDescuentos public class PanelDescuentos extends JPanel{ public PanelVehiculo( ) { Se crea y se asocia un … borde setLayout( new GridLayout( 2, 2 ) ); TitledBorder border = BorderFactory.createTitleBorder (“Descuentos”); border.SetTitleColor( Color.BLUE ); setBorder( border ); … }
  84. 84. Etiquetas yZonas de Texto
  85. 85. Etiquetas• Permiten agregar un texto corto en la interfaz• Son objetos de la clase JLabel de Java• Algunos métodos 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
  86. 86. Zonas de texto• Cumplen dos funciones: – Permiten el ingreso de información 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 métodos de la clase JLabel: – getText ( ); Retorna la cadena de caracteres tecleada por el usuario. SIEMPRE es String.
  87. 87. Zonas de texto• Cumplen dos funciones: – Permiten el ingreso de información 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 métodos de la clase JLabel: – getText ( ); – setText ( texto ); Despliega el texto que se pasa como parámetro. Se usa para mostrar los resultados del programa.
  88. 88. Zonas de texto• Cumplen dos funciones: – Permiten el ingreso de información 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 métodos de la clase JLabel: – getText ( ); – setText ( texto ); Indica si el usuario puede – setEditable ( true / false) o no modificar el texto (escribir encima)
  89. 89. Zonas de texto• Cumplen dos funciones: – Permiten el ingreso de información 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 métodos de la clase JLabel: – getText ( ); – setText ( texto ); – setEditable ( true / false) – setForeground (color ) Definen respectivamente – setBackground ( color ) el color del texto y del fondo
  90. 90. Cómo agregar una etiqueta (ouna zona de texto) a un panelDeclarar en el panel un atributo de la claseJLabel (o JTextField)Crear la etiqueta (o la zona de texto) (new) en elmétodo constructor del panelConfigurar las características de la etiqueta (ode la zona de texto) con los métodos de la claseJLabel (o JTextField)Agregar la etiqueta (o la zona de texto) al panel(add)
  91. 91. Ejemplo en PanelVehiculo public class PanelVehiculo extends JPanel{ … private JLabel labMarca; private JLabel labLinea; private JLabel labModelo; private JLabel labValor; Declararen el panel los atributos de clases JLabel y private JTextField txtMarca; JTextField private JTextField txtLinea; private JTextField txtModelo; private JTextField txtValor;… }
  92. 92. Ejemplo en PanelVehiculo public PanelVehiculo ( ){ … labMarca = new JLabel ( “Marca” ); labLinea = new JLabel ( “Línea” ); Crear las etiquetas labModelo = new JLabel ( “ Modelo” ); y las zonas de labValor = new JLabel ( “ Valor” ); texto (new) en el txtMarca = new JTextField( ); txtLinea = new JTextField( ); método constructor txtModelo = new JTextField( ); del panel txtValor = new JTextField( “$ 0” ); … }
  93. 93. Ejemplo en PanelVehiculo public PanelVehiculo ( ){ … labMarca = new JLabel ( “Marca” ); labLinea = new JLabel ( “Línea” ); labModelo = new JLabel ( “ Modelo” ); labValor = new JLabel ( “ Valor” ); txtMarca = new JTextField( ); Configurar las txtLinea = new JTextField( ); características de las txtModelo = new JTextField( ); txtValor = new JTextField( “$ 0” ); etiquetas o de las zonas txtValor.SetEditable(false); de texto con los txtValor.SetForeground(Color.BLUE); métodos de las clases txtValor.SetBackground(Color.WHITE); … JLabel o JTextField }
  94. 94. Ejemplo en PanelVehiculo public PanelVehiculo ( ){ … labMarca = new JLabel ( “Marca” ); labLinea = new JLabel ( “Línea” ); 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 ); Agregar las etiquetas add( txtLinea ); add( labModelo ); y las zonas de texto add( txtModelo ); add( labValor ); al panel (add) add( txtValor );
  95. 95. Selección de Opcionespor medio de Cajas de Chequeo
  96. 96. Cajas de chequeo• Permiten al usuario seleccionar o deseleccionar una opción.• Son objetos de la clase JCheckBox de Java• Algunos métodos de la clase JCheckBox: Indica (true/false) si el – isSelected ( ); usuario seleccionó la opción
  97. 97. Cajas de chequeo• Permiten al usuario seleccionar o deseleccionar una opción.• Son objetos de la clase JCheckBox de Java• Algunos métodos de la clase JCheckBox: – isSelected ( ); Marca como seleccionado – setSelected ( true/false ); o no, la caja de chequeo
  98. 98. Ejemplo en PanelDescuentospublic class PanelDescuentos extends JPanel{ … private JCheckBox cbPago; private JCheckBox cbSPublico; Declarar en el panel los private JCheckBox cbTCuenta; atributos de clase JCheckBox …}
  99. 99. Ejemplo en PanelDescuentospublic PanelDescuentos ( ){ … cbPago = new JCheckBox ( “Pronto pago” ); cbSPublico = new JCheckBox ( “Servicio público” ); cbTCuenta = new JCheckBox ( “Traslado de cuenta” ); …} Crear las cajas de chequeo (new) en el método constructor del panel
  100. 100. Ejemplo en PanelDescuentospublic PanelDescuentos ( ){ … cbPago = new JCheckBox ( “Pronto pago” ); cbSPublico = new JCheckBox ( “Servicio público” ); cbTCuenta = new JCheckBox ( “Traslado de cuenta” ); add( cbPago ); add( cbTCuenta ); add( cbSPublico ); Agregar las cajas de chequeo al panel … (add)}
  101. 101. Interacción con laaplicación mediante Botones
  102. 102. Botones• Permiten al usuario expresar sus órdenes al programa (es el mecanismo más simple de interacción).• Son objetos de la clase JButton de Java• La clase JButton tiene DOS METODOS especiales: – setActionCommand ( evento ); – addActionListener ( panel );
  103. 103. Ejemplo en PanelResultadospublic class PanelResultados extends JPanel{ … private JLabel labTotal; private JTextField txtTotal; private JButton butLimpiar; Declarar en el panel los private JButton butCalcular; … atributos de clase JButton}
  104. 104. Ejemplo en PanelResultadospublic 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 método constructor del panel
  105. 105. Ejemplo en PanelResultadospublic 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( “”) ); Agregar los botones add(butLimpiar); add(labTotal); al panel (add) add(txtTotal); add(butCalcular); …
  106. 106. Acciones del Usuario yEventos de la aplicación
  107. 107. Acciones y Eventos llamada a un método evento Interfaz usuario Modelo del mundo Usuario• El usuario ejecuta acciones: • Las acciones se convierten – Hace click sobre un botón en objetos llamados – Chequea una caja de eventos: chequeo – Describen lo que el usuario – Selecciona una opción de hizo un Menú – Se puede analizar su – … contenido para que el programa reaccione de acuerdo a la acción del usuario
  108. 108. Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento: Dar un nombre al evento y asociarlo a un botónpublic class PanelResultados extends JPanel En la clase del panel que{ contiene el botón … public final static String LIMPIAR = “limpiar”; public final static String CALCULAR = “calcular”; public PanelResultados( ) { Se declaran constantes … para los nombres de los butLimpiar.SetActionCommand ( LIMPIAR ); eventos butCalcular.SetActionCommand ( CALCULAR ); … } …}
  109. 109. Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento: Dar un nombre al evento y asociarlo a un botónpublic class PanelResultados extends JPanel{ … public final static String LIMPIAR = “limpiar”; public final static String CALCULAR = “calcular”; public PanelResultados( ) En el método constructor { del panel … butLimpiar.SetActionCommand ( LIMPIAR ); Se asocian los nombres butCalcular.SetActionCommand ( CALCULAR ); de los eventos con cada … botón } …}
  110. 110. Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento: Atender el eventopublic class PanelResultados extends JPanel implements ActionListener{ … public void actionPerformed (ActionEvent evento ) { String comando = evento.getActionCommand( ); Agregar una declaración if ( (comando.equals( LIMPIAR) ) en el encabezado de la { clase del panel que // Reacción al evento de LIMPIAR contiene el botón (para } que pueda “percibir” las else if (comando.equals( CALCULAR ) ) acciones del usuario) // Reacción al evento de CALCULAR } }
  111. 111. Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento: Atender el eventopublic class PanelResultados extends JPanel implements ActionListener{ Implementar en la clase … del panel que contiene el public void actionPerformed (ActionEvent evento ) botón, el método especial { actionPerformed String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { // Reacción al evento de LIMPIAR } parámetro del método: else if (comando.equals( CALCULAR ) ) evento ocurrido en el { panel // Reacción al evento de CALCULAR } }
  112. 112. Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento: Atender el eventopublic class PanelResultados extends JPanel implements ActionListener{ Implementar en la clase … del panel que contiene el public void actionPerformed (ActionEvent evento ) botón, el método especial { actionPerformed String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { // Reacción al evento de LIMPIAR } parámetro del método: else if (comando.equals( CALCULAR ) ) evento ocurrido en el { panel // Reacción al evento de CALCULAR } }
  113. 113. Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento: Atender el eventopublic class PanelResultados extends JPanel implements ActionListener{ … public void actionPerformed (ActionEvent evento ) { String comando = evento.getActionCommand( ); if ( (comando.equals( LIMPIAR) ) { // Reacción al evento de LIMPIAR } Métodos de la ventana else if (comando.equals( CALCULAR ) ) principal !!! { // Reacción al evento de CALCULAR } }
  114. 114. Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento: Atender el eventopublic 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 botón del { panel, se ejecuta el // Reacción al evento de LIMPIAR método } actionPerformed else if (comando.equals( CALCULAR ) ) { // Reacción al evento de CALCULAR } }
  115. 115. Cómo manejar un evento con un botón de lainterfaz en 3 pasos … y no morir en el intento: Decir que el panel es el encargado de atender el eventopublic class PanelResultados extends JPanel implements ActionListener{ … Mediante el método public PanelResultados ( ) addActionListener de la { clase JButton butLimpiar.addActionListener (this); butCalcular.addActionListener (this); } …} parámetro del método: el objeto que lo está ejecutando, es decir el panel mismo
  116. 116. Arquitectura y Distribución deResponsabilidades
  117. 117. 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 localización de componentes del programa – Aumenta la claridad – Facilita el mantenimiento
  118. 118. Por dónde comienza la ejecución del programa?• Por el método main de la ventana principal• Su función: 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 ); } … }
  119. 119. Quién crea el modelo del mundo?• La interfaz• En el método constructor de la ventana principal public class InterfazImpuestosCarro extends JFrame { … private CalculadorImpuestos calculador; public InterfazImpuestosCarro( ) throws Exception { calculador = new CalculadorImpuestos( ); … } … }
  120. 120. Arquitectura propuesta• Los requerimientos funcionales se implementan en la ventana principal: – Hay UN método por REQUERIMIENTO – La ventana principal coordina todas las acciones
  121. 121. Reacción a un evento generado por el usuario (1 de 6 pasos) El usuario genera un evento oprimiendo un botón en uno de los paneles de la interfaz
  122. 122. Reacción 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) ) El panel reacciona { al evento con SU // Reacción al evento de LIMPIAR } método else if (comando.equals( CALCULAR ) ) actionPerformed { // Reacción al evento de CALCULAR } } …
  123. 123. Reacción 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) ) { // Reacción al evento de LIMPIAR Llamado a métodos de la } ventana principal !!! else if (comando.equals( CALCULAR ) ) { // Reacción al evento de CALCULAR Hay UN método por } REQUERIMIENTO } …
  124. 124. Reacción 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( ); Método “limpiar” de la } ventana principal else if (comando.equals( CALCULAR ) ) { principal.calcularImpuestos( ); Método “calcularImpuestos” } de la ventana principal } …
  125. 125. Reacción 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( ); • Quién es “principal”? } else if (comando.equals( CALCULAR ) ) • Dónde está ? { • Quién lo conoce ? principal.calcularImpuestos( ); } } …
  126. 126. principal principal• Quién es “principal”? R// Es el objeto que contiene la ventana principal• Dónde está ? R// Es un atributo (asociación) de las clases panelResultados y panelVehiculo• Quién lo conoce ?
  127. 127. Entonces …public class PanelVehiculo extends JPanel implements ActionListener{ … private InterfazImpuestosCarro principal; La clase del panel … contiene un atributo del tipo de la ventana public PanelVehiculo( InterfazImpuestosCarro v) principal { … principal = v; … } …}
  128. 128. Entonces …public class PanelVehiculo extends JPanel implements ActionListener{ … private InterfazImpuestosCarro principal; … public PanelVehiculo( InterfazImpuestosCarro v) { … principal = v; … El método constructor } del panel DEBE recibir … como parámetro, el} objeto correspondiente a la ventana principal
  129. 129. Entonces …public class PanelVehiculo extends JPanel implements ActionListener{ … private InterfazImpuestosCarro principal; … public PanelVehiculo( InterfazImpuestosCarro v) { … principal = v; … } … Se asigna el parámetro} al atributo
  130. 130. Entonces … public class InterfazImpuestosCarro extends JFrame{ private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception En el método { constructor de la setLayout( new BorderLayout( ) ); ventana principal panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }
  131. 131. 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 ); Cuando se crean los add( panelVehiculo, BorderLayout.NORTH ); paneles panelDescuentos = new PanelDescuentos( ); add( panelDescuentos, BorderLayout.CENTER ); panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }
  132. 132. 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 ); Se pasa como parámetro la add( panelVehiculo, BorderLayout.NORTH ); ventana principal (this) a los panelDescuentos = new PanelDescuentos( ); métodos constructores de los add( panelDescuentos, BorderLayout.CENTER ); paneles que la necesitan panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }
  133. 133. Entonces … public class InterfazImpuestosCarro extends JFrame{ private PanelVehiculo panelVehiculo; private PanelDescuentos panelDescuentos; private PanelResultados panelResultados; public InterfazImpuestosCarro( ) throws Exception En el método { constructor de la setLayout( new BorderLayout( ) ); ventana principal panelVehiculo = new PanelVehiculo( this ); add( panelVehiculo, BorderLayout.NORTH ); Se agrega cada panelDescuentos = new PanelDescuentos( ); panel en una posición add( panelDescuentos, BorderLayout.CENTER ); de las definidas en el distribuidor gráfico panelResultados = new PanelResultados( this ); add( panelResultados, BorderLayout.SOUTH ); }
  134. 134. Recordemos (1 de 6 pasos)… El usuario genera un evento oprimiendo un botón en uno de los paneles de la interfaz
  135. 135. 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 método principal.limpiar( ); actionPerformed dentro } del cual se analiza el else if (comando.equals( CALCULAR ) ) evento y se llama al { método correspondiente principal.calcularImpuestos( ); de la ventana principal } } …
  136. 136. Reacción a un evento generado por el usuario (3 de 6 pasos)public void calcularImpuestos( ) El método de la ventana { principal: String unaMarca = panelVehiculo.darMarca( ); Completa la información String unaLinea = panelVehiculo.darLinea( ); necesaria, pidiéndola a los String unModelo = panelVehiculo.darModelo( ); demás paneles}
  137. 137. Entonces … public class PanelVehiculo extends JPanel implements ActionListener{ … public String darMarca( ) En la clase del panel { respectivo return txtMarca.getText( ); } Existen métodos para … pasar la información} a la ventana principal
  138. 138. Volviendo al paso 3 de 6public void calcularImpuestos( ) El método de la ventana { principal: String unaMarca = panelVehiculo.darMarca( ); Completa la información String unaLinea = panelVehiculo.darLinea( ); necesaria, pidiéndola a los String unModelo = panelVehiculo.darModelo( ); demás paneles}
  139. 139. 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", "Cálculo de Impuestos", JOptionPane.ERROR_MESSAGE ); } else El método de la ventana { principal: …. } Completa la información necesaria, pidiéndola a los} demás paneles Verifica que la información esté completa y sea válida
  140. 140. 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", "Cálculo de Impuestos", JOptionPane.ERROR_MESSAGE ); } else { …. En caso de problema, puede } cancelar la reacción y notificar al} usuario del problema
  141. 141. Reacción a un evento generado por el usuario (4 de 6 pasos)public void calcularImpuestos( ) { … if( unaMarca.equals( "" ) || … { JOptionPane.showMessageDialog … El método de } la ventana else { principal: boolean descProntoPago = panelDescuentos.hayDescuentoProntoPago( ); Pide al boolean descServicioPublico = panelDescuentos.hayDescuentoServicioPublico( ); modelo del boolean descTrasladoCuenta = panelDescuentos.hayDescuentoTrasladoCuenta( ); mundo que try haga una { modificación double pago = calculador.calcularPago( unaMarca, unaLinea, unModelo, descProntoPago, o calcule un descServicioPublico, descTrasladoCuenta ); panelResultados.refrescarPago( pago ); valor } catch( Exception e ) { JOptionPane.showMessageDialog( this, e.getMessage( ), "Cálculo de Impuestos", JOptionPane.WARNING_MESSAGE ); } } }
  142. 142. Entonces …La ventana principal DEBE conocer el mundo para poder llamar a susmétodos principal calculador principal
  143. 143. Entonces … public class InterfazImpuestosCarro extends JFrame{ /** Calculador de impuestos */ private CalculadorImpuestos calculador; La clase de la ventana principal contiene un …. atributo que es el objeto del mundo (de la clase principal del mundo) public InterfazImpuestosCarro( ) throws Exception { // Crea el calculador de impuestos calculador = new CalculadorImpuestos( ); // Configura la información de la ventana setTitle( "Cálculo impuestos" ); … }}
  144. 144. Entonces … public class InterfazImpuestosCarro extends JFrame{ /** Calculador de impuestos */ private CalculadorImpuestos calculador; …. public InterfazImpuestosCarro( ) throws Exception { // Crea el calculador de impuestos En el método constructor calculador = new CalculadorImpuestos( ); de la ventana principal, se crea el objeto del // Configura la información de la ventana mundo setTitle( "Cálculo impuestos" ); … }}
  145. 145. Volviendo al paso 4 de 6public void calcularImpuestos( ) { … if( unaMarca.equals( "" ) || … { JOptionPane.showMessageDialog … El método de } la ventana else { principal: boolean descProntoPago = panelDescuentos.hayDescuentoProntoPago( ); Pide al boolean descServicioPublico = panelDescuentos.hayDescuentoServicioPublico( ); modelo del boolean descTrasladoCuenta = panelDescuentos.hayDescuentoTrasladoCuenta( ); mundo que try haga una { modificación double pago = calculador.calcularPago( unaMarca, unaLinea, unModelo, descProntoPago, o calcule un descServicioPublico, descTrasladoCuenta ); panelResultados.refrescarPago( pago ); valor } catch( Exception e ) { JOptionPane.showMessageDialog( this, e.getMessage( ), "Cálculo de Impuestos", JOptionPane.WARNING_MESSAGE ); } } }
  146. 146. Reacción a un evento generado por el usuario (5 de 6 pasos)public void calcularImpuestos( ) { El método de … la ventana if( unaMarca.equals( "" ) || … { principal: JOptionPane.showMessageDialog … Pide al } modelo del else mundo que { haga una boolean descProntoPago = panelDescuentos.hayDescuentoProntoPago( ); modificación boolean descServicioPublico = panelDescuentos.hayDescuentoServicioPublico( ); boolean descTrasladoCuenta = panelDescuentos.hayDescuentoTrasladoCuenta( ); o calcule un try valor { Si se pidió double pago = calculador.calcularPago( unaMarca, unaLinea, unModelo, descProntoPago, una descServicioPublico, descTrasladoCuenta ); modificación, panelResultados.refrescarPago( pago ); se llaman los } catch( Exception e ) métodos que { retornan los JOptionPane.showMessageDialog( this, e.getMessage( ), "Cálculo de Impuestos", nuevos JOptionPane.WARNING_MESSAGE ); valores que } se deben } desplegar }
  147. 147. Reacción a un evento generado por el usuario (6 de 6 pasos)public void calcularImpuestos( ) { El método de … la ventana if( unaMarca.equals( "" ) || … { principal: JOptionPane.showMessageDialog … Pide a todos } los paneles else que tienen { información boolean descProntoPago = panelDescuentos.hayDescuentoProntoPago( ); que pudo boolean descServicioPublico = panelDescuentos.hayDescuentoServicioPublico( ); boolean descTrasladoCuenta = panelDescuentos.hayDescuentoTrasladoCuenta( ); haber try cambiado, { que actualicen double pago = calculador.calcularPago( unaMarca, unaLinea, unModelo, descProntoPago, sus valores descServicioPublico, descTrasladoCuenta ); (REFRESCO) panelResultados.refrescarPago( pago ); } catch( Exception e ) { JOptionPane.showMessageDialog( this, e.getMessage( ), "Cálculo de Impuestos", JOptionPane.WARNING_MESSAGE ); } } }
  148. 148. Entonces …/** En la clase del panel * Cambia el valor desplegado del pago (Panelresultados) existe * @param pago - nuevo pago a desplegar */ el método refrescarPago public void refrescarPago( double pago ) { //Despliega el valor del vehiculo DecimalFormat df = ( DecimalFormat )NumberFormat.getInstance( ); df.applyPattern( "$ ###,###.##" ); txtTotal.setText( df.format( pago ) ); }
  149. 149. 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 número { //Despliega el valor del vehiculo DecimalFormat df = ( DecimalFormat )NumberFormat.getInstance( ); df.applyPattern( "$ ###,###.##" ); txtTotal.setText( df.format( pago ) ); }
  150. 150. 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
  151. 151. Validación y Formateo de Datos
  152. 152. Qué pasa con la información tecleada por el usuario en una zona de texto• La información SIEMPRE es recibida por la interfaz como cadena de caracteres• La interfaz tiene la responsabilidad de: Convertirla al tipo adecuado (ej: entero o minúsculas) Advertir al usuario si hay algún error, cuando el usuario teclea algo que no corresponde a lo esperado (ej: teclea una letra y se espera un número)
  153. 153. Para convertir la cadena de caracteres al tipo adecuado …• A un número: – Se usa el método parseInt de la clase Integer de Java. – Se captura la excepción NumberFormatException que lanza el método parseInt si la cadena no se puede convertir en número try { int nCantidad = Integer.parseInt ( strCantidad ); } catch (NumberFormatException e) { // Mensaje al usuario }
  154. 154. Para convertir la cadena de caracteres al tipo adecuado …• A mayúsculas/minúsculas (y otros tipos de conversión de cadenas de caracteres): – La clase String de Java provee métodos para transformar la cadena de caracteres tecledada por el usuario (y en general cualquier cadena de caracteres): • toLowerCase(): pasa a minúsculas • toUpperCase(): pasa a mayúsculas • Trim: elimina espacios en blanco al inicio y final de la cadena
  155. 155. Mensajes al Usuario yLectura Simple de Datos
  156. 156. Mensajes en la ConsolaSystem.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)
  157. 157. Mensajes en una ventanaJOptionPane.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 );
  158. 158. Para pedir información al usuarioJOptionPane.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) { ... }

×