Programacin

avanzada
Unidad 1
Programacin visual
M. en C. Jovan Abundez Peralta

1.1. Programacin visual

Una interfaz grfica de usuario (GUI) presenta
un mecanismo amigable al usuario para
interactuar con una aplicacin. Una GUI
proporciona a una aplicacin una apariencia
visual nica. Al proporcionar distintas
aplicaciones en las que los componentes de la
interfaz de usuario sean consistentes e intuitivos,
los usuarios pueden familiarizarse en cierto
modo con una aplicacin, de manera que pueden
aprender a utilizarla en menor tiempo y con
mayor productividad.

 En conjunto, a la apariencia y la forma en la que

interacta el usuario con la aplicacin se les
denomina la apariencia visual.
Las GUIs se crean a partir de componentes. A
stos se les conoce tambin como controles o
widgets (accesorios de ventana) en otros
lenguajes. Un componente de la GUI es un
objeto con el cual interacta el usuario
mediante el ratn, el teclado u otra forma de
entrada, como el reconocimiento de voz.

 Para disear interfaces grficas (ventanas con

componentes, llamados tambin controles, como
etiquetas, cajas de texto, botones, barras de
desplazamiento, etc.) Java proporciona una
biblioteca de clases denominada JFC (Java
Foundation Clases clases base de Java).
Actualmente bajo esta denominacin se agrupan
las siguientes APIs: Swing, AWT, Accesibilidad,
Java 2D y soporte para arrastrar y colocar.

 Swing proporciona un conjunto de componentes

escritos en Java para disear interfaces grficas
de usuario que se ejecutan uniformemente en
cualquier plataforma nativa que soporta la
maquina virtual de java, y AWT (Abstract
Window Toolkit kit de herramientas de
ventanas abstractas) proporciona un conjunto de
componentes para disear interfaces grficas de
usuario comn a todas las plataformas nativas.
Los componentes Swing se localizan en el
paquete javax.swing. Todos los componentes
swing son subclases de la clase Jcomponent.

1.2. Lenguajes de programacin visual y

orientada a eventos
1.2.1. Tratamiento de eventos
El tratamiento de un evento que ocurre en un
objeto (objeto fuente) no se realiza en ese mismo
objeto, sino que se delega en otro objeto
diferente (objeto oyente). Este modelo se basa en
la posibilidad de propagacin o envo de eventos
desde el objeto fuente donde se producen a los
objetos oyentes que los gestionan.

 1.2.2. Eventos, objetos fuente y objetos oyente

Un objeto fuente es aquel componente en el que
se genera un evento. Para poder gestionar el
registro y eliminacin de los objetos oyentes de
cada evento concreto se proporcionan los
mtodos:
set<TipoEvento>Listener(): establece un nico objeto
oyente para ese tipo de evento.
add<TipoEvento>Listener(): aade otro objeto
oyente a la lista de oyentes.
remove<TipoEvento>Listener(): elimina un objeto
oyente correspondiente.

 1.2.3. Jerarqua y tipos de eventos

Conceptualmente los eventos generados en los
componentes grficos se pueden clasificar en:
eventos de bajo nivel y eventos semnticos o de
alto nivel. Los eventos de bajo nivel estn
relacionados con los aspectos fsicos de la
interaccin con los elementos de la interfaz.. El
resto de los eventos son de alto nivel. En la
siguiente tabla se presentan los eventos ms
utilizados en Swing.

 1.2.4. Manejo de eventos

Cuando sobre un componente ocurra algn
evento se espera que suceda algo. Lgicamente
ese algo hay que saber programarlo y para
hacerlo, hay que saber cmo manejar ese evento.
Los eventos que se producen sobre un
componente se manipulan a travs de objetos
denominados manejadores o escuchadores de
esos eventos. Un manejador de eventos es un
objeto en el que un componente delega la tarea
de manipular un tipo particular de eventos.

Componente

evento
ocurrido

Escuchador

Mtodo
(respuesta al evento)

1.2.4.1. Clases oyentes y adaptadoras de eventos

