Tutorial Netbeans PDF

Preview

Summary

Tutorial de como usar el IDE de Netbeans para poder desarrollar programas de java...

Description

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 (https://netbeans.org/downloads/) 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.

  

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 subcontenedor 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

“(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:

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”.

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

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.

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: https://projects.eclipse.org/projects/tools.windowbuilder

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: http://help.eclipse.org/kepler/index.jsp?topic=%2Forg.eclipse.wb.doc.user%2Fhtml%2Findex.html...