Login estilizado con Java Swing - Apache Netbeans [Eventos interactivos]

 Login moderno y limpio con 

Java Swing - Apache NetBeans 

Funcionalidades del Login...

Una vez que tenemos estilizada nuestra interfaz gráfica y agregamos una barra superior personalizada, realizado en nuestro post anterior, Login estilizado con Java Swing - Apache Netbeans [Personalizar Barra Superior], tenemos que darle funcionalidad a cada uno de nuestros elementos gráficos, esto, para que puedan cumplir con su objetivo particular con éxito, para ello vamos a utilizar eventos de java.

Eventos.

En Java, los eventos son una parte fundamental de la programación basada en interfaces gráficas de usuario (GUI) y en sistemas de programación orientada a eventos. Los eventos permiten que un programa responda a acciones del usuario, como hacer clic en un botón, mover el ratón, o escribir en un campo de texto. En nuestro post Introducción a los Eventos en Java: Una Guía Completa, se detallan algunos conceptos clave sobre la programación de eventos en Java, te invitamos para que te enteres mas sobre ello.

Sin mas preámbulos, recordemos que la nuestra interfaz gráfica quedó de la siguiente manera...

entonces a partir de aqui ya está lista para agregar las funcionalidades, es decir, los eventos, primeramente, ele vento que agregaremos está relacionado con la barra superior que hemos remplazado, para ello vamos a empezar creando 2 variables tipo 'Entero', esto nos ayudará para guardar la ubicación de la ventana, por lo cual nosotros las nombramos "xMouse", para guardar la ubicación a lo ancho y "yMouse" para guardar la ubicación a lo alto de la pantalla, estas las crearemos despues de la creación de la clase pública principal, 

una vez creadas estás variables, ahora vamos a crear nuestro primer evento, el 'mousePressed', el cual nos ayudará a obtener la ubicación actual de nuestra
ventana cuando se le da un clic sostenido (cuando no se suelta el clic), para ello le damos clic en el 'JPanel', para seleccionado que creamos para esta barra superior (JPHeader), posteriormente, vamos a clicar con el botón secundario, para mostrar el menú del mismo, seguido nos desplazamos al submenú 'eventos', 'Mouse' y finalmente clicamos en 'mousePressed', 

con esto, nos creará un evento en donde codificaremos la instancias necesarias para obtener la ubicación inicial del 'JFrame', esta es 'getX( )' y 'getY( )' ubicado en la biblioteca 'evt.' y la información obtenida la guardaremos en las variables recién creadas, esto quedaría de la siguiente manera...

muy importante no confundir las variables y no invertirlas ya que nos ocasionaría problemas.

Ahora, vamos a establecer la nueva ubicación de nuestra ventana, para ello vamos a utilizar el evento 'mouseDragged'

 este evento se activa cuando el usuario sin soltar el botón del clic, arrastra el cursor a otro lugar, para ello vamos a seleccionar el 'JPanel' y acceder al submenú, y dirigirnos a 'eventos', 'mouseMotion', y finalmente 'mouseDragged', una vez clicado nos creará el evento en el código, dentro de este vamos a obtener la ubicación final ubicado en el plan x y y de nuestra ventana de escritorio, y asi reubicarla, pero antes crearemos unas variables eventuales de tipo entero, las cuales llamaremos x y y en donde obtendremos la ubicación de nuestro cursor, para esto mediante la biblioteca 'evt.' utilizaremos la instancia 'getXOnScreen( )', esto para darle fluidez a nuestra ventana a la hora de moverla, 

guardando esta información en las variables recién creadas, quedando de esta manera....

una vez guardada la información de la nueva ubicación de nuestro cursor, vamos a realizar un calculo básico restándole a la nueva ubicación, la ubicación inicial, con ello va a resultar la ubicación nueva de la ventana, una vez realizada nuestra resta se establecerá en la ventana, mediante la instancia 'this.setLocation( )'  esta instancia lo que hace es establecer una nueva ubicación a nuestra ventana, una vez agregado el codigo quedará de la siguiente manera,

¡muy bien! ya tenemos la reubicación de nuestra ventana, ahora vamos a darle funcionalidad a nuestro botón de cerrar, para ello tenemos que darle función al momento de darle clic y por mera estética el cambio de color, para indicar que el cursor está encima de nuestro botón.

Empezaremos con la funcionalidad de cerrar la ventana, para ello seleccionaremos la etiqueta que creamos para agregar la imagen (jLCerrar), para posteriormente acceder al menú del elemento, posteriormente nos desplazaremos a 'eventos', 'Mouse' y clicamos en 'mouseClicked', 

