apo1 - presentacion nivel 5
Post on 21-Jun-2015
3.329 Views
Preview:
DESCRIPTION
TRANSCRIPT
ALGORÍTMICA Y PROGRAMACIÓN 1 (APO 1)
NIVEL 5
Mario José Villamizar Cano
mj.villamizar24@uniandes.edu.co
Oficina ML-637
http://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
mjvc007@hotmail.com
http://twitter.com/mariocloud
http://linkedin.com/in/mariojosevillamizarcano
REDES SOCIALES
NIVEL 5
NIVEL 5 – TEMAS PRINCIPALES
Importancia de la Interfaz Gráfica como medio de
comunicación entre un computador y el usuario.
Definición de la arquitectura de un programa simple
distribuyendo las responsabilidades entre la interfaz de
usuario, el modelo del mundo y las pruebas.
Construir las clases para implementar una interfaz de
usuario sencilla, y su posterior integración con el modelo del
mundo 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 usuario
realizar cambios en el modelo del mundo, permitiéndole visualizar los cambios
efectuados.
El usuario debe sentir que está interactuando directamente con el modelo del
mundo.
La interfaz gráfica debe ser amigable y fácil de utilizar.
¿Qué es amigable? (combinación de colores, distribución y organización de
elementos, tipos de letras, etc.).
¿Qué es de fácil uso? Que los elementos de interacción de comporten de forma
intuitiva.
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ón
de 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 de
usuario?
Integración con el modelo del mundo. ¿Cómo comunicar la interfaz con el
modelo del mundo?. Regularmente las acciones del usuario se convierten en
eventos, los cuales son interpretados por la interfaz y traducidos a llamada a
métodos de los objetos del modelo del mundo.
NIVEL 5
CASOS DE ESTUDIO
Caso de estudio: Calculador de impuestos de vehículos
NIVEL 5
HOJAS DE TRABAJO
Hoja de trabajo 1: Traductor de palabras
NIVEL 5
HOJAS DE TRABAJO
Hoja de trabajo 2: Diccionario de sinónimos
NIVEL 5
NIVEL 5
Ventana 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 datos
Mensajes al usuario y lecturas simples de datos (Cons. y JOptionPane)
Arquitectura y distribución de responsabilidades
Ejecución de un programa en Java
Leer TODO el nivel 5
NIVEL 5
MODELO DEL MUNDO
Caso de estudio: Calculador de impuestos de vehículos
NIVEL 5
MODELO DE LA INTERFAZ
Caso de estudio: Calculador de impuestos de vehículos
NIVEL 5
Ventana Principal (JFrame)
Contenedor gráfico (JFrame)
Métodos
setSize(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 contenedor
gráfico en 5 zonas.
BorderLayout.NORTH
BorderLayout.SOUTH
BorderLayout.CENTER
BorderLayout.WEST
BorderLayout.EAST
Método setLayout( ) del contenedor
grá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 - GridLayout
Basado 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 5
Distribució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 de
interacción.
Métodos setText( … ) y setForeground( … ).
NIVEL 5
Etiquetas (JTextField)
Permiten al usuario ingresar información y obtener respuestas generadas por el
programa.
Métodos setText( … ), setForeground( … ), setBackground( … ), getText ( … ) y
setEditable ( … ).
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 el
programa.
NIVEL 5
Características adicionales de un JButton
Creación del Jbutton
JButton nuevo = new JButton("");
Creación del ícono que va a tener asignado el Jbutton
ImageIcon icono = new ImageIcon("./data/sur.gif");
Asignación del ícono al Jbutton
nuevo.setIcon( icono );
Establecimiento del tamaño del Jbutton
nuevo.setSize( new Dimension (37, 36) );
Deshabilitar o habilitar un Jbutton
nuevo.setEnabled( false );
NIVEL 5
Características adicionales de un JLabel
Creación del Jlabel
JLabel nuevo2 = new JLabel("Numero");
Asignación del color del texto
nuevo2.setForeground( new Color(100,100,100) );
Creación del estilo del texto
Font f = new Font( "Arial", Font.BOLD, 14 );
Asignación del estilo del texto
nuevo2.setFont( f );
Definición del tamaño del JLabel
nuevo2.setSize( new Dimension(100,100) );
NIVEL 5
Revisión del la Creación de la Interfaz Gráfica
Revisión del modelo de la interfaz del caso de estudio del Calculador
de 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 clase
InterfazCalculadorImpuestos.
NIVEL 5
Revisión del Entrenador de Distribuidores Gráficos
Visitar el entrenador de layouts:
http://cupi2.uniandes.edu.co/cursos/apo1/entrenadores/applets/ent_la
youts/index.htm
NIVEL 5
PREGUNTAS
NIVEL 5
Elementos de Interacción (JButton)
Todas las acciones realizadas por el usuario en la interfaz gráfica son
convertidas en eventos en Java y son manipuladas mediante
objetos.
Cada vez que el usuario hace algo sobre la ventana del programa,
esta acción se convierte en un objeto (llamado evento) que contiene
toda la información sobre la acción realizada por el usuario.
El objeto debe ser capturado en la interfaz para analizar su
contenido y luego hacer que se ejecuten las operaciones
correspondientes 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 que
generalmente 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 consultar
el mundo.
El mundo ejecuta las operaciones solicitadas por la interfaz (en caso
de ser necesario le retorna resultados a la interfaz).
La interfaz recibe los resultados del mundo y procede a actualizar los
elementos 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ón
se define una constante con el nombre del evento asociado al botón).
Implementar el método que va a atender el evento. El panel que
contiene el botón debe implementar la interface ActionListener e
implementar un método denominado actionPerformed que recibe
como parámetro el evento ocurrido en el panel (objeto de la clase
ActionEvent.
Declarar que el panel es responsable de atender los eventos de sus
botones. Para esto se utiliza el método addActionListener a cada
uno de los botones pasando como referencia el panel (this).
NIVEL 5
Validación y Formateo de Datos
En muchas ocasiones la información que ingresa el usuario debe ser
convertida al tipo y formato adecuados para poder manipularla.
La interfaz también debe validar que el usuario ingrese la información
esperada (número enteros, reales, cadenas), en caso de que se
ingrese 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 Datos
Mé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 Datos
Mensajes en la consola. Sirven para mostrar un mensaje en la
ventana del sistema operativo o en la consola de Eclipse.
NIVEL 5
Mensajes al Usuario y Lectura Simple de Datos
Mensajes en la consola. Sirven para mostrar un mensaje en la
ventana del sistema operativo o en la consola de Eclipse.
NIVEL 5
Mensajes al Usuario y Lectura Simple de Datos
Mensajes en una ventana. El paquete swing tiene la clase
JOptionPane que tiene diversas facilidades para mostrar mensajes
al usuario. Útil para mostrar mensajes de errores al usuario:
NIVEL 5
Mensajes al Usuario y Lectura Simple de Datos
Mensajes en una ventana. El paquete swing tiene la clase
JOptionPane que tiene diversas facilidades para mostrar mensajes
al usuario. Útil para mostrar mensajes de advertencia al usuario:
NIVEL 5
Mensajes al Usuario y Lectura Simple de Datos
Mensajes en una ventana. El paquete swing tiene la clase
JOptionPane que tiene diversas facilidades para mostrarle mensajes
al usuario. Útil para mostrar mensajes de información al usuario:
NIVEL 5
Pedir Información al Usuario
Solicitar información al usuario. La clase JOptionPane también tiene
diversas facilidades para solicitarle información al usuario. Útil para
que el usuario introduzca una cadena de caracteres:
NIVEL 5
Pedir Información al Usuario
Solicitar información al usuario. La clase JOptionPane también tiene
diversas facilidades para solicitarle información al usuario. Útil para
que 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 estar
en la clase de la interfaz principal del programa es el punto donde
comienza la ejecución del programa.
NIVEL 5
Arquitectura y Distribución de Responsabilidades
¿Quién crea el modelo del mundo? La responsabilidad de crear el
modelo del mundo es de la interfaz. Para esto se debe:
1. Definir un atributo del tipo de la clase principal del mundo en la
ventana de la interfaz.
2. Inicializar el atributo de la clase principal del mundo en el
constructor 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 el
modelo 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 el
modelo 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ón
hacia la ventana principal, con el fin de que se puedan ejecutar los
requerimientos funcionales.
El constructor de los paneles que tienen botones recibe como
pará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 para
acceder a la información ingresada por el usuario. Para el panel
PanelVehiculos 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 para
refrescar la información presentada en el panel. Para el panel
PanelVehiculos los métodos serían los siguientes:
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.
Los requerimientos funcionales se implementan en la
ventana principal, un método por requerimiento. En estos
mé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.
NIVEL 5
Panel
Panel
Panel
Ventana Principal
Requerimiento
ButtonModelo del
Mundo
Usuario
evento
1
solicitud
2
modificación
4
nuevo estado
5
información
3
refresco
6
refresco
6
Arquitectura y Distribución de Responsabilidades
Paso 1. El usuario genera el evento oprimiendo un botón en uno de
los panales de la interfaz. El evento es capturado y enviado el
método actionPerformed del panel que tiene el botón. Ejemplo del
requerimiento funcional Buscar Avalúo del Vehículo.
NIVEL 5
Arquitectura y Distribución de Responsabilidades
Paso 2. El panel reacciona al evento mediante el método
actionPerformed, el cual le debe solicitar a la ventana principal que
ejecute el requerimiento funcional.
El panel le debe pasar al método de la ventana principal la
información que este tiene y que requiere el método para ejecutar el
requerimiento funcional.
Si hay necesidad de hacer conversiones de datos, en el método
actionPerformed se deben hacer las conversiones.
Un requerimiento funcional se ejecuta como un método de la ventana
principal.
NIVEL 5
Arquitectura y Distribución de Responsabilidades
Paso 2. Ejemplo del requerimiento funcional Buscar Avalúo del
Vehículo.
NIVEL 5
Arquitectura y Distribución de Responsabilidades
Paso 3. La ventana principal completa la información necesaria para
ejecutar el requerimiento de los demás paneles.
En el método del requerimiento se deben hacer todas las
validaciones necesarias asociadas a problemas en la información
ingresada por el usuario o la acción realizada por el usuario.
Desde el método que implementa el requerimiento funcional se
accede a la información de los demás panales.
NIVEL 5
Arquitectura y Distribución de Responsabilidades
Paso 3. Ejemplo del requerimiento funcional Buscar Avalúo del
Vehículo.
NIVEL 5
Arquitectura y Distribución de Responsabilidades
Paso 4. El método que implementa el requerimiento funcional
interactúa con el mundo para que se haga alguna modificación o para
que se calcule algún valor.
En este paso se utilizan las asociaciones que tiene la interfaz hacia el
modelo del mundo con el fin de ayudar a implementar el
requerimiento funcional.
Cualquier excepción lanzada por los métodos del modelo del mundo
debe ser atrapada en este punto.
Si hay que calcular un valor, en este punto se tiene toda la
informació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 Responsabilidades
Paso 4. Ejemplo del requerimiento funcional Buscar Avalúo del
Vehículo.
NIVEL 5
Arquitectura y Distribución de Responsabilidades
Paso 5. Si en el paso anterior se pidió que se realizara alguna
modificación en el modelo del mundo, se llaman aquí los métodos del
mundo que retornan los nuevos valores que se deben mostrar.
Para saber qué métodos se deben invocar se debe establecer que
partes de la información mostrada al usuario deben ser recalculadas.
NIVEL 5
Arquitectura y Distribución de Responsabilidades
Paso 6. Se pide a todos los paneles que tienen información que pudo
haber cambiado que actualicen todos los valores que pudieron haber
cambiado.
Para esto se utilizan los métodos de refresco implementados en los
paneles.
NIVEL 5
Arquitectura y Distribución de Responsabilidades
Paso 6. Ejemplo del requerimiento funcional Buscar Avalúo del
Vehículo.
NIVEL 5
Ejecución de un Programa en Java
¿Cómo ejecutar un programa desde la línea de comandos del
sistema operativo?
java -classpath ./lib/impuestosCarro.jar
uniandes.cupi2.impuestosCarro.interfaz.InterfazImpuestosCarro
NIVEL 5
PREGUNTAS
NIVEL 5
Revisión del Protocolo de la Arquitectura
Revisión del código fuente para el protocolo que se sigue para
cumplir el requerimiento funcional de Buscar el avalúo de un
vehículo del caso de estudio del Calculador de Impuestos.
Revisión del código fuente para el protocolo que se sigue para
cumplir el requerimiento funcional de Calcular el pago de impuesto
de un vehículo del caso de estudio del Calculador de Impuestos.
Revisión del código fuente para el protocolo que se sigue para
cumplir el requerimiento funcional de Limpiar la Interfaz Gráfica del
caso de estudio del Calculador de Impuestos.
NIVEL 5
Revisión de la Forma de Implementar los Métodos de Extensión
Se deben definir dos métodos denominados metodo1 y metodo2 en
la clase principal del mundo (la clase CalculadorImpuestos del
ejercicio del Calculador de Impuestos)
NIVEL 5
Revisión de la Forma de Implementar los Métodos de Extensión
Se deben definir dos métodos denominados reqFuncOpcion1 y
reqFuncOpcion2 en la ventana principal de la interfaz (la clase
InterfazCalculadorImpuestos del ejercicio del Calculador de
Impuestos)
NIVEL 5
Ejemplos para agregar paneles en un BorderLayout
NIVEL 5
panelA
panelB
panelC
panelD
panelE
PREGUNTAS
NIVEL 5
top related