proyecto para crear un interfaz gráfico paso a paso

GUÍA 6 pág. 1

GUIA 6

Interfaz Gráfica en NetBeans IDE 6.1

I. OBJETIVOS

� Que el estudiante pueda crear interfaces graficas en NetBeans IDE 6.1.

� Que el estudiante se familiaricé con las instrucciones en NetBeans IDE 6.1.

II.INTRODUCCION

Introducción a la generación de interfaces de usuario:

El “Constructor” de interfaces de usuario del IDE NetBeans (conocido anteriormente como

el “Proyecto Matisse”) es un módulo del Entorno de Desarrollo Integrado NetBeans.

Este editor de interfaces gráficas está orientado hacia la librería gráfica Swing de Java. Es

decir, que únicamente produce código fuente para Java.

En NetBeans 6.1 el generador de interfaces gráficas de usuario se ha hecho más

eficiente: ahora es más potente e intuitivo, y permite a los usuarios generar interfaces

gráficas de usuario de aspecto profesional sin necesidad de profundizar en el

conocimiento de los administradores de diseño.

El nuevo generador de interfaces gráficas de usuario de NetBeans acaba con las

dificultades inherentes a la generación de interfaces gráficas de usuario, lo que permite

diseñar formularios colocando simplemente los componentes donde desee.

Creación de un proyecto:

Dado que todo el desarrollo de Java en el programa tiene lugar dentro de los proyectos,

primero se debe crear un proyecto en el que guardar los orígenes y otros archivos del

proyecto.

Facultad: Ingeniería Escuela: Computación Asignatura: Java.

GUÍA 6 pág. 2

Para crear un proyecto de aplicación.

• Seleccione Archivo > Nuevo proyecto. También puede hacer clic en el icono

Nuevo proyecto (New Project) de la barra de herramientas del programa.

• En el panel Categorías (Categories), seleccione Java y, en el panel Proyectos

(Projects), elija Aplicación Java. Al finalizar haga clic en Siguiente (Next).

Creación de Nuevo Proyecto.

GUÍA 6 pág. 3

• Escriba JavaGuia6 en el campo Nombre de proyecto (Project Name) y

especifique la ubicación del proyecto.

• Compruebe que la casilla de verificación Configurar como proyecto principal esté

seleccionada y anule la selección de la opción Crear clase principal en caso de

que esté marcada.

• Haga clic en Finalizar (Finish).

Creación de un contenedor de interfaces gráficas de usuario. Una vez creada la nueva aplicación, verá que la carpeta Paquetes de origen de la ventana

Proyectos contiene un nodo <paquete predeterminado> vacío. Para continuar generando

la interfaz, debe crear un contenedor Java en el que colocar los otros componentes

necesarios de la interfaz gráfica de usuario. En este paso, crearemos un contenedor

utilizando el componente JFrame y lo colocaremos en un nuevo paquete.

Para crear un contenedor de JFrame:

• En la ventana Proyectos (Project), haga clic con el botón derecho en el nodo

JavaGuia5 y elija Nuevo (New) > Formulario JFrame (JFrame Form…).

GUÍA 6 pág. 4

• Escriba PruebaFormulario en Nombre de la clase (Class Name).

• Escriba javaguia5 como paquete.

• Haga clic en Finalizar.

Aspectos generales del generador de interfaces gráficas de usuario

Una vez creado el proyecto para la aplicación, dedicaremos unos minutos a

familiarizarnos con la interfaz del generador de interfaces gráficas de usuario.

GUÍA 6 pág. 5

Al agregar el contenedor de JFrame, el programa abre el formulario

PruebaFormulario.java que acaba de crear en una ficha del Editor con una barra de

herramientas que incluye varios botones, como muestra la ilustración anterior. El

formulario de PruebaFormulario se abre en la vista Diseño del generador de interfaces

gráficas de usuario y aparecen automáticamente tres ventanas adicionales en las

esquinas del programa, que permiten navegar, organizar y editar los formularios de la

interfaz gráfica de usuario a medida que los genera.

Las diferentes ventanas del generador de interfaces gráficas de usuario incluyen:

• Área de diseño: Ventana principal del generador de interfaces gráficas de usuario

para crear y editar formularios de interfaz gráfica de usuario de Java. Los botones

Origen y Diseño de la barra de herramientas permiten ver el código fuente de una

clase o la vista gráfica de sus componentes de la interfaz gráfica de usuario. Los

botones adicionales de la barra de herramientas permiten acceder cómodamente a

los comandos habituales, por ejemplo para elegir entre los modos de selección o

