Tutorial Netbeans
Lenguajes de programación (Universidad de San Carlos de Guatemala)
Scan to open on Studocu
Studocu is not sponsored or endorsed by any college or university
Downloaded by Roberto Lara (rlaramoran@[Link])
Tutorial – Diseñar una interfaz gráfica con Netbeans IDE
En el siguiente tutorial haremos una interfaz gráfica de usuario sencilla, con las herramientas que
dispone Netbeans. Como el objetivo del tutorial es ilustrar el proceso para crear una interfaz
gráfica con Netbeans, esta vez no se seguirá una arquitectura por capas en este ejercicio.
Paso 0 – Instalación de Netbeans
Visite NetBeans IDE download ([Link] y descargue este editor. La
versión para Java SE debería ser suficiente (95 MB). Instale el programa en su equipo. Hecho esto,
estará listo para ejecutar el IDE y empezar a desarrollar este tutorial.
Paso 1 – Crear un proyecto en Netbeans
Dirigirse a File -> New Project.
Seleccionar java Application.
Nombrar el proyecto como NumberAddition.
Desmarcar la casilla Create Main Class.
Paso 2 – Construir el FrontEnd de la aplicación
Creando NumberAdditionUI
A continuación debemos crear el contenedor de la interfaz gráfica.
Downloaded by Roberto Lara (rlaramoran@[Link])
En la ventana que muestra los proyectos, dar click derecho a NumberAddition y
seleccionar New->Other.
Seleccionar Swing GUI Forms -> JFrame Form
Nombrar el JFrame como NumberAdditionUI
Saldrá la siguiente ventana, mostrando el área de diseño del JFrame sin ningún componente.
1. Design Area: Es la ventana principal para crear y editar interfaces gráficas; en la barra
superior, el botón de Source nos permite ver el código fuente de la clase, el cual se va
autogenerando a medida que agregamos elementos desde el área de diseño. El botón
History, también en la barra superior, permite acceder a la historia local de los cambios en
el archivo.
2. Navigator: Provee una representación de todos los componentes en la aplicación, tanto
visuales como no visuales, como un árbol jerárquico.
3. Palette: Muestra todos los componentes disponibles de Swing, AWT y JavaBeans.
4. Properties Window: Muestra las propiedades del componente seleccionado en el área de
diseño.
Agregando componentes
Ya hemos creado NumberAdditionUI, nuestro contenedor principal. Ahora crearemos un sub-
contenedor para agregar los elementos de la interfaz gráfica.
Seleccionar un Panel de la categoría Swing Containers, desde la ventana de Pallete.
Arrastrar el Panel dentro del JFrame, dentro de la ventana de Design Area.
En la ventana de Properties Window, para el JPanel que acabamos de crear, seleccionar
la propiedad border, haga click en el cuadro pequeño enseguida de la celda que contiene
Downloaded by Roberto Lara (rlaramoran@[Link])
“(No Border)”; luego, en la ventana emergente elija la opción Titled Border; Luego, en el
campo Title escribir “Number Addition”. Finalmente hacer click en el botón OK.
Tras haber hecho esto, así se verá el diseño de la interfaz gráfica, al igual que la estructura de sus
componentes:
Hasta este punto, se han agregado un Frame y un Panel al área de diseño. Usando similares
acciones, agregue los componentes necesarios desde la ventana Pallete, para que la interfaz
gráfica luzca parecido a esto:
Downloaded by Roberto Lara (rlaramoran@[Link])
Renombrando componentes
Ahora pongamos nombres apropiados a los componentes del área de diseño.
Doble click en jLabel 1 y cambiar la propiedad text a “First Number”.
Doble click en jLabel 2 y cambiar la propiedad text a “Second Number”.
Doble click en jLabel 3 y cambiar la propiedad text a “Result:”.
Borrar el texto de ejemplo de jTextField1, desde la ventana de Properties, editando el
campo text. Repetir esto para jTextField2 y jTextField3. Además, determine gráficamente
un tamaño apropiado para estos campos, en el área de diseño.
Cambiar el texto de jButton1 a “Add”, desde la ventana de Properties, editando el campo
text. Note que el tamaño del botón también se puede modificar gráficamente en el área
de diseño
Cambiar el texto de jButton2 a “Clear”.
Cambiar el texto de jButton3 a “Exit”.
Downloaded by Roberto Lara (rlaramoran@[Link])
Después de cambiar los campos de texto, la interfaz gráfica luciría así:
Agregando funcionalidad
Al agregar la funcionalidad a los botones de Add, Clear y Exit, tendremos que configurar los
Listeners para manejar los eventos de presionar los botones. Netbeans genera el código de forma
automática.
Agregar funcionalidad al botón de Exit
1. En la vista de Design, hacer click derecho en el botón de Exit.
2. Seleccionar Events->Action>actionPerformed. Nótese que el menú también posee otros
posibles eventos que también se pueden manejar.
3. El IDE abrirá la vista Source, y se situara en el espacio donde se implementa la acción que
queremos ejecutar cuando el botón sea oprimido.
4. Agregamos la siguiente línea dentro del método y salve el archivo. Esta instrucción
termina la aplicación de manera normal.
Agregar funcionalidad al botón de Clear
1. En la vista de Design, hacer click derecho en el botón de Clear.
2. Seleccionar Events->Action>actionPerformed.
3. Agregar las siguientes líneas dentro del método generado
Downloaded by Roberto Lara (rlaramoran@[Link])
Agregar funcionalidad al botón de Add
1. En la vista de Design, hacer click derecho en el botón de Add.
2. Seleccionar Events->Action>actionPerformed.
3. Agregar las siguientes líneas dentro del método generado. Aquí se usa el método estático
parseFloat, de la clase Float, el cual transforma el texto de un JTextField en un número.
Paso 3 – Ejecutar la aplicación
En la barra de herramientas de Netbeans, oprimimos el botón “Run Project”, o presionamos F6
La siguiente figura ilustra cómo se vería el resultado de la ejecución.
Downloaded by Roberto Lara (rlaramoran@[Link])
Paso 4. Usar WindowBuilder [Quiz adicional, opcional]
Realice este mismo ejercicio usando Windowbulider, un plugin para Eclipse que permite diseñar
interfaces GUI de manera bidireccional.
Los siguientes links proveen información sobre WindowBuilder:
Descripción del proyecto e instrucciones de instalación:
[Link]
Para instalar el plugin, seleccione la pestaña Downloads, y luego haga click en el link
correspondiente a su versión de Eclipse. Esta acción abrirá una página con instrucciones de
instalación del plugin. El URL de esa página es el mismo que debe ingresar en el campo de texto
“Work with”, en el proceso de instalación (las instrucciones para Mars no están, pero deben ser las
mismas de la versión Luna).
Un tutorial de uso de WindowBuilder está en el siguiente link:
[Link]
Downloaded by Roberto Lara (rlaramoran@[Link])