Login estilizado con Java Swing - Apache Netbeans [Personalizar Barra Superior]

 Login estilizado con Java Swing - Apache NetBeans [Personalizar Barra Superior]







Continuando con la personalización de nuestra ventana, publicado en nuestro articulo anterior llamado "Login estilizado con Java Swing - Apache Netbeans [Elementos Gráficos]" vamos a agregarle personalización al botón creado, ya que se ha creado con un 'JPanel' este aun no simula un botón como comúnmente se comporta, para ello vamos a entrar a las propiedades del 'JPanel'  y una vez en propiedades buscaremos la propiedad llamada 'cursor

y dentro de esta vamos a clicar en los tres puntos '...' y posteriormente seleccionaremos la opción de cursor de mano 'Han Cursor', con esto, cada que el cursor se acerque al 'JPane' cambiará el cursor simulando que es un botón.



Ahora procederemos a personalizar nuestra barra superior, ya que, la que java nos proporciona por defecto, se ve anticuada, y no se adecua a nuestra interfaz "material design"


para ello vamos a las propiedades de nuestro 'JFrame', que es la ventana en donde está nuestro login, una vez dentro de sus propiedades, vamos a buscar la propiedad llamada 'undecorated' y la vamos a seleccionar, esto ocasionará que nuestra barra superior desaparezca, aprovechando que estamos en esta sección vamos a deseleccionar la opción de 'recizable' esto para que a nuestra ventana no se le pueda modificar el tamaño, ya que esto ocasionaría que nuestro diseño se perdiera, tambien seleccionaremos la opción 'locationByPlatform' esto para que nuetra interfaz cuando se ejecute aparezca en el centro de la pantalla.


Ahora nuestra ventana aparecerá sin está barra superior, pero ya que este elemento nos permitía cerrar y mover nuestra ventana a voluntad, entonces ¡Ahora como la cerraremos? Para ello ahora debemos crear Barra Superior, pero acorde a nuestro estilo, para esto agregaremos un 'JPanel' en todo el espacio superior, el tamaño del ancho debe abarcar toda la ventana, sin embargo, el alto será a tu consideración.





Una vez agregada, no se te olvide asignarle un nombre, en nuestro caso la nombraremos "header", una vez agregada, desde las opciones de propiedades, le cambiaremos el color a blanco para que no sea visible, una vez que se agregó, vamos a agregar una imagen para que simule el botón de cerrar, para esto, vamos a utilizar una etiqueta 'JLabel' y agregaremos la imagen deseada, en nuestro caso agregaremos una imagen similar a los botones del sistema operativo "macintosh" y tambien lo colocaremos en el lado izquierdo de nuestra ventana, esto para darle mas estilo minimalista, no te olvides de agregarle el efecto de cursor 'Han Cursor', una vez agregado se deberá ver de la siguiente manera...

para asegurarte que todo está en su lugar, en la barra de navegación a la parte inferior izquierda de NetBeans, asegúrate que esté con la siguiente jerarquía.
Una vez verificado esto, ya podremos empezar a agregarle los eventos necesarios para que nuestra interfaz funcione correctamente.

Pero esto lo realizaremos en nuestra siguiente publicación, te invitamos a leerla y seguir con nuestro proyecto.





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

Comentarios

Entradas más populares de este blog

Tareas Módulo IV, Parcial 2.

Tareas Módulo IV, Parcial 3.

Introducción a Microsoft Access - El Correcto Uso de Microsoft Access y Sus Barras de Herramientas