INSTITUTO TECNOLGICO DE VERACRUZ TPICOS SELECTOS DE PROGRAMACIN Prctica4: Programacin Visual en Netbeans Profesor: Hctor Andrade Gmez En sta

prctica vamos a crear una interfase grfica para calcular el sueldo de una persona utilizando la ayuda para programacin visual de NetBeans. en la primera parte crearemos los componentes y los distribuiremos en el rea de trabajo. En la segunda parte agregaremos el cdigo para realizar el clculo.

Abre Netbeans y selecciona File->New Project->General->Java Application. Deber aparecer una pantalla como esta:

Oprime Next. Vamos a crear una aplicacin con una interfase grfica que calcule e imprima el sueldo de un trabajador a partir de las horas trabajadas. Al terminar la prctica, el programa resultante deber producir una pantalla similar a esta:

Regresemos al NetBeans, en la pantalla que aparece, deja el nombre por default del proyecto.

Selecciona un directorio para esta aplicacin. Deselecciona el botn Create Main Class Presiona Finish y debes tener una pantalla como la siguiente:

Para crear la interfase, debes usar el editor de formas y crear un contenedor para tu aplicacin usando una forma especfica. Los contenedores mas generales son: JFrame, Jdialog y JApplet. Cada componente debe ser parte de alguna jerarquia que es una rbol de componentes que tiene un contenedor general como la raz. Cada contenedor tiene un content pane o rea visible que contiene los componentes visibles de ese contenedor. Puedes agregar una barra de men a un contenedor general. Ahora, selecciona el menu File->New File y selecciona Java GUI Forms. Nota los Tipos de archivo que aparecen a la derecha. Para esta aplicacin usaremos un JFrame. Selecciona JFrame Form y dale Click al boton Next. Nombra al Frame SamplesFrame y dale click al boton Finish. Deber aparecer una pantalla como esta:

Para ver el cdigo creado por NetBeans, selecciona Source. Puedes en todo momento ver el cdigo o regresar al diseo de la forma oprimiendo Design Con el editor de formas, pueder agregar y editar componentes utilizando cualquiera de las tres areas de trabajo: Palette Contiene los componentes y Layout managers Inspector Despliega la estructura jerrquica de los componeentes Properties Despliega las propiedades del componente seleccionado.

Hasta ahora, has creado un proyecto y un JFrame llamado SamplesFrame. Ahora vamos a agregar componentes. Dale Click al componente JTabbedPane que se encuentra en Palette, y colcalo en el area blanca de tu diseo. Ahora, has click en JPanel y colcalo adentro del JTabbedPane. Esto ha agregado un JPanel al JTabbedPane, agrega otro JPanel procurando colocarlo en la parte superior de tal forma que se agrege al mismo nivel del JPanel anterior. Debes tener algo similar a esto:

Puedes observar las propiedades de cada objeto seleccionndolo en la ventana del Inspector Vamos a cambiar el texto de cada pestaa. Selecciona cada uno de los JPane y en el area de propiedades cambia el ttulo (Tab Title). Cambia el ttulo de la pestaa 1 por Calculadora y el de la dos por Imagen Ahora, vamos a establecer como van a ser desplegados los componentes. En la ventana de Inspector dale click derecho al JFrame, y selecciona Set Layout-> GridBagLayout. Vamos a agregar mas componentes al JPanel1. Seleccinalo (al JPanel1) en la ventana del inspector y vamos agregar 8 etiquetas (JLabel) dos Campos de Texto (JTextField) y un botn (JButton) Tu ventana del Inspector y del diseo debe ser algo parecido a esto:

Ahora vamos a cambiar los ttulos de los componentes. En el caso de las etiquetas 6,7 y 8 no pondremos ttulos pues las usaremos para desplegar los clculos. Al final debe quedar algo asi:

o puedes ejecutar el archivo Puedes probar tu diseo oprimiendo el botn seleccionando Run->Run File->SamplesFrame.java. La pantalla debe ser algo parecido a esto:

Con esto terminamos la primera parte de la prctica. En la segunda parte introduciremos el cdigo para realizar los clculos. Suerte!!

PRACTICA SOBRE NETBEANS Segunda parte En esta parte de la prctica vamos a trabajar con la parte dinmica de la interfase grfica de la calculadora. Empezaremos con el diseo que hicimos en la primera parte de la prctica:

Hasta ahora, esta aplicacin no tiene funcionalidad. Agregaremos un manejador de eventos para el botn, pero primero crearemos un men para esta aplicacin. Aunque frecuentemente los menus son de los primeros objetos creados en una aplicacin, lo haremos de otra forma para demostrar lo fcil que resulta modificar el diseo de la aplicacin creando componentes en cualquier orden. En la ventana del Inspector puedes seleccionar el objeto que desees y modificar, agregar o borrar componentes. Regresemos a la pantalla de diseo, en la ventana del Inspector, selecciona el JFrame. Nota que en la ventana de propiedades puedes cambiar cualquiera de ellas. Ahora, en la ventana del Inspector, oprime el botn derecho sobre el componente JFrame, selecciona Add From Palette y selecciona: swing->JMenuBar. Cuando veas que el objeto ha sido creado en la ventana del Inspector, observa que tambien se ha creado el objeto JMenu1. Posteriormente oprime el botn derecho en JMenu1 y renmbralo (change variable name) como Archivo. Tambin cambia el texto que aparece en el diseo por Archivo (edit text). Tu pantalla debe ser similar a esta:

Ahora, en la ventana del Inspector, oprime el botn derecho en el componente Archivo y selecciona Add JMenuItem. Renmbralo como Abrir. Puedes agregar ms opciones. Oprime botn izquierdo sobre el componente JmenuBar1, selecciona Add JMenu y renombralo como Ayuda. Prueba tu diseo, debers tener algo similar a esto:

De esta forma puedes agregar ms menus y mas opciones por cada men. El ltimo componente que debemos agregar es una imagen de la persona. Una manera de mostrar imgenes en Java Swing es decorando componentes como etiquetas, botones, etc., con un cono. Un cono es una figura de tamao fijo. Vamos a poner una imagen en la pestaa de Imgenes. En la ventana del inspector, selecciona con doble-click a JPanel2. Ahora, selecciona el layout to BorderLayout (Click derecho en JPanel2-> setLayout >BorderLayout). En la paleta de componentes, selecciona JLabel y coloca la etiqueta adentro del Panel. En la paleta de propiedades, cambia el icono por una imagen. Colcala en el centro del panel seleccionando las propiedades horizontalAlignment y verticalAlignment. Tu pantalla debera verse parecida a esta:

Finalmente, vamos a agregar el cdigo para que al oprimir un botn, se calcule el pago del trabajador. Selecciona en la pantalla de diseo o en la ventana del Inspector el botn Calcula. Dale click derecho, y selecciona Events->Action->ActionPerformed:

Aparecer el cdigo del mtodo que maneja el botn. Agrega el siguiente cdigo en el mtodo jButton1ActionPerformed:
//Lee las horas trabajadas del campo de texto y lo convierte a int int hw = Integer.parseInt(jTextField1.getText()); // Lee el salario por hora y lo converte a int double rateEntered = Double.parseDouble(jTextField2.getText()); //Crea dos variables de tipo Double. double regularPay = 0; double overTimePay = 0; //Si trabaj mas de 40 horas se le paga 150% if (hw > 40) { regularPay = 40 * rateEntered; overTimePay = (hw - 40) * 1.5 * rateEntered; } else { regularPay = hw * rateEntered; overTimePay = 0.0; } double total = regularPay + overTimePay; //Variables para formateo de numeros NumberFormat nfRegular = NumberFormat.getCurrencyInstance(Locale.US); NumberFormat nfOverTime = NumberFormat.getCurrencyInstance(Locale.US); NumberFormat nfTotal = NumberFormat.getCurrencyInstance(Locale.US); //Writes the totals in the correct format to the labels

jLabel6.setText(" " + nfRegular.format(regularPay)); jLabel7.setText(" " + nfOverTime.format(overTimePay)); jLabel8.setText(" " + nfTotal.format(total));

Probablemente tengas que importar algunos paquetas. Agrega el cdigo al principio: import java.text.NumberFormat; import java.util.Locale; Nota: Si tienes diferentes nombres para los campos de texto y etiquetas modifica el cdigo anterior. Ahora corre el archivo. Deberas tener una pantalla como esta:

Suerte!!