practica

INSTITUTO TECNOLÓGICO DE VERACRUZ TÓPICOS SELECTOS DE PROGRAMACIÓN Práctica4: Programación Visual en Netbeans

Profesor: Héctor Andrade Gómez

En ésta práctica vamos a crear una interfase gráfica para calcular el sueldo de una persona utilizando la ayuda para programación visual de NetBeans. en la primera parte crearemos los componentes y los distribuiremos en el área de trabajo. En la segunda parte agregaremos el código para realizar el cálculo.

Abre Netbeans y selecciona File->New Project->General->Java Application. Deberá

aparecer una pantalla como esta:

Oprime Next. Vamos a crear una aplicación con una interfase gráfica que calcule e

imprima el sueldo de un trabajador a partir de las horas trabajadas. Al terminar la

práctica, 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 aplicación. Deselecciona el botón “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

aplicación usando una forma específica. 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 raíz. 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 aplicación 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 código creado por NetBeans, selecciona “Source”. Puedes en todo momento

ver el código o regresar al diseño 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 jerárquica 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 colócalo en el area blanca de tu diseño. Ahora, has click en JPanel y colócalo

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 seleccionándolo en la ventana del

“Inspector”

Vamos a cambiar el texto de cada pestaña. Selecciona cada uno de los JPane y en el area

de propiedades cambia el título (Tab Title). Cambia el título de la pestaña 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. Selecciónalo (al JPanel1) en la ventana

del inspector y vamos agregar 8 etiquetas (JLabel) dos Campos de Texto (JTextField) y

un botón (JButton)

Tu ventana del Inspector y del diseño debe ser algo parecido a esto:

Ahora vamos a cambiar los títulos de los componentes. En el caso de las etiquetas 6,7 y

8 no pondremos títulos pues las usaremos para desplegar los cálculos. Al final debe

quedar algo asi:

Puedes probar tu diseño oprimiendo el botón o puedes ejecutar el archivo

seleccionando Run->Run File->SamplesFrame.java. La pantalla debe ser algo parecido

a esto:

Con esto terminamos la primera parte de la práctica. En la segunda parte introduciremos

el código para realizar los cálculos. Suerte!!

PRACTICA SOBRE NETBEANS

Segunda parte

En esta parte de la práctica vamos a trabajar con la parte dinámica de la interfase gráfica

de la calculadora. Empezaremos con el diseño que hicimos en la primera parte de la

práctica:

Hasta ahora, esta aplicación no tiene funcionalidad. Agregaremos un manejador de

eventos para el botón, pero primero crearemos un menú para esta aplicación.

Aunque frecuentemente los menus son de los primeros objetos creados en una

aplicación, lo haremos de otra forma para demostrar lo fácil que resulta modificar el

diseño de la aplicación 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 diseño, 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 botón 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 botón derecho en JMenu1 y

renómbralo (change variable name) como Archivo. También cambia el texto que

aparece en el diseño por Archivo (edit text). Tu pantalla debe ser similar a esta:

Ahora, en la ventana del Inspector, oprime el botón derecho en el componente Archivo

y selecciona Add JMenuItem. Renómbralo como “Abrir”. Puedes agregar más opciones.

Oprime botón izquierdo sobre el componente JmenuBar1, selecciona Add JMenu y

renombralo como “Ayuda”. Prueba tu diseño, deberás tener algo similar a esto:

De esta forma puedes agregar más menus y mas opciones por cada menú.

El último componente que debemos agregar es una imagen de la persona. Una manera

de mostrar imágenes en Java Swing es “decorando” componentes como etiquetas,

botones, etc., con un ícono. Un ícono es una figura de tamaño fijo.

Vamos a poner una imagen en la pestaña de Imágenes. 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.

Colócala en el centro del panel seleccionando las propiedades horizontalAlignment y

verticalAlignment. Tu pantalla debera verse parecida a esta:

Finalmente, vamos a agregar el código para que al oprimir un botón, se calcule el pago

del trabajador. Selecciona en la pantalla de diseño o en la ventana del Inspector el botón

“Calcula”. Dale click derecho, y selecciona Events->Action->ActionPerformed:

Aparecerá el código del método que maneja el botón. Agrega el siguiente código en el

método 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 nfTotal =


//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 código al principio:

import java.text.NumberFormat;

import java.util.Locale;

Nota: Si tienes diferentes nombres para los campos de texto y etiquetas modifica el

código anterior.

Ahora corre el archivo. Deberas tener una pantalla como esta:

Suerte!!

practica

Documents