Construir una

Interfaz Gráfica

4

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)

El 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 JOptionPane JComboBox JTextField JTextArea .

Representa una ventana JFrame básica. JLabel JTextField Permite situar un Tipo de editor texto o imagen en de texto la ventana JButton Un tipo de botón . capaz de contener otros componentes.

Debiéndose programar métodos para responder a estos eventos provocados por el usuario. .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.

etc. .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ú.

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? .

debemos: Crear un Proyecto Java 1 . Para realizar la implementación de este ejercicio.

2 Seleccionar Menú ->Archivo -> Nuevo ->Otras Luego seleccionamos dentro de la carpeta WindowsBuilder y de la subcarpeta Swing Designer la opción JFrame .

tamaño. distribución . Declaración de la clase sum extensión JFrame Atributos Método main Método constructor de la ventana Definición del objeto contenedor.Automáticamente se genera el siguiente código Mediante import se identifican y cargan las clases requeridas para compilar un programa en Java. borde. titulo.

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 .

Panel). centro y sur. oeste.Layout son clases dentro del paquete AWT. Algunos ejemplos son: .FlowLayout: organiza los componentes en forma secuencial.Absolute layout: permite colocar los componetes visuales en posiciones fijas dentro de los componentes contenedores . uno a continuación del otro .BorderLayout: los organiza en 5 regiones dentro del objeto contenedor: norte. este. las que permiten organizar la distribución de los componentes visuales agregados dentro de un objeto contenedor (Frame. .

Configuramos el Layout de JFrame presionando el botón derecho del 3 mouse sobre el objeto contenedor generado y seleccionamos la opción SetLayout > Absolute layout (esto permite colocar en posiciones fijas dentro del Jframe componetes 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 Clicre el la herram sobSe arrastra sobre Frame Se selecciona con el mouse JLabel .

. su contenido.Desde Source se puede ver el código generado al agregar una etiqueta Definición de la etiqueta. Mediante el método add se agrega al Frame. posición en el frame.

el cual permitirá el ingreso de datos desde el teclado. Luego. también podemos 5 agregar otro elemento como un texto editor. Se ubica en el lugar deseado del Frame Clic izquierdo sobre la herramienta y luego clic izquierdo en el lugar que lo desea en la Frame Se selecciona con el mouse JTextField . JTextField. de la misma forma que colocamos la etiqueta.

Se agrega nuevo código a medida que agregamos nuevos componentes visuales Definición de editor de texto. textField. . Mediante el método add se agrega al Frame. su posición en el Frame.

6 Se ubica en el lugar deseado del Frame y se escribe el nombre del botón Código Se selecciona con el mouse JButton . Después se agrega un Botón.

Pero.Listo!! Ya creamos la interfaz gráfica de nuestra aplicación. ¿por qué no se realiza la suma? .

Debemos programar el EVENTO que se genera al presionar el botón “Sumar” .

JMenuItem. JList etc. Plug-in WindowBuilder nos proporciona un mecanismo para automatizar la 7 generación de las interfaces que capturan los eventos de los objetos JButton. 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 .

parseInt(textField. debemos convertir el String almacenado en el textField a un entero. 8 En este caso. para lo cual se utiliza el método Integer.getText()). .

valueOf(argumento)). se utiliza el método setText(String. .9 Para imprimir en pantalla el resultado de la suma de los dos enteros. en la etiqueta “Resultado”.

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” .

5 IMC = Peso (Kg) Altura 2 (m) Obesidad Leve (Tipo I) 27. Tarea Crea una aplicación que permita calcular el IMC (índice de Masa Corporal) y brinde al usuario información sobre el Estado Nutricional.9 Obesidad Moderada (Tipo II) 30 -39.6 – 29. Estado Nutricional Índice de Masa Corporal Bajo Peso Menos de 20 Fórmula para calcular IMC Normal 20 – 24.9 Obesidad Severa (Tipo III) 40 o más . según la siguiente tabla.9 Sobrepeso 25 -27.

2004 http://www. Cómo programar en C/C++ y Java.ar/detalleconcepto.com. Cuarta Edición.php?codigo=128&inicio=4 0 Realizado por Ma. Isolina Hernández (Practicante) Docente Adscriptor: Nora Hernández . Person Educación.Bibliografía Deitel & Deitel. México.javaya.