DPOO, CPM 3, Curso Última modificación: 1/04/08

Transcripción

1 Asignatura: DISEÑO Y PROGRAMACION ORIENTADO A AOBJETOS Carrera: Ingeniería Informática Tipo de Curso: C.R.D. Año: 1 er. Semestre: 2 do. TEMA # 2: Programación con tipos de datos CLASE PRACTICA EN MÁQUINA # 3: Construcción de aplicaciones con Interfaz Gráfica de usuario. Contenido Interfaz gráfica de usuario. Programación guiada por eventos. Programación guiada por Eventos y POO Java y GUI Instalar plugin para trabajar con Swing. Interface Gráfico de Usuario (GUI) para aplicaciones, usando los componentes Swing. Crear Interfaz gráfica en Eclipse usando Visual Editor Ejercicio. Entrada/Salida Objetivos Introducir los conceptos básicos del tratamiento de interfaces gráficas Introducir el trabajo de diseño de interfaces gráficas de usuario en Visual Editor para Eclipse Bibliografía [1] Cristina Greiner. Programación Guiada por Eventos [2] La Máquina Virtual Java [3] Zukowski John. Programación Java 2. J2SE 1.4. Volumen 2. Cap. 12. [4] Tutorial de Jjava en Español [5] The Definitive Guide to Java Swing, 3rd Edition Desarrollo Interfaz gráfica de usuario. Windows ofrece una Interfaz de Programación de Aplicaciones (API, Application Programming Interface) que permite que todos los ambientes de desarrollo para Windows utilicen las mismas funciones y librerías y que por tanto las aplicaciones corran bajo el sistema operativo Windows garantizando la consistencia entre ellas. De esta manera se aísla al programador del trabajo con la API de Windows (aunque si la conoce y lo desea puede usar sus funciones directamente) quien trabaja sobre las construcciones del compilador que es quien finalmente se comunica con Windows a través de sus funciones API. Las funciones API se dividen en varias categorías: Depuración y manejo de errores E/S de dispositivos DLLs, procesos e hilos Comunicación entre procesos Manejo de la memoria Monitoreo del desempeño Manejo de energía Almacenamiento

2 Información del sistema GDI (interfaz gráfica) de Windows Interfaz de usuario de Windows Se conoce como interfaz gráfica de usuario a las interfaces de aplicaciones que presentan componentes visuales como ventanas, botones, listas, paneles, etc. Las aplicaciones para Windows, se basan en interfaces gráficas de usuario y para su construcción los diferentes ambientes ofrecen funciones, librerías y componentes que ocultan el trabajo con la GDI de Windows, haciendo más fácil el trabajo de diseño y programación. Un componente, no es más que una clase de objeto que modela un control de una aplicación, cuyas propiedades pueden ajustarse en tiempo de diseño. Por ejemplo: ventana, botón, etc. Los componentes permiten al usuario interactuar con la aplicación y proporcionar información. En ambientes con Delphi y CBuilder de Borland, se ofrece para el diseño de interfaces gráficas de usuarios la Librería de Componentes Visuales (VCL, Visual Component Library, o también, Visual Class Library). La VCL agrupa en una gran jerarquía de clases todos los componentes que un usuario puede colocar en una interfaz. De esta manera el diseño de las interfaces de usuario se convierte en una tarea fácil y rápida. Basta con seleccionar los componentes de algunas paletas y colocarlo en una ventana. Debe resaltarse que aunque se denomina Librería de Componentes Visuales, ésta agrupa no sólo a componentes visuales propiamente dicho, sino a otros componentes que no son exactamente visuales, pero que se utilizan para formar parte de las interfaces de usuario, por ejemplo: timer. En Java, se ofrecen la AWT (Abstract Windows Toolkit) y la SWING, para el diseño de interfaces gráficas de usuario. Programación guiada por eventos. Con la introducción de las interfaces gráficas de usuarios, se introdujo también la programación guiada por evento, término que acuña un nuevo enfoque en la construcción de aplicaciones, basado en que las aplicaciones la mayor parte del tiempo esperan las acciones del usuario y por ende, deben estar preparadas para responder a ellas. Es decir, el programa debe saber cómo manejar los objetos disponibles y responder a los estímulos que vienen del usuario. Por ejemplo, si en una ventana aparece un botón y el usuario puede hacer clic sobre él, la aplicación debe responder de alguna manera o, si han pasado determinados minutos sin que el usuario realice alguna acción la aplicación debe hacer algo, etc. Evento [Gre] Un evento indica la aparición de un estímulo que puede disparar una transición de estados (un objeto pasará de un estado a otro). Es la especificación de un acontecimiento significativo, como una señal recibida, un cambio de estado o el simple paso de un intervalo de tiempo. En este contexto, un evento es un vínculo entre una ocurrencia en el sistema y una porción de código que responde a esa ocurrencia. Esa porción de código es lo que denominamos un manejador de eventos. Los eventos pueden ser provocados por el usuario, cuando es éste quien los dispara, o por el sistema o el medio. Ejemplos de eventos de usuario pueden ser: Un clic del mouse La pulsación de una tecla Una selección en un menú. Un movimiento del mouse.