muy importante NO confundir con el evento Entered o Pressed, ya que no son lo mismo, el evento 'Clicked' funciona cuando damos clic, es decir, presionas y sueltas, una vez creado el evento, vamos a agregar la siguiente instancia 'System.exit(0)' el cual cerrará la aplicación quedando de la siguiente manera.

Ahora a cambiar el color de interacción con el usuario para ello en la misma etiqueta vamos a invocar el evento 'MouseEntered', este evento se  activa cuando el cursor está encima del elemento, y activará lo que se encuentre dentro de su evento, en este caso, cambiaremos el color de la etiqueta, para ello vamos a utilizar la instancia 'setBackground( )' esta instancia necesitará que especifiquemos el color necesario dentro de los paréntesis para ellos lo haremos con la propiedad 'Color.' y el nombre del color que necesitemos en nuestro caso rojo, pero, debe ser en inglés, entonces, quedaría "Color.red", quedando el código de la siguiente manera...

Una vez que ya se coloreo la etiqueta al pasar el cursor, debemos regresarlo a normalidad cuando el mismo, salga del perímetro de la etiqueta, para ello utilizaremos el evento 'mouseExited' el cual acuta cuando el cursor está fuera del elemento, posteriormente con la misma instancia 'setBackground' estableceremos el color que tenia anteriormente, e un nuestro caso blanco, quedando la siguiente manera...

 en nuestro caso el color que estamos usando no es un color especifico asi que utilizaremos la combinación RGB, para ellos especificamos que es un nuevo color y seguido entre paréntesis la combinación RGB del mismo. 

Con esto ya tenemos una barra superior funcional, lo siguiente es trabajar nuestros 'jTextFiel', pero en este caso, tenemos que ponernos más ingeniosos a la hora de darles una función, agregando condiciones lógicas que nos ayudarán a cumplir este objetivo.

Empezaremos con el cuadro de texto, donde se estipula el "user name" del participante, para ello empezaremos agregando un evento 'MouseClicked' el cual se ejecutará a la hora que demos clic en el cuadro, dentro de el iniciaremos con un condicionamiento 'if' en donde valoraremos que es el contenido que tiene nuestro cuadro, compararemos que si tiene el texto por default o un valor vacío, entonces regresaremos el color gris que tenia en un principio, para que siga teniendo el estilo CSS, esto lo aremos con la instancia 'getText', el cual nos integra el valor escrito en el 'jTextField', no se nos olvide, que para comparar un texto se utiliza la instancia '.equals( )', una vez dentro de este condicionamiento, si el texto es igual a los default o nulos, vamos a colorear el texto de color negro, mediante la instancia 'setForeground', con la instancia 'Color' o 'new Color', el cual nos indicará que el usuario estará escribiendo el usuario por lo cual damos la sensación de que está activo, de paso vamos a valorar mediante un condicionamiento 'if', si nuestro 'jPasswordFiel' contiene valores por default, y poder colorearlo de gris, esto con la finalidad, que el usuario tenga una interacción con la interfaz más intuitiva, con esto quedará finalizado nuestro evento, quedando de la siguiente manera...

Una vez que se hemos dado función a nuestro 'jTextField' pasaremos a hacer lo mismo a nuestro 'jPasswordFiel' con los mismo métodos, valorando los valores de nuestro 'jTextFiel', y 'jPasswordFiel' para asi colorearlos de la manera pertinente, quedando de la siguiente manera...

con esto hemos terminado de agregar los eventos de nuestras cajas de texto, ahora haremos lo mismo con nuestro botón,  el cuál lo colorearemos a la hora que el mouse esté por encima del mismo dando un efecto de resalte, y a la hora de quitar el cursor regrese a la normalidad, esto lo llevaremos acabo mediante los eventos 'MouseEntered' y 'MouseExited' y una vez dentro utilizaremos la instancia 'setBackground' esto de la mano de las propiedades 'Color' o 'new Color', en nuestro caso los colores que establecimos no están en la paleta de colores predeterminados de java, asi que utilizamos la combinación RGB, quedando los dos eventos de la siguiente manera...

Con esto hemos terminado nuestra interfaz interactiva de inicio de sesión dando al usuario una sensación actualizada y tambien interactiva, síguenos y comparte nuestro contenido para que mas adelante aprendas a conectar a una base de datos y darle conexión a esta interfaz.

Esperamos que esta guía te haya sido útil. Si tienes alguna otra pregunta, no dudes en preguntar en los comentarios o en nuestras redes sociales. ServerUs Laboratories