PROGRAMACIÓN BASICA

LABORATORIO N° 8

DISEÑO DE INTERFAZ DE USUARIO

CODIGO DEL CURSO:

Alumno(s) Nota
Grupo
Ciclo III
Fecha de entrega

ADMINISTRACIÓN DE REDES Y COMUNICACIONES

PROGRAMA DE FORMACIÓN REGULAR
 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 1 de 12

I.- OBJETIVOS:
 Identificar los principales controles gráficos disponibles en Java para diseñar interfaces de usuario
 Implementar clases que desciendan de la clase base JFrame
 Implementar aplicaciones en Java basadas en ventanas
 Implementar código Java asociados a eventos de controles en una aplicación basada en ventanas

II.- SEGURIDAD:
Advertencia:
En este laboratorio está prohibida la manipulación del
hardware, conexiones eléctricas o de red; así como la ingestión
de alimentos o bebidas.

III.- FUNDAMENTO TEÓRICO:

 Revise la información disponible en Java relacionado al tema de diseño de interfaces de usuario en Java

IV.- NORMAS EMPLEADAS:

No aplica

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

VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:

 El desarrollo del laboratorio es individual.

VII.- PROCEDIMIENTO:
CREACIÓN 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: Lab8
5. Desmarque las casillas de opción: Crear clase principal
6. Click Terminar
 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 2 de 12

ADICIÓN DE UNA VENTANA AL PROYECTO

1. En el proyecto Lab8 , 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

 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 3 de 12

3. Verifique que exista su nuevo formulario

4. Descargue una imagen de internet a su computadora (de preferencia de tamaño pequeño). 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 tamaño como se muestra:
 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 4 de 12

9. Modifique la propiedad border haga clic en el boton y en la ventana mostrada configure como se muestra

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
 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 5 de 12

12. Adicione 4 controles Radio Button (boton de opcion)a la derecha de los 3 controles TextField:

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: Las herramientas de NetBeans se pueden mostrar u ocultar desde el menu Window
16. El control jLabel2 será utilizado como título de nuestra ventana, para personalizar su contenido seleccionar dicho
control y en el panel Properties se mostrarán 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]
 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 6 de 12

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 debería 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:

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
 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 7 de 12

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

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

MODIFICACIÓN DE NOMBRES DE CONTROLES DEL FORMULARIO

1. No es recomendable dejar los controles con el nombre por defecto porque produce confusión al momento de crear el
código en Java asociado a los eventos requeridos (jLabel1, jTextField1, jButton1, jRadioButton1), es mejor asignarles
nombres más representativos según el tipo de valor o funcionalidad que van a tener
2. Haremos uso de una serie de prefijos de 3 caracteres con los que empezarán los nombres de los controles:
Control Prefijo
jPanel pan
jLabel lbl
jTextField txt
jRadioButton rbt
 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 8 de 12

jButton btn
jCheckBox cbx
...
3. El cambio de nombre se realiza desde el panel Navigator(navegador):
4. Para cambiar el nombre del control jLabel2 con el nuevo nombre lblTitulo. Click derecho en el nombre del control
jLabel2  Cambiar nombre de variable..

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
jLabel1 lblImagen
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
 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 9 de 12

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

1. Doble Click en el botón Salir
2. En la ventana de código ubique el método:

3. Adicione al método anterior la siguiente línea de código:

4. Para regresar al formulario click en el botón Design ubicado en la parte superior del editor de código

5. Doble click al botón Calcular. Ubique el método correspondiente al evento click de dicho botón:

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 cálculos aritméticos:

 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 10 de 12

9. Anote cualquier detalle importante sobre el ejercicio realizado:

 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 11 de 12

EJERCICIOS PROPUESTOS
1. Implementar un formulario de validación “Login” que permita el acceso de tres usuarios solo si se identifican con los
siguientes datos. Para la contraseña utilice un control PasswordField, para la imagen un control Label (prop. Icon), las
imágenes 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 también la nota que deberia obtener como
mínimo 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 electrónico con los
botones correspondientes de enviar, forward, cancelar. Use como referencia los clientes de correo Microsoft Outlook o
Hotmail.
 Nro. DD-106
PROGRAMACIÓN BÁSICA Página 12 de 12

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