APO1 - Presentacion nivel 5
Upcoming SlideShare
Loading in...5
×
 

APO1 - Presentacion nivel 5

on

  • 3,077 views

Esta es la presentación del Nivel 5 del curso "ISIS-1204 Algorítmia y Programación por Objetos 1" (APO1) de la Universidad de los Andes, Bogotá, Colombia.

Esta es la presentación del Nivel 5 del curso "ISIS-1204 Algorítmia y Programación por Objetos 1" (APO1) de la Universidad de los Andes, Bogotá, Colombia.

Statistics

Views

Total Views
3,077
Views on SlideShare
2,611
Embed Views
466

Actions

Likes
0
Downloads
65
Comments
0

2 Embeds 466

http://jorgeportella.wordpress.com 465
https://www.google.com.co 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

APO1 - Presentacion nivel 5 APO1 - Presentacion nivel 5 Presentation Transcript

  • NIVEL 5 ALGORÍTMICA Y PROGRAMACIÓN 1 (APO 1) Mario José Villamizar Cano mj.villamizar24@uniandes.edu.co Oficina ML-637http://sistemas.uniandes.edu.co/~mj.villamizar24/dokuwiki/doku.php Grupo de Tecnologías de Información y Comunicación (COMIT) Departamento de Ingeniería de Sistemas y Computación Universidad de los Andes, Bogotá D.C., Colombia
  • NIVEL 5 REDES SOCIALES mjvc007@hotmail.com http://twitter.com/mariocloudhttp://linkedin.com/in/mariojosevillamizarcano
  • NIVEL 5 NIVEL 5 – TEMAS PRINCIPALES Importancia de la Interfaz Gráfica como medio decomunicación entre un computador y el usuario. Definición de la arquitectura de un programa simpledistribuyendo las responsabilidades entre la interfaz deusuario, el modelo del mundo y las pruebas. Construir las clases para implementar una interfaz deusuario sencilla, y su posterior integración con el modelo delmundo del problema.
  • NIVEL 5 IMPORTANCIA DE LA INTERFAZ GRÁFICA Principal medio de comunicación entre el usuario y el modelo del mundo. Por medio de diferentes elementos de interacción le permite al usuariorealizar cambios en el modelo del mundo, permitiéndole visualizar los cambiosefectuados. El usuario debe sentir que está interactuando directamente con el modelo delmundo. La interfaz gráfica debe ser amigable y fácil de utilizar.¿Qué es amigable? (combinación de colores, distribución y organización deelementos, tipos de letras, etc.).¿Qué es de fácil uso? Que los elementos de interacción de comporten de formaintuitiva. DE LA INTERFAZ GRÁFICA DEPENDE EN GRAN MEDIDA QUE UN PROGRAMA SEA UTILIZADO O NO
  • NIVEL 5 ASPECTOS DE IMPORTANCIA EN EL DISEÑO DE LA INTERFAZ Diseño funcional y gráfico (colores, tipos de letras, organización y distribuciónde elementos).Regularmente realizado por diseñadores gráficos.No se hace mucho énfasis en el desarrollo de este curso. Organización de las clases que van a conformar la interfaz.Asignación de responsabilidades de la interfaz. ¿Cómo estructurar la interfaz deusuario?Integración con el modelo del mundo. ¿Cómo comunicar la interfaz con elmodelo del mundo?. Regularmente las acciones del usuario se convierten eneventos, los cuales son interpretados por la interfaz y traducidos a llamada amétodos de los objetos del modelo del mundo.
  • NIVEL 5 CASOS DE ESTUDIOCaso de estudio: Calculador de impuestos de vehículos
  • NIVEL 5 HOJAS DE TRABAJOHoja de trabajo 1: Traductor de palabras
  • NIVEL 5 HOJAS DE TRABAJOHoja de trabajo 2: Diccionario de sinónimos
  • NIVEL 5 NIVEL 5Ventana Principal (JFrame)Distribución gráfica (BorderLayout, GridLayout, JPanel)Etiquetas (JLabel)Zonas de texto (JTextField)Selección de opciones (JCheckBox)Elementos de interacción (JButton)Validación y formateo de datosMensajes al usuario y lecturas simples de datos (Cons. y JOptionPane)Arquitectura y distribución de responsabilidadesEjecución de un programa en JavaLeer TODO el nivel 5
  • NIVEL 5 MODELO DEL MUNDOCaso de estudio: Calculador de impuestos de vehículos
  • NIVEL 5 MODELO DE LA INTERFAZCaso de estudio: Calculador de impuestos de vehículos
  • NIVEL 5 Ventana Principal (JFrame) Contenedor gráfico (JFrame) MétodossetSize(ancho, alto)setResizable(cambiable)setTitle(titulo)setDefaultCloseOperation(EXIT_ON_CLOSE)setVisible(esVisible)add(componente)
  • NIVEL 5 Distribución gráfica - BorderLayout Divide el espacio del contenedorgráfico en 5 zonas.BorderLayout.NORTHBorderLayout.SOUTHBorderLayout.CENTERBorderLayout.WESTBorderLayout.EAST Método setLayout( ) del contenedorgráfico. Método add(componente, posicion)del contenedor gráfico.
  • NIVEL 5 Distribución gráfica – BorderLayout (2)add( panelVehiculo, BorderLayout.NORTH );add( panelDescuentos, BorderLayout.CENTER );add( panelResultados, BorderLayout.SOUTH );
  • NIVEL 5 Distribución gráfica - GridLayoutBasado en un número de filas y columnas.Las posiciones se asignan en orden de llegada.No tiene en cuenta el tamaño de los elementos que va a contener.
  • NIVEL 5Distribución gráfica – GridLayout (2)
  • NIVEL 5 Distribución gráfica - JPanel Agrupan los contenidos del contenedor gráfico por contenido y uso. Métodos setLayout( … ), setPreferredSize( … ), setForeground( … ),setBackGround ( … ) y setBorder ( … )
  • NIVEL 5 Etiquetas (JLabel) Permiten agregar texto a la interfaz como forma de describir el elemento deinteracción. Métodos setText( … ) y setForeground( … ).
  • NIVEL 5 Etiquetas (JTextField) Permiten al usuario ingresar información y obtener respuestas generadas por elprograma. Métodos setText( … ), setForeground( … ), setBackground( … ), getText ( … ) ysetEditable ( … ).
  • NIVEL 5 Selección de opciones (JCheckBox)Permiten al usuario seleccionar o no una opción.Métodos isSelected( ) y setSelected ( … ).
  • NIVEL 5 Elementos de interacción (JButton) Una herramienta mediante la cual el usuario puede interactuar con elprograma.
  • NIVEL 5 Características adicionales de un JButtonCreación del JbuttonJButton nuevo = new JButton("");Creación del ícono que va a tener asignado el JbuttonImageIcon icono = new ImageIcon("./data/sur.gif");Asignación del ícono al Jbuttonnuevo.setIcon( icono );Establecimiento del tamaño del Jbuttonnuevo.setSize( new Dimension (37, 36) );Deshabilitar o habilitar un Jbuttonnuevo.setEnabled( false );
  • NIVEL 5 Características adicionales de un JLabelCreación del JlabelJLabel nuevo2 = new JLabel("Numero");Asignación del color del textonuevo2.setForeground( new Color(100,100,100) );Creación del estilo del textoFont f = new Font( "Arial", Font.BOLD, 14 );Asignación del estilo del textonuevo2.setFont( f );Definición del tamaño del JLabelnuevo2.setSize( new Dimension(100,100) );
  • NIVEL 5 Revisión del la Creación de la Interfaz GráficaRevisión del modelo de la interfaz del caso de estudio del Calculadorde Impuestos.Revisión del código fuente de las clase PanelVehiculos.Revisión del código fuente de las clase PanelDescuentos.Revisión del código fuente de las clase PanelResultados.Revisión del código fuente de las claseInterfazCalculadorImpuestos.
  • NIVEL 5 Revisión del Entrenador de Distribuidores GráficosVisitar el entrenador de layouts:http://cupi2.uniandes.edu.co/cursos/apo1/entrenadores/applets/ent_layouts/index.htm
  • NIVEL 5PREGUNTAS
  • NIVEL 5 Elementos de Interacción (JButton)Todas las acciones realizadas por el usuario en la interfaz gráfica sonconvertidas en eventos en Java y son manipuladas medianteobjetos.Cada vez que el usuario hace algo sobre la ventana del programa,esta acción se convierte en un objeto (llamado evento) que contienetoda la información sobre la acción realizada por el usuario.El objeto debe ser capturado en la interfaz para analizar sucontenido y luego hacer que se ejecuten las operacionescorrespondientes de acuerdo con la acción realizada por el usuario.
  • NIVEL 5 Elementos de Interacción (JButton)Por ejemplo al momento de dar clic en un botón el procedimiento quegeneralmente se ejecuta es el siguiente:El usuario realiza una acción sobre la interfaz.La interfaz captura el evento generado por el usuario.La interfaz identifica que es lo que quiere hacer el usuario.La interfaz ejecuta los métodos necesarios para modificar o consultarel mundo.El mundo ejecuta las operaciones solicitadas por la interfaz (en casode ser necesario le retorna resultados a la interfaz).La interfaz recibe los resultados del mundo y procede a actualizar loselementos gráficos.
  • NIVEL 5 Elementos de Interacción (JButton)Los eventos a manejar en este curso están asociados a botones.Hay tres pasos que se deben seguir para manejar un evento:Definir el nombre del evento mediante una constante (por cada botónse define una constante con el nombre del evento asociado al botón).Implementar el método que va a atender el evento. El panel quecontiene el botón debe implementar la interface ActionListener eimplementar un método denominado actionPerformed que recibecomo parámetro el evento ocurrido en el panel (objeto de la claseActionEvent.Declarar que el panel es responsable de atender los eventos de susbotones. Para esto se utiliza el método addActionListener a cadauno de los botones pasando como referencia el panel (this).
  • NIVEL 5 Validación y Formateo de DatosEn muchas ocasiones la información que ingresa el usuario debe serconvertida al tipo y formato adecuados para poder manipularla.La interfaz también debe validar que el usuario ingrese la informaciónesperada (número enteros, reales, cadenas), en caso de que seingrese información inválida se deberán advertir al usuario del error.Como convertir una cadena de caracteres (String) en un número: try { String strModelo = txtModelo.getText( ); int nModelo = Integer.parseInt( strModelo ); } catch( Exception e ) { txtModelo.setText( "" ); // Instrucciones para mostrarle al usuario el error. }
  • NIVEL 5 Validación y Formateo de DatosMétodos de la clase String para el formateo de datos. String ejemplo = " Cadena de Prueba "; String minusculas = ejemplo.toLowerCase( ); // minusculas = " cadena de prueba " String mayusculas = ejemplo.toUpperCase( ); // mayusculas = " CADENA DE PRUEBA " String sinEspacios = ejemplo.trim( ); // sinblancos = "Cadena de Prueba"
  • NIVEL 5 Validación y Formateo de Datos Formateo de los valores numéricos para presentarlos de manera adecuada al usuario.DecimalFormat df = ( DecimalFormat )NumberFormat.getInstance( );df.applyPattern( "$ ###,###.##" );String strPrecio = df.format( precio );txtValor.setText( strPrecio );
  • NIVEL 5 Mensajes al Usuario y Lectura Simple de DatosMensajes en la consola. Sirven para mostrar un mensaje en laventana del sistema operativo o en la consola de Eclipse.
  • NIVEL 5 Mensajes al Usuario y Lectura Simple de DatosMensajes en la consola. Sirven para mostrar un mensaje en laventana del sistema operativo o en la consola de Eclipse.
  • NIVEL 5 Mensajes al Usuario y Lectura Simple de DatosMensajes en una ventana. El paquete swing tiene la claseJOptionPane que tiene diversas facilidades para mostrar mensajesal usuario. Útil para mostrar mensajes de errores al usuario:
  • NIVEL 5 Mensajes al Usuario y Lectura Simple de DatosMensajes en una ventana. El paquete swing tiene la claseJOptionPane que tiene diversas facilidades para mostrar mensajesal usuario. Útil para mostrar mensajes de advertencia al usuario:
  • NIVEL 5 Mensajes al Usuario y Lectura Simple de DatosMensajes en una ventana. El paquete swing tiene la claseJOptionPane que tiene diversas facilidades para mostrarle mensajesal usuario. Útil para mostrar mensajes de información al usuario:
  • NIVEL 5 Pedir Información al UsuarioSolicitar información al usuario. La clase JOptionPane también tienediversas facilidades para solicitarle información al usuario. Útil paraque el usuario introduzca una cadena de caracteres:
  • NIVEL 5 Pedir Información al UsuarioSolicitar información al usuario. La clase JOptionPane también tienediversas facilidades para solicitarle información al usuario. Útil paraque el usuario introduzca un número:
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades¿Por donde comienza el programa? El método main que debe estaren la clase de la interfaz principal del programa es el punto dondecomienza la ejecución del programa.
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades¿Quién crea el modelo del mundo? La responsabilidad de crear elmodelo del mundo es de la interfaz. Para esto se debe:1. Definir un atributo del tipo de la clase principal del mundo en laventana de la interfaz.2. Inicializar el atributo de la clase principal del mundo en elconstructor de la ventana principal de la interfaz.
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades¿Quién crea el modelo del mundo? La responsabilidad de crear elmodelo del mundo es de la interfaz.
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades¿Quién crea el modelo del mundo? La responsabilidad de crear elmodelo del mundo es de la interfaz.
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades¿Cómo hacer para que los panales conozcan la ventana principal?Todos los panales que tengan botones deben tener una asociaciónhacia la ventana principal, con el fin de que se puedan ejecutar losrequerimientos funcionales.El constructor de los paneles que tienen botones recibe comoparámetro la referencia hacia la ventana principal.
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades¿Cómo hacer para que los panales conozcan la venta principal?
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades¿Qué métodos debe tener una panel? Los métodos necesarios paraacceder a la información ingresada por el usuario. Para el panelPanelVehiculos los métodos serían los siguientes:
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades¿Qué métodos debe tener una panel? Los métodos necesarios pararefrescar la información presentada en el panel. Para el panelPanelVehiculos los métodos serían los siguientes:
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades¿Cómo implementar los requerimientos funcionales? Paraimplementar los requerimientos funcionales se define un protocolode la arquitectura. Los requerimientos funcionales se implementan en laventana principal, un método por requerimiento. En estosmétodos se hace todas las operaciones necesarias tanto de los elementos que se encuentran en los paneles como de los elementos del modelo del mundo.
  • NIVEL 5 Arquitectura y Distribución de Responsabilidades ¿Cómo implementar los requerimientos funcionales? Para implementar los requerimientos funcionales se define un protocolo de la arquitectura. Ventana Principal refresco Requerimiento Panel 6 solicitud modificación evento 2 4 Panel Modelo del Button 1 Mundo información nuevo estadoUsuario 3 5 Panel refresco 6
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 1. El usuario genera el evento oprimiendo un botón en uno delos panales de la interfaz. El evento es capturado y enviado elmétodo actionPerformed del panel que tiene el botón. Ejemplo delrequerimiento funcional Buscar Avalúo del Vehículo.
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 2. El panel reacciona al evento mediante el métodoactionPerformed, el cual le debe solicitar a la ventana principal queejecute el requerimiento funcional.El panel le debe pasar al método de la ventana principal lainformación que este tiene y que requiere el método para ejecutar elrequerimiento funcional.Si hay necesidad de hacer conversiones de datos, en el métodoactionPerformed se deben hacer las conversiones.Un requerimiento funcional se ejecuta como un método de la ventanaprincipal.
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 2. Ejemplo del requerimiento funcional Buscar Avalúo delVehículo.
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 3. La ventana principal completa la información necesaria paraejecutar el requerimiento de los demás paneles.En el método del requerimiento se deben hacer todas lasvalidaciones necesarias asociadas a problemas en la informacióningresada por el usuario o la acción realizada por el usuario.Desde el método que implementa el requerimiento funcional seaccede a la información de los demás panales.
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 3. Ejemplo del requerimiento funcional Buscar Avalúo delVehículo.
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 4. El método que implementa el requerimiento funcionalinteractúa con el mundo para que se haga alguna modificación o paraque se calcule algún valor.En este paso se utilizan las asociaciones que tiene la interfaz hacia elmodelo del mundo con el fin de ayudar a implementar elrequerimiento funcional.Cualquier excepción lanzada por los métodos del modelo del mundodebe ser atrapada en este punto.Si hay que calcular un valor, en este punto se tiene toda lainformación necesaria para cumplir el requerimiento funcional.Si se pidió alguna modificación al mundo se debe ejecutar el paso 5,de lo contrario no.
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 4. Ejemplo del requerimiento funcional Buscar Avalúo delVehículo.
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 5. Si en el paso anterior se pidió que se realizara algunamodificación en el modelo del mundo, se llaman aquí los métodos delmundo que retornan los nuevos valores que se deben mostrar.Para saber qué métodos se deben invocar se debe establecer quepartes de la información mostrada al usuario deben ser recalculadas.
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 6. Se pide a todos los paneles que tienen información que pudohaber cambiado que actualicen todos los valores que pudieron habercambiado.Para esto se utilizan los métodos de refresco implementados en lospaneles.
  • NIVEL 5 Arquitectura y Distribución de ResponsabilidadesPaso 6. Ejemplo del requerimiento funcional Buscar Avalúo delVehículo.
  • NIVEL 5 Ejecución de un Programa en Java¿Cómo ejecutar un programa desde la línea de comandos delsistema operativo?java -classpath ./lib/impuestosCarro.jaruniandes.cupi2.impuestosCarro.interfaz.InterfazImpuestosCarro
  • NIVEL 5PREGUNTAS
  • NIVEL 5 Revisión del Protocolo de la ArquitecturaRevisión del código fuente para el protocolo que se sigue paracumplir el requerimiento funcional de Buscar el avalúo de unvehículo del caso de estudio del Calculador de Impuestos.Revisión del código fuente para el protocolo que se sigue paracumplir el requerimiento funcional de Calcular el pago de impuestode un vehículo del caso de estudio del Calculador de Impuestos.Revisión del código fuente para el protocolo que se sigue paracumplir el requerimiento funcional de Limpiar la Interfaz Gráfica delcaso de estudio del Calculador de Impuestos.
  • NIVEL 5Revisión de la Forma de Implementar los Métodos de ExtensiónSe deben definir dos métodos denominados metodo1 y metodo2 enla clase principal del mundo (la clase CalculadorImpuestos delejercicio del Calculador de Impuestos)
  • NIVEL 5Revisión de la Forma de Implementar los Métodos de ExtensiónSe deben definir dos métodos denominados reqFuncOpcion1 yreqFuncOpcion2 en la ventana principal de la interfaz (la claseInterfazCalculadorImpuestos del ejercicio del Calculador deImpuestos)
  • NIVEL 5Ejemplos para agregar paneles en un BorderLayout panelA panelB panelC panelD panelE
  • NIVEL 5PREGUNTAS