Este documento presenta una guía para una práctica de laboratorio sobre el uso del programa Eclipse para crear una ventana emergente interactiva que puede mostrar u ocultar una imagen mediante botones. El estudiante aprenderá a crear un proyecto en Eclipse, insertar gráficos y botones, y programar los botones para mostrar u ocultar la imagen al hacer clic en ellos u salir de la ventana.

1. GUÍA DE USO DE LABORATORIOS
ESTUDIANTE: Guzmán Gómez Carlos Jossue
SEMESTRE: Segundo
PARALELO: C
CARRERA: Pedagogía de las Ciencias Experimentales Informática
PRÁCTICA: #21
TEMA:
Eclipse: Imagen Visible y No Visible
OBJETIVO:
Definir combinaciones informáticas mediante el uso del programa Eclipse para interactuar con una
pantalla emergente en relación a observar u ocultar un gráfico indeterminadamente.
RESULTADOS DE APRENDIZAJE
 Obtener un correcto uso de los controles y objetos que proporciona Eclipse.
 Formular códigos que permitan ocultar o visualizar un gráfico de manera interactiva.
 Alcanzar trabajos precisos en la estructuración de un formulario.
ACTIVIDADES:
-Crear nuevos proyectos en el desarrollador Eclipse.
-Insertar gráficos y botones de manera organizada.
-Mediante el uso de objetos como JLabel y controles como JButton construir un formulario
diseñado en aparecer o desaparecer una imagen.
DESARROLLO DE CONTENIDOS
1. Primero abriremos el programa Eclipse.

2. 2. Luego se creará un nuevo proyecto dando click izquierdo sobre “File”, “New” y “Java
Project”. Después sobre la carpeta nombrada “src” damos click derecho, a continuación,
click izquierdo en “Other”, luego en “Swing Designer”, y en “JFrame” para crear el
nuevo formulario asignándole su nombre correspondiente.
3. A continuación, se obtendrá un “Source” el cual es un cuadro de código en el que se realizan
las respectivas declaraciones de sentencias, códigos y objetos con las funciones que se
requieren; en conjunto con el “Design” que es el espacio en el cual se realiza el respectivo
diseño de la ventana emergente a utilizar.
 “Source”

3.  “Design”
4. Después dando click derecho sobre la ventana a diseñar nos saldrá un menú de opciones,
en el cual se dará click sobre “Set layout” y luego en “Absolute layout” para obtener un
libre control al momento de ubicar los diferentes eventos que contendrá la ventana
emergente.
5. Por consiguiente, se empieza por el diseño que requiera el formulario, en esta ocasión se
utilizara un JLabel para insertar la imagen a utilizar en el programa. También se usará 3
JButton que serán empleados de la siguiente manera:
1) btnNewButton: Para interactuar con la opción de visualizar la imagen asignándole
por nombre “Ver”.
2) btnNewButton_1: Para interactuar con la opción de ocultar la imagen asignándole
por nombre “No ver”.
3) btnNewButton_2: Para interactuar con la opción de salir del evento asignándole por
nombre “Salir”.

4. 6. Seguidamente se procede a programar cada botón con su respectiva acción.
7. En primer lugar, dando doble click sobre el botón “Ver” se inserta un “Label1.setVisible
(true)” que permitirá mostrar el objeto especificado, que en esta ocasión tiene el nombre
de “Label1”.
8. En segundo lugar, dando doble click sobre el botón “No ver” se inserta un
“Label1.setVisible (false)” que permitirá ocultar el objeto especificado, que en esta ocasión
tiene el nombre de “Label1”.

5. 9. Y en tercer lugar dando doble click sobre el botón “Salir” se inserta un “System.exit
(WIDTH)” que nos permitirá salir o cerrar la pantalla emergente en la que se mostrarán los
códigos hechos.
10. Utilizar el botón para ordenar correr el programa.
11. Por último, al ejecutar el programa se podrá:
1) Dar click en la opción “No ver” para ocultar la imagen insertada.
2) Dar click en la opción “Ver” para mostrar nuevamente la imagen ocultada.
3) Dar click en la opción “Salir” para cerrar la ventana emergente.
1)

6. f.) ________________________ f.) ________________________
Carlos Jossue Guzmán Gómez MSc. Víctor Zapata
ESTUDIANTE DOCENTE
2)
3)
BIBLIOGRAFÍA:
Oxus, O. (2014, 3 febrero). JAVA GUI PART I. Slideshare.
https://www.slideshare.net/oxus20/java-gui-part-i