Tema3 PDF

La interfaz gráfica en Java
[3.1] ¿Cómo estudiar este tema?
[3.2] Modelo Vista Controlador para las interfaces gráficas de

usuario
[3.3] Diseñar una interfaz gráfica en Eclipse
[3.4] Diseñar una interfaz gráfica en NetBeans
3 TEMA
Esquema
TEMA 3 – Esquema
Aplicaciones Software
Vista
Modelo
Controlador
Model UI-Delegate
Jav a Swing
Eclipse NetBeans
WindowBuilder GUI Builder
Plataformas de Desarrollo de Software
© Universidad Internacional de La Rioja (UNIR)

Ideas clave
3.1. ¿Cómo estudiar este tema?
Para estudiar este tema lee las Ideas clave que encontrarás a continuación.
En este tema vamos a estudiar diferentes aspectos de las interfaces gráficas de

usuario (Graphic User Interfaces, GUI).
Por un lado, comenzaremos el estudio del funcionamiento del patrón Modelo Vista
Controlador. Este patrón es el usado para el diseño de las interfaces gráficas en Java,
en especial con la librería Swing, de la que repasaremos los componentes principales.
Posteriormente, pasaremos a detallar como se usan las dos herramientas,

WindowBuilder de Eclipse y GUI Builder de NetBeans, para diseñar las GUI de
manera gráfica e intuitiva. Como veremos funcionan de manera muy similar y sencilla.
Lo importante de este tema es que el alumno comprenda la estructura de la librería

Swing para que, aunque se use utilizando las facilidades de los IDE, se entienda como
funciona interiormente y saber los pasos que hay que seguir para crear una GUI tanto
en Eclipse como en NetBeans.
3.2. Modelo Vista Controlador para las interfaces gráficas de

usuario
Antes de entrar en detalle de cómo se diseña e implementa una interfaz gráfica de usuario
(GUI) en Java usando Eclipse y NetBeans, vamos a repasar el patrón Modelo Vista
Controlador (Model View Controller, MVC).
El MVC es un patrón de diseño arquitectónico que nos permite separar los datos y
la lógica de negocio de una aplicación de su interfaz gráfica, permitiendo así la
reutilización de código. Es decir, al tener por un lado el código que implementa las
ventanas de la GUI de una aplicación y el código que implementa la aplicación en sí,
podemos modificar uno de los dos sin que el otro se vea afectado.
TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

Por ejemplo, imaginemos que tenemos una aplicación de escritorio que realiza los
pedidos de una tienda a su distribuidor. Para ello el usuario tiene que rellenar los datos
que aparecen en una ventana donde aparece el logo y nombre de su tienda. Si queremos
usar esta aplicación para otra tienda, necesitaremos cambiar el diseño de esa ventana,
por ejemplo, añadiendo el logo y nombre de la otra tienda o también cambiando la
distribución del formulario.
Entonces, deberemos modificar solo el código relativo a la ventana sin tener que tocar el
código de la lógica de negocio de la aplicación en sí.
Este es el patrón que se usa típicamente en la programación orientada a objetos y por lo

tanto en Java para diseñar las interfaces gráficas y consta de tres componentes:
» El modelo, que contiene la lógica de negocio, o sea las clases que implementan el
funcionamiento de la aplicación.
» La vista, que representa lo que el usuario ve de aplicación, es decir las ventanas de la
interfaz gráfica.
» El controlador, que reacciona a las acciones del usuario, ejecutando los métodos
necesarios del modelo.
En la siguiente figura se puede ver la relación entre los módulos y como se

comunican unos con otros. Cuando el usuario interacciona con la Vista, el
Controlador captura el evento y reacciona ante el mandando las instrucciones
oportunas al Modelo que puede implicar un cambio de estado (o sea la ejecución de
ciertas instrucciones). Y así cíclicamente, el Modelo crea otra vista o modifica la actual.
Crea o modifica
la V ista
Vista
Modelo Acción
Controlador
Notificación de la
acción al Modelo
Figura 1. Modelo Vista Controlador.

El patrón Modelo Vista Controlador se implementa en Java con la librería Swing, que
permite el diseño de ventanas independientemente de la plataforma (por lo que vale para
diferentes sistemas operativos). Swing usa una versión un poco simplificada del patrón
llamada, model delegate. En esta versión simplificadas la vista y el controlador no
están separados si no que se encapsulan en un solo elemento (llamado UI delegate).
Entonces cada componente en Swing, contiene un modelo y un elemento UI delegate.
Este elemento es el encargado tanto de presentar las ventanas como de interactuar con
los eventos llevados a cabo por el usuario.
Para crear la vista, es decir para diseñar las ventanas de la GUI, la librería Swing posee
una serie de componentes que se muestran en la siguiente figura. Para crear la ventana
en sí es necesaria una clase que herede de JFrame y dentro se irían poniendo los
componentes, como cuadros texto, botones, etc.
Para implementar las acciones a llevar a cabo cuando los usuarios pulsen un botón, por
ejemplo, hace falta capturar ese evento. Para ello se usa la librería AWT y hay que
hacer que la clase implemente la interfaz ActionListener, y por ejemplo en el método
actionPerformed poner las operaciones a llevar a cabo cuando se pulse dicho botón.
Todo esto se puede hacer escribiendo el código directamente, pero para GUI complejas
con muchos elementos en cada ventana puede resultar muy tedioso. Para ello, muchos
IDE tienen diseñadores gráficos para construir las interfaces gráficas de forma
sencilla e intuitiva de modo WYSIWYG (What you see is what you get, lo que ves es lo
que obtienes) a veces con facilidades de drag and drop (arrastrar y soltar).

En las siguientes secciones veremos los diseñadores de interfaces gráficas más usados en
Eclipse y en NetBeans y lo sencillo que es su uso para diseñar GUI basadas en Swing.
ja va x.swing
jDi alog jComponent jFra me
jPa nel Abs tra ctButton jLa bel jTextComponent jSl i der jScrol lBar jLi s t
jMenuItem jButton jToogl eButton jTextArea jTextFi eld
jMenu jCheckBox jPa s swordField
jRa dioButton
Figura 2. Diseño GUI basadas en Swing.
3.3. Diseñar una interfaz gráfica en Eclipse
Desde hace ya algunos años, el plugin por excelencia para diseñar gráficamente las GUI
en Eclipse es WindowBuilder, ahora en su versión pro. Este plugin está compuesto de
dos diseñadores, el de Swing, que es el que nos interesa, y el de SWT (Standard Widget
Toolkit) un widget diseñado para acceder a las facilidades de las interfaces de usuario
dependiendo de la plataforma en la que se es implementado.
Usando el diseñador visual para crear las ventanas de formo intuitiva, el código que
implementa las ventanas de una GUI es generado automáticamente. Arrastrando y
soltando (drag-and-drop) se puede añadir fácilmente tanto los controles y luego hay
que añadir los manejadores de eventos (event handlers), que son los que reaccionara
ante los eventos realizados por el usuario.

En la siguiente imagen se muestra el aspecto general del editor WindowBuilder:
Figura 3. Editor WindowBuilder. Fuente:

http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.wb.doc.user%2Fhtml%2Findex.html
Este editor tiene los siguientes componentes principales:
» Vista de diseño, donde se ve la interfaz gráfica que se va diseñando.

» Vista de código, donde se ve el código generado para la interfaz gráfica diseñada.
» Vista de estructura: que tiene el árbol de componentes con los elementos de la
interfaz gráfica y el panel de propiedades de los mismos.
» Paleta, donde aparecen todos los elementos que se pueden añadir a la interfaz
gráfica.
Eclipse
WindowBuilder
V ista de
V ista de Diseño V ista de código Pa leta
Est ructura
Figura 4. Componentes Eclipse.
En la vista de diseño, que se muestra a continuación es donde se van añadiendo los

componentes, donde se pueden editar, etc.

Al seleccionar un componente en la vista de diseño sus propiedades aparecen en el panel

de propiedades y ahí se pueden editar también.
Figura 5. Panel de propiedades. Fuente:

Para ir soltando los componentes de manera ordenada en una ventana, se usan los
layouts, que también están disponibles en la paleta. Por ejemplo, al usar un
GridLayout la ventana se divide en filas y columnas donde soltaremos posteriormente
cada componente en una celda, como se observa en la siguiente figura.
Figura 6. GridLayout. Fuente:


En esta vista de diseño, como muestran las siguientes figuras, los componentes se pueden
editar, por ejemplo, modificando su texto. También se puede modificar su tamaño,
reordenar, etc.
Figura 7. Modificar texto. Fuente:

También todas las propiedades se pueden modificar en el Panel de propiedades que

se muestra a continuación. En este panel se pueden modificar desde estiloso fuentes,
hasta el texto.
Figura 8. Panel de propiedades. Fuente:


En la opción Paleta aparecen todos los componentes que pueden añadirse a la GUI, o
sea los elementos de java.swing que vimos en la sección anterior y que representan a los
elementos típicos de una interfaz gráfica, como botones, cuadros de texto editable,
checkbox, scroll y un largo etcétera.
Figura 9. Paleta. Fuente:

En esta vista de diseño también se pueden añadir los manejadores de eventos, o sea
qué queremos que haga la aplicación cuando el usuario haga una acción determinada,
como por ejemplo hacer clic en un botón.

Hay varias maneras de añadir los manejadores de eventos a los componentes en la vista
de diseño, pero una de las más frecuentes que se muestra en la siguiente figura, es
pulsando el botón derecho sobre el componente de la interfaz al que se le quiere añadir
un evento. Entonces en Add event handler se selecciona qué evento se quiere manejar
y automáticamente se crea el código del evento que se puede ver en la vista de código,
como se muestra a continuación.
Figura 10. Add event handler. Fuente:

browseButton = new Button(shell, SWT.NONE);

browseButton.addSelectionListener(new SelectionListener() {
public void widgetDefaultSelected(SelectionEvent arg0) {
}
public void widgetSelected(SelectionEvent arg0) {
}
});
browseButton.setText("Browse...");
Dentro de cada uno de esos métodos iría el código a ejecutar cuando se captura su
evento correspondiente y esto ya es responsabilidad del programador. Si la acción a llevar
a cabo implica la ejecución de otros métodos del modelo será aquí donde se llamen
a dichos métodos de las clases pertinentes.

La vista de código se puede poner en la misma ventana para facilitar su edición mientras
se sigue viendo la vista de diseño con la GUI. Esto se muestra en la siguiente figura.
Figura 11. Vista del código. Fuente:

Así una vez tenemos todas las ventanas de nuestra aplicación diseñadas y los
manejadores de eventos que reaccionan adecuadamente (implicando cambio de estado
en el modelo o no) cuando el usuario realiza alguna acción concreta tendríamos nuestra
aplicación completa con la GUI incluida. Pero en un futuro si quisiéramos
modificar o bien el diseño de la GUI o bien la forma en la que el modelo computa
cualquier cosa, solo tenemos que modificar los elementos en cuestión siendo ambos, el
modelo y el delegado (vista + controlador) independientes el uno del otro.
Para ejecutar la aplicación se procede de igual modo que se explicó en el tema anterior,
pero cuando una aplicación es muy grande con muchas clases y muchas ventanas, es muy
conveniente depurar el código para evitar errores de ejecución. Y esto se introducirá en
el siguiente tema.

3.4. Diseñar una interfaz gráfica en NetBeans
En esta sección vamos a describir la herramienta equivalente a WindowBuilder pero para

NetBeans, o sea el GUI Builder de NetBeans, que como veremos funciona de un modo
muy parecido al plugin de Eclipse que hemos visto en la sección anterior.
El primer paso que hay que dar para crear una ventana es añadir un JFrame al proyecto
Java en cuestión, como se muestra en la siguiente figura:
Figura 12. Añadir JFrame. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html
Y este es el aspecto que tendría el IDE para editar ese JFrame.
Figura 13. Aspecto IDE. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html

Las principales ventanas del GUI Builder de NetBeans son las siguientes:
» Área de diseño, para crear y editar la interfaz gráfica tanto en modo diseño como
en modo código.
» Navegador, con una representación en estructura de árbol de todos los componentes
tanto visuales como no visuales.
» Paleta, con una lista de los componentes disponibles para añadir a las interfaces.
» Ventana de propiedades, con las propiedades del componente que está
seleccionado.
Net Beans
GUI Builder
V entana de
Á rea de Diseño Nav egador Pa leta
pr opiedades
Figura 14. Principales ventanas de GUI Builder.
Entonces, de modo diferente a como se hacía con Eclipse, en el editor de archivos se

puede ver tanto el diseño como el código, Design View y Source View
respectivamente. Y en la parte derecha aparece una Paleta muy similar a la de
WindowBuilder. En esta paleta que se muestra a continuación, al igual que en al plugin
de Eclipse, están los principales componentes de Swing: JLabel, JButton, JCheckBox,
JFrame.
Figura 15. Componentes Swing. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html

Este es el código que se genera automáticamente por defecto para esta ventana
vacía. Tiene un método para inicializar los componentes de la GUI (initComponents) que
le dice a la aplicación que debe salirse cuando se cierre la ventana (EXIT_ON_CLOSE)
y maneja los temas de los layouts.
Figura 16. Código. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html
Por otro lado, al igual que en el WindowBuilder de Eclipse, el Editor de propiedades,

permite modificar las propiedades tanto de JFrame como del resto de componentes. En
el caso del JFrame, por ejemplo, se pueden modificar cosas como el color de fondo, la
fuente, el cursor, etc.
Finalmente, al igual que en Eclipse, el IDE permite navegar por los elementos gráficos
del proyecto, tanto en el Navegador como en el Inspector.

A continuación, se muestran las imágenes correspondientes al Editor de propiedades y

al Inspector.
Figura 17. Editor de propiedades. Fuente:

http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html
Figura 18. Inspector. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html
Posteriormente, usando las facilidades de drag-and-drop se pueden ir añadiendo los

componentes al JFrame, como se muestra aquí.
Figura 19. Añadir componentes. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html

También de modo similar a como se hizo con el WindowBuilder, se pueden modificar

los componentes, cambiando su texto, su tamaño, reordenando, etc. Quedando por
ejemplo una ventana ajustada al texto como la siguiente.
Figura 20. Modificar los componentes. Fuente:

Siendo el siguiente el código el que ha generado automáticamente el IDE NetBeans para

esta ventana. Como vemos para esta ventana tan simple son muchas líneas de código
las que habría que implementar, por lo que los diseñadores gráficos e intuitivos de GUI
que poseen los IDE nos facilitan el trabajo enormemente.
Figura 21. Líneas de código. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html

Ahora pasamos a añadir los manejadores de eventos a los componentes que haya que
reaccionar cuando el usuario lleve a cabo alguna acción. Esto también se hace de forma
muy similar a como vimos con Eclipse. Se selecciona un componente de la GUI y se le
añade un Evento como muestra la siguiente figura.
Figura 22. Evento. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html
Y esto genera automáticamente el código asociado para manejar ese evento,

como el que se muestra a continuación.
Figura 23. Código generado automáticamente. Fuente:


En este caso habría que añadir el código pertinente en el método

convertButtonActionPerformed, que es el que se ejecuta cuando se pulsa el botón de
nuestra GUI. Por último, solo quedaría ejecutar la clase principal, que sería el JFrame
con la primera ventana de nuestro proyecto, usando la opción de Run como se explicó
en el tema anterior.
Como hemos visto, el uso de la librería Swing para crear GUI en Java nos permite
centrarnos por un lado en el diseño de la interfaz y por otro en el código de la aplicación
en sí. Y aunque es factible y se recomienda hacerlo al menos una vez escribir las líneas
de código para crear y diseñar las ventanas y para manejar los eventos, esta tarea puede
ser algo tediosa.
Así que es importante conocer el funcionamiento del patrón Modelo-Vista-

Controlador para saber cómo se debe usar la librería de Swing. Pero es mucho más útil
y rápido usar las facilidades que nos aportan los IDE para implementar las
interfaces gráficas ya que generan todo el código de gestión automáticamente y el
programador solo tienen que dedicarse a escribir el código correspondiente a la reacción
de los eventos que quiera capturar del usuario.

Lo + recomendado
No dejes de leer…
Instalar plugins en Eclipse
Tutorial sobre cómo instalar y desinstalar todo tipo de plugins en eclipse.
Accede al artículo a través del aula virtual o desde la siguiente dirección web:
http://www.discoduroderoer.es/instalar-y-desinstalar-plugins-en-eclipse/
No dejes de ver…
Tutorial uso de WindowBuilder
En el siguiente vídeo se muestra un tutorial creando una GUI paso a paso con Eclipse.
Accede al vídeo a través del aula virtual o desde la siguiente dirección web:
https://www.youtube.com/watch?v=vjiE6JaosNU
TEMA 3 – Lo + recomendado © Universidad Internacional de La Rioja (UNIR)

+ Información
A fondo
Documentación completa de Eclipse WindowBuilder
La siguiente información profundiza en las principales características de este plugin.
http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.wb.doc.user%2Fhtml%
2Findex.html&cp=64
Documentación completa de GUI Builder de NetBeans
En este caso, la información profundiza en las principales características de este plugin,

GUI Builder de NetBeans.
https://netbeans.org/kb/docs/java/quickstart-gui.html
Enlaces relacionados
Screencast de NetBeans GUI Builder
Página web con videos screencast con las principales características del GUI Builder.
Accede a la página web a través del aula virtual o desde la siguiente dirección:
https://netbeans.org/kb/docs/ide/overview-screencast.html
TEMA 3 – + Información © Universidad Internacional de La Rioja (UNIR)

Test
1. El Modelo Vista Controlador:

A. Es un patrón de diseño.
B. Es una librería de Java.
C. Es una GUI.
D. Es una Interfaz Gráfica.
2. El Modelo Vista Controlador sirve para:

A. Diseñar los botones de una interfaz gráfica.
B. Crear una interfaz gráfica de forma visual e intuitiva.
C. Modelar las ventanas de una interfaz.
D. Separar la lógica de negocio de una aplicación de su interfaz gráfica.
3. La librería de Java Swing:

A. Implementa tal cual el patrón Modelo-Vista-Controlador.
B. Sirve para crear de modo visual una interfaz gráfica.
C. Implementa una versión simplificada del Modelo-Vista-Controlador.
D. Ninguna de las anteriores es cierta.
4. Los componentes de la librería Swing:

A. Son los elementos que vemos en las ventanas de una GUI.
B. Son el editor, la paleta y el navegador.
C. Son diferentes en Eclipse que en NetBeans.
D. Son la «Vista de diseño» y la «Vista de código».
5. El elemento JFrame:
A. Sirve para crear un botón.
B. Sirve para crear una ventana.
C. Está solo en Eclipse.
D. Está solo en NetBeans.
TEMA 3 – Test © Universidad Internacional de La Rioja (UNIR)

6. En Eclipse:
A. Se pueden crear las GUI tanto en código como de forma visual.
B. Solo se puede usar WindowBuilder para crear las GUI.
C. WindowBuilder solo crea la ventana, pero no maneja los eventos.
D. WindowBuilder solo maneja los eventos, pero no crea la ventana.
7. Actualmente WindowsBuilder:
A. Permite generar automáticamente el código de una GUI.
B. Es la versión Pro, un plugin de pago de Eclipse.
C. No permite visualizar el código de una ventana.
D. Es mejor que el GUI Builder de NetBeans.
8. WindowsBuilder y GUI Builder:

A. Son totalmente diferentes.
B. El primero es WYSIWYG y el segundo no.
C. Ambos son editores del tipo WYSIWYG y con posibilidad de drag and drop.
D. Son lo mismo pero el primero usa Swing y el segundo Java.
9. El IDE de NetBeans para crear interfaces gráficas:

A. No tiene drag and drop.
B. Tiene solo 3 ventanas.
C. Tiene una ventana para compilar la GUI.
D. Tiene al menos 4 ventanas.
10. ¿Qué contiene la paleta del GUI Builder?

A. Los colores que se le pueden poner al texto.
B. Los colores que se le pueden poner al fondo.
C. Los elementos que se pueden poner en una ventana de la GUI.
D. El histórico con las modificaciones de los componentes de la GUI.
TEMA 3 – Test © Universidad Internacional de La Rioja (UNIR)

Tema3 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema3 PDF

Cargado por

Copyright:

Formatos disponibles

La interfaz gráfica en Java

[3.1] ¿Cómo estudiar este tema?

[3.2] Modelo Vista Controlador para las interfaces gráficas de

[3.3] Diseñar una interfaz gráfica en Eclipse

[3.4] Diseñar una interfaz gráfica en NetBeans

© Universidad Internacional de La Rioja (UNIR)

3.1. ¿Cómo estudiar este tema?

En este tema vamos a estudiar diferentes aspectos de las interfaces gráficas de

Posteriormente, pasaremos a detallar como se usan las dos herramientas,

Lo importante de este tema es que el alumno comprenda la estructura de la librería

3.2. Modelo Vista Controlador para las interfaces gráficas de

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

Este es el patrón que se usa típicamente en la programación orientada a objetos y por lo

En la siguiente figura se puede ver la relación entre los módulos y como se

Figura 1. Modelo Vista Controlador.

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

jDi alog jComponent jFra me

jMenuItem jButton jToogl eButton jTextArea jTextFi eld

jMenu jCheckBox jPa s swordField

Figura 2. Diseño GUI basadas en Swing.

3.3. Diseñar una interfaz gráfica en Eclipse

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

En la siguiente imagen se muestra el aspecto general del editor WindowBuilder:

Figura 3. Editor WindowBuilder. Fuente:

Este editor tiene los siguientes componentes principales:

» Vista de diseño, donde se ve la interfaz gráfica que se va diseñando.

Figura 4. Componentes Eclipse.

En la vista de diseño, que se muestra a continuación es donde se van añadiendo los

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

Al seleccionar un componente en la vista de diseño sus propiedades aparecen en el panel

Figura 5. Panel de propiedades. Fuente:

Figura 6. GridLayout. Fuente:

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

Figura 7. Modificar texto. Fuente:

También todas las propiedades se pueden modificar en el Panel de propiedades que

Figura 8. Panel de propiedades. Fuente:

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

Figura 9. Paleta. Fuente:

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

Figura 10. Add event handler. Fuente:

browseButton = new Button(shell, SWT.NONE);

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

Figura 11. Vista del código. Fuente:

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

3.4. Diseñar una interfaz gráfica en NetBeans

En esta sección vamos a describir la herramienta equivalente a WindowBuilder pero para

Figura 12. Añadir JFrame. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html

Y este es el aspecto que tendría el IDE para editar ese JFrame.

Figura 13. Aspecto IDE. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

Figura 14. Principales ventanas de GUI Builder.

Entonces, de modo diferente a como se hacía con Eclipse, en el editor de archivos se

Figura 15. Componentes Swing. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

Figura 16. Código. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html

Por otro lado, al igual que en el WindowBuilder de Eclipse, el Editor de propiedades,

TEMA 3 – Ideas clave © Universidad Internacional de La Rioja (UNIR)

A continuación, se muestran las imágenes correspondientes al Editor de propiedades y

Figura 17. Editor de propiedades. Fuente:

Figura 18. Inspector. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html

Posteriormente, usando las facilidades de drag-and-drop se pueden ir añadiendo los

Figura 19. Añadir componentes. Fuente: http://docs.oracle.com/javase/tutorial/uiswing/learn/index.html