Personalizar botones en Java

Botones personalizados en Java con NetBeans



Hola Java devs, bueno en esta ocasión les quiero compartir algunos de mis diseños para la creación de interfaces de usuario amigables y personalizadas.

Bueno lo que les voy a mostrar es como personalizar botones para que se vean y tengan un estilo más pro, bueno vamos a darle… (En cada paso hay una breve descripción y sigan la numeración de las imágenes).


Lo primero que hay que hacer es hacer un nuevo proyecto (yo utilizo NetBeans)



Damos nombre a proyecto, ruta y finalizamos




Ahora creamos 2 paquetes, uno para las imágenes (botones) y otra para la ventana (frame) principal, entonces nos quedan 2 paquetes (botones y ventana, en mi caso)
 



 


En el paquete “ventana” vamos a crear un nuevo JFrame



Ahora copiaremos las imágenes (botones) al paquete “botones” (esto lo hacemos asi para tener orden y no tener todo en un solo paquete XD)

 






Bien, ya viene lo importante (lo anterior es lo mismo de siempre XD).
Ahora arrastra un JPanel a la ventana principal y extiéndelo a lo alto y ancho del JFrame, después de esto añade 2 botones (uno lo personalizaremos y el otro no, para que veas la diferencia)




Selecciona un botón y dale clic derecho para cambiar sus propiedades, y dentro de ellas modificaremos las siguientes:

  • ·         Texto = lo dejamos vacío
  • ·         Borde = le quitamos el borde
  • ·         BorderPainted = desmarcamos la casilla
  • ·         ContentAreaFilled = desmarcamos la casilla
  • ·         FocusPainted = desmarcamos la casilla.







Y nos quedó un botón sin nada!!!
Ahora dentro de la misma ventana de propiedades del botón, vamos a seleccionar la propiedad “icon” y elegimos la imagen “acep-norm” (esta imagen representa el estado normal del botón)




Continuamos con la propiedad de “pressedIcon” y hacemos los mismos pasos anteriores, solo que esta vez elegimos la imagen “acep-press” (esta imagen simulará el efecto de presionar el botón, para que se vea más mejor XD)






Bien, hacemos los mismos pasos para la propiedad “rolloverIcon” pero seleccionamos la imagen de “acep-roll” (esta hará un efecto más pro al pasar el cursor por encima del botón!)







Ahora para que este botón resalte (porque tiene un efecto opaco) cambiaremos el color del jpanel de fondo.




Pasa el mouse por encima del botón para que veas los resultados de las distintas propiedades que modificamos (rollover y pressed) y notaras cambios muy buenos, a comparación del botón aburrido y feo que está al lado!






Estos botones usé para el tutorial: Botones Smoke

Les dejo el video (está mas corto que leer todo esto XD):

 

guibox

Próximo Ing. en sistemas computacionales (sólo falta el título ;)). Apasionado por el diseño de interfaces de usuario y el responsive design y no por eso dejo de programar la lógica de los sistemas, no hay lenguaje al que le haga el feo, si no se programar en él, que se prepare que será el próximo objetivo ;).

6 comentarios:

  1. Muy genial!
    Ciertamente cambia mucho el aspecto y por lo que he visto a los clientes les gusta mucho (no despreciando que el desarrollo de software no es solo "diseños bonitos") pero siempre hay que ponernos en la perspectiva de usuarios pensando en que se desea y haciendolo presentable

    Muy buen blog! ya estoy viendo los recursos ejemplos y demás
    Gracias!

    ResponderBorrar
  2. Excelente blog. Aunque no soy programador de Java me gustó mucho. Ojalá hubiera un blog como éste de Delphi

    ResponderBorrar
    Respuestas
    1. Muchas gracias amigo, y si la verdad es que me hace falta ejemplificar para más lenguajes y lamentablemente lo que me detiene es el tiempo, te comento que estoy en busca de ayuda para no dejar morir el blog, así que si te intereza pues plaricame y vemos que procede, saludos.

      Borrar
    2. Este comentario ha sido eliminado por el autor.

      Borrar
  3. He estado mirando el contenido de tu página y es muy bueno me llevo varios packs de iconos y la verdad implementados en mi proyecto se miran geniales gracias se agradece el esfuerzo que haces..

    ResponderBorrar
  4. muchas gracias a tí por comentar, y que bueno que lo que hago te sea de ayuda... gracias y saludos!.

    ResponderBorrar