Hoy he estado probando algunas librerias para modificar la forma en la que se visualizan las ventanas de mis aplicaciones java creadas con la biblioteca grafica Swing.
En este post, explicare la forma de usar el framework de Substance para cambiar el aspecto visual (look and feel) de las ventanas creadas con java.
En mi opinion, me parece que el tema Metal que el JRE establece por default a todas las aplicaciones creadas usando componentes swing, ya se ecuentra obsoleto, las formas rectangulares de los elementos que componen las ventanas (Botones, Campos de texto, Menus, etc) y ese color metalico que caracteriza el tema, eran novedad y muy atractivo para los usuarios cuando finalizaba la decada de los 90, eran ejecutadas sobre windows 98, 2000, unix, mac o linux (¿recuerdan sus interfaces graficas?). Apartir del update 10 de JRE 1.6 Sun ha realizado una modificacion a la biblioteca swind, es asi como aparece Nimbus Look and Feel, una opcion para el look and feel por defecto Metal, aunque este ultimo sigue siendo el default, si quieres probar nimbus, puedes usarlo agregando esta linea al contructor de la interfaz grafica:
UIManager.setLookAndFeel("com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel");
La verdad ami me dejo muy desilucionado, en un principio crei que seria mas agradable a la vista, aun que me agrada mas que el Metal.
Bueno, hablando del verdadero tema de este post; hace ya algun tiempo me encontre con el proyecto Substance, el cual es un framework (el mas completo que he encontrado) para sustituir o modificar el aspeto de las ventanas y componentes de las aplicaciones java.
Para empezar, describire un poco las partes fundamentales de Substance.
- Skins: Cambia el aspecto visual de una ventana, Substance trae varios prediseñados.
- Themes: Agrega efectos de eventos a los elementos de las ventana, se aplica despues de un skin.
- Watermark (o marca de agua): Pernite cambiar el fondo de la ventana, desde colocar diseños incluidos en el framework hasta colocar una imagen personalizando su opacidad.
- API para personalizar elementos graficos: Por ejemplo redondear botones o campos de texto, etc, etc.
Aqui ulgunas imagenes de ejemplo, extraidas de la pagina del proyecto:
O puedes dar clic en el siguiente enlace para lanzar una aplicacion WebStart y visualizar los ejemplos en tu computadora: enlace
Yo he usado NetBeans 6.5, Substance 4.3 y JDK 6 update 14, para este post he creado una interfaz grafica, la cual usare para ejemplificar el uso de la api de substance, asi es como se ve con el tema Metal por defecto:
Lo primero que tendremos que hacer es agregar la biblioteca de substance a nuestro proyecto (la puedes descargar de aqui):
Despues de eso incluiremos la direccion de los paquetes que aplicaran los look and feel, de esta forma tendremos la posibilidad de manejar la interfaz grafica usando substance.
Agregamos las siguientes lineas, justo antes de crear la ventana.
//Le decimos al SO que java se encargara del manejo de la decoracion //del contorno de la ventana JFrame.setDefaultLookAndFeelDecorated(true); //Aplicamos un skin a nuestra ventana, en este caso SaharaSkin SubstanceLookAndFeel.setSkin(”org.jvnet.substance.skin.SaharaSkin”);
Ejecutamos, y asi es como se ve con el skin SaharaSkin:
Acontinuacion listo los parametros para el metodo setSkin(String skin) de la clase SubstanceLookAndFeel, todos son los que incluye substance 4.3 (estos paremetros se pasan como tipo string, osea entre comillas ;)):
- org.jvnet.substance.skin.AutumnSkin
- org.jvnet.substance.skin.BusinessBlackSteelSkin
- org.jvnet.substance.skin.BusinessBlueSteelSkin
- org.jvnet.substance.skin.BusinessSkin
- org.jvnet.substance.skin.CremeCoffeeSkin
- org.jvnet.substance.skin.CremeSkin
- org.jvnet.substance.skin.EmeraldDuskSkin
- org.jvnet.substance.skin.FieldOfWheatSkin
- org.jvnet.substance.skin.FindingNemoSkin
- org.jvnet.substance.skin.GreenMagicSkin
- org.jvnet.substance.skin.MagmaSkin
- org.jvnet.substance.skin.MangoSkin
- org.jvnet.substance.skin.MistAquaSkin
- org.jvnet.substance.skin.ModerateSkin
- org.jvnet.substance.skin.NebulaBrickWallSkin
- org.jvnet.substance.skin.NebulaSkin
- org.jvnet.substance.skin.OfficeBlue2007Skin
- org.jvnet.substance.skin.OfficeSilver2007Skin
- org.jvnet.substance.skin.RavenGraphiteGlassSkin
- org.jvnet.substance.skin.RavenGraphiteSkin
- org.jvnet.substance.skin.RavenSkin
- org.jvnet.substance.skin.SaharaSkin
Ahora aplicaremos un theme, para esto solo hace falta agregar lo siguiente DESPUES DE HABER APLICADO UN SKIN:
SubstanceLookAndFeel.setCurrentTheme( "org.jvnet.substance.theme.SubstanceAquaTheme" );
el tema cambia los colores y agrega efectos de resaltado sobre los elementos de la ventana al pasar el puntero del mouse,todo esto preservando el diseño de los botones del skin:
Aqui la lista de temas, estos se pasan como parametro tipo String al metodo SubstanceLookAndFeel.setCurrentTheme() :
- org.jvnet.substance.theme.SubstanceAquaTheme
- org.jvnet.substance.theme.SubstanceBarbyPinkTheme
- org.jvnet.substance.theme.SubstanceBottleGreenTheme
- org.jvnet.substance.theme.SubstanceBrownTheme
- org.jvnet.substance.theme.SubstanceCharcoalTheme
- org.jvnet.substance.theme.SubstanceCremeTheme
- org.jvnet.substance.theme.SubstanceDarkVioletTheme
- org.jvnet.substance.theme.SubstanceDesertSandTheme
- org.jvnet.substance.theme.SubstanceEbonyTheme
- org.jvnet.substance.theme.SubstanceJadeForestTheme
- org.jvnet.substance.theme.SubstanceLightAquaTheme
- org.jvnet.substance.theme.SubstanceLimeGreenTheme
- org.jvnet.substance.theme.SubstanceNegatedTheme
- org.jvnet.substance.theme.SubstanceOliveTheme
- org.jvnet.substance.theme.SubstanceOrangeTheme
- org.jvnet.substance.theme.SubstancePurpleTheme
- org.jvnet.substance.theme.SubstanceRaspberryTheme
- org.jvnet.substance.theme.SubstanceSaturatedTheme
- org.jvnet.substance.theme.SubstanceSepiaTheme
- org.jvnet.substance.theme.SubstanceSteelBlueTheme
- org.jvnet.substance.theme.SubstanceSunGlareTheme
- org.jvnet.substance.theme.SubstanceSunsetTheme
- org.jvnet.substance.theme.SubstanceTerracottaTheme
Las marcas de agua o watermark son imagenes o diseños (patrones) que se aplican como fondo a una ventana, acontinuacion aplicaremos un watermark a nuestra ventana de prueba, agregamos lo siguiente:
//marca de agua, un prediseño de substance SubstanceLookAndFeel.setCurrentWatermark("org.jvnet.substance.watermark.SubstanceBinaryWatermark");
y asi es como luce hasta el momento nuestra ventana:
La lista de watermark para substance 4.3:
- org.jvnet.substance.watermark. SubstanceBubblesWatermark
- org.jvnet.substance.watermark. SubstanceBinaryWatermark
- org.jvnet.substance.watermark. SubstanceCopperplateEngravingWatermark
- org.jvnet.substance.watermark. SubstanceCrosshatchWatermark
- org.jvnet.substance.watermark. SubstanceFabricWatermark
- org.jvnet.substance.watermark. SubstanceGenericNoiseWatermark
- org.jvnet.substance.watermark. SubstanceImageWatermark
- org.jvnet.substance.watermark. SubstanceKatakanaWatermark
- org.jvnet.substance.watermark.SubstanceLatchWatermark
- org.jvnet.substance.watermark. SubstanceMagneticFieldWatermark
- org.jvnet.substance.watermark. SubstanceMarbleVeinWatermark
- org.jvnet.substance.watermark.SubstanceMazeWatermark
- org.jvnet.substance.watermark. SubstanceMetalWallWatermark
- org.jvnet.substance.watermark.SubstanceNoneWatermark
- org.jvnet.substance.watermark.SubstanceNullWatermark
- org.jvnet.substance.watermark. SubstancePlanktonWatermark
- org.jvnet.substance.watermark. SubstanceStripeWatermark
- org.jvnet.substance.watermark. SubstanceWoodWatermark
Para usar una imagen como watermark agregamos lo siguiente:
SubstanceLookAndFeel.setCurrentWatermark( new SubstanceImageWatermark("/home/fredy/tux.jpg"))
asi es como se ve:
Como se puede notar en la parte del codigo donde se agrega una imagen como watermark, se crea un objeto de tipo SubstanceImageWatermark al cual se le pasa la ruta de la imagen que se usara como fondo, despues de esto ese mismo objeto es pasado como parametro al metodo SubstanceLookAndFeel.setCurrentWatermark() el cual se encarga de colocar la imagen como watermark.
Substance permite cambiar la opacidad de la imagen, usando la siguiente linea despues de haber aplicado un watermark:
SubstanceLookAndFeel.setImageWatermarkOpacity(new Float(0.3));
donde al objeto float le podemos dar valores entre 0 y 1 para indicar la cantidad de opacidad que tendra la imagen.
Como ven es muy facil cambiar el look and feel de nuestras aplicaciones java, sin sacrificar el codigo.
Espero sea de utilidad.
En el inicio de este post decia que existe muy poca (demaciado poca) documentacion en español de este proyecto, lo seguire estudiando y chanse para la proxime les este mostrando como usar la api para diseñar nuestro propio tema o skin 😉
Saludos y hasta la proxima.
Excelent !!
exelente no habia encontrado un sitio donde explicaran el uso del fremework..
muy wena y detallada explicacion Saludos…
tengo un problema no me carga los metodos setcurrenttheme() ni el otro setcurretnwatermark() me dice que dont can found simbol
si saben porque el error lr agrdesco su ayuda
@andrew
Cual es la version de Substance que estas usando…??
Hola , muchas gracias por la información me fue de gran ayuda
Excelente Aporte muy bueno tienes mucha razon al decir que existe poca documentacion al respecto ,muy interesante y muy util.. graciasss
super interesante
Muy bien amigo esta eres reteinteligente
Tengo un pequeño roblemita no me toma el watrmark no se si tengo roblemas a la hora de colocarle la direccion pero no me toma la imagen. a ver si me ayudas con eso porfa =)
me parece muy interesante he intentado de descargarlo
me pase dias enteros buscando el link.
No carga el sitio de substance.dev.net por favor agradeceria que coloque el link de descarga gracias… 😦
es URGERNTE
Hola que tal..interesante aporte..la verdad gracias..era el toke estilistico que neceitaba aplicar a mis proyectos…aunque tengo un pequeño problema..existe una nueva version ..en la que no existen los metodos que nombras..sabes como hacer ??..otra cosa mas..cuando trato de hacer mi jar me arroja un error…podrias ayudarme con eso..gracias de antemano…
Soy yo..con la novedad que solucione mi problema..para quienes les interese..pues cuando se quiera agregar el efecto substance al jar pues tienen que modificar el archivo manifest(Meta-Inf) que hay dentro del jar , teniendo esta forma:
Manifest-Version: 1.0
Ant-Version: Apache Ant 1.7.1
Main-Class: ClasePrincipal
Class-Path: lib/substance.jar
Created-By: 14.2-b01 (Sun Microsystems Inc.)
Gracias por tu aporte ..Bye
bien, yo logre hacer mi aplicacion con ese look and feel, pero tengo un problema, que solo lo aplica al frame principal y en los demas no, es decir el skin es solo para la primera ventana y todos sus componentes, pero cuando abro otra venata no se aplica.
¿por qué?
espero la respuesta
gracias y saludos
@Alan
Hola, Para que el skin sea aplicado a una ventana (me refiero a un Frame) diferente a la principal, se debe escribir las lineas necesarias para aplicar el skin justo antes de que la ventana sea creada.
En otras palabras, por cada ventana que crees con Frame, debes aplicar el skin, no es el caso para las ventanas de dialogos o mensajes (JOptionPane.show…. ), estas toman el skin de el frame padre que se les paso como parametro.
Saludos…
excelente es lo que estaba buscando
Excelente turorial maestro … me sirvio mucho
Otra cosa…
UIManager.setLookAndFeel(«org.jvnet.substance.skin.SubstanceBusinessBlackSteelLookAndFeel»);
en el main de tu aplicacion hara que toda la aplicacion tome el look and feel
Una pregunta que tal si. ¿Si la puedo usar con el Dr Java? Alguna sugerencia.
Claro que la puedes usar. Substance no depende de los IDEs (Netbeans, Eclipse, DrJava, JCreator, etc.), puedes usar el que mas se acomode a tus necesidades.
Siempre y cuando la biblioteca (Substance.jar) este dentro del classpath de tu proyecto.
Solo hace falta referenciar desde las clases de tu aplicacion las clases de la biblioteca, tal como lo vez en los ejemplos que coloque en el articulo.
Saludos y suerte!!!
Que tal, muy bueno el articulo y bien explicado, pero tengo una duda, es posible aplicarle un look and feel diferente a ventanas diferentes en una misma aplicacion?
Si, esto es posible, como lo decia en comentarios anteriores y en el mismo articulo, antes de crear una ventana debemos colocar el look and feel que esta tendra, se puede hacer para cada una de las ventanas, no es posible para las cajas de dialogo ya que estas toman el look and feel del Frame que es su padre.
amigo de que forma puedo hacer para que el look&feel quede compilado con el programa o alguna forma de que cuando lo corra en otra PC haga uso de look & feel
muchas gracias
Una consulta, hice la prueba y me funciono perfectamente en mi proyecto, pero cuando lo envio a un amigo para q lo abra en su maquina, se lo envio en un JAR, a el no le abre!!!… es necesario q se tenga la libreria en cada equipo en el cual se ejecute el proyecto desde un JAR???… gracias por la pronta respuesta 😛
Para que el jar pueda hacer uso de la biblioteca de substance, esta debe acompañar al jar. En otras palabras para distribuir tu aplicación con terceras personas debes pasar junto con ella todas las bibliotecas que tu aplicación use… crea una carpeta llamada «lib» (sin las comillas) en el directorio donde tienes el jar y dentro de ella pegas la biblioteca «Substance.jar», en el Class-Path del archivo MANIFEST(Meta-Inf) debes tener la ruta de la carpeta con la libreria como se muestra a continuacion:
Manifest-Version: 1.0
Main-Class: ClasePrincipal
Class-Path: lib/substance.jar
Created-By: 14.2-b01 (Sun Microsystems Inc.)
Ahora, cada vez que quieras pasar tu programa a alguien, el jar de tu aplicación debe ir acompañado de la carpeta «lib».
Saludos.
simplemente buenazo información clara y comisa