3 La toma de foco Ejemplos de eventos del sistema o del medio pueden ser: Los intervalos del reloj El paso del tiempo El cierre del sistema Un mensaje que proviene de otra aplicación. Un mensaje que proviene de otra computadora Los eventos son previstos, pero no planeados. Esto es, se conoce el hecho de que el evento puede ocurrir, pero no se conocen las circunstancias o el momento en el que ocurrirá. Estas aplicaciones no tienen un programa principal en el sentido tradicional, pues se inician creando la pantalla principal e iniciando la cola de eventos. El estado casi permanente de la aplicación es estar inactiva, esperando la ocurrencia de eventos. Los eventos son procesados en orden, obteniéndolos de la cola de eventos, y el proceso de cada evento implica despacharlo al componente correcto. Programación guiada por Eventos y POO [Gre] La POO es adecuada para soportar la programación guiada por eventos. Cada componente que recibe un estímulo es un objeto, y este objeto va a responder al mensaje con la ejecución de un método definido en su clase. Por ejemplo, cuando un usuario pulsa sobre un botón, está provocando un evento que envía un mensaje al botón, que podría llamarse OnClick. A su vez esto provoca que el botón reaccione con un método definido en su clase. Mensajes y eventos Los mensajes son el medio de comunicación de los objetos. Hay diversos tipos de mensajes y de operaciones que éstos pueden realizar. El programa se activa cuando le llega un mensaje enviado por la ocurrencia de un determinado evento. Por supuesto debe estar definido quién atenderá a esos mensajes. Al nivel del sistema operativo hay una serie de mapeos que transforman los mensajes recibidos en acciones. El programador debe definir en la aplicación los métodos que atiendan a los mensajes generados. Todos los ambientes de desarrollo permiten usar eventos predefinidos para los componentes visuales y redefinir o reemplazar el comportamiento por defecto por el nuevo comportamiento deseado. Además permiten definir nuevos eventos. Java y GUI Dado que Java es multiplataforma, el problema del diseño y administración de las interfaces gráficas toma otra dimensión. Ahora se trata de diseñar interfaces que tengan la misma apariencia y comportamiento independientemente de la plataforma donde corra la aplicación, entiéndase: Microsoft Windows (95, 98, NT, 2000, etc.), Macintosh, UNIX, Webphones, Network Computers, navegadores de Internet, Web TV, y un incontable número de dispositivos hardware siempre que posean una JVM (Java Virtual Machine). [2] Debido a esto, la administración de diseño de GUI se convierte en un factor importante para el programador, ya que los componentes no tienen el mismo aspecto en todas las plataformas ni el mismo estado real de pantalla. [3] Las interfaces gráficas en Java se pueden construir usando cualquiera de las dos galerías de componentes visuales que proporciona:

