Interfaces De Programacion

1. Introducción a la programación de interfaces graficas de usuario.

1.1. Bibliotecas de programación de interfaces graficas de usuario.

Un widget es un elemento gráfico con el que el usuario puede interactuar. Un widget ocupa una porción rectangular en una ventana. Ejemplos de widgets son: botones, áreas de texto, etiquetas, etc. El kit AWT implementa los widgets más usuales. Sin embargo, las aplicaciones avanzadas requieren de widgets más sofisticados. En estos casos, Java ofrece Swing que por razones de tiempo y de complejidad, no podemos ver en este curso.

Para usar los widget de la AWT es necesario importar las clases del paquete java.awt:

import java.awt.*;

import javax.swing.*;

import java.awt.event.*;

import java.awt.*;

2. Modelo de componentes

2.1 Patrón de diseño modelo Vista Controlador

El modelo–vista–controlador (MVC) es un patrón de arquitectura de software que separa los datos y la lógica de negocio de una aplicación de la interfaz de usuario y el módulo encargado de gestionar los eventos y las comunicaciones. Para ello MVC propone la construcción de tres componentes distintos que son el modelo, la vista y el controlador, es decir, por un lado define componentes para la representación de la información, y por otro lado para la interacción del usuario.1 2 Este patrón de arquitectura de software se basa en las ideas de reutilización de código y la separación de conceptos, características que buscan facilitar la tarea de desarrollo de aplicaciones y su posterior mantenimiento.

2.2 Concepto de Componentes GUI

Llamamos Interfaz Gráfica GUI (Graphical User Interface) al conjunto de componentes gráficos que posibilitan la interacción entre el usuario y la aplicación. Es decir ventnas, botones, combos, listas, cajas de diálogo, campos de texto, etc.

Primero tenemos que diseñar la aplicación,programarla y por último los eventos que se generan a medida que el usuario interactua con la Interfaz.

Los componentes son objetos de las clases que heredan de la clase base componente como Button, List, TextField, TextArea, Label, etc.

En una GUI los componentes son contenidos en Contenedores o containers. Un Containes es un objeto cuya clase hereda de Container(clase que a su vez es subclase de Component) y tiene la responsabilidad de contener Componentes.

Generalmente una GUI se monta sobre un Frame. Esté sera el Container principal que contendrá a los componentes de la Interfaz Gráfica, un Container podría contener a otros containers.

Distribución de componentes (layouts)

Los containers contienen componentes y estos son acomodados dentro del espacio visual del container respetanto unaa cierta distribución que llamaremos layout.

AWT y Swing

Java provee dos API's con las que podemos trabajar para desarrollar GUIs, la más básica es AWT (Abstrct Window Toolkit). Las más desarrolladas se hacen con Swing, las cuales son más identificables ya que todas comienzan con "J", por ejemplo: JButton, JTextField, JTextArea, JPanel y JFrame son clases de Swing.

Todo el manejo de eventos y layouts es exactamente el mismo para AWT y Swing.

Distribuciones Relativas

Los layouts determinan el criterio con el que se vaan a distribuir los componentes dentro del container

FlowLayout : Distribuye los componentes uno al lado del otro en la parte superior del container. Por defecto provee una alineación centrada, pero también puede alinear a la izquierda o derecha.

BorderLayout: Divide el espacio del container en 5 regiones: NORTH, SOUTH, EAST, WEST y CENTER, admite un único componente por región

GridLayout: Divide el espacio del container en una grilla de n filas por m columnas, en donde las celdas son de igual tamaño

GridBagLayout: Divide el espacio del container en una grilla donde cada componente puede ocupar varias filas y columnas. Además permite distribuir el espacio interno de cada celda.

2.3. Jerarquía de clase de componentes

Cada una de las componentes de una ventana en AWT se representa mediante uno o más objetos de la aplicación. Estos objetos pertenecen a las clases que se observan en la siguiente jerarquía de clases para AWT:

La clase de los contenedores sirve para crear áreas en la ventana cuyo único fin es colocar otras componentes en su interior. Hay dos tipos de contenedores:

• Panel: sirve para colocar botones, etiquetas, etc. En particular un applet es un panel.

• Window: sirve para crear nuevas ventanas independientes del browser Web. Es decir ventanas que serán manejadas por el administrador de ventanas de la plataforma (Motif, Windows, etc.). Una ventana independiente puede ser:

o Frame es un tipo de ventana en donde se pueden colocar menús.

o Dialog es un tipo de ventana para dialogar con el usuario. Se usan para colocar botones, etiquetes, etc. Es decir cumple la misma función que un panel, pero en una ventana independiente. En particular FileDialog es un artefacto para que el usuario escoja un archivo.

2.4. Mostar etiquetas o imágenes

JLabel

Un Label o etiqueta puede mostrar texto plano, una imagen o una imagen con un texto. A continuacion veremos como crear una etiqueta, sus metodos, y applet donde veremos toda la funcionalidad y utilidad del JLabel.

Imágenes

¿Como se crea un JLabel?

JLabel etiqueta=new JLabel();

Esto crea una etiqueta vacia, sin texto y sin imagen.

JLabel etiqueta=new JLabel(Icon imagen);

Esto crea una etiqueta con una imagen especificada.

JLabel etiqueta=new JLabel(String texto);

Esto crea una etiqueta con un texto especificado.

JLabel etiqueta=new JLabel(String texto, Icon imagen, int alineacion);

Esto crea una etiqueta con imagen y texto especificado con una alineacion horizontal.

Para ver todos los constructores y todos los metodos de la clase JLabel, de clic aquí.

3.- Eventos

Los eventos se catalogan por su naturaleza, que se indicará en el miembro id de su estructura. Los grandes grupos de eventos son:

Eventos de Ventana

Son los que se generan en respuesta a los cambios de una ventana un frame o un dialogo.

• WINDOW_DESTROY

• WINDOW_EXPOSE

• WINDOW_ICONIFY

• WINDOW_DEICONIFY

• WINDOW_MOVED

Eventos de Teclado

Son generados en respuesta a cuando el usuario pulsa y suelta una tecla mientras un Componente tiene el foco de entrada.

• KEY_PRESS

• KEY_RELEASE

• KEY_ACTION

• KEY_ACTION_RELEASE

Eventos de Ratón

Son los eventos generados por acciones sobre el ratón dentro de los límites de un Componente.

• MOUSE_DOWN

• MOUSE_UP

• MOUSE_MOVE

• MOUSE_ENTER

• MOUSE_EXIT

• MOUSE_DRAG

Eventos de Barras

Son los eventos generados como respuesta a la manipulación de barras de desplazamiento (scrollbars).

• SCROLL_LINE_UP

• SCROLL_LINE_DOWN

• SCROLL_PAGE_UP

• SCROLL_PAGE_DOWN

• SCROLL_ABSOLUTE

Eventos de Lista

Son los eventos generados al seleccionar elementos de una lista.

• LIST_SELECT

• LIST_DESELECT

Eventos Varios

Son los eventos generados en función de diversas acciones.

• ACTION_EVENT

• LOAD_FILE

• SAVE_FILE

• GOT_FOCUS

• LOST_FOCUS

El applet EventosPrnt.java está diseñado para observar los eventos que se producen sobre él. Cada vez que se genera un evento, el applet responde imprimiendo el evento que ha capturado en la línea de comandos desde donde se ha lanzado el applet.

Una vez que se haya compilado el código y cargado el applet en el appletviewer o en un navegador con soporte Java, jugar un poco con el applet. Mover el cursor dentro del applet, picar con el ratón, picar y arrastrar, teclear algo, cambiar el tamaño de la ventana y taparla y destaparla con otra. Las acciones anteriores harán que en la ventana en donde se haya lanzado el appletviewer, o en la consola Java en caso de Netscape, vayan apareciendo los textos que indican los eventos que está recibiendo el applet.

3.1 Patrón Observador.

Observador (en inglés: Observer) es un patrón de diseño que define una dependencia del tipo uno-a-muchos entre objetos, de manera que cuando uno de los objetos cambia su estado, notifica este cambio a todos los dependientes. Se trata de un patrón de comportamiento (existen de 3 tipos: Creación, Estructurales y de Comportamiento), es decir, está relacionado con algoritmos de funcionamiento y asignación de responsabilidades a clases y objetos. Los patrones de comportamiento describen no solamente estructuras de relación entre objetos o clases sino también esquemas de comunicación entre ellos y se pueden clasificar en función de que trabajen con clases (Método Plantilla) u objetos (Cadena de Responsabilidad, Comando, Iterador, Recuerdo, Observador, Estado, Estrategia, Visitante).

La variación de la encapsulación es la base de muchos patrones de comportamiento, por lo que cuando un aspecto de un programa cambia frecuentemente,

...