1. 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:

2. 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:

3. 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:

4. 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:

5. 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!!

6. 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:

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

8. 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:

9. 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.getCurrencyInstance(Locale.US);
NumberFormat nfTotal =
NumberFormat.getCurrencyInstance(Locale.US);
//Writes the totals in the correct format to the labels

10. 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!!