A ritmo de Swing

Objetivo

Producto a Entregar

Forma de Trabajo

Tiempo estimado

Forma de Entrega

Recomendaciones

• Sigue las instrucciones de la actividad y ejercita la lectura crítica.
• La interfaz gráfica es el corazón de tu aplicación.
• Una buena interfaz debe ayudar a tu usuario.

Paso 1:

Observa el siguiente tutorial

Paso 2:

Para empezar la aplicación vamos a crear un nuevo proyecto al que llamaremos Sesion3. Después de crearlo nos aparece un proyecto vacío en NetBeans. Ahora vamos a agregar una nueva ventana, para hacer esto debemos hacer click derecho sobre el paquete como se ve en la siguiente foto y seleccionar New -> JFrame Form

Debemos ponerle el nombre de MainFrame. A pesar de que los nombres no son importantes para Java, por convención se recomienda poner un nombre que exprese para qué funciona este objeto y de qué clase es. Recuerda que las clases son como moldes para crear objetos, al crear un nuevo JFrame estamos diciendole a Java cómo debe de crear los objetos de tipo MainFrame (es decir, estamos creando el molde). Es importante seguir las convenciones porque nos van a permitir saber fácilmente cómo funciona un programa incluso si no lo hicimos nosotros. Al crear el nuevo JFrame aparece la siguiente ventana:

Paso 3:

Ahora vamos a agregar algunos componentes al JFrame. Selecciona un label en la paleta haciendo click y luego agrégalo al JFrame haciendo click sobre esta donde quieres que aparezca. De la misma manera agrega un text field y un button. Al terminar tu ventana debe verse de la siguiente manera:

Ahora vamos a cambiar el nombre de nuestros componentes para que sean más fáciles de identificar. De la misma manera que antes, a pesar de que los nombres no son importantes para Java, por convención debemos elegir nombres representativos que nos indicen para qué sirve cada uno de los componentes. Además de eso se utiliza que por convención las primeras tres letras indiquen el tipo de componente de la siguiente manera:

De esta manera vamos a seleccionar nombres para nuestros controles. Para cambiar los nombres debes utilizar la ventana Inspector como se ve en el video. Puedes seleccionar un control y presionar F2 para cambiarle el nombre. Utiliza los siguientes nombres para tus controles:

De esta manera sabemos que el JLabel y el JButton van a servir para que el usuario ponga su nombre.

Paso 4:

Ahora lo que vamos a hacer es cambiar el texto de los componentes para que sea más claro para el usuario, para modificar las propiedades de los objetos debemos utilizar la ventana de propiedades que se encuentra abajo a la derecha como se ve en la siguiente fotografía, para cambiar la propiedad text de nuestros controles:

Para encontrar más fácilmente las propiedades podemos seleccionar la caja de propiedades y comenzar a escribir, si hacemos esto aparece la ventana Quick Search que nos permite escribir algo y lo busca por nosotros. Vamos a cambiar el texto de los componentes de la siguiente manera:

Nota que borramos el texto de txtName para que aparezca vacío.

Por último vamos a agregar eventos. Un evento es la manera en que nuestro código responde a lo que hace el usuario. Agregar eventos utilizando Matisse es muy sencillo, lo único que debemos hacer es dar click derecho sobre un control de nuestro JFrame y seleccionar el submenú events. Ahí aparecen todos los eventos a los que puede responder el control que estamos seleccionando.

Vamos a hacer que cuando el usuario haga click en el botón btnEnter se muestre un diálogo con su nombre. Para hacer esto debemos dar click derecho sobre el botón, seleccionar el submenú events y seleccionar el evento Action -> actionPerformed. Al hacer esto aparece una ventana con código en la que podemos agregar lo que debe realizar nuestro proyecto al hacer click en el botón.

Dentro de esta pantalla vamos a escribir la siguiente línea:

JOptionPane.showMessageDialog(this, "Hola " + txtName.getText());

Recuerda agregar los imports como vimos en la primera sesión para evitar que esta línea te marque errores. Puedes hacerlo de dos maneras, haciendo click sobre la lamparita que aparece a la izquierda o presionando [Alt + Shift + F]. JOptionPane es una clase especial que nos permite mostrar diálogos, por el momento sólo utilizala aunque no entiendas cómo funciona. Como puedes ver al final estamos utilizando algo llamado concatenación de texto, veamos cómo funciona:

"Hola " + "Juan" = "Hola juan"

"Có" + "mo" + " " + "han" + " " + "estado?" = "Cómo han estado?"

Como puedes observar, al utilizar el símbolo más estamos uniendo las cadenas de texto y creando una nueva cadena que contiene todas las cadenas unidas. Esto es extremadamente útil para interactuar con el usuario. La otra parte interesante en ese método es que estamos utilizando el método getText() de nuestro JTextField (llamado txtName). ¿Recuerdas que modificamos la propiedad text para que el JTextField no mostrara nada? Con este método estamos obteniendo el texto que se encuentra en este momento en la caja de texto, que es lo que ha escrito el usuario. Para cada propiedad hay un método llamado getNombre() donde Nombre es el nombre de la propiedad de la que quermeos conocer el valor.

Paso 5:

Ya casi terminamos de crear nuestra ventana, pero si corres el proyecto en este momento vas a ver que la ventana no aparece. Esto se debe a que todavía no hacemos que nuestro JFrame se vuelva visible. Esto lo logramos poniendo la siguiente línea en el constructor, el método que se llama MainFrame():

Por último debes regresar a la clase Main utilizando el explorador de proyectos y agregar la siguiente línea en el método main(), recuerda que el método main() es el punto de inicio de la aplicación, es decir, la primera parte del código que se ejecuta.

¿Recuerdas esta sintaxis? Lo único que estamos diciendo es que queremos construir un nuevo (new) objeto de la clase MainFrame (nuestra ventana). Si te fijas estamos llamando el método de la misma manera que se veía en la parte de arriba en el constructor. Corre la aplicación y comprueba que funciona de manera adecuada.

Comprime tu carpeta de trabajo y mándala por Blackboard.