4 1.- JAVA AWT: es la librería visual más antigua de java. La versión 1.0 del JDK proveía una biblioteca llamada Abstract Window Toolkit (AWT), preparada para correr en cualquier plataforma, pero que generaba interfaces de usuario pobres y ni siquiera era orientada a objetos. En la versión 1.1 la AWT fue mejorada, con la incorporación de ideas tomadas de Delphi, y con el soporte de objetos. También introdujo un mejor manejo de eventos. 2.- JAVA SWING: es la librería de componentes visuales más nueva que proporciona java. Java 2 (JDK 1.2) introdujo un gran cambio con las Java Foundation Classes (JFC), una biblioteca que se conoce más comúnmente corno Swing. Swing ha sido diseñada para trabajar correctamente con cualquier producto RAD y sobre cualquier plataforma, al costo de un enorme tamaño. Para crear nuevas aplicaciones en Java se recomienda usar Swing, no así para crear applets. Cuál es la diferencia entre AWT y Swing? Los componentes AWT se ajustan al aspecto de los componentes del sistema nativo, mientras que el aspecto y comportamiento de los componentes Swing se controla desde dentro de Java, de modo que se puede cambiar el aspecto y comportamiento de un componente en cualquier momento. En ambos casos el tamaño de los componentes se desconoce hasta el momento de la ejecución de modo que no se pueden usar coordenadas absolutas. [3] O sea, AWT que es la biblioteca original de componentes visuales de Java, es dependiente de la plataforma donde se esté ejecutando el programa Java, ya que es una capa intermedia unificada para garantizar el acceso a los componentes del Sistema Operativo. Esto trae como consecuencia que la misma aplicación cambie de apariencia dependiendo del SO sobre el que corra, es decir, que si se ejecuta en Windos lucirá como una aplicación de Windows, en cambio si es Linux tendrá la apariencia de las aplicaciones en Linux, además como se utilizan las APIs de los Sistemas Operativos pueden ocurrir errores en un sistema operativo y no en otro. Esto evidente atenta contra el principal principio del lenguaje: write-once, run anywhere (WORA). Para resolver estos efectos indeseados los desarrolladores de Java se dieron a la tarea de crear una biblioteca de interfaz gráfica, independiente de la plataforma y así surgió Swing. Ésta posee componentes visuales de alto nivel (beans) en la que el desarrollador tiene un mayor control del comportamiento de los mismos, ya que la máquina virtual lo único que hace es pedirle al Sistema Operativo una ventana y dibuja sobre ella los componentes. Estos beans siguen el patrón de diseño Model View Controller (MVC) donde el componente distribuye sus funcionalidades en: Modelo: que almacena la información referente al componente (estructura de datos), Vista: que visualiza los datos del modelo y Controlador: que se encarga de manejar la interacción con el usuario (eventos). Si bien los desarrolladores de Java sintieron que los componentes de AWT debían ser sustituidos, no sintieron lo mismo con el tratamiento de eventos; así que la mayoría de los eventos existentes en el lenguaje son de esta biblioteca. En este curso estudiaremos las APIs que se incluyen en el JDK, específicamente Swing. Instalar plugin para trabajar con Swing. El Eclipse SDK 3.2 no incluye por defecto una herramienta para la creación de interfaz gráfica de usuario, pero, este es un IDE extensible a base de plugins y existen varios para dotarlo de esta funcionalidad. En este curso se trabajará con el VisualEditor 1.2 que es la versión que le corresponde al Eclipse 3.2. Para agregar un plugins al eclipse la mayoría de las veces sólo es necesario descompactarlo en la carpeta en que este copiado el Eclipse. Que es el caso del VisualEditor. En otros casos los plugin traen sus propios instaladores. Cómo instalar el VisualEditor(VE) al Eclipse?

5 1. Como se muestra en la figura el VisualEditor esta compuesto por tres ficheros.zip. Estos son los que contienen las funcionalidades que se desea adicionar al Eclipse. 2. Copie hacia su máquina estos tres ficheros y descompáctelos hacia el mismo directorio donde se encuentra la carpeta eclipse sobreescribiendo si es necesario. Antes de la instalación del Visual Editor el Eclipse debería lucir así.

6 Después de instalado el VisualEditor debe aparecer un nuevo wizard para la creación de clases visuales. En \\grial\docencia\1ro\dpoo\videos utiles\lab 3 puede verse un video que detalla el procedimiento de instalación del plugin para el Visual Editor. Interface Gráfico de Usuario (GUI) para aplicaciones, usando los componentes Swing. Para crear interfaces gráficas de usuario en Java es necesario tener en cuenta los aspectos siguientes: Los componentes que componen las pantallas El control de eventos La posición o distribución de los componentes Swing define las categorías de componentes siguientes: Contenedores de alto nivel o simplemente contenedores (JFrame, JApplet, JWindow, JDialog) Contenedores de nivel intermedio (JPanel, JScrollPane, JTabbedPane) Componentes de peso ligero o componentes atómicos o simplemente componentes (Jcualquier-cosa, como JButton, JPanel, y JMenu) Los contenedores de alto nivel proporcionan el marco de trabajo en el que existen los contenedores de nivel intermedio o componentes atómicos. Específicamente, un contenedor proporciona un área en el que los componentes pueden dibujarse a sí mismos. Los contenedores también proporcionan otras características como el espacio para una barra de menú, manejo avanzado de eventos y dibujo, y soporte de accesibilidad. Los contenedores intermedios tienen el propósito de contener otros componentes (intermedios o atómicos) simplificando el posicionamiento de éstos.

7 Los componentes atómicos existen no para contener otros componentes, sino como entidades auto-suficientes. Frecuentemente, los componentes atómicos también obtienen entrada del usuario. En una aplicación para cada contenedor de alto nivel existe un árbol de contenido que no es otra cosa que una jerarquía en la que se encuentran todos los componentes contenidos en él (intermedios o atómicos). En Eclipse se puede ver el árbol de contenidos y navegar por los distintos componentes a través de la vista Java Beans. Todos los contenedores tienen asociado un administrador de diseño o controlador de distribución (Layout), que es el encargado de distribuir sus componentes visualmente dentro del contenedor, o sea, es quien controlar el tamaño y posición de los componentes incluidos en el contenedor. La plataforma Java suministra cinco controladores de disposición comúnmente usados diseñados para mostrar múltiples componentes a la vez: [4] BorderLayout: controlador de disposición por defecto para todas las ventanas, como Frames y Cuadros de Diálogo. Utiliza cinco áreas para contener los componentes: north, south, east, west, and center (norte, sur, este, oeste y centro). Todo el espacio extra se sitúa en el área central. FlowLayout: controlador por defecto para todos los Paneles. Coloca los componentes de izquierda a derecha, empezando una nueva línea si es necesario. GridLayout: genera un racimo de Componentes que tienen el mismo tamaño, mostrándolos en una sucesión de filas y columnas. GridBagLayout: Alinea los componentes situándolos en una parrilla de celdas, permitiendo que algunos componentes ocupen más de una celda. Las filas de la parrilla no tienen porque ser de la misma altura; de la misma forma las columnas pueden tener diferentes anchuras. BoxLayout: pone los componentes en una sola fila/columna. Respeta las peticiones de máximo tamaño del componente, y también permite alinearlos. Y uno de propósito general usado en combinación con otros controladores de distribución CardLayout. Cada contenedor tiene un administrador por defecto que dispone los componentes de alguna manera predefinida, pero los diseñadores pueden cambiarlos para ajustar el diseño a sus intereses. Generalmente, sólo se selecciona el controlador de distribución de los contenedores: paneles de contenido (que usan BorderLayout por defecto) y JPanel (que usan FlowLayout por defecto). En [5] Capítulo 10 puede encontrar información muy completa sobre Administración de Layout y

8 ejemplos de su uso. Crear Interfaz gráfica en Eclipse usando Visual Editor 1. Crear una nueva clase visual. 2. En el cuadro de dialogo aparece un árbol en la esquina inferior izquierda donde se representan los componentes visuales y la biblioteca a la que pertenecen. A: Representa a las bibliotecas de componentes visuales A 3. Seleccionar el tipo de componente que se desea crear, haciendo doble clic en la rama del árbol correspondiente. Se recomienda escoger Application. B: componente que queremos crear B 4. Creada ya la clase visual aparecen nuevas vistas.

9 C E D F C: Vista Diseño. Se muestra como quedara el diseño de la interfaz visual D: Vista Fuente. Se muestra el código generado por el VisualEditor para de ser necesario modificarlo. E: Paleta de componentes. Seleccionamos los componentes para adicionar al diseño de interfaz. F: Vista Java Beans. Representa la estructura de los componentes en el diseño visual. Trabajar con el código y la vista de diseño es incómodo en esta distribución de vistas. Una distribución más cómoda y rápida se logra separando el código de la vista de diseño en dos páginas con pestañas. Para ello ir al menú Windows\Preferences. Seleccionar la rama Java seleccionar Visual editor y escoger la página opción Appareance seleccionar On separate notebook tabs.