GUÍA 6 pág. 6

conexión, alinear componentes, definir el comportamiento de cambio automático

del tamaño de los componentes o pre visualizar los formularios.

• Inspector: Proporciona una representación, tanto visual como no visual, de todos

los componentes de la aplicación en forma de jerarquía de árbol. El inspector

también permite visualizar el componente del árbol que se está editando en el

generador de interfaces gráficas de usuario, así como organizar los componentes

en los paneles disponibles.

• Paleta: Lista personalizable de los componentes disponibles que contiene fichas

para los componentes de JavaBeans, JFC/Swing y AWT, así como

administradores de diseño.

• Ventana de propiedades: Muestra las propiedades del componente seleccionado

en el generador de interfaces gráficas de usuario y las ventanas Inspector,

Proyectos o Archivos.

III. PROCEDIMIENTO

Ejercicio No 1.

1. Primeramente crear un proyecto con el nombre de JavaGuia6.

2. Agregar al proyecto un contenedor de JFrame con el nombre de

FormHolaMundo.java. Y hacer los cambios que se muestran en la tabla de la

figura 1.

GUÍA 6 pág. 7

Control Propiedad Valor

JFrame Title Mi Primer Formulario

JLabel1 font

text

Tahoma 18 Bold

“Hola Java Utilizando

Formulario”

Fig.1 Controles a Agregar y Modificar.

GUÍA 6 pág. 8

Ejercicio No 2.


FormCalculadora.java.

package holamundo;

/**

*

* @author usuario

*/

public class FormHolaMundo extends javax.swing.JFrame {

/** Creates new form FormHolaMundo */

public FormHolaMundo() {

initComponents();

}

/** This method is called from within the constructor to

* initialize the form.

* WARNING: Do NOT modify this code. The content of this method is

* always regenerated by the Form Editor.

*/

/**

* @param args the command line arguments

*/

public static void main(String args[]) {

java.awt.EventQueue.invokeLater(new Runnable() {

public void run() {

new FormHolaMundo().setVisible(true);

}

});

}

// Variables declaration - do not modify

private javax.swing.JLabel jLabel1;

// End of variables declaration

}

Generated Code

GUÍA 6 pág. 9

2. Ingresar al JFrame los siguientes elementos como se muestra en la tabla de la

figura 2.

Control Propiedad Eventos Codigo Valor

JFrame title Formulario Calculadora

JLabel1 font

text

Tahoma 18 Bold

Calculadora ..

JLabel2 font

text

Tahoma 11 Plain

Primer Operador:

JLabel3 font

text

Tahoma 11 Plain

Segundo Operador:

JLabel4 font

Variable Name

Tahoma 11 Plain

RespuestajLabel4

JTextField font

Variable Name

Tahoma 11 Plain

Operador1TextField1

JTextField font

Variable Name

Tahoma 11 Plain

Operador2TextField2

JButton font

text

actionPerformed

Variable Name

Tahoma 11 Plain

Suma

Dar clic

SumaButton1

JButton font

text

actionPerformed

Variable Name

Tahoma 11 Plain

Resta

Dar clic

RestaButton2

JButton font

text

actionPerformed

Variable Name

Tahoma 11 Plain

Multiplicacion

Dar clic

MultiplicacionButton3

JButton font

text

actionPerformed

Variable Name

Tahoma 11 Plain

Division

Dar clic

DivisionButton4

Fig.2 Controles a Agregar y Modificar.

GUÍA 6 pág. 10

package holamundo;

/**

*

* @author usuario

*/

public class FormCalculadora extends javax.swing.JFrame {

/** Creates new form FormCalculadora */

public FormCalculadora() {

initComponents();

}





*/

GUÍA 6 pág. 11

private void MultiplicacionButton3ActionPerformed(java.awt.event.ActionEvent evt) {

// TODO add your handling code here:

Double respuesta = ((Double.parseDouble(Operador1TextField1.getText())) *

(Double.parseDouble(Operador2TextField2.getText())));

RespuestajLabel4.setText("La Multiplicacion es de: " + respuesta);

}

private void RestaButton2ActionPerformed(java.awt.event.ActionEvent evt) {


Double respuesta = ((Double.parseDouble(Operador1TextField1.getText())) -

(Double.parseDouble(Operador2TextField2.getText())));

RespuestajLabel4.setText("La Resta es de: "+ respuesta);

}

private void SumaButton1ActionPerformed(java.awt.event.ActionEvent evt) {


Double respuesta = (double)((Double.parseDouble(Operador1TextField1.getText())) +

Double.parseDouble(Operador2TextField2.getText()));

RespuestajLabel4.setText("La Suma es de: " + respuesta);

}

private void DivisionButton4ActionPerformed(java.awt.event.ActionEvent evt) {


Double respuesta = ((Double.parseDouble(Operador1TextField1.getText())) /

Double.parseDouble(Operador2TextField2.getText()));

RespuestajLabel4.setText("La Division es de: " + respuesta);

}

/**


*/



public void run() {

new FormCalculadora().setVisible(true);

}

});

}

