Construir una Interfaz Gráfica

Transcripción

1 Construir una Interfaz Gráfica

2 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)

3 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

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

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

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

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

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

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

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

11 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

12 Podemos observar en la parte inferior las siguientes pestañas Permite ver el código Java Muestra la vista de diseño

13 Muestra la vista de diseño de JFrame

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

15 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.)

16 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

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

18 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

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

20 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

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

22 Debemos programar el EVENTO que se genera al presionar el botón Sumar

23 7 Plug-in WindowBuilder nos proporciona un mecanismo para 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

24 Se abre Source y muestra el código que se generó automáticamente

25 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

26 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());

27 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));

28 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

29 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 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)

30 Bibliografía Deitel & Deitel, Cómo programar en C/C++ y Java, Cuarta Edición, Person Educación, México, Realizado por Ma. Isolina Hernández