10 Se recomienda analizar el código que se ha generado automáticamente con la adición de la ventana. Note que se creó una clase con algunos métodos. En la medida que avancemos en el curso algunas de las cosas de este código se irán aprendiendo. 5. Por ahora no vamos a trabajar con el administrador de diseño de la ventana. Para deshabilitarlo: 6. Seleccionamos los componentes que deseamos añadir a nuestra ventana y lo arrastramos hacia su superficie. Note que como la ventana es un contenedor se le pueden adicionar componentes o contenedores intermedios. En este ejemplo se está añadiendo a la ventana una etiqueta (JLable) Una vez hecho esto debe nombrar la nueva instancia que está creándose automáticamente dentro de la ventana. Para nombrar instancias de la interfaz se recomienda cambiar el nombre que se sugiere por defecto por un nombre con el estilo Java: nombre acorde a lo que representa + nombre del control Ejemplo Sugerido por el sistema: JLabel Nombre dado por el programador: namelabel 7. Modificamos el texto asociado a la etiqueta del componente (en el ejemplo: nombre)

11 8. Completamos el diseño añadiendo un campo para texto (jtextfield) y un botón (jbutton). Diseño completo. 9. Ahora queremos que cuando el usuario haga clic sobre el botón se muestre una ventana con un mensaje de saludo a la persona cuyo nombre se escribió en el jtextfield. Para ello es necesario manipular el evento que genera el usuario al hacer click sobre el botón, que en java se reconoce como un actionperformed. Luego se trata de adicionar el evento actionperformed y modificar su código, para que se haga lo que deseamos.

12 10. Note que en el cuerpo del método getaceptarbutton(), se ha añadido el siguiente código aceptarbutton.addactionlistener(new java.awt.event.actionlistener() { public void actionperformed(java.awt.event.actionevent e) { System.out.println("actionPerformed()"); // TODO Auto-generated Event stub actionperformed() } }); Este código adiciona al componente un oyente (Listener) para manejar el evento en cuestión. De esta manera cuando la máquina virtual lanza ese evento durante la ejecución, el está capacitado para oirlo y manipularlo. Desde el punto de vista de programación se está invocando al método addactionlistener de la instancia aceptarbutton, al cual se le pasa como parámetro una clase anónima que es precisamente el oyente. La clase anónima tiene un método público actionperformed, donde se implementa el código que se desea que se ejecute cuando se genere el evento, o sea, el comportamiento del botón. Como puede apreciarse el comportamiento por defecto es mostrar en la consola la cadena: actionperformed(). Sin embargo queremos modificar dicho comportamiento para que además muestre una ventana con un mensaje de saludo y un botón. Para ello, agregue el siguiente código después de la salida por consola: JOptionPane.showMessageDialog(null, "Hola "+nombretextfield.gettext()); 11 Ejecutar la aplicación (Run As \ Java Beans). El resultado debe ser como se muestra en las figuras.

13 Ejercicio. Realizar una aplicación que simule una calculadora con las operaciones elementales del álgebra con la interfaz que se muestra a continuación. Entrada/Salida Los campos de texto se utilizan para entrar y mostrar información. Estas informaciones son tratadas generalmente como cadenas de caracteres. Sin embrago no siempre conviene que esté en ese formato para su procesamiento. Por ejemplo, en el caso de la calculadora, se necesita trabajar con números. Para transformar números a cadenas (String) y viceversa existen varias formas. Entre ellas los métodos valueof y parser + tipo al que se desea convertir, respectivamente. Ejemplos //convierte el texto del objeto operate1textfield (del tipo jtextfield) a un float, a través del método static parsefloat de la clase Float. float firstoperand = Float.parseFloat(operate1TextField.getText()); //lo mismo del anterior pero para el objeto operate2textfield float secondoperand = Float.parseFloat(operate2TextField.getText()); //suma los dos flotantes y convierte el resultado en un String a través del método static valueof de la clase String y asigna la cadena resultante en el texto del objeto resultlabel. resultlabel.settext(string.valueof(firstoperand + secondoperand));