Substance : Cambia el Skin de tus aplicaciones Java

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.