PRÁCTICO FORMACIÓN

PROGRAMACIÓN EN JAVA IV

INTERFACES
GRÁFICAS
IGNACIO CÉSPEDES ORDUÑA [email protected]

BAJO
EN ESTE CAPÍTULO NOS ADENTRAREMOS EN EL DESA
NIVEL DE DIFICULTAD:
OBJETIVO DEL ARTÍCULO:
RROLLO DE LAS INTERFACES GRÁFICAS DE USUARIO.
Iniciarse en la programación con JAVA.
HERRAMIENTAS NECESARIAS: PARA ELLO UTILIZAREMOS UNA BIBLIOTECA DE CLASES
FORMACIÓN

Entorno de desarrollo JAVA.

DENOMINADA AWT.

Hasta el momento hemos intentado ir intro-

duciendo al lector en el desarrollo de aplicacio-
nes Java. En el número anterior realizamos el
desarrollo de una aplicación de consola, aunque
con Java se pueden desarrollar interfaces gráfi-
cas de mayor calidad y vistosidad a través de la
biblioteca de clases AWT. Hemos de decir que
la estructura básica del AWT se basa en com-
ponentes y contenedores. Los contenedores con-

206 W W W. P C W O R L D . E S DICIEMBRE 2004

206-FORMACION IV.indd 206 17/11/2004, 11:53

 FORMACIÓN PRÁCTICO

tienen componentes, y estos últimos no son más

que elementos gráficos básicos. Los elementos
gráficos más comunes que podemos destacar son
los botones, las barras de desplazamiento, etique-
tas, listas, cajas de selección, o campos de texto.
Puntualizaremos que la función de cada uno de
los componentes descritos anteriormente no es
otra que permitir al usuario que interactúe con la
aplicación. Como ya hemos adelantado, cada uno
de los componentes que se utilizan en una apli-
cación se agrupa a través de contenedores que
organizan la situación de cada uno de ellos y ade-
más contienen el código necesario para el control
de los eventos de la propia aplicación.

DESCRIPCIÓN DEL OBJETIVO

Una vez realizada esta pequeña introducción creare- Figura 1. Importación de los paquetes necesarios.
mos una sencilla aplicación consistente en una in-
terfaz de usuario que nos permita convertir euros a
pesetas o pesetas a euros. De esta forma, aparte de raíz, después creamos los elementos del contene-
aprender a programar con Java, ayudaremos al perso- dor y por último añadiremos los componentes. En
nal despistado a aclararse con los precios de su tienda el caso de que existiesen subcontenedores habría
habitual en la moneda única. que repetir los pasos anteriores.
La aplicación final presenta una interfaz con dos En principio creamos una clase principal
cajas de texto. En la primera podrá introducir una llamada EuroCal y utilizamos la palabra clave
cantidad en pesetas que automáticamente se trasfor- extends para indicar que la clase creada deriva
mará en euros en la caja de texto inferior. El proceso de la clase Applet, y por tanto hereda todas sus
se invierte si introducimos en la caja inferior un valor propiedades (métodos y atributos).
en euros, que aparecerá transformado en pesetas en Dentro de la clase vamos a seguir la estructura
la caja de texto superior. general del AWT. En primer lugar vamos a defi-
nir el contenedor panel1, que en este caso es un
DESARROLLO DEL PROYECTO panel. Seguidamente, dentro del mismo introdu-
ciremos dos cajas de texto denominadas pesetas
Como viene siendo habitual, necesitaremos importar y euros con sus respectivas etiquetas label1 y
una serie de paquetes que nos permitan llevar a cabo label2 que nos servirán para introducir los valo-
nuestro cometido. En esta ocasión hemos de utilizar res en euros y en pesetas, respectivamente. Puede
los siguientes: fijarse en el fragmento de código que le mos-
tramos a continuación, en el que hemos definido
import java.awt.*; el contenido de las etiquetas y la anchura de las
import java.awt.event.*; cajas de texto. FORMACIÓN
import java.applet.*;
Panel panel1 = new Panel();
El primer paquete contiene todas las clases de Label label1= new Label(“Pts:”);
Java orientadas a la construcción de interfaces Label label2 = new Label(“€:”);
como veníamos adelantando. El segundo paque- TextField pesetas = new TextField(20);
te nos ayuda a controlar los distintos eventos que TextField euros = new TextField(20);
se pueden generar en una aplicación, y el tercero
y último contiene las clases necesarias para crear Definimos también L1 y L2, donde se desarro-
applets para ejecutar en una ventana del navegador lla el código que se va a ejecutar en cada una de las
(Ver Figura 1). cajas de texto cuando éstas cambien su valor.
La estructura básica en programación AWT Una vez que hemos definido cada uno de los
tiene las siguientes partes bien definidas: en pri- componentes que vamos a utilizar únicamente hay
mer lugar crearemos el contenedor del trabajo que inicializarlos, añadirlos y, cómo no, mostrarlos.

DICIEMBRE 2004 W W W. P C W O R L D . E S 207

206-FORMACION IV.indd 207 17/11/2004, 11:53

 PRÁCTICO FORMACIÓN

Si observa el código, en principio se define la

ordenación de los contenedores y de sus com-
ponentes. Aparecen entonces dos palabras clave
que hasta el momento no habíamos mencionado:
BorderLayout y FlowLayout. La primera propor-
ciona el esquema más complejo de ordenación
de los componentes dentro de un panel o con-
tenedor. La composición utiliza cinco zonas para
colocar los distintos componentes: Norte, Sur,
Este, Oeste y Centro. El Norte representa la parte
superior del panel, el Este ocupa el lado derecho,
el Sur la zona inferior y el Oeste el lado izquier-
do. El Centro está representado por todo aquello
que queda una vez hemos rellenado el resto de las
posiciones.
En cuanto a la segunda, representa una mane-
ra más sencilla de ordenación, es la que se utiliza
por defecto si no se fuerza a utilizar alguna otra.
Los componentes añadidos de esta manera se
añaden al contenedor en forma de lista. La cade-
na es horizontal de izquierda a derecha, pudién-
dose seleccionar el espacio entre componentes.
En cuanto al código, lo desarrollamos dentro
de los denominados “avisadores”, interfaces que
describen cómo ser avisados cuando sucede una
Figura 2. Seguimiento de la construcción clase de eventos. En el caso que nos ocupa aña-
de la interfaz gráfica. dimos el código a través de TextListener para
ambas cajas de texto, la de las pesetas y la de los
Puede seguir el resultado de cada una de las líneas euros. De esta forma, cada vez que se produzca
en la Figura 2. un cambio en alguna de las dos cajas de texto se
El código de inicialización que da origen a la desencadenará el código preparado para nuestro
Figura 2 es el siguiente: propósito.
En primer lugar vamos a mostrar el código que
public void init() se genera si pasamos una cantidad en pesetas a su
{ respectiva cantidad en euros.
this.setLayout(new
BorderLayout());

panel1.setLayout(new
FlowLayout());
FORMACIÓN

panel1.setBackgroun
d(Color.lightGray);
panel1.add(label1);

panel1.add(pesetas);
panel1.add(label2);
panel1.add(euros);
this.add(panel1,
BorderLayout.CENTER);
pesetas.addTextList
ener(L2);
euros.addTextListen
er(L1);
} Figura 3. Código destacado.

208 W W W. P C W O R L D . E S DICIEMBRE 2004

206-FORMACION IV.indd 208 17/11/2004, 11:53

 PRÁCTICO FORMACIÓN

en el caso de introducir una cifra en la caja de texto.

Como en dicha parte de código se pueden produ-
cir errores deberá delimitarla con un Try & Catch,
como acordamos en capítulos anteriores. En esta
ocasión el fallo vendría de no introducir un formato
de cifra en la caja de texto. Si se diese esta circuns-
tancia no mostraría nada, como puede observar en
el rectángulo rojo.
Únicamente nos quedaría destacar del código el
método parseFloat, cuya función es convertir una
cadena en un número en punto flotante, para de esta
forma poder realizar la operación pertinente.
En segundo lugar tendremos que mostrar el códi-
go que se genera en el caso de que pasemos una can-
tidad en euros a su respectiva cantidad en pesetas.
Este fragmento de código es similar al anterior, con
la única variación de que obviamente la operación es
inversa a la que mostrábamos anteriormente.

private class eurosAPelas implements

TextListener
{
public void textValueChanged(TextEv
Figura 4. Visión del resultado final. ent e)
{
try
private class pelasAEuros implements {
TextListener
{ float i_euros = Float.parseFloat(
public void textValueChanged(TextEv euros.getText());
ent e) pesetas.removeNotify();
{ pesetas.setText(“”+(i_
try euros*166.386));
{ pesetas.addNotify();
float i_pelas = Float.parseFloat( }
pesetas.getText()); catch (ArithmeticException ex)
euros.removeNotify(); {
euros.setText(“”+(i_pelas/ pesetas.removeNotify();
166.386)); pesetas.setText(“”);
euros.addNotify(); pesetas.addNotify();
FORMACIÓN

} }
catch (NumberFormatException ex) catch (NumberFormatException ex)
{ {
euros.removeNotify(); pesetas.removeNotify();
euros.setText(“”); pesetas.setText(“”);
euros.addNotify(); pesetas.addNotify();
} }
} }
} }

En la Figura 3 hemos destacado por colores las El resultado final de este pequeño ejemplo nos
distintas partes de código de manera que le sea más muestra un convertidor de euros como el de la Figu-
fácil comprenderlo. Recuadrado en azul nos encon- ra 4, en el cual puede realizar sus conversiones como
tramos con las operaciones que habría que realizar si de un convertidor de bolsillo se tratase. PCW

210 W W W. P C W O R L D . E S DICIEMBRE 2004

206-FORMACION IV.indd 210 17/11/2004, 11:53