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

...