apo1 - presentacion nivel 5

ALGORÍTMICA Y PROGRAMACIÓN 1 (APO 1)

NIVEL 5

Mario José Villamizar Cano

[email protected]

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

mailto:[email protected]

http://sistemas.uniandes.edu.co/~mj.villamizar24/dokuwiki/doku.php

[email protected]

http://twitter.com/mariocloud

http://linkedin.com/in/mariojosevillamizarcano

REDES SOCIALES

NIVEL 5

mailto:[email protected]

http://twitter.com/mariocloud

http://linkedin.com/in/mariojosevillamizarcano

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


NIVEL 5

MODELO DE LA INTERFAZ


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

http://cupi2.uniandes.edu.co/cursos/apo1/entrenadores/applets/ent_layouts/index.htm















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


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


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


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


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 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



JOptionPane que tiene diversas facilidades para mostrar mensajes

al usuario. Útil para mostrar mensajes de advertencia al usuario:

NIVEL 5



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


¿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


¿Quién crea el modelo del mundo? La responsabilidad de crear el

modelo del mundo es de la interfaz.

NIVEL 5


¿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


¿Cómo hacer para que los panales conozcan la venta principal?

NIVEL 5


¿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


¿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


¿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


¿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


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


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


Paso 2. Ejemplo del requerimiento funcional Buscar Avalúo del

Vehículo.

NIVEL 5


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



Vehículo.

NIVEL 5


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



Vehículo.

NIVEL 5


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


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



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.


cumplir el requerimiento funcional de Calcular el pago de impuesto

de un vehículo del caso de estudio del Calculador de Impuestos.


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

apo1 - presentacion nivel 5

Education