Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Capitulo6 PDF
Capitulo6 PDF
Captulo 6: Interfaces
Interfaces de
Usuario.
- 77 -
6-. Interfaces de Usuario.
6. Interfaces de Usuario.
En el proceso de interaccin persona-ordenador, la Interfaz Grfica de Usuario
(GUI), es el artefacto que permite la interaccin amigable con el sistema informtico.
La interfaz grfica de usuario (en ingls Graphical User Interface, GUI) es un tipo de
interfaz de usuario que utiliza un conjunto de imgenes y objetos grficos (iconos,
ventanas, tipografa) para representar la informacin y acciones disponibles en la
interfaz. En este captulo comentaremos las diferentes herramientas que se pueden
utilizar para realizar interfaces de usuario; comenzaremos por describir el paquete
AWT (Abstract Window Toolkit) de java; a continuacin describiremos con mucho
detalle el paquete Java Swing, que es el que ha sido utilizado finalmente para
implementar la interfaz. Por ltimo hablaremos de SWT, otra tecnologa alternativa
para la realizacin de interfaces grficas que est adquiriendo cada vez ms
importancia.
- 79 -
6-. Interfaces de Usuario.
funcin de una jerarqua de clases que aade funcionalidad y carcter especfico con
cada nivel. Las dos ventanas ms comunes son las que derivan de panel (utilizadas por
las applets) y las que derivan de Frame (marco), que permiten crear ventanas estndar.
La mayor parte de la funcionalidad de estas ventanas la heredan de sus superclases. Para
poder entender esto es fundamental describir una jerarqua de clases que relacione
ambas clases. De forma grfica, esta jerarqua podra representarse como sigue:
Component
Container
Menu Container
Interface Window Panel
Frame
- 80 -
6-. Interfaces de Usuario.
Aparte de estas clases de alto nivel, existen otras clases que permiten al usuario
interactuar con la aplicacin de muy diversas formas. Se denominan controles y el
AWT permite los siguientes tipos de controles:
- Etiquetas.
- Botones.
- Cuadros de comprobacin.
- Mens de opciones.
- Listas.
- Barras de desplazamiento.
- Edicin de texto.
Para comenzar a hablar de Swing, vamos a ver su origen, y para ello nombraremos
el JFC. JFC es la abreviatura de Java Foundation Classes, que comprende un grupo de
caractersticas para ayudar a construir interfaces grficas de usuario (GUIs). El JFC
incluye una serie de caractersticas, como pueden ser:
- Los componentes Swing: hablaremos a continuacin de ellos. Para comenzar,
diremos que incluye prcticamente todo lo que haba en el AWT y ms. Por
ejemplo, tenemos desde botones hasta SplitPanes (que dividen la pantalla en
zonas) o tablas.
- Soporte de Aspecto y Comportamiento Conectable: Le ofrece a cualquier
componente Swing una amplia seleccin de aspectos y comportamientos (look and
feel). Por ejemplo, el mismo programa puede usar el Aspecto y Comportamiento
Java o el Aspecto y Comportamiento Windows.
- API de Accesibilidad: Permite tecnologas asistivas como lectores de pantalla o
displays Braille para obtener informacin desde el interfaz de usuario.
Estas tres primeras caractersticas del JFC fueron implementadas sin ningn
cdigo nativo, es decir, utilizando nicamente la API definido en el JDK 1.1. Cmo
resultado, se convirtieron en una extensin del JDK 1.1. Esta versin fue liberada como
JFC 1.1, que algunas veces es llamada 'Versin Swing'. La API del JFC 1.1 es conocido
como la API Swing. Una curiosidad sobre el nombre: "Swing" era el nombre clave del
proyecto que desarroll los nuevos componentes. Aunque no es un nombre oficial,
frecuentemente se usa para referirse a los nuevos componentes y al API relacionado.
- 81 -
6-. Interfaces de Usuario.
Est inmortalizado en los nombres de paquete de la API Swing, que empiezan con
"javax.swing". En el JDK 1.2 se incluyeron otras caractersticas, como el Java 2D API
que permite a los desarrolladores incorporar fcilmente grficos 2D de alta calidad,
texto e imgenes, o por ejemplo el soporte de Drag and Drop para arrastrar y soltar
entre aplicaciones Java y aplicaciones nativas.
Dada la importancia de Swing, hoy en da no se plantea el tener un JDK sin las
capacidades que proporciona este paquete.
Swing consta de 16 paquetes, cada uno de los cuales tiene un propsito concreto
que detallamos brevemente a continuacin:
- 82 -
6-. Interfaces de Usuario.
Para empezar con diferencias sencillas, nos fijaremos en una diferencia sintctica
que salta a la vista: se pueden identificar los componentes Swing porque sus nombres
empiezan por J. Por ejemplo, la clase del AWT que crea un botn se denomina
Button, y la clase Swing se llama JButton. Los componentes AWT estn en el paquete
java.awt, mientras que los componentes Swing estn en el paquete javax.swing.
Si profundizamos un poco ms, podemos ver otras diferencias importantes. La
mayor diferencia entre los componentes AWT y los componentes Swing es que stos
ltimos estn implementados sin nada de cdigo nativo. Esto significa que los
componentes Swing pueden tener ms funcionalidad que los componentes AWT,
porque no estn restringidos a las caractersticas presentes en cada plataforma. Esto
tambin significa que un botn Swing y un rea de texto se vern y funcionarn
idnticamente en cualquier plataforma (Macintosh, Solaris, Linux, Windows, etc.).
Las capacidades que tienen los componentes Swing son bastante ms importantes
que las que ofrecen los componentes del AWT. Por citar algunos ejemplos:
- Los botones y las etiquetas Swing pueden mostrar imgenes en lugar de o adems
del texto.
- Se pueden aadir o modificar fcilmente los bordes dibujados alrededor de casi
cualquier componente Swing.
- Se puede modificar fcilmente el comportamiento o la apariencia de un
componente Swing llamando a mtodos o creando una subclase que herede del
componente en cuestin.
- Los componentes Swing no tienen por qu ser rectangulares. Por ejemplo, los
botones pueden ser redondos.
- 83 -
6-. Interfaces de Usuario.
Antes de entrar en ms detalle sobre los elementos del paquete Swing, vamos a
echar un vistazo al cdigo de una aplicacin Swing. En los siguientes apartados se darn
explicaciones completas sobre los tpicos que aqu se introduzcan, sin embargo es
interesante empezar por tener una visn global.
Veamos la ventana de la aplicacin con la que vamos a tratar:
- 84 -
6-. Interfaces de Usuario.
import javax.swing.*;
Sin embargo, no es este el nico paquete que necesitaremos por norma general. Es
muy comn que los programas Swing tambin necesiten clases de los paquetes
principales del AWT, ya que Swing utiliza el modelo de eventos de este ltimo. Para
poder utilizarlos se aaden las lneas siguientes:
import java.awt.*;
import java.awt.event.*;
Otro detalle a tener en cuenta es que las libreras de los Windows y Macintosh
pluggable look-and-feel slo se soportan en la plataforma correspondiente.
Realizar el cambio del look-and-feel de una aplicacin es bien sencillo.
nicamente hay que llamar al mtodo setLookAndFeel() de UIManager, pasndole el
- 85 -
6-. Interfaces de Usuario.
nombre completo del LookAndFeel que vamos a usar. El cdigo que se muestra a
continuacin se puede usar para llevar esto a cabo en tiempo de ejecucin:
try {
UIManager.setLookAndFeel(
"com.sun.java.swing.plaf.motif.MotifLookAndFeel");
SwingUtilities.updateComponentTreeUI(myJFrame);
}catch (Exception e) {
System.err.println("Could not load LookAndFeel");
}
- 86 -
6-. Interfaces de Usuario.
Como dijimos anteriormente, esto es una ligera introduccin para que nos vayan
sonando los conceptos. Muchos de ellos sern ampliamente desarrollados ms adelante.
- 87 -
6-. Interfaces de Usuario.
- MANEJAR EVENTOS:
En el cdigo que hemos visto hasta ahora hemos encontrado dos manejadores de
eventos. Uno maneja las pulsaciones de botn y otro maneja los eventos de cierre de la
ventana o frame. Desarrollaremos este punto con detalle en captulos posteriores, pero
veamos el cdigo del ejemplo que corresponde al manejo de eventos (en este caso se
definen en clases internas annimas):
- 88 -
6-. Interfaces de Usuario.
- 89 -
6-. Interfaces de Usuario.
Las ilustracin 5 muestra los GUIs de cinco programas, cada uno de ellos con
cinco botones. Los botones son idnticos, y el cdigo de los programas es tambin
prcticamente idntico. Entonces, por qu parecen tan diferentes? Simplemente porque
usan diferentes controladores de distribucin para controlar el tamao y posicin de los
botones.
- 90 -
6-. Interfaces de Usuario.
- BorderLayout
- BoxLayout
- FlowLayout
- GridLayout
- GridBagLayout
- 91 -
6-. Interfaces de Usuario.
- 92 -
6-. Interfaces de Usuario.
como los paneles y las etiquetas. Sin embargo, hay algunos otros
componentes, como los paneles desplazables, que no funcionan bien con
bordes en algunas implementaciones del Aspecto y Comportamiento, debido a
la forma en que implementan su cdigo de dibujo.
Cada vez que el usuario teclea un carcter o pulsa un botn del ratn, ocurre un
evento. Cualquier componente puede ser notificado del evento. Todo lo que tiene que
hacer es implementar el interfaz apropiado y ser registrado como oyente de evento del
evento fuente apropiado.
Existen muchos tipos de eventos diferentes en Swing. En la siguiente tabla se
muestran algunos ejemplos:
- 93 -
6-. Interfaces de Usuario.
Cada evento est representado por un objeto que ofrece informacin sobre el
evento e identifica la fuente (es decir, quin produjo dicho evento). Las fuentes de los
eventos normalmente son componentes, pero otros tipos de objetos tambin pueden ser
fuente de eventos.
Cada fuente de eventos puede tener varios oyentes registrados, es decir, varios
objetos a la vez pueden estar escuchando una fuente de eventos, y sern notificados
cuando un se produzca un evento en esta fuente. Inversamente, un oyente puede
registrarse con varias fuentes de eventos. Mostramos grficamente lo explicado:
- 94 -
6-. Interfaces de Usuario.
someComponent.addActionListener(instanceOfMyClass);
ActionEvent
button ---------------------------------> action listener
- 95 -
6-. Interfaces de Usuario.
- LOS ADAPTADORES:
- 96 -
6-. Interfaces de Usuario.
...
public void mouseClicked(MouseEvent e) {
//Implementacin del manejador para este evento.
}
}
Otro ejemplo de uso de clases internas, en este caso con una clase interna
annima:
- 97 -
6-. Interfaces de Usuario.
6.2.8-. Dibujo.
En principio no es necesario conocer todos los detalles de dibujo del GUI pues el
programador no tiene que encargarse prcticamente de nada con respecto a este aspecto.
Sin embargo, puede ser interesante tener ciertas nociones para, en caso de que nuestros
componentes no se dibujen correctamente, ser capaces de entender qu hay de errneo
en nuestra implementacin. Tambin es til lo que se explica a continuacin si
queremos crear cdigo de dibujo personalizado para un componente.
- UN EJEMPLO DE DIBUJO:
- 98 -
6-. Interfaces de Usuario.
2. dibujo
1. fondo 3. borde 4. hijos
personalizado
(si es opaco) (si existe) (si existen)
(si existe)
............. ............. ============= =============
............. ....()....... =...()......= =...()......=
............. ............. =...........= =.---------.=
............. ............. =...........= =.|JButton|.=
............. ............. =...........= =.---------.=
............. ............. ============= =============
Ilustracin 6: Orden en el dibujo de una aplicacin Swing.
- 99 -
6-. Interfaces de Usuario.
...
//Toda la manipulacin de la GUI (setText, getText, etc.)se realiza
//en manejadores de eventos como por ejemplo actionPerformed().
...
}
- 100 -
6-. Interfaces de Usuario.
son mostrados los componentes del GUI, es tcnicamente insegura ya que los
componentes han sido realizados con la llamada a pack y se est ejecutando
este setVisible fuera del thread de despacho de eventos. Sin embargo, como el
programa no ha hecho visible el GUI todava, es sumamente contrario a que
una llamada a paint ocurra antes de que retorne setVisible.
4. El thread principal no ejecuta cdigo GUI despus de llamar a setVisible. Esto
significa que el cdigo del GUI se mueve del thread principal al thread de
despacho de eventos, y el ejemplo es, en la prctica, de thread seguro.
- 101 -
6-. Interfaces de Usuario.
un item de men que realicen la misma funcin pueden ser implementados con
este tipo de objeto.
Dado que la aplicacin que se desarrolla en este proyecto fin de carrera es una
herramienta para la edicin de un tipo concreto de documento, debemos prestar especial
atencin a los Componentes de Texto de Swing en esta memoria.
Los componentes de texto muestran algn texto y opcionalmente permiten que el
usuario lo edite. Los programas necesitan componentes de texto para tareas dentro del
rango del sencillo (introducir una palabra y pulsar Enter) al complejo (mostrar y editar
texto con estilos y con imagenes embebidas en un lenguaje asitico). Los paquetes
Swing proporcionan cinco componentes de texto y proporcionan clases e interfaces para
conseguir los requerimientos ms complejos. Sin importar sus diferentes usos o
capacidades, todos los componentes de texto Swing descienden de la misma superclase,
JTextComponent, que proporciona una base poderosa y ampliamente configurable
para la manipulacin de texto. La ilustracin 7 muestra una clasificacin de los distintos
componentes de texto Swing. As mismo, mostramos una figura (ilustracin 8) de una
sencilla aplicacin en la que se pueden observar estos componentes.
- 102 -
6-. Interfaces de Usuario.
- 103 -
6-. Interfaces de Usuario.
- 104 -
6-. Interfaces de Usuario.
acciones para un componente de texto, un kit de editor tambin sabe leer y escribir
documentos en un formato particular. El paquete text de Swing proporciona estos tres
kits de editor:
- DefaultEditorKit: Lee y escribe texto sin estilo. Proporciona un conjunto bsico
de comandos de edicin. Los dems kits de editor descienden de este.
- StyledEditorKit: Lee y escribe texto con estilo y proporciona un conjunto de
acciones mnimo para texto con estulo. Esta clase es una subclase de
DefaultEditorKit y es el kit de editor usado por defecto por JTextPane.
- HTMLEditorKit: Lee, escribe y edita HTML. Esta es una subclase de
StyledEditorKit.
6.3-. SWT.
6.3.1-. Introduccin.
Los grficos en Java han tenido un largo y exitoso desarrollo. Se empez como ya
sabemos con el paquete bsico AWT, vindose ampliado por el paquete Swing.
Actualmente est empezando a hablarse de SWT, y parece que pueda llegar a
imponerse. Ahondemos un poco en esta evolucin:
- AWT: Primer acercamiento de Java al desarrollo de interfaces grficas (GUI).
Permite mostrar ventanas con controles variados como cajas de texto y botones.
Las GUIs con AWT son fciles de desarrollar, y usan los controles propios del
sistema operativo en el que se programa, por ejemplo, en windows aparecer una
ventana de texto tpica de windows, en Mac, una ventana con sus respectivas
caractersticas Mac, etc. El problema que se presenta es que algunos sistema
operativos difieren de otros en el conjunto de controles, por lo que Sun slo
implement los controles comunes a los sistemas operativos a los que se dirige
- 105 -
6-. Interfaces de Usuario.
No vamos a entrar en detalles de cdigo de SWT. Sin embargo, para tener una
ligera idea, finalizaremos con un ejemplo: el tpico Hello World.
import org.eclipse.swt.widgets.*;
- 106 -
6-. Interfaces de Usuario.
while (!shell.isDisposed() {
if (!display.readAndDispatch())
display.sleep();
}
display.dispose();
}
}
while (!shell.isDisposed())
{
if (!display.readAndDispatch())
display.sleep();
}
Por ltimo observamos que los recursos del sistema han de ser liberados por el
programador (display.dispose();). La liberacin del objeto display conlleva la
finalizacin de todos los shells hijos contenidos.
Esto no es ms que una pequea introduccin. Para ahondar en el tema se puede ir
a la web del proyecto Eclipse, www.eclipse.org/swt.
- 107 -
6-. Interfaces de Usuario.
- No elija SWT por su fidelidad a la plataforma, ya que esto no es una gran virtud.
Normalmente los usuarios no tiene problema en utilizar interfaces alejados de su
S.O. nativo, siempre que estos sean buenos y fciles de usar. Vase el ejemplo
de Firefox, Winamp, etc.
- Se utiliza un planteamiento de mnimo comn denominador de las plataformas
soportadas. Es decir, puede haber una caracterstica muy tpica de Windows pero
que no est disponible slo porque sta no existe en Motif.
- Si las necesidades del proyecto se alejan de las de las necesidades del proyecto
Eclipse la dificultad aumenta ya que SWT fue creado como soporte para dicho
proyecto y est orientado hacia l, dejando de lado caractersticas que Eclipse no
utiliza.
- SWT tiene muchos fallos. Es una plataforma relativamente joven y se nota.
- Para el que ya conoce Swing, elegir SWT por pensar que Swing es feo es un
gran error. Se pueden hacer aplicaciones realmente atractivas en Swing.
Aparte de los puntos anteriores, a la hora de decidir entre Swing y SWT para
realizar el proyecto se tuvo en cuenta la escasa cantidad de documentacin que se puede
encontrar de este ltimo, dado que es una tecnologa joven y emergente. Por estas
razones, la eleccin fue Swing.
6.4-. Conclusiones.
- 108 -