Substance : Cambia el Skin de tus aplicaciones Java

9 08 2009

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.

Ventana de prueba usando Nimbus Look and Feel

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:Pantallazo

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" );

theme

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");

watermark
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.

About these ads

Acciones

Información

25 respuestas

1 09 2009
bug_0v3r

Excelent !!

8 09 2009
andrew

exelente no habia encontrado un sitio donde explicaran el uso del fremework..

muy wena y detallada explicacion Saludos…

8 09 2009
andrew

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

19 09 2009
r4mfr3

@andrew
Cual es la version de Substance que estas usando…??

20 09 2009
Jorge

Hola , muchas gracias por la información me fue de gran ayuda

24 09 2009
manuelr

Excelente Aporte muy bueno tienes mucha razon al decir que existe poca documentacion al respecto ,muy interesante y muy util.. graciasss

24 09 2009
manuelr

super interesante

29 09 2009
saro

Muy bien amigo esta eres reteinteligente

29 09 2009
Gustavo

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 =)

15 10 2009
estrella

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

15 10 2009
Elizabeth Manrique

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…

15 10 2009
Elizabeth Manrique

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

2 12 2009
Alan

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

3 12 2009
r4mfr3

@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…

3 01 2010
lupillo

excelente es lo que estaba buscando

7 01 2010
Claudio

Excelente turorial maestro … me sirvio mucho

7 01 2010
Claudio

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

22 03 2010
ismael

Una pregunta que tal si. ¿Si la puedo usar con el Dr Java? Alguna sugerencia.

22 03 2010
r4mfr3

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!!!

24 04 2010
marcelo

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?

24 04 2010
r4mfr3

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.

14 06 2010
Andres

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

29 09 2010
Alvaro

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 :P

30 09 2010
r4mfr3

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.

16 07 2011
Jaime Cruz Mendoza

simplemente buenazo información clara y comisa

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: