PROGRAMACIN BASICA

LABORATORIO N 11

DISEO DE INTERFAZ DE USUARIO

CODIGO DEL CURSO:

Alumno(s) Nota
Grupo B
Ciclo II
Fecha de entrega

DESARROLLO DE SOFTWARE E INTEGRACION DE SISTEMAS EMPRESARIALES

PROGRAMA DE FORMACIN REGULAR
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 1 de 11

I.- OBJETIVOS:
Identificar los principales controles grficos disponibles en Java para disear interfaces de usuario
Implementar clases que desciendan de la clase base JFrame
Implementar aplicaciones en Java basadas en ventanas
Implementar cdigo Java asociados a eventos de controles en una aplicacin basada en ventanas

II.- SEGURIDAD:
Advertencia:
En este laboratorio est prohibida la manipulacin del
hardware, conexiones elctricas o de red; as como la ingestin
de alimentos o bebidas.

III.- FUNDAMENTO TERICO:

Revise la informacin disponible en Java relacionado al tema de diseo de interfaces de usuario en Java

IV.- NORMAS EMPLEADAS:

No aplica

V.- RECURSOS:
En este laboratorio cada alumno trabajar con un equipo con Windows 10.
Este equipo cuenta con JDK instalado, as como alguno de los IDE (Entorno de Desarrollo Integrado)
NetBeans.

VI.- METODOLOGA PARA EL DESARROLLO DE LA TAREA:

El desarrollo del laboratorio es individual.

VII.- PROCEDIMIENTO:
CREACIN DE UN PROYECTO NUEVO EN NETBEANS
1. Iniciar el programa Netbeans
2. Archivo Nuevo Proyecto
3. Elija en Categorias: Java Java Application, Click Siguiente
4. Nombre Proyecto: Lab11
5. Desmarque las casillas de opcin: Crear clase principal
6. Click Terminar
ADICIN DE UNA VENTANA AL PROYECTO
1. En el proyecto Lab11 , haga click derecho en el nodo: Source Packages Nuevo otro Formularios de interfaz
grafica de swing Formulario JFrame
2. Class Name: formularioAritmetica, clic en Terminar
3. Verifique que exista su nuevo formulario
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 2 de 11

4. Descargue una imagen de internet a su computadora. Clic derecho en la imagen y copiar. Dirijase a su proyecto en
netbeans y en la carpeta Paquetes de Fuentes haga clic derecho y pegar.
5. Desde la paleta situada al lado derecho de su formulario creado, haga clic en etiqueta y arrastre al formulario

6. Haga clic en el label insertado en el formulario, y en su lista de propiedades(situado debajo de paleta) modifique text
por un contenido vacio

7. Modifique la propiedad icon y seleccione en la lista mostrada la imagen insertada

8. Desde la paleta de componentes arrastre el control Panel al formulario y configure su tamao como se muestra:

9. Modifique la propiedad border haga clic en el boton y en la ventana mostrada configure como se muestra
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 3 de 11

10. Aplicando el procedimiento anterior, adicione 4 controles Label (etiquetas)al formulario dentro del Panel

11. Adicione 3 controles TextField (cuadro de texto) a la derecha de los 3 ultimos controles Label

12. Adicione 4 controles Radio Button (boton de opcion)a la derecha de los 3 controles TextField:
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 4 de 11

13. Adicione un control Button Group(grupo de botones) al formulario (No es un control visual, pero debe verificar su
existencia en el panel Navigator(Explorador, situado en la parte inferior izquierda de su netbeans))

14. Adicione un segundo panel(asigne un borde), justo debajo del panel anterior e inserte dos controles Button al nuevo
Panel

15. Se puede personalizar el aspecto de cada uno de los controles mostrados en el formulario. Esto se consigue por medio
del panel Properties ubicado debajo del panel Palette
Nota: Los Paneles del NetBeans se pueden mostrar u ocultar desde el menu Window
16. El control jLabel2 ser utilizado como ttulo de nuestra ventana, para personalizar su contenido seleccionar dicho
control y en el panel Properties se mostrarn sus propiedades.
17. Modifique las siguientes propiedades para el control jLabel2
Control Nro Propiedad Nuevo Valor
jLabel2 1 text Operaciones Aritmeticas
2 background [153,153,255]
3 font Arial 18 Bold
4 horizontalAlignment CENTER
5 verticalAlignment CENTER
6 Border BevelBorder
7 Opaque <Activado>
8 Vertical Size 40
18. El control jLabel2 debera quedar de la siguiente manera:

19. Modifique las siguientes propiedades en los demas controles jLabel para conseguir el aspecto indicado en la figura:
Control Nro Propiedad Nuevo Valor
jLabel3 1 text Primer valor:
jLabel4 1 text Segundo valor:
jLabel4 1 text Respuesta:
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 5 de 11

20. Modifique las siguientes propiedades de los 3 controles jTextField para conseguir el aspecto indicado en la figura:
Control Nro Propiedad Nuevo Valor
jTextField1 1 text (vacio)
jTextField2 1 text (vacio)
jTextField3 1 text (vacio)

21. Modifique las siguientes propiedades de los 4 controles jRadioButton para conseguir el aspecto indicado en la figura:
Control Nro Propiedad Nuevo Valor
jRadioButton1 1 text Suma
2 buttonGroup buttonGroup1
jRadioButton2 1 text Resta
2 buttonGroup buttonGroup1
jRadioButton3 1 text Multiplicacion
2 buttonGroup buttonGroup1
jRadioButton4 1 text Division
2 buttonGroup buttonGroup1

22. Modifique las siguientes propiedades de los 2 controles jButton para conseguir el aspecto indicado en la figura:
Control Nro Propiedad Nuevo Valor
jButton1 1 text Calcular
font Arial 14 Bold
jButton2 1 text Salir
font Arial 14 Bold
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 6 de 11

Nota: Es posible seleccionar varios controles y asignarles un valor a una

propiedad. Dicho valor se aplicar a esa propiedad en cada uno de
los controles seleccionados
23. Modifique las siguientes propiedades de los 2 controles jPanel para conseguir el aspecto indicado en la figura:
Control Nro Propiedad Nuevo Valor
jPanel1 1 Border [LineBorder], Color: [204,204,204]
jPanel2 1 Border [LineBorder], Color: [204,204,204]
24. El aspecto final del formulario ser:

MODIFICACIN DE NOMBRES DE CONTROLES DEL FORMULARIO

1. No es recomendable dejar los controles con el nombre por defecto porque produce confusin al momento de crear el
cdigo en Java asociado a los eventos requeridos (jLabel1, jTextField1, jButton1, jRadioButton1), es mejor asignarles
nombres ms representativos segn el tipo de valor o funcionalidad que van a tener
2. Haremos uso de una serie de prefijos de 3 caracteres con los que empezarn los nombres de los controles:
Control Prefijo
jPanel pan
jLabel lbl
jTextField txt
jRadioButton rbt
jButton btn
jCheckBox cbx
...
3. El cambio de nombre se realiza desde el panel Navigator(navegador):
4. Para cambiar el nombre del control jLabel12 con el nuevo nombre lblTitulo. Click derecho en el nombre del control
jLabel2 Cambiar nombre de variable..
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 7 de 11

5. Asigne el nuevo nombre, click OK

6. Verifique en el panel navigator que el control jLabel2 se ha renombrado como lblTitulo:

7. Aplicando el procedimiento anterior modifique los nombres del resto de controles como se indica en la siguiente tabla:
Control Nombre
jPanel1 panDatos
jPanel2 panBotones
jLabel3 lblValor1
jLabel4 lblValor2
jLabel5 lblRespuesta
jTextField1 txtValor1
jTextField2 txtValor2
jTextField3 txtRespuesta
jRadioButton1 rbtSuma
jRadioButton2 rbtResta
jRadioButton3 rbtMultiplicacion
jRadioButton4 rbtDivision
jButton1 btnCalcular
jButton2 btnSalir
jButtonGroup1 btgOperaciones

ASIGNAR CODIGO A LOS EVENTOS CLICK DE LOS BOTONES CALCULAR Y SALIR

1. Doble Click en el botn Salir
2. En la ventana de cdigo ubique el mtodo:

3. Adicione al mtodo anterior la siguiente lnea de cdigo:

4. Para regresar al formulario click en el botn Design ubicado en la parte superior del editor de cdigo

5. Doble click al botn Calcular. Ubique el mtodo correspondiente al evento click de dicho botn:
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 8 de 11

6. Adicione las siguientes instrucciones al evento anterior:

7. Ejecute el formulario anterior: Click derecho en el formulario Run File:

8. Verifique que el formulario realiza adecuadamente los clculos aritmticos:

 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 9 de 11

9. Anote cualquier detalle importante sobre el ejercicio realizado:

El obejeto no visual Button Group

10. Usando JOptionPane valide los resultados del programa anterior:

a) Agregue un botn denominado Limpiar que permita resetear el contenido de los cuadros de
texto.

b) Verificar que los datos ingresados sean solo nmeros y no letras, en caso contrario debe mostrar
un mensaje indicando que la operacin no es posible y debe limpiarse el contenido de los
cuadros de texto.

c) Validar la salida al hacer clic en el botn Salir. Debe mostrar un cuadro donde se pregunte al
usuario si realmente desea salir del sistema. Si selecciona que no, el programa no debe
cerrarse, en caso contrario se cerrara la aplicacin, indicando un mensaje de Gracias por
utilizar Calculator.

if (JOptionPane.showConfirmDialog(rootPane, "Desea realmente salir del sistema?",

"Salir del sistema", JOptionPane.YES_NO_OPTION) == JOptionPane.YES_OPTION);
JOptionPane.showMessageDialog(null, "Gracias por utilizar Calculator");
System.exit(0);
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 10 de 11

EJERCICIOS PROPUESTOS
1. Implementar un formulario de validacin Login que permita el acceso de tres usuarios solo si se identifican con los
siguientes datos. Para la contrasea utilice un control PasswordField, para la imagen un control Label (prop. Icon), las
imgenes en los botones se cargan cn la prop. icon:
Usuario Password
admin XPTecsup2
tecsup Virtu@l
superuser Abrete Sesamo

2. Implemente un formulario que permita calcular su promedio final asi como tambin la nota que deberia obtener como
mnimo en el examen final para aprobar el curso. En caso de aprobar que se muestre una imagen alegre. Si desaprueba
debe mostrarse una imagen triste

3. Implemente un formulario que tenga el aspecto necesario para poder escribir un mensaje de correo electrnico con los
botones correspondientes de enviar, forward, cancelar. Use como referencia los clientes de correo Microsoft Outlook o
Hotmail.
 Nro. DD-106
PROGRAMACION ORIENTADA A OBJETOS Pgina 11 de 11

VIII.- OBSERVACIONES Y CONCLUSIONES (MINIMO 5 POR CADA UNO)