Login estilizado con Java Swing - Apache Netbeans [Elementos Gráficos]

 Login moderno y limpio con 

Java Swing - Apache Netbeans 

¡Bienvenidos a nuestro blog de ServerUs Lab's Mx!

En esta ocasión, vamos a sumergirnos en el emocionante mundo de Java Swing y NetBeans para crear una interfaz de inicio de sesión moderna y funcional. El inicio de sesión es una parte fundamental de muchas aplicaciones, y con las herramientas adecuadas, podemos diseñar una interfaz que no solo sea atractiva, sino también eficiente y fácil de usar.

A lo largo de este artículo, aprenderás paso a paso cómo utilizar Java Swing, una de las bibliotecas más populares para la creación de interfaces gráficas en Java, junto con NetBeans, un potente entorno de desarrollo integrado (IDE). Exploraremos desde los conceptos básicos hasta las técnicas más avanzadas para lograr una interfaz de usuario profesional.

¿Qué cubriremos en este tutorial?

1. Creación del proyecto: Configuración inicial del proyecto en NetBeans.
2. Diseño de la interfaz: Uso de Java Swing para diseñar el formulario de inicio de sesión.
3. Estilización y modernización: Aplicación de estilos y mejoras visuales para un diseño moderno.
4. Gestión de eventos: Cómo manejar los eventos de usuario, como el clic en el botón de inicio de sesión.
5. Validación de datos: Técnicas para validar las credenciales de usuario.

Este tutorial está diseñado tanto para principiantes como para desarrolladores con experiencia que buscan refrescar sus conocimientos. Al final del artículo, tendrás una interfaz de inicio de sesión completamente funcional y estilizada, lista para ser integrada en tus aplicaciones.

¡Vamos a empezar nuestro viaje en el desarrollo de interfaces gráficas con Java Swing y NetBeans!

Primeramente daremos por hecho, que ya se tiene instalado y configurado el programa de NetBeans, listo para programar, si no es el caso te sugerimos que primero visites nuestra publicación Instala y Configura NetBeans, habiendo realizado la instalación y configuración, prosigamos a nuestro proyecto.

NOTA: En estos ejemplos utilizaremos imágenes simulando el login para una aplicación gestora de membrecías de Gimnasio, sin embargo, puedes hacerla del rubro que desees.

Creación del Proyecto en NetBeans.

1. Abriremos NetBeans.
2. Daremos clic en 'Archivo' o 'Files'
3. Clicaremos en 'Nuevo Proyecto' o 'New Project'  
   
   
   
4. Despues Clicamos en 'Java with Ant' y 'Java Aplication'
   
5. En la siguiente ventana especificaremos en nombre de nuestro proyecto, en nuestro caso le nombramos "GymSoft", sin embargo, tu puedes nombrarlo a tu gusto.
6. Es muy importante que desmarquemos la casilla de 'Create Main Class', ya que la crearemos mas adelante.
   
   
   
7. Ahora si clicamos en 'Finish' y esperamos  a que prepare el proyecto.

Creaciones de la paqueterías internas del proyecto en NetBeans.

1. Nos dirigimos a nuestro proyecto recién creado, le damos clic en el '+' para desplegar su contenido y en 'Source Packages' clicamos con el botón secundario para desplegar el submenú.
2. Seguido de esto clicamos en 'New' y despues en 'Java Package', para crear una paquetería para el login, esto como buenas practicas de programación, para mantener la organización del proyecto.
3. Escribimos un nombre para la paquetería y damos clic en finalizar, en nuestro caso, lo nombramos 'com.login' el "com." se utiliza para dar estructura a la paquetería.
   
   
   
4. Posteriormente repetiremos el mismo proceso y crearemos una paquetería para las imágenes, en nuestro caso nombramos 'com.images', siguiendo la misma estructura de la paquetería anterior.
   
   
    
5. En esta paquetería guardaremos todas la imagnes de nuestro login o proyecto, dentro de ella para mayor organización puedes crear más subcarpetas.
6. Para agregar las imágenes, simplemente arrástralas a la paquetería o cópialas y pégalas, en nuestro caso solo utilizamos 4 imágenes.

   
7. Asegúrate que las imágenes sean del tamaño deseado, asi no tendrás problemas al agregarlas al proyecto.

Creación y adaptación de nuestra ventana [JFrame Form]

Clicamos en la paquetería 'com.login' con el botón secundario para desplegar el menú secundario de NetBeans, posteriormente nos dirigiremos a 'Nuevo' o 'New' y dentro del submenú da clic en 'JFrame Form'

Le escribimos el nombre deseado, en nuestro caso, le nombramos "login" y clicamos en 'Finish'

Una vez creada la agrandaremos al tamaño deseado, en nuestro caso, necesitamos que sea de "800 x 500"

Una vez que tenemos el 'JFrame', donde agregaremos los elementos, vamos a agregar un 'JPanel'

el cual lo usaremos de fondo, por lo cual lo extenderemos en todo el Frame

una vez agregado ingresaremos a sus propiedades, dando clic con el botón secundario [derecho] en el panel y despues en propiedades

una vez en propiedades, vamos a pintar el fondo 'background' a un color deseado, en nuestro caso lo colorearemos de blanco ya que así da una sensación mas limpia, tambien le quitaremos el borde 'border' estableciéndolo en "No Border", al final las propiedades deberán quedar asi

cerramos el cuadro de propiedades y nos dirigiremos al cuadro de elementos ubicado en la parte inferior izquierda, en donde identificaremos nuestro 'jPanel' le clicaremos con el botón secundario para desplegar el menú y primero cambiaremos el nombre de variable 'Change Variable Name...' la cual es la primera opción 

escribimos un nombre para su fácil identificación, en nuestro caso pondremos "Background" tu puedes poner el nombre que gustes

una vez cambiado el nombre, volveremos a entrar a su menú y buscaremos la opción 'Set Layout' y dentro de el 'Absolute Layout' esto nos ayudará a establecerlo como absoluto y creará una jerarquía en dodne el panel estará por debajo del jFrame y sus elementos estarán establecidos dentro del panel

una vez que dimos clic tendrás que esperar que NetBeans cargue las configuraciones y lo reestablezca a absoluto.

Agregar una Barra Lateral estilizada.

Una vez que ya terminó de cargar, ahora podremos agregar el diseño deseado, empezaremos agregando una imagen lateral que cubra todo lo alto del jFrame pero solo una tercera parte de lo ancho, esto para agregarle una imagen representativa al login y el nombre con logo de la empresa, para ello agregaremos una 'etiqueta' o 'jLabel' 

y la acomodaremos a lo alto del 'jPanel' y ocupando una tercera parte (aproximadamente) de lo ancho

una vez agregada la etiqueta, vamos a entrar a sus propiedades, para modificarlas.

Una vez aqui vamos a quitar el texto que tiene por predeterminado 'text' y buscaremos la propiedad 'icon' y daremos clic en los tres puntos para modificarlo '...'

Una vez dentro de esta propiedad, vamos a dar clic en 'Image Within Project' y en la opción de 'Package:' seleccionaremos la paquetería donde guardamos las imágenes, en nuestro caso, "com.images" y en la sección de 'Files' seleccionaremos la imagen que designamos para esta sección, nuestra imagen se nombra "lat" y es tipo ".jpg" al dar clic en la flecha desplegará las imágenes guardadas en la paquetería seleccionada, una vez seleccionadas la

 

paquetería y la imagen clicaremos en '

OK' y posteriormente en 'close' para establecerlo.

Una vez agregada la imagen lateral, siguiendo el mismo método y utilizando una etiqueta, agregaremos el logo de la empresa, se recomienda que la imagen del logo haga contraste con la imagen lateral, esto para poder distinguirse una de otra, tambien te recomendamos agregar una etiqueta con el nombre de la empresa, cambiando el color de fuente a uno que se distinga en la característica 'foreground'  y una fuente deseada, esto lo puedes modificar en sus propiedades, en la característica 'Font'.

despues de agregar estos elementos, nuestra barra lateral se debería ver como a continuación se muestra.

No se nos olvide establecerles nombres claves a nuestros elementos para su fácil identificación, esto lo podrás hacer de manera fácil, dirigiéndote a la barra de elementos ubicada de lado inferior izquierdo, y para cambiar el nombre solo selecciónalo y preciona la tecla [F2] o da clic con el botón secundario y en el menú que aparece, da clic en 'Change Variable Name...', nosotros le especificamos los siguientes nombres.

Estilizando el lado derecho de nuestro login.

Para empezar a estilizar el lado funcional de nuestro login, lo primero que debemos hacer es agregar una imagen del logo de nuestra aplicación o en su defecto de la empresa ala cual estás haciendo el programa, esto por medio de una etiqueta como se ha realizado anteriormente, este logo deberá hacer contraste con el fondo, en nuestro caso, como el fondo lo establecimos como blanco, el logo que pondremos será color negro.

Una vez agregado el logo inmediatamente despues agregaremos una etiqueta en donde escribiremos las palabras "Inicio de Sesión".

Posteriormente agregaremos otra etiqueta para escribir "Usuario" esto para establecer que se deberá escribir el usuario para el inicio de sesión, posteriormente agregaremos un 'jTextField', 

el cual utilizaremos para agregar el textbox donde el usuario escribirá el nombre de sus Usuario, este 'jTextField' lo estableceremos de bajo de la etiqueta Usuario y para verse mas estilizado deberás alargar aproximadamente hasta casi donde empieza la barra lateral.

posteriormente deberemos modificar sus propiedades, en donde modificaremos su texto interno en la propiedad 'text', aqui ponderamos "Ingresa tu Usuario", tambien modificaremos la propiedad 'font', aqui según tu gusto cambiaremos la fuente y el tamaño de la misma, como recomendación, proponemos que utilices un tamaño 24 y una fuente distinguible, otra cosa que modificaremos será el color del texto 'foreground', recomendamos un color gris para que parezca un "placeholder" de un  'textbox' realizado con CSS, ya que, ese es el objetivo, simular uno, para ello tambien tendremos que quitarle el contorno, es decir, que no se vea la caja del texto, esto lo haces desde las propiedades, en la sección de 'border', clicamos en los tres puntos para abrir las opciones y seleccionamos en 'no border'.

posteriormente clicamos en 'ok' y despues en 'Close', al cerrar las ventanas nos debería quedar algo como esto...

pero... aun nos falta simular la linea de texto, esto para no perder a nuestro usuario a la hora de escribir, para ello, utilizaremos un 'jSeparator'

 y lo pondremos por debajo del 'jTextField', simulando una linea de escritura, deberás cubrir el total del 'jTextField' o si se puede más de la cobertura, esto para que muestre un poco mas estético, lo cual se vería de la siguiente manera...

Una vez que tengamos el usuario haremos lo mismo con la contraseña, pero con la diferencia, de que, en vez de utilizar un 'jTextField' utilizaremos un 'jPaswordField', 

esto para que al momento que se escriba la contraseña, esta no aparezca visible y así evitar el robo de la misma, además del nombre de la herramienta, no tiene alguna otra diferencia a la hora de establecerla y modificar sus propiedades, debes hacer prácticamente los mismos pasos que usaste con el 'jTextField', con la finalidad que te quede de la siguiente manera.

Para terminar con el diseño tenemos que agregar un botón, pero para seguir con nuestro diseño plano, utilizaremos un 'jPane' 

y lo colorearemos en un color que convine con el entorno que tenemos hasta ahora, en nuestro caso, utilizamos un color azul, este lo pondremos debajo del 'jSeparator' de la contraseña, asegúrate de centrarlo muy bien, despues de agregar el 'jPanel' le agregaremos por encima una '

jLabel', en donde escribiremos la palabra "Entrar" o similar en un color que contraste, como por ejemplo el blanco, el resultado final de nuestro simulador de botón deberá quedar de la siguiente manera... 

y ahora si, ya tenemos nuestro estilo minimalista y plano, parecido a una aplicación web realizada en CSS, pero antes, no se te olvide nombrar los elementos para una mejor identificación de los mismos, nuestros elementos gráficos quedarón nombrados de las siguiente manera...

una vez nombrados los elementos y si todo lo ordenaste correctamente tu 'Login' deberá tener aproximadamente el siguiente aspecto...

ya hemos terminado nuestro entrono, ahora solo falta agregarle funcionalidad interactiva, para ello te invitamos a visitar nuestro siguiente post, te esperamos.

Leer la continuación, Login estilizado con Java Swing - Apache Netbeans [Personalizar Barra Superior]

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