PDF de programación - Guíon 4 Construcción de interfaces gráficos de usuario con Netbeans 4.1

Gui ´on 4

Construcci´on de interfaces gr´aficos
de usuario con Netbeans 4.1

Noviembre de 2005

Nuevas Tecnolog´ıas de la Programaci´on

Curso 2005/2006

´Indice

1. Pasos iniciales

1.1. Creaci´on del proyecto . . . . . . . . . . . . . . . . . . . . .
1.2. Creaci´on del contenedor de objetos . . . . . . . . . . . . .
1.3. Definici´on de la clase principal del proyecto . . . . . . . . .

2. Adici ´on de componentes al contenedor

3. Selecci ´on del Layout Manager

4. Configuraci ´on de componentes

5. Construcci ´on de men ´us

6. Modificando el gestor de posicionamiento

7. Copiando objetos

8. Asistente de conexi ´on

9. El gestor de posicionamiento GridBagLayout

10.A ˜nadir manejadores de eventos

11.Contenedores dentro de contenedores

12.Modificaci ´on de propiedades de generaci ´on de c ´odigo

13.Creaci ´on de un panel para dibujar y gestionar sus eventos

14.Localizaci ´on de los programas ya terminados

5
5
6
9

11

13

14

16

17

18

18

20

22

25

28

30

35

Nuevas Tecnolog´ıas de la Programaci´on Construcci´on de interfaces gr´aficos de
usuario con Netbeans 4.1 5

1. Pasos iniciales

Vamos a crear un GUI simple. El GUI concatenar´a los strings de dos
campos de texto y luego mostrar´a el resultado en un tercer campo de
texto. Comienza ejecutando el entorno Netbeans.

En el IDE de Netbeans, todos los desarrollos Java necesitan la crea-
ci´on de un proyecto. Un proyecto es un grupo de ficheros fuente Java m´as
sus metadatos asociados, incluyendo ficheros de propiedades, un script
Ant que controla par´ametros de compilaci´on y ejecuci´on, etc.

1.1. Creaci ´on del proyecto

Para crear el proyecto de nuestra aplicaci´on seguiremos los siguientes

pasos:
1. Selecciona Men ´u File → New Project (Ctrl + Shift + N), o bien

pulsa en el icono New Project de la barra de utilidades del IDE.

2. Seleccionamos General → Java Application y pulsa el bot´on Next.

3. Como nombre del proyecto introducimos GuiDemoBasic. Como
carpeta (directorio) donde colocar el proyecto usaremos el directo-
rio ProjectsNB/GuiDemoBasic. La carpeta ProjectsNB debe
estar previamente creada dentro de tu home. Para ayudarte a selec-
cionar esta carpeta puedes pinchar en el bot´on Browse.

5

Nuevas Tecnolog´ıas de la Programaci´on Construcci´on de interfaces gr´aficos de
usuario con Netbeans 4.1 6

4. Aseg´urate que est´a seleccionada la opci´on Set as Main Project y no

seleccionada la opci´on Create Main Class.

5. Pulsa el bot´on Finish.

Los pasos anteriores han creado una carpeta GuiDemoBasic en nues-
tro sistema de ficheros en el sitio deseado. Esta carpeta contiene todos
los ficheros asociados al proyecto. Puede verse la estructura de carpetas
creadas usando la ventana Files del IDE.

1.2. Creaci ´on del contenedor de objetos

Por ahora, podemos observar que la carpeta Source Packages en la

ventana Projects contiene un paquete <default package> que est´a vac´ıo
por ahora:

6

Nuevas Tecnolog´ıas de la Programaci´on Construcci´on de interfaces gr´aficos de
usuario con Netbeans 4.1 7

La creaci´on del interfaz gr´afico de usuario (GUI) con Netbeans es muy
sencilla. Se comienza creando un contenedor mediante una determinada
plantilla, y luego se arrastran a ´el, los componentes visuales, ajust´ando-
les las propiedades que se necesiten. Nosotros crearemos un contene-
dor JFrame y lo colocaremos en un nuevo paquete. Otros posibles con-
tenedores son Applet, Dialog, Frame o Panel de AWT, y JApplet,
JDialog, JInternalFrame, JFrame o JPanel de Swing, que pueden
seleccionarse con Men ´u File → New File → Java Gui Forms.

1. Pinchar con el bot´on derecho del rat´on sobre el nodo GuiDemoBasic

de la ventana de proyectos, y elegir New → JFrame Form

2.

Introduce AddStrings como nombre para el nuevo JFrame. Como
nombre del paquete introduce guidemobasic.

3. Pulsa el bot´on Finish.

El IDE crea el form AddStrings y la clase AddStrings dentro del fiche-
ro AddString.java. El paquete guidemobasic sustituye ahora al pa-
quete <default package>, y el form AddStrings se abre en la ventana
Editor en la vista de dise˜no (Design) que muestra una vista gr´afica de los
componentes GUI. Adem´as se abre una ventana para la paleta de compo-
nentes en la parte superior derecha del IDE, el inspector de componentes
aparece en la parte izquierda debajo de la ventana de proyectos, y la ven-
tana de propiedades aparece en la parte derecha debajo del inspector de
componentes.

7

Nuevas Tecnolog´ıas de la Programaci´on Construcci´on de interfaces gr´aficos de
usuario con Netbeans 4.1 8

Una breve descripci´on de las ventanas que aparecen ahora en el IDE,

mencionadas anteriormente es:

Inspector: Proporciona una representaci´on de todos los componen-
tes, visuales y no visuales, en la aplicaci´on como una estructura
jer´arquica. Adem´as nos muestra cual componente en el ´arbol est´a sien-
do editado actualmente en el Editor.

Paleta de componentes (Palette: Contiene solapas para varios com-
ponentes JFC/Swing, AWT y JavaBeans, junto con una selecci´on de
layout managers.

Propiedades (Properties): Muestra las propiedades de los compo-
nentes que est´a actualmente seleccionado en el Inspector, Editor,
ventana de Proyectos o ventana Files.

Editor: Aparece en la parte central del IDE. En la figura anterior el
Editor en modo de dise˜no (Design) el cual muestra una vista visual
del form JFrame. Tambi´en puede seleccionarse el modo de c´odi-
go fuente (Source) que mostrar´a el c´odigo fuente asociado a este
JFrame.

Si pinchamos en la solapa Source dentro de la ventana Editor, pode-
mos ver el c´odigo fuente del JFrame que acabamos de crear. Las partes
sombreadas en azul corresponden a c´odigo generado autom´aticamente
por el IDE (Guarded Blocks) que no puede editarse directamente en la
vista Source. S´olo podemos modificar las partes sombreadas en blanco.

8

Nuevas Tecnolog´ıas de la Programaci´on Construcci´on de interfaces gr´aficos de
usuario con Netbeans 4.1 9

1.3. Definici ´on de la clase principal del proyecto

Debemos ahora definir la clase principal (Main Class) de forma que
los comandos de construcci´on y ejecuci´on (Build y Run) funcionen de
forma correcta. Podemos poner como clase principal, cualquier clase con
un m´etodo main, pero en este caso lo que queremos es poner como clase
principal, la clase AddStrings que hemos creado en los pasos anteriores.

1. En la ventana de proyectos, pincha con el bot´on derecho en el nodo
del proyecto GuiDemoBasic y elige Properties. Aparecer´a entonces
el siguiente di´alogo:

2. En el panel de categor´ıas (Categories) del di´alogo de propiedades

del proyecto, selecciona el nodo Run.

9

Nuevas Tecnolog´ıas de la Programaci´on Construcci´on de interfaces gr´aficos de
usuario con Netbeans 4.1 10

3. En el panel derecho, pincha el bot´on Browse que est´a a la izquierda

del campo Main Class.

4. En el di´alogo Browse Main Classes que aparece, selecciona guide-

mobasic.AddStrings, y pulsa Select Main Class.

5. Pincha Ok para salir del di´alogo de propiedades del proyecto.

Si observamos con alg´un navegador de directorios lo que ha ocurri-
do tras los pasos anteriores, podemos comprobar que se ha creado un
directorio llamado GuiDemoBasic que contiene varios directorios. Uno
de ellos es el directorio src que contendr´a todo el c´odigo fuente del
proyecto. Por ahora contiene el directorio guidemobasic que corres-
ponde al paquete del mismo nombre. Este directorio a su vez aloja el
fichero AddStrings.java que contiene el c´odigo Java de la clase co-
rrespondiente al JFrame de nuestro proyecto. Adem´as aparece el fichero
AddStrings.form que es usado por el Form Editor para leer y guardar
el form que estamos creando. Este ´ultimo fichero no es necesario para
compilar ni ejecutar el programa.

El c´odigo Java creado con Netbeans puede ser exportado, compilado
y ejecutado fuera del IDE en cualquier entorno Java. Tambi´en el c´odigo
Java creado en otros entornos puede ser importado, modificado, compila-
do y ejecutado en Netbeans. Pero, actualmente no hay ninguna forma de

10

Nuevas Tecnolog´ıas de la Programaci´on Construcci´on de interfaces gr´aficos de
usuario con Netbeans 4.1 11

generar un fichero .form a partir de c´odigo importado. Eso significa que
el c´odigo importado debe modificarse a mano, en lugar de con el Form
Editor.

2. Adici ´on de componentes al contenedor

La paleta de componentes nos permite seleccionar qu´e componentes
queremos a˜nadir al form. Los componentes est´an clasificados en distintas
categor´ıas: Swing, AWT, Layout Managers y JavaBeans.

Los cuatro botones que hay a la derecha de la solapa AddStrings en
la ventana Form Editor permiten seleccionar el modo del Form Editor. Por
ahora, aseguraos que el bot´on Selection Mode est´a pulsado.

11

Nuevas Tecnolog´ıas de la Programaci´on Construcci´on de interfaces gr´aficos de
usuario con Netbeans 4.1 12

Vamos a a˜nadir tres componentes JLabel. Para ello:

1. Desplegar la categor´ıa Swing de la paleta de componentes si no lo

estaba ya.

2. Seleccionar el componente JLabel.

3. Mantener pulsada la tecla Shift y pinchar tres veces en el panel
del editor de forms con el bot´on izquierdo del rat´on. Esto hace que
aparezcan tres JLabel etiquetados con jLabel1, jLabel2 y jLabel3.
Si no hubiesemos mantenido pulsada la tecla Shift, s´olo se hubiese
a˜nadido un JLabel.

En Java, la colocaci´on y tama˜no de los componentes dentro del conte-
nedor est´a determinada por el gestor de posicionamiento (Layout mana-
ger) que tenga definido. En este caso el gestor de posicionamiento que
tiene definido el JFrame es por ahora BorderLayout.

Para a˜nadir los componentes JTextField usaremos un procedimien-

to algo distinto.

1. Pincha con el bot´on derecho en el nodo JFrame del inspector de

componentes.

2. Selecciona Add From Palette en el men´u contextual y elige Swing

→ JTextField.

3. Repite el proceso tres veces.

4. Notar que los componentes aparecen tanto en el editor de forms

como en el inspector de componentes.

Para ver la apariencia del GUI que hemos construido podemos pu