H T T P : / / L E C A S A B E . C O M 2

GUI GRAPHICAL USER INTERFACE

GUI

H T T P : / / L E C A S A B E . C O M 3

La interfaz gráfica de usuario es la parte del programa

que permite a éste interactuar con el usuario.

Utiliza un conjunto de imágenes y objetos gráficos para

representar la información y acciones disponibles en la

interfaz.

WINDOW BUILDER

H T T P : / / L E C A S A B E . C O M 4

WindowBuilder es un diseñador de GUI bidireccional de

Java potente y fácil de usar. Está compuesto por SWT

Designer y Swing Designer y hace que sea muy fácil

crear aplicaciones Java GUI sin perder mucho tiempo

escribiendo código.

WINDOW BUILDER

H T T P : / / L E C A S A B E . C O M 5

Mediante el diseñador visual WYSIWYG y las

herramientas de diseño se pueden crear formas

simples para ventanas complejas generándose el

código de Java de forma automática. Se pueden

agregar fácilmente controles mediante arrastrar y

soltar, controladores de eventos a sus controles,

cambiar propiedades de los controles utilizando un

editor de propiedades, etc.

WINDOW BUILDER – PLUG-IN

H T T P : / / L E C A S A B E . C O M 6

Desde la versión 3.7 de Eclipse llamada Indigo (2011)

hasta la versión Mars (2015) se incorpora por defecto

el plug-in WindowBuilder para la implementación de

interfaces visuales.

Las versiones Neon, Oxygen y la actual no trae

instalado el plug-in WindowBuilder por defecto.

H T T P : / / L E C A S A B E . C O M 7

WINDOWBUILDER INSTALACIÓN DE PLUG-IN

WINDOW BUILDER – INTALACIÓN

H T T P : / / L E C A S A B E . C O M 8

1. Dentro de Eclipse

iremos al menú Help y

luego a Eclipse

Marketplace.

WINDOW BUILDER – INTALACIÓN

H T T P : / / L E C A S A B E . C O M 9

2. Haremos una búsqueda del Plug-In

WINDOW BUILDER – INTALACIÓN

H T T P : / / L E C A S A B E . C O M 10

3. Cuando aparezca en nuestro listado precionamos

Install.

WINDOW BUILDER – INTALACIÓN

H T T P : / / L E C A S A B E . C O M 11

4. Seleccionamos todos

y vamos a Confirm.

WINDOW BUILDER – INTALACIÓN

H T T P : / / L E C A S A B E . C O M 12

5. Si sale esta advertencia seleccionamos Yes.

WINDOW BUILDER – INTALACIÓN

H T T P : / / L E C A S A B E . C O M 13

6. Aceptamos los términos y Finish.

WINDOW BUILDER – INTALACIÓN

H T T P : / / L E C A S A B E . C O M 14

7. Será necesario reiniciar Eclipse para ver los

cambios y poder utilizar el Plug-In.

H T T P : / / L E C A S A B E . C O M 15

SWING LIBRERÍA

WINDOW BUILDER – SWING

H T T P : / / L E C A S A B E . C O M 16

Una vez que tenemos instalado nuestro plug-in

podemos crear nuestras ventanas basadas en la

librería SWING.

SWING

H T T P : / / L E C A S A B E . C O M 17

Swing es una biblioteca (librería) de interfaces gráficas

de usuario (GUI) para Java. Viene incluida con el

entorno de desarrollo de Java (JDK). Extiende a otra

librería gráfica más antigua llamada AWT.

Presenta componentes ligeros, que pueden tomar

diferente aspecto y comportamiento.

SWING - COMPONENTES

H T T P : / / L E C A S A B E . C O M 18

Swing es una biblioteca (librería) de interfaces gráficas

de usuario (GUI) para Java. Viene incluida con el

entorno de desarrollo de Java (JDK). Extiende a otra

librería gráfica más antigua llamada AWT.

Presenta componentes ligeros, que pueden tomar

diferente aspecto y comportamiento.

SWING - COMPONENTES

H T T P : / / L E C A S A B E . C O M 19

Los componentes son los elementos básicos de la

programación con Swing. Todo lo que se ve en un GUI

de Java es un componente. Los componentes se

colocan en otros elementos llamados contenedores que

sirven para agrupar componentes.

Los componentes de Swing tienen nombres que

comienzan con J. Ejemplo:

JButton, JJabel, JTextField, JComboBox, JCheckBox.

H T T P : / / L E C A S A B E . C O M 20

VENTANAS

¿CÓMO CREAR UNA VENTANA?

H T T P : / / L E C A S A B E . C O M 21

Para poder trabajar desde el entorno gráfico vamos a

necesitar crear una clase desde WindowBuilder-Swing.

1. NEW – OTHER…

H T T P : / / L E C A S A B E . C O M 22

JFRAME

H T T P : / / L E C A S A B E . C O M 23

SOURCE - DESIGN

H T T P : / / L E C A S A B E . C O M 24

Una vez creado nuestro archivo nos permite trabajar de

dos maneras diferentes. Desde el Source (código) o

desde el Design (gráfica).

DESIGN

H T T P : / / L E C A S A B E . C O M 25

Nos permite agregar componentes arrastrando y

soltando.

DESIGN - SOURCE

H T T P : / / L E C A S A B E . C O M 26

En todo momento podemos cambiar la pestaña de

"Source" y "Design" para ver el código generado. Por

ejemplo cuando agregamos un botón podemos ver que

se agregó un objeto de la clase JButton.

También podemos crear los objetos desde el Source y

ver como visualizan en el Design.

H T T P : / / L E C A S A B E . C O M 27

EJEMPLO

CREAR UNA VENTANA QUE PERMITA INGRESAR

UNA CADENA DE TEXTO EN UN JTEXTFIELD Y AL

PRESIONAR UN JBUTTON MUESTRE EN UN

LABEL VACÍO EL VALOR INGRESADO.

LAYOUT

H T T P : / / L E C A S A B E . C O M 28

Para comenzar a color componentes dentro de nuestro

JFrame es importante seleccionar el Layout con el que

queremos trabajar.

El Absolute Layout permite posicionar los elementos de

forma absoluta.

COMPONENTES

H T T P : / / L E C A S A B E . C O M 29

Agregaremos un JLabel, un JTextField, un Jbutton y otro

JLabel sin text.

PROPIEDADES

H T T P : / / L E C A S A B E . C O M 30

Podemos modificar las propiedades de los

componentes como ser tamaño de texto y color (Font),

título de la ventana (Title), texto a mostrar en un botón

(Text) y la más importante la propiedad Variable que le

asigna un nombre único a cada componente.

NOMENCLATURA DE COMPONENTES SWING

H T T P : / / L E C A S A B E . C O M 31

En general, para definir elementos de Java Swing

debemos eliminar las J inicial y las vocales, y extraer las

tres consonantes más significativas del nombre del

control.

txt para JTextField

btn para JButton

lbl para JLabel

pnl para JPanel

pwd para JPasswordField

cbx para JCheckBox

cmb para JComboBox

jcl para JCalendar

MANEJO DE EVENTOS

H T T P : / / L E C A S A B E . C O M 32

Un evento es un suceso que ocurre como consecuencia

de la interacción del usuario con la interfaz gráfica.

Pulsación de un JButton.

Cambio del contenido en un JTextField.

Deslizamiento de una JProgressBar.

Activación de un JCheckBox.

Movimiento de la ventana.

PULSACIÓN DE UN BOTÓN

H T T P : / / L E C A S A B E . C O M 33

La clase JButton tiene un método:

que especifica el objeto (manejador de evento) que se

encargará de tratar el evento de pulsación del botón.

Este objeto ha de interpretar la interfaz ActionListener

(paquete java.awt.event)

PULSACIÓN DE UN BOTÓN

H T T P : / / L E C A S A B E . C O M 34

Cuando el usuario pulse el botón, se llamará al método

actionPerformed de todos los manejadores de eventos

que se hayan registrado.

PULSACIÓN DE UN BOTÓN

H T T P : / / L E C A S A B E . C O M 35

Por ejemplo podemos disparar un mensaje por consola.

PULSACIÓN DE UN BOTÓN

H T T P : / / L E C A S A B E . C O M 36

Siguiendo nuestro ejemplo vamos a crear una variable

que guarde el valor ingresado en el JTextField y lo

muestre en el JLabel sin text..

MÉTODOS GETTEXT() Y SETTEXT..()

H T T P : / / L E C A S A B E . C O M 37

getText() es un método que permite acceder (obtener) a

la propiedad Text de un componente.

setText(..) es un método que permite setear (asignar) un

valor a la propiedad Text de un componente.

PULSACIÓN DE UN BOTÓN

H T T P : / / L E C A S A B E . C O M 38

Obtenemos el siguiente resultado una vez ejecutado.

A PROBAR!!

H T T P : / / L E C A S A B E . C O M 39

H T T P : / / L E C A S A B E . C O M 40

FUENTE:

https://www.eclipse.org/windowbuilder/

https://www.eclipse.org/windowbuilder/download.php

http://www3.uji.es/~belfern/Docencia/Presentaciones/ProgramacionAvanzada/Tema3/swing.h

tml#1

https://www.fdi.ucm.es/profesor/jpavon/poo/2.11.GUI.pdf

http://programandoenjava.over-blog.es/article-i-51475428.html

https://blog.michelletorres.mx/herramientas-basicas-para-desarrollar-gui-en-java/

http://dalila.sip.ucm.es/~manuel/JSW1/Slides/Swing.pdf