Construir una

Interfaz Gráfica
JAVA, permite al programador:
-Diseñar y programar en interfaces gráficas de
usuario en forma rápida y sencilla.
-Cuenta con dos paquetes de clases predefinidos
que brindan una gran variedad de componentes
gráficos:

java.awt (Abstract Windows Toolkit)

javax.swing
(swing es una evolución de AWT)
Paquete Swing contiene una variedad de clases que
permiten construir objetos de interfaz gráfica (GUI) al
trabajar en JAVA; abarca componentes como: ventanas,
botones, cuadro de diálogo, tablas, marcos, etc.

JButton

JTextField

JComboBox

JOptionPane

JTextArea
 Representa una ventana
JFrame básica, capaz de
contener otros
componentes.

JLabel JTextField
Permite situar un
Tipo de editor de
texto o imagen en
texto
la ventana

JButton
Un tipo de botón
Al diseñar un interfaz gráfica
también se debe tener
presente que a
consecuencia de las
acciones del usuario se
generarán distintos
eventos. Debiéndose
programar métodos para
responder a estos eventos
provocados por el usuario.
Un evento es generado por una acción de
un usuario y está relacionado a un
componente del GUI.
Algunos ejemplos son:

Pulsar una tecla

Mover el mouse

Cambiar el tamaño de una ventana

Elegir una opción de menú, etc.

 Construir una interfaz gráfica
A partir de la versión 3.7 de Eclipse (Indigo) se
incorpora el plug-in WindowsBuilder para la
implementación de interfaces gráficas.
Este permite, a medida que uno arrastra
componentes visuales sobre otro objeto contenedor
generar automáticamente el código Java. Lo cual
facilita el desarrollo de la interfaz gráfica en una
aplicación y nos ayuda a concentrarnos en la lógica
de la misma.
 Ejercicio
Crea una aplicación que permita ingresar
dos números enteros y mostrar como
resultado la suma de ambos.

¿Qué elementos de interfaz gráfica serán

necesarios para cumplir con los
requerimientos de ésta aplicación?
Para realizar la
implementación de
este ejercicio,
debemos:

1 Crear un Proyecto Java

2 Seleccionar
Menú ->Archivo -> Nuevo ->Otras
Luego seleccionamos dentro
de la carpeta
WindowsBuilder y
de la subcarpeta
Swing Designer la
opción JFrame
Automáticamente se genera el siguiente código
Mediante import se identifican y cargan las clases
requeridas para compilar un programa en Java.

Declaración de la clase sum extensión JFrame

Atributos

Método main

Método constructor de la ventana

Definición del objeto contenedor,

titulo, tamaño, borde, distribución
Podemos observar en la parte inferior las
siguientes pestañas

Permite Muestra
ver el la vista
código de
Java diseño
Muestra la vista de diseño de JFrame
Layout son clases dentro del paquete AWT, las que permiten
organizar la distribución de los componentes visuales agregados
dentro de un objeto contenedor (Frame, Panel).
Algunos ejemplos son:
- FlowLayout: organiza los componentes en forma secuencial, uno
a continuación del otro

- Absolute layout: permite colocar los componentes visuales en

posiciones fijas dentro de los componentes contenedores

- BorderLayout: los organiza en 5 regiones

dentro del objeto contenedor: norte, oeste, este,
centro y sur.
 Configuramos el Layout de JFrame presionando el botón derecho
3 del mouse sobre el objeto contenedor generado y seleccionamos la
opción SetLayout > Absolute layout (esto permite colocar en
posiciones fijas dentro del Jframe componentes visuales como JButton,
JLabel etc.)
 Desde la vista de diseño (Design) seleccionamos con el mouse el
4 componente visual que deseamos agregar al Frame y lo arrastramos
sobre el mismo. En este caso seleccionaremos una etiqueta (JLabel)

Se escribe el contenido
de la Etiqueta y se ubica
en el lugar del Frame
deseado

Se arrastra sobre Frame

Se selecciona con el mouse JLabel

Desde Source se puede ver el código generado al agregar una etiqueta

Definición de la etiqueta, su contenido, posición en el frame.

Mediante el método add se agrega al Frame.
 Luego, de la misma forma que colocamos la etiqueta, también
5 podemos agregar otro elemento como un texto editor, JTextField, el
cual permitirá el ingreso de datos desde el teclado.

Se ubica en el lugar
deseado del Frame

Se arrastra sobre Frame

Se selecciona con el
mouse JTextField
Se agrega nuevo código a medida que agregamos nuevos componentes visuales

Definición de editor de texto,

textField, su posición en el
Frame.
Mediante el método add se
agrega al Frame.
 Después se agrega un Botón.
6

Se ubica en el lugar deseado

del Frame y se escribe el
nombre del botón

Se arrastra sobre Frame

Código

Se selecciona con
el mouse JButton
Listo!!
Ya creamos la interfaz gráfica de nuestra aplicación.

Pero, ¿por qué no

se realiza la suma?
Debemos programar
el EVENTO que se
genera al presionar el
botón “Sumar”
 Plug-in WindowBuilder nos proporciona un mecanismo para
7
automatizar la generación de las interfaces que capturan los eventos
de los objetos JButton, JMenuItem, JList etc.

Primeramente se selecciona el botón “Sumar” y

luego del panel de propiedades presionamos el
icono se desplegará una lista de
opciones y hacemos doble clic sobre la palabra
performed
Se abre Source y muestra el código que se
generó automáticamente
En el parámetro del método addActionListener
del botón “Sumar” se le pasa la referencia a una
interface que se crea de tipo ActionListener e
implementa el método actionPerformed donde
agregaremos el código necesario para responder el
evento
 8 En este caso, debemos convertir el String
almacenado en el textField a un entero, para lo
cual se utiliza el método

Integer.parseInt(textField.getText());
9 Para imprimir en pantalla el resultado de la
suma de los dos enteros, en la etiqueta
“Resultado”, se utiliza el método

set.Text(String.valueOf(argumento));
 10 Por último para convertir la JLabel
“Resultado” de variable local a atributo de la clase,
debemos seleccionar la etiqueta y hacer clic sobre el
icono “convert Local to Field”
 Tarea
Crea una aplicación que permita calcular el IMC
(índice de Masa Corporal) y brinde al usuario
información sobre el Estado Nutricional, según la
siguiente tabla.
Estado Nutricional Índice de Masa
Corporal
Bajo Peso Menos de 20 Fórmula para calcular IMC
Normal 20 – 24,9
Sobrepeso 25 -27,5 IMC = Peso (Kg)
Altura 2 (m)
Obesidad Leve (Tipo I) 27,6 – 29,9
Obesidad Moderada (Tipo II) 30 -39,9
Obesidad Severa (Tipo III) 40 o más
Bibliografía
Deitel & Deitel, Cómo programar en C/C++ y Java, Cuarta
Edición, Person Educación, México, 2004

http://www.javaya.com.ar/detalleconcepto.php?codigo=128&inicio=40

Realizado por Ma. Isolina Hernández