Los objetos que tratan los eventos se crean
implementando
las
interfaces
<TipoEvento>Listener. La mayora de estas
interfaces Java de los oyentes estn diseadas
para responder a varios eventos diferentes, de
modo que incluyen ms de un mtodo.

 Por ejemplo, la interfaz oyente de interacciones

del ratn MouseInputListener tiene siete
mtodos, tres relacionados con la operacin del
botn: mousePressed(), mouseReleased(), y
mouseC1icked(), y cuatro relacionados con el
movimiento: mouseEntered(), mouseExited(),
mouseMoved(), y MouseDragged(). Esto
provoca que la clase oyente deba implementarlos
todos, aunque slo le interese alguno de ellos
(por ejemplo, mouseC1icked).

 Para simplificar la escritura de oyentes, Java

proporciona un conjunto de clases adaptadoras,
que implementan las interfaces oyentes con
todos los cuerpos de los mtodos vacos. As un
oyente se puede crear especializando un
adaptador e implementando slo el mtodo que
interese.

1.3. Diseo de interfaces visuales

Los pasos bsicos para la creacin de una interfaz
grfica de usuario son los siguientes:
El diseo y composicin de la apariencia de la interfaz
grfica de la aplicacin. Normalmente, esto implica la
eleccin de una ventana principal (contenedor), la
eleccin de contenedores para la jerarqua de
componentes, la eleccin de los administradores de
disposicin para cada uno de los contenedores y los
elementos grficos de interaccin (componentes
primitivos).
Se escribe el cdigo que crea todos los componentes,
crea la jerarqua de componentes contenedores y
componentes primitivos y da la apariencia a la interfaz.

 Escribir el cdigo que proporciona el

comportamiento de dicha interfaz como
respuesta a las interacciones de los usuarios
para gestionar los eventos de inters para la
aplicacin.
La visualizacin de la interfaz grfica. Una
vez visualizada la interfaz, la aplicacin
queda a la espera de las interacciones del
usuario que provocarn la ejecucin de los
gestores correspondientes.

 1.3.1. Contenedores y componentes en Java

Los componentes o elementos grficos para crear
interfaces grficas estn divididos en dos grandes grupos:
los contenedores y los componentes. Un componente,
tambin denominado componente simple o atmico, es un
objeto que tiene una representacin grfica, que se puede
mostrar en la pantalla y con la que puede interactuar el
usuario. Ejemplos de componentes son los botones,
campos de texto, etiquetas o casillas de verificacin. Un
contenedor es componente al que se incluirn uno o ms
componentes o contenedores.
Los contenedores permiten generar la estructura de una
ventana y el espacio donde se muestra el resto de los
componentes contenidos en ella y que conforman la
interfaz de usuario. Los contenedores de alto nivel ms
utilizados de Swing son:

 La clase JFrame proporciona una ventana

principal de aplicacin con su funcionalidad
normal (por ejemplo, borde, ttulo, mens) y un
panel de contenido.
La clase JDialog proporciona una ventana de
dilogo auxiliar en una aplicacin, normalmente
utilizada para pedir datos al usuario o configurar
elementos.
La clase JApplet implementa una ventana que
aparece dentro de otra aplicacin que
normalmente es un navegador de Internet

 1.3.2. Componentes grficos: Jerarqua y tipos

Las clases grficas se presentan estructuradas en
los siguientes grandes grupos:

Clases bsicas.
Contenedores de alto nivel.
Contenedores intermedios.
Componentes atmicos.

 1.3.2.1. Clases bsicas

Proporcionan el soporte y las funcionalidades
bsicas para el resto de componentes. La raz
de todos los elementos grficos en Java es la
clase abstracta java.awt.Component y su
subclase abstracta java.awt.Container. La
clase javax.swing.JComponent, que es una
especializacin de java.awt.Container, es la
clase base para prcticamente todos los
componentes Swing. En su API se encuentran
los mtodos comunes que puede utilizar para
todos los componentes y contenedores.

 1.3.2.2. Contenedores de alto nivel

JFrame

JFrame se emplea para crear la ventana principal de

una aplicacin. Es una ventana con marco que incluye
los controles habituales de cambio de tamao y cierre
(por ejemplo, cerrar, iconizar, maximizar).
A este contenedor se le puede aadir una barra de
mens (JMenuBar). Los componentes grficos no se
aaden directamente al JFrame sino a su panel de
contenido. De la misma manera el gestor de
disposicin, que aplica el diseo de presentacin de los
componentes, se debe aplicar a este panel de contenido.
Los mtodos ms utilizados son:

 JDialog
La clase JDialog es la clase raz de las ventanas
secundarias que implementan cuadros de dilogo en
Swing. Estas ventanas dependen de una ventana
principal (o con marco, normalmente de clase JFrame) y
si la ventana principal se cierra, se iconiza o se
desiconiza, las ventanas secundarias realizan la misma
operacin de forma automtica. Estas ventanas pueden
ser modales o no modales, es decir, limitan la interaccin
con la ventana principal si as se desea. El constructor
ms utilizado es:

 1.3.2.2.1. Cuadros de dilogo estndar

JOptionPane

Esta clase se utiliza para crear los tipos de cuadros de

dilogo ms habituales, como los que permiten pedir
un valor, mostrar un mensaje de error o advertencia,
solicitar una confirmacin, etc. Todos los cuadros de
dilogo que implementa
JOptionPane son modales (es decir bloquean la
interaccin del usuario con otras ventanas). La forma
habitual de uso de la clase es mediante la invocacin de
alguno de sus mtodos estticos para crear cuadros de
dilogo. Tienen el formato show<Tipocuadro>Dialog,
donde el tipo de cuadro puede ser:

 Message para informar al usuario con un

mensaje.
Confirm para solicitar una confirmacin al
usuario con las posibles respuestas de si, no o
cancelar.
Input para solicitar la entrada de un dato.
Option permite crear una ventana personalizada
de cualquiera de los tipos anteriores
Las formas ms habituales de uso se pueden
resumir en las siguientes:

 Constantes de dilogos de mensajes de JOptionPane

Las constantes que representan los tipos de dilogos de
mensajes se muestran en la siguiente figura. Todos los
tipos
de
dilogos
de
mensaje,
excepto
PLAIN_MESSAGE, muestran un icono a la izquierda del
mensaje. Estos iconos proporcionan una indicacin visual
de la importancia del mensaje para el usuario. Observe
que un icono QUESTION_MESSAGE es el icono
predeterminado para un cuadro de dilogo de entrada.

 JFileChooser
Se trata de un selector de archivos que permite la
eleccin interactiva de un archivo o un
directorio. Un uso habitual puede ser el
siguiente:

 Otros mtodos para el cuadro de dilogo selector

de archivos son:

JColorChooser
Sirve para elegir un color de una paleta que presenta en
cuadro de dilogo. El uso bsico es el siguiente:

 1.3.2.3. Contenedores intermedios

JPanel

JPanel es un contenedor simple de propsito general

que sirve para agrupar a otros componentes.
Habitualmente se utiliza para agrupar componentes a
los que se aplica un gestor de disposicin adecuado.
Permiten aadirles bordes o personalizar su
presentacin grfica. Los mtodos ms utilizados son
los siguientes:

 JScrollPane
La clase JScrol1Pane proporciona un panel con
la capacidad de presentar barras de
desplazamiento para mostrar su contenido. Es
adecuado para presentar informacin que no
cabe completamente en la zona de visualizacin
asignada. El componente que proporciona el
contenido se denomina cliente y la zona de
presentacin de informacin se denomina puerto
de visualizacin.

 Adems del puerto de visualizacin y de las

barras de desplazamiento JScrol1Pane tiene
otras zonas que son una cabecera horizontal, otra
vertical y las cuatro esquinas. Todos estos
elementos son configurables. La forma de uso
ms habitual incluye los siguientes mtodos:

 JSpiltPane
Es un contenedor que gestiona dos componentes
(normalmente
paneles)
colocados
vertical
u
horizontalmente y diferenciados por un separador que
puede reposicionar el usuario. El usuario puede decidir
cul es el tamao asignado a cada uno de los
componentes pulsando con el ratn sobre el separador y
arrastrndolo. De modo predeterminado, se dividen en
horizontal, aunque se puede establecer en el constructor.
La forma ms habitual de uso es la siguiente:

 JTabbedPane
El panel con solapas es un contenedor que gestiona
varios grupos de componentes como una pila de fichas.
Los componentes se superponen unos a otros de forma
que slo uno de ellos es visible en cada momento. El
usuario decide cul de los componentes se visualiza
seleccionando la solapa o lengeta correspondiente a
dicho componente. Las solapas incluyen un texto y/o un
icono y se pueden colocar en las partes superior, inferior,
derecha o izquierda del contenedor. El administrador de
disposicin por defecto de este componente es
CardLayout. La forma ms habitual de uso y los
mtodos ms utilizados son los siguientes:

 JToolBar
Esta clase implementa una barra de herramientas,
formada normalmente por botones o controles que
incluyen iconos, y que aparecen organizados como una
fila o una columna dependiendo de la zona de la pantalla
donde se coloque. Por defecto, el usuario puede
seleccionar y desplazar esta barra de herramientas a
cualquier borde del contenedor que la incluye (se
recomienda usar el administrador de disposicin
BorderLayout) o a una ventana independiente. Si el
programador no quiere que se pueda desplazar, tiene que
desactivar
dicha
posibilidad
mediante
barraHerramientas.setFloatable(false). El administrador
de disposicin por defecto de una barra de herramientas
es BoxLayout. El uso y mtodos ms habituales de este
componente son los siguientes:

 1.3.2.4. Componentes atmicos

Iconos
Un icono es una imagen grfica (pequea y de
tamao fijo) que habitualmente se utiliza para
presentarla dentro de otro componente, como
un botn, una etiqueta u otros. Puede crearse a
partir de imgenes .gif o .jpg de la siguiente
forma:

 JLabel
Esta clase implementa una etiqueta que puede contener
una cadena de texto, un icono o ambos. En una etiqueta
se puede especificar donde aparece su contenido
indicando el alineamiento vertical y horizontal. Por
defecto, las etiquetas se muestran centradas
verticalmente, y si slo tienen texto, ajustadas a la
izquierda. Si slo tienen una imagen grfica por defecto
se muestran centradas tanto vertical como
horizontalmente. Es posible indicar la posicin relativa
del texto con relacin al icono. Tambin se puede utilizar
como texto un fragmento de HTML. Un uso habitual de
un JLabel es el siguiente:

 JButton
Esta clase implementa la forma ms habitual de
botn grfico de interaccin que sirve para
ejecutar una accin haciendo clic sobre l.
Tambin se puede activar mediante el teclado si
se le ha asociado una combinacin de teclas.
Puede tener un texto y/o un icono.

 JToggleButton
Esta clase implementa un botn de operacin que tiene
un estado interno y funciona como un conmutador.
Cuando se pulsa el botn su estado pasa a estar
seleccionado hasta que se vuelve a pulsar de nuevo, en
cuyo caso deja de estar seleccionado. El uso y mtodos
ms habituales son los siguientes:

 JCheckBox
Es una casilla de verificacin con dos estados posibles:
seleccionada o no seleccionada, que determina y
modifica su apariencia grfica (normalmente mediante
una cruz o marca de seleccin). Generalmente se utiliza
para permitir que el usuario decida si desea elegir una
opcin o no. Si hay varias casillas de verificacin, stas
no son mutuamente excluyentes, de modo que varias de
ellas pueden estar seleccionadas de forma simultnea. El
uso y mtodos ms habituales son los siguientes:

 JRadioButton
Esta clase implementa los botones de radio o de
opcin que son una especializacin de un botn
con estado o conmutador y se caracterizan
porque en un grupo de botones de radio slo uno
de ellos puede estar seleccionado. Para crear un
grupo de botones de radio hay que aadirlos en
un objeto ButtonGroup, que no tiene
representacin grfica. El uso y mtodos ms
habituales son los siguientes:

 Los elementos que tienen el mismo

comportamiento, pero que aparecen dentro de un
men, estn implementados en la clase
JRadioButtonMenuItem.

 JMenuBar, JMenu, JMenultem y otros elementos

Implementa una barra de mens que se aade a un
contenedor de alto nivel y, posteriormente, se le aaden
los mens desplegables (JMenu).
Las barras de men estn implementadas por la clase
JMenuBar. La clase JPopupMenu implementa los mens
contextuales o emergentes.
A estos dos tipos de mens se le puede aadir cualquiera
de los elementos de men (JMenuItem) o sus
especialicaciones, que son los mens desplegables
(JMenu), o las particularizaciones de las casillas de
verificacin (JCheckBoxMenuItem) y de los botones de
radio (JRadioButtonMenuItem) para los mens. Para
facilitar la agrupacin lgica de las operaciones
incluidas en un men, adems, se pueden incluir
separadores de men.

 Las
casillas
de
verificacin
(JCheckBoxMenuItem) y los botones de radio
(RadioButtonMenuItem)
de
los
mens
funcionan de la misma forma y tienen mtodos
similares que los botones correspondientes
(JCheckBox y JRadioRutton). El uso y mtodos
ms habituales son los siguientes:

 JTextField
Componente que permite mostrar y editar una nica
lnea de texto. Una especializacin de los campos de
texto son los campos de contrasea (JPasswordField)
que tienen la particularidad de que no muestran el
contenido que se escribe sino otro carcter (por ejemplo,
un asterisco) o los campos de texto con formato
(JFormattedTextField) que permiten especificar el
formato de texto que acepta. El uso y mtodos ms
habituales son los siguientes:

 JTextArea
Este componente permite mostrar y editar varas
lneas de texto. Su limitacin principal es que
slo permite mostrar texto sencillo en el que se
utilice un nico tipo de letra. Habitualmente se
utiliza asociado a un panel con desplazamiento.
El uso y mtodos ms habituales son los
siguientes:

 JEditorPane
Esta clase proporciona soporte para campos de
texto de mltiples lneas y con formato. Adems
de texto simple soportan texto en formato
HTML y texto en formato enriquecido (RTF,
Rich Text Format). Aunque son bsicamente
editores de texto sencillos que implementan el
ajuste de lneas, estos campos de texto no
incluyen barras de desplazamiento y, por tanto,
normalmente se utilizan asociados a un panel
con desplazamiento.

 JList
La clase JList implementa una lista de elementos que se
presenta habitualmente en forma de columna. En esta
lista el usuario puede realizar la seleccin de uno
(comportamiento por defecto) o varios de sus elementos.
Si la lista tiene muchos elementos y, por tanto, puede no
caber en el espacio de visualizacin asignado debera
incluirse en un panel con barras de desplazamiento. El
uso y mtodos ms habituales son los siguientes:

 JComboBox
Esta clase implementa un cuadro combinado
desplegable, en el que se agrupan las funcionalidades de
una lista y un campo de texto. Cuando el usuario
selecciona un elemento de la lista, ese valor pasa
automticamente a mostrarse como contenido del cuadro
combinado. Tiene dos posibles formas de uso. La
primera y ms simple en la que slo se permite que el
usuario escoja una opcin de entre una lista fija de
posibles valores. La segunda forma de uso es en la que el
usuario tambin puede introducir un nuevo valor. El uso
y mtodos ms habituales son los siguientes:

 1.3.2.5. Otras clases grficas de Swing

Swing incorpora otros objetos grficos. Los
ms utilizados se enumeran a continuacin. Si
desea ms informacin consulte la API de Java.
JProgressBar. Barra configurable que muestra de
forma grfica la progresin temporal de una
operacin como un porcentaje de la longitud de la
barra.
JScrol1Bar. Barra de desplazamiento.
JS1ider. Barra grfica con un indicador deslizante
asociado que sirve para obtener datos de entrada
proporcionados por el usuario.

 JTable. Componente altamente configurable que

permite visualizar tablas bidimensionales.
JToolTip. Componente que muestra en una
ventana emergente una breve informacin de
ayuda contextual sobre otros componentes
cuando el cursor se sita sobre ellos.
JTree. Componente que permite visualizar datos
organizados jerrquicamente en forma de rbol.

 1.3.3. Administradores de disposicin o diseo

(Layout Managers)
1.3.3.1. FlowLayout
Es el administrador de disposicin ms simple que
proporciona Java y es el que se proporciona por defecto
en los paneles (JPanel). Los componentes se colocan de
forma secuencial, uno a continuacin de otro, hasta
ocupar el espacio completo asignado al contenedor
segn el orden en el que han sido aadidos. Si no caben
en una lnea se sigue en la siguiente. La direccin de
colocacin de los componentes depende de la propiedad
componentOrientation del contenedor cuyo valor puede
ser LEFT_TO_RIGHT o RIGHT_TO_LEFT.

 1.3.3.2. BoxLayout
Con BoxLayout los componentes se organizan
en una nica fila, o en una nica columna. La
ordenacin concreta dentro de la fila o columna
puede ser absoluta: X_AXIS (horizontalmente
de izquierda a derecha) e Y_AXIS
(verticalmente de arriba abajo), o relativa
dependiendo de la caracterstica de orientacin
del componente: LIINE_AXIS (como se
organizan las palabras en una lnea) y
PAGE_AXIS (como se organizan las lneas en
una pgina). Es el diseo por defecto de las
barras de herramientas (JToolBar).

 En el constructor hay que indicar el contenedor al que se

va a asignar. Se suele hacer en un paso de la siguiente
forma cambiando el Layout a un objetoContenedor:
objetoContenedor.setLayout(new
BoxLayout
(objetoContenedor.Y_AXIS) );
Adems de componentes primitivos permite incluir
elementos invisibles que crean separaciones entre los
otros componentes del contenedor. Los elementos
invisibles ms tiles son las reas rgidas y los
"pegamentos o gomas extensibles". Las reas rgidas
(Box.createRigidArea( )) proporcionan un espacio fijo
entre dos componentes. Si se aade un objeto
"pegamento o goma extensible" (Box.createGlue( ))
intenta ocupar todo el espacio posible. Si hay varios se
reparten el espacio entre ellos por igual.

 1.3.3.3. BorderLayout
Este administrador de disposicin est basado en
dividir el contenedor en cinco zonas, una central
y otras cuatro segn los puntos cardinales. La
zona central trata de ocupar la mayor parte
posible del espacio del contenedor. Es el
administrador por defecto en el panel de
contenido de los contenedores de alto nivel (por
ejemplo, JFrame, JDia1og). Al aadir un
componente hay que indicar la zona en que se
quiere colocar. Cada una de las zonas est
identificada por la correspondiente constante de
clase: CENTER, NORTH, SOUTH, EAST y
WEST.

 1.3.3.4. CardLayout
Permite gestionar distintos componentes
(normalmente paneles) que ocupan un mismo
espacio, de forma que en cada momento slo
uno de ellos es visible. Utiliza la idea de un
mazo de tarjetas o cartas donde slo es visible la
primera de ellas. La ordenacin del mazo es el
orden en el que se han aadido los componentes.
CardLayout define un conjunto de mtodos que
permiten recorrer el mazo de cartas
secuencialmente (de la primera a la ltima o al
revs) o mostrar una carta determinada a partir
de su nombre.

 1.3.3.5. GridLayout
Con GridLayout los componentes se colocan en
una matriz de celdas, definida por filas y
columnas, que ocupa todo el espacio asignado al
contenedor. Todas las celdas son iguales y los
componentes utilizan todo el espacio disponible
para cada celda. Al aadir los componentes se va
rellenando la matriz primero por filas (en
funcin de la orientacin del componente) y
cuando una fila esta llena se pasa a la siguiente.

 1.3.3.6. GridBagLayout
Permite organizar los componentes tanto verticalmente
como horizontalmente aunque tengan distinto tamao.
Con este propsito mantiene una matriz de celdas, donde
las filas y columnas pueden tener distinto tamao, en las
que se sitan los componentes. Un componente puede
ocupar varias celdas contiguas. La situacin y el espacio
ocupado por cada uno de los componentes se describen
por medio de restricciones (constrains). A cada
componente se le asocia un objeto de la clase
GridBagConstrains que especifica las restricciones y
que, junto con las indicaciones de tamao del
componente (tamao mnimo y tamao preferido),
determinan la presentacin final del objeto en el
contenedor.