1. No category

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
javax.swing
(Abstract Windows Toolkit)
(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
JFrame
JLabel
Representa una ventana
básica, capaz de
contener otros
componentes.
JTextField
Permite situar un
texto o imagen en
la ventana
Tipo de editor de
texto
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
ver el
código
Java
Muestra
la vista
de
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.
3
Configuramos el Layout de JFrame presionando el botón derecho
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.)
4
Desde la vista de diseño (Design) seleccionamos con el mouse el
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.
5
Luego, de la misma forma que colocamos la etiqueta, también
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.
6
Después se agrega un Botón.
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”
7
Plug-in WindowBuilder nos proporciona un mecanismo para
automatizar la generación de las interfaces que capturan los
de los objetos JButton, JMenuItem, JList etc.
eventos
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
Bajo Peso
Índice de Masa
Corporal
Menos de 20
Normal
20 – 24,9
Sobrepeso
25 -27,5
Obesidad Leve (Tipo I)
27,6 – 29,9
Obesidad Moderada (Tipo II)
30 -39,9
Obesidad Severa (Tipo III)
40 o más
Fórmula para calcular IMC
IMC = Peso (Kg)
Altura 2 (m)
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