Este documento describe cómo crear interfaces gráficas en Java usando WindowBuilder Pro de Eclipse. Explica qué es un frame, cómo crear uno usando WindowBuilder, y algunos componentes básicos como JLabel, JButton, JTextField y cómo agregarlos a un frame. También cubre cómo mostrar y destruir un frame, y métodos útiles como mostrar mensajes.

1. Interfaces gráficas en Java
ICI 341 -Principios de Lenguajes de
Programación -2013

2. ¿Que es un frame?
• Mas conocido como
“ventana”, es un contenedor
que guarda componentes y
les da un sentido grafico.
• Este frame tiene propiedades
tales como tamaño, posición,
título, etc.
• Este frame contiene
componentes los cuales
brindan interactividad a ésta
(botones, interruptores, etc).

3. WindowBuilder Pro
• Plug-In de Eclipse
para construir
frames en Java.
• Permite edición de
frames tanto
gráficamente como
en código.
• Se instala
directamente por
Eclipse vía el menú
Install New
Software.
Dentro del menú pegar el siguiente link (Eclipse Juno)... Puedes buscarlo en Google también:
http://download.eclipse.org/windowbuilder/WB/release/R201209281200/4.2/

4. Creación de un frame.
• En un proyecto, hacer click en New -> Other.
• Elegir WindowBuilder/Swing Designer/New Jframe.
Para este caso, llamaremos a nuestro Frame como “Hola”

5. • Una vez terminado, generará un código básico
para generar una ventana vacía.
Abajo se puede intercambiar en modo Codigo (Source) y en Modo Gráfico (Design).

6. Un vistazo rápido al código
• Se ignora el método main generado ( al menos que desees que el programa
empiece desde aquí.) Para evitar problemas extraños, es recomendado borrarlo.
• La frame creada consiste en una clase extendida de Jframe. Contiene un atributo
del tipo Jpanel.

7. Un vistazo rápido al código
• Se puede además apreciar el constructor de nuestra clase Frame que hemos
creado.
• Este código se regenera automáticamente mientras uno agregue componentes al
Frame.

8. Editor gráfico
• Editor del tipo Drag&Drop. (Arrastrar y soltar).
• A la izquierda inferior (Properties) se pueden encontrar diferentes
opciones para los componentes que tengas seleccionados.
• Al centro (Palette) en la carpeta Components se encuentra el set de
componentes que se le pueden añadir a la ventana.

9. • Layout: Maneras predefinidas de acomodar
controles o componentes visuales en formas o
ventanas visuales.
• Para una programación mas fácil, se usara
Absolute Layout.
• Buscar Absolute Layout en Palette y arrastrarla a la ventana.

10. Llamar a un frame desde código.
Recordando que nuestra clase frame se llamaba “Hola”.
• Simplemente creamos la clase Hola en el programa, y
llamamos a su constructor para que se haga visible.
• ... O bien, como alternativa, simplemente usar los Main que
generan las mismas ventanas.
NOTA: Una ventana correrá “en paralelo” al código que lo llamó. Tener en cuenta esto,
para no tener problemas extraños.

11. • Quizá sea necesario pasar a la ventana
algún parámetro (como alguna clase, u
otro dato en particular).
• En ese caso, se debe modificar el
constructor.

12. Destruir un Frame.
• Para destruir una Frame se debe llamar a alguno
de estos 2 métodos (destructores de clase).
• Si se destruyen todas las ventanas y no hay
proceso detrás, el programa terminará.

13. Algunos componentes básicos.

14. JLabel
• Simplemente texto.
• Puedes editar lo que
dice en la casilla Text
(en Properties).
• O bien puedes editar
este valor en código y
añadirle alguna
variable como valor.
En el editor gráfico
quedará como
Dynamic.

15. JButton
• Un botón que al ser presionado, reaccionará de alguna forma.
• Para que reaccione al hacer click tendremos que crear un
Evento.
• Simplemente hacemos doble click en el botón ya creado.
Automáticamente se creará el código que se ejecutará al
presionar el botón.
NOTA: En Show Events hay más tipos de Eventos que actuar al hacer clicks.

16. • Aquí puedes llamar a algún método que haga lo
que tenga que hacer cuando se haga click en él.
(También puedes añadir código directamente).

17. JTextField
• Una entrada de texto.
(String).
• Puedes leer su valor desde
código ( por ejemplo al
presionar un botón).
Siendo textField el nombre de la variable en cual contiene tu JTextField. Si tienes dudas
sobre cual es tu variable, puedes revisar en el código de la ventana.

18. JCheckBox
• Una pequeña caja el cual
puedes activarla o dejarla
desactivada.
• Puedes leer su valor desde
código ( por ejemplo al
presionar un botón).
Siendo chckbxNewCheckBox el nombre de la variable en cual contiene tu JCheckBox.

19. JComboBox
• Una pestaña el cual puedes elegir
distintas opciones.
• Para llenarla con alternativas
puedes usar este código después
de crearlo.
setModel pide un arreglo de Strings. En este caso se ha resumido de la manera mostrada.

20. • Puedes leer su valor desde código ( por
ejemplo al presionar un botón). Puede ser
cualquiera de estas 2 formas.
La primera obtiene el indice de la opción seleccionada.
La segunda obtiene el Item seleccionado que se le dio al rellenar.
En este caso es String (ojo, hay que castearlo).
NOTA: Jlist (listado) funciona exactamente igual que JComboBox.

21. Otros métodos útiles de
Interfaces graficas.
• Mostrar un mensaje de aviso.
• Preguntar algo (Si, No) mediante un aviso.
• Un aviso donde el cual se ingrese texto.
NOTA: Pueden llamarse desde cualquier punto del programa, hayan ventanas o no.

22. Interfaces gráficas en Java
ICI 341 -Principios de Lenguajes de
Programación -2013