Generated Code

GUÍA 6 pág. 12

Ejercicio No 3.


radiobutton.java.

2. Ingresar al JFrame los siguientes elementos como se muestra en la tabla de la

figura 3.


private javax.swing.JButton DivisionButton4;

private javax.swing.JButton MultiplicacionButton3;

private javax.swing.JTextField Operador1TextField1;

private javax.swing.JTextField Operador2TextField2;

private javax.swing.JLabel RespuestajLabel4;

private javax.swing.JButton RestaButton2;

private javax.swing.JButton SumaButton1;





}

GUÍA 6 pág. 13

Control Propiedad Eventos Codigo Valor JFrame Title Uso de Radio Button

JLabel text

horizontalAlignment

icon

verifyInputWheFocu

s

Accesibles Name

Variable Name

Serialize To

TRAILING

cadillac.jpg

quitar opción

lImagen

radiobutton_lImagen

JRadioButton buttonGroup

select

text

actionCommand

label

Accesible Name

actionPerformed

Variable Name

Serialize To

bgGrupo

Colocar Opción

Cadillac

Cadillac

Cadillac

Cadillac

Dar click

rbcadillac

radiobutton_rbcadillac


select

text

actionCommand

label

Accesible Name

actionPerformed

Variable Name

Serialize To

bgGrupo

Colocar Opción

dodge

dodge

dodge

dodge

Dar click

rbdodge

radiobutton_rbdodge


select

text

actionCommand

label

Accesible Name

actionPerformed

Variable Name

Serialize To

bgGrupo

Colocar Opción

ferrary

ferrary

ferrary

ferrary

Dar click

rbferrary

radiobutton_rbferrary


select

text

actionCommand

label

Accesible Name

actionPerformed

Variable Name

Serialize To

bgGrupo

Colocar Opción

nissan

nissan

nissan

nissan

Dar click

rbnissan

radiobutton_rbnissan

GUÍA 6 pág. 14

Control Propiedad Eventos Codigo Valor JRadioButton buttonGroup

select

text

actionCommand

label

Accesible Name

actionPerformed

Variable Name

Serialize To

bgGrupo

Colocar Opción

toyota

toyota

toyota

toyota

Dar click

rbtoyota

radiobutton_rbtoyota

ButtonGroup Variable Name

Serialize To

bgGrupo

radiobutton_bgGrupo

package holamundo;

/**

*

* @author usuario

*/

public class radiobutton extends javax.swing.JFrame {

/** Creates new form radiobutton */

public radiobutton() {

initComponents();

}





*/

GUÍA 6 pág. 15

private void rbtoyotaActionPerformed(java.awt.event.ActionEvent evt) {


lImagen.setIcon(new javax.swing.ImageIcon(getClass().getResource

("/imagenes/toyota.jpg")));

}

private void rbnissanActionPerformed(java.awt.event.ActionEvent evt) {



("/imagenes/nissan.jpg")));

}

private void rbferraryActionPerformed(java.awt.event.ActionEvent evt) {



("/imagenes/ferrary.jpg")));

}

private void rbdodgeActionPerformed(java.awt.event.ActionEvent evt) {



("/imagenes/dodge.jpg")));

}

private void rbcadillacActionPerformed(java.awt.event.ActionEvent evt) {



("/imagenes/cadillac.jpg")));

}

/**


*/



public void run() {

new radiobutton().setVisible(true);

}

});

}

GUÍA 6 pág. 16

4- Modificar el ejercicio 2 de la calculadora de acuerdo a los siguientes criterios.

- La división debe mandar un error al tratar de dividir entre 0

- No debe aceptar letras en las casillas


private javax.swing.ButtonGroup bgGrupo;

private javax.swing.JLabel lImagen;

private javax.swing.JRadioButton rbcadillac;

private javax.swing.JRadioButton rbdodge;

private javax.swing.JRadioButton rbferrary;

private javax.swing.JRadioButton rbnissan;

private javax.swing.JRadioButton rbtoyota;


}

proyecto para crear un interfaz gráfico paso a paso

Documents