Tópicos Avanzados de Programación

4to. Semestre

PRACTICA 2 Desarrollo de GUI en Java

1. Para crear un nuevo proyecto, da clic en la opción Archivo, selecciona la opción

Nuevo Proyecto, y elige la opción Java Application.

2. Asígnale un nombre al proyecto, como se muestra en el ejemplo, y desactiva la casilla “crear

claseprincipal”. Da clic en terminar.
Tópicos Avanzados de Programación
4to. Semestre

3. En el Paquete de fuente, da clic derecho y selecciona la opción Nuevo + Java

Package. Asignale el nombre de imágenes, y da clic en finalizar.

4. Crea otro nuevo paquete con el nombre de ventanas. Al terminar la estructura de tu

proyecto debeaparecer como se muestra en la imagen.
Tópicos Avanzados de Programación
4to. Semestre

5. Guarda en una carpeta las imágenes que ocuparás para el proyecto. Necesitarás una
imagen para fondo de pantalla y un icono para usuario. En el ejemplo se asignó el
nombre de Interfaces a la carpeta que contiene las imágenes. Posteriormente copia
la carpeta.

6. Y pégala dando clic derecho en el paquete imágenes, y seleccionando la opción pegar.

Tópicos Avanzados de Programación
4to. Semestre
7. Verifica que se haya agregado la carpeta con sus respectivas imágenes.

8. Da clic derecho en el paquete ventanas y selecciona la opción Nuevo + Formulario

JFrame.
Tópicos Avanzados de Programación
4to. Semestre

9. Asignale un nombre a tu formulario, como se muestra en el ejemplo, y da clic en

Terminar.

10. Se creará un formulario con el que podrás trabajar a través de código y diseño.
Tópicos Avanzados de Programación
4to. Semestre

11. Selecciona una Etiqueta de la paleta de componentes. Arrastrala a la esquina

superior izquierda, y cámbiala de nombre, como se muestra en el ejemplo.

12. Borra el texto de la etiqueta. Dando clic en editar texto.

Tópicos Avanzados de Programación
4to. Semestre

13. Selecciona la opción icon.

14. Se mostrará una ventana para seleccionar archivos. Selecciona la imagen que deseas
ocupar para el fondo.
* Primero selecciona la carpeta de las imágenes.
* Después selecciona la imagen de fondo deseada.
Tópicos Avanzados de Programación
4to. Semestre

15. Finalmente oprime el botón OK.

16. El fondo se mostrará en el diseño de tu formulario. Para visualizar la ventana ejecuta tu

proyecto.
*Da clic en el botón OK.
Tópicos Avanzados de Programación
4to. Semestre

17. Para trabajar en el código fuente del formulario, da clic en la opción Source.
Tópicos Avanzados de Programación
4to. Semestre

18. A continuación se muestra un comando para configurar la posición de la ventana al

iniciar.

19. Para posicionarla en el centro de la pantalla, sustituye el this que se encuentra

dentro de los paréntesis, por la palabra null.
Tópicos Avanzados de Programación
4to. Semestre

20. Por default, los formularios de java, muestran en su diseño la barra de título, y los
botones de control (minimizar, maximizar y cerrar). Esta propiedad la podemos
activar y desactivar en la paleta de propiedades, en la casilla undecorated.

21. Al desactivar la opción, la ventana aparece de esta manera al ejecutar el programa.

Tópicos Avanzados de Programación
4to. Semestre

22. Para introducir y trabajar con componentes (botones, etiquetas, imágenes, etc), es
recomendable configurar el JFrame en modo diseño absoluto. Para ello, da clic
derecho en JFrame, selecciona Activar gestor de distribución, seguido de Diseño
Absoluto.

23. Selecciona la opción botón y arrástrala dentro del JFrame.

Tópicos Avanzados de Programación
4to. Semestre

24. Da clic derecho en la opción del botón creado, y selecciona Mover arriba.

25. Dicha opción posiciona el objeto por encima del JFrame.

 Tópicos Avanzados de Programación
4to. Semestre

26. Edita el texto del botón, como se muestra en el ejemplo.

27. Cambia el color de relleno del botón. Para esto, selecciona dentro de las propiedades la
opción Backgroung, y elige el color que más sea de tu agrado.
Tópicos Avanzados de Programación
4to. Semestre

28. Cambia el color de fuente del texto del botón. Para esto, selecciona dentro de sus
propiedades, la opción foreground, y elige el color que más sea de tu agrado.

29. Para cambiar el tipo de fuente, selecciona la opción font, y configura el tipo y tamaño
de letra.
Tópicos Avanzados de Programación
4to. Semestre

30. A continuación, se muestra en la imagen el resultado de los cambios al botón.

31. En la siguiente captura de pantalla se muestra el comando que da al botón la

funcionalidad de cerrar la ventana. Para ello, escribe System.exit(0); dentro del
código del botón. (Dar doble clic al botón)
Tópicos Avanzados de Programación
4to. Semestre
32. Agrega una etiqueta al JFrame.

33. Posiciona la etiqueta encima del JFrame.

Tópicos Avanzados de Programación
4to. Semestre

34. Borra el texto que contiene.

35. Selecciona las propiedades de la etiqueta, y da clic en la opción Icono.

Tópicos Avanzados de Programación
4to. Semestre

36. Selecciona la imagen deseada para el icono de usuario, y da clic en aceptar.

37. Ubica el icono en una posición adecuada dentro del JFrame.

 Tópicos Avanzados de Programación
4to. Semestre

38. Agrega dos etiquetas más, dentro de una escribe la palabra Usuario, en la otra la palabra
Contraseña. Modifica su tamaño, color de fuente y posición. Tal como se muestra en el
ejemplo.

39. Añade un campo de texto, y modifica su nombre tal y como aparece en el ejemplo.
Tópicos Avanzados de Programación
4to. Semestre

40. Añade un campo de contraseña, y asígnale un nombre como el siguiente.

41. A continuación, se muestra en la imagen el resultado del diseño.

Tópicos Avanzados de Programación
4to. Semestre

42. Añade un botón de Login, y aplícale su respectivo diseño.

Finalmente, ejecuta tu programa, para ver los resultados del diseño a tu Interfaz Gráfica de
Usuario.