Registrarse

[Casidiablo]

Cómo crear interfaces gráficas con Look And Feel en Java

Java posee una API (Interfaz para porgramación de Aplicaciones) que es la encargada de manipular las interfaces gráficas hechas con Swing. Esta nos permite crear GUI's realmente bonitas. Pero primero necesitamos tener unos conceptos claros, como por ejemplo que es Swing y eso del Java look and feel (llamado a veces "Metal").

Los componentes de Swing están escritos en Java, sin ningún código de especificación de ventanas. Esto facilita la creación de interfaces gráficas sin tomar en cuenta el sistema de graficación de ventanas donde se trabaje, y simplificando el desarrollo de aplicaciones. Swing además soporta una arquitectura de visualización (Look And Feel). Ésta caracterí­stica dota a los usuarios con la habilidad de cambiar la apariencia de una aplicación sin reiniciarla y sin que el desarrollador se tenga que cambiar por completo su conjunto de subclases.

Java Look And Feel (de ahora en adelante J&F) es un API multiplataforma proporcionada por JavaSoft. Voy a ser breve, así­ que si necesitas información especí­fica puedes buscar en san google.
Java L&F implementa todas las funcionalidades básicas de Swing, pero tambén se extiende en otras áreas incluyendo:

• Temas
• Sliders (barras de selección de rangos)
• Toolbars (Barras de herramientas)
• Trees (arboles de contenido)

Ahora, y para ver de que estamos hablando vamos a tomar como ejemplo un programa hecho por los maestros del L&F: Michael Albers, Tom Santos, Jeff Shapiro y Steve Wilson.

El programa lo puedes encontrar en los demos que se encuentran en los JSDK. Vas a donde tienes instalado el SDK de Java y buscas la carpeta demo/jfc/Metalworks, allí­ encontrarás la aplicación que vamos a tomar como objeto de ejemplo.

Para ejecutar el programa que ya está compilado (Metalworks.jar), digitas desde una shell:

java -jar Metalworks.jar

Y lo que veras es un programa como este (ten en cuenta que según tu versión del SDK el programa puede cambiar o no estar; yo utilizo el J2SDK 1.5):

Como puedes observar es una interfaz gráfica realmente bonita y llamativa. Aunque es la que viene por defecto con el L&F en su versión 5. Puedes jugar con este programita que te dará más de una sorpresa agradable. Por ejemplo vas al menú Theme y seleccionas el que quieras, veras cosas como estas:

La interfaz de usuario cambia de aspecto sin necesidad de recompilar o reiniciar la aplicación, es decir, cambia en tiempo de ejecución. Pero lo que nosotros queremos es saber como hacer esto, veámos:


Creando un JFrame con el Look And Feel activado

Esto es muy sencillo de hacer. Lo único que tenemos que hacer es activar el Look And Feel, pasando true como parámetro al método estático setDefaultLookAndFeelDecorated de JFrame y de JDialog. Por ej.:

Código:

//Ejemplo1Look .java
import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
public class Ejemplo1Look extends JFrame
{
   public Ejemplo1Look()
   {
      super("Ejemplo 1");
      JButton boton = new JButton("Mostrar dialogo");
      boton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e){
               JOptionPane.showMessageDialog(null,
               "Y así­ se ve un cuadro de dialogo de error",
               "Mensaje",JOptionPane.ERROR_MESSAGE);
            }
         }
      );
      getContentPane().add(new JLabel("Asi se ve un Frame"),
         BorderLayout.NORTH);
      getContentPane().add(boton);
      setSize(200,80);
      setVisible(true);
   }
   public static void main(String args[])
   {
      JFrame.setDefaultLookAndFeelDecorated(true);
      JDialog.setDefaultLookAndFeelDecorated(true);
      Ejemplo1Look ventana = new Ejemplo1Look();
      ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   }
}

Este programa tiene la siguiente salida:

Creando estilos visuales a partir de archivos de texto plano

Este es uno de los tantos métodos para crear estilos o temas y consiste en crear un archivo de texto plano, que contendrá la configuración de visualización. Un ejemplo sencillo puede ser este:

Código:

#Aquí­ puedes colocar comentarios
name=Payaso
primary1=200,0,66
primary2=0,0,255
primary3=0,255,0
secondary1=255,255,0
secondary2=0,255,255
secondary3=255,0,255
black=255,255,200
white=25,80,150

Puedes usar comentarios para documentar el tema; estos deben comenzar con el sí­mbolo numeral (#). Y la sintaxis del tema es nombreEtiqueta=valor. Vamos a ver que significa cada etiqueta:

name=Payaso indica que el tema se llama Payaso.
primary1=200,0,66 es el color del borde externo
primary2=0,0,255 es el color del borde interno y el foco
primary3=0,255,0 es el color de la barra de titulo
secondary1=255,255,0 color del borde de los botones, labels, etc
secondary2=0,255,255 color de los botones al estar presionados
secondary3=255,0,255 color de fondo de los botones, labels, etc
black=255,255,200 color de las letras sobre las cajas de texto, etc
white=25,80,150 color del fondo de las cajas de texto, areas, etc

El programa que utiliza este archivo de estilo es:

Código:

//Ejemplo2Look .java
import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
import java.io.*;
import javax.swing.plaf.metal.*;
public class Ejemplo2Look extends JFrame
{
   public Ejemplo2Look()
   {
      super("Ejemplo 2");
      JButton boton = new JButton("Cargar tema");
      boton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e){
               cargarTema();
            }
         }
      );
      getContentPane().add(boton);
      getContentPane().add(new JLabel("Así­ se ven las labels"), BorderLayout.NORTH);
      getContentPane().add(new JTextField("Y así­ las cajas de texto"), BorderLayout.SOUTH);
      getContentPane().add(new JScrollPane(new JTextArea("Area de texto")), BorderLayout.WEST);
      getContentPane().add(new JSlider(SwingConstants.VERTICAL, 0, 200, 10 ),  BorderLayout.EAST);
      setSize(400,200);
      UIManager.addPropertyChangeListener(new UISwitchListener((JComponent)getRootPane()));
      setVisible(true);
   }
   public void cargarTema()
   {
      MetalTheme miTema = null;
      try{
         InputStream flujoEntrada = getClass().getResourceAsStream("Tema.theme");
         miTema =  new PropertiesMetalTheme(flujoEntrada);
      }catch(NullPointerException npe) {System.out.println(npe);}
      MetalLookAndFeel.setCurrentTheme(miTema);
      try{
         UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
      }catch (Exception ex){
         System.out.println("Falló la carga del tema");
         System.out.println(ex);
      }
   }
   public static void main(String args[])
   {
      UIManager.put("swing.boldMetal", Boolean.FALSE);
      JFrame.setDefaultLookAndFeelDecorated(true);
      JDialog.setDefaultLookAndFeelDecorated(true);
      Toolkit.getDefaultToolkit().setDynamicLayout(true);
      System.setProperty("sun.awt.noerasebackground","true");
      try{
         UIManager.setLookAndFeel(new MetalLookAndFeel());
      }catch ( UnsupportedLookAndFeelException e ){
         System.out.println ("Metal Look & Feel no es soportada en esta plataforma");
         System.exit(0);
      }
      Ejemplo2Look ventana = new Ejemplo2Look();
      ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   }
}

Esta es la salida del programa, y sí­, ya se que es horrible, pero es la única forma de mostrar bien para que es cada etiqueta:

Ahora, antes que se me olvide, tengo que aclarar algo. Para que el programa funcione perfectamente tenemos que usar dos programas creados por el maestro Steve Wilson: PropertiesMetalTheme.java y UISwitchListener.java.

PropertiesMetalTheme, es una clase que crea un flujo hacia el archivo de texto que contenga la configuración del tema, y carga las propiedades que se encuentren allí­. No voy a explicar en detalle el funcionamiento de esta clase ya que eso está fuera de los lí­mites de este artí­culo, y además es muy fácil de comprender.

UISwitchListener, es una clase que permite cambiar la interfaz de usuario en tiempo de ejecución, sin problemas inesperados.


Creando estilos visuales simples a partir de clases

Bueno, ahora vamos a ver una manera de crear estilos visuales a partir de un programa (una clase) hecho en Java. El primer programa que vamos a tomar como ejemplo es EstiloHalloween.java:

Código:

//Ejemplo simple de tema en clase
//EstiloHalloween .java
import javax.swing.plaf.*;
import javax.swing.plaf.metal.*;
import javax.swing.*;
public class EstiloHalloween extends DefaultMetalTheme
{
   public String getName() { return "Halloween"; }
   
   private final ColorUIResource primary1 = new ColorUIResource(204, 102, 0);
   private final ColorUIResource primary2 = new ColorUIResource(255, 0, 0);
   private final ColorUIResource primary3 = new ColorUIResource(255, 204,102);
   
   protected ColorUIResource getPrimary1() { return primary1; }
   protected ColorUIResource getPrimary2() { return primary2; }
   protected ColorUIResource getPrimary3() { return primary3; }
}

Como ven todo es muy fácil; simplemente declaramos una clase que herede de DefaultMetalTheme, y creamos tres objetos de la clase ColorUIResource que sean privados (private) y constantes (final). Cada uno vá a simbolizar un color para la interfaz de usuario. Si no comprendes bien es porque no has leí­do lo de primary1, primary2, etc. allí­ arriba. Los objetos ColorUIResource los inicializamos con tres números separados por comas que representan un color en formato RGB.
Por último declaramos tres métodos protected que retornen el valor de los  objetos ColorUIResource.

El programa que utiliza la clase EstiloHalloween es:

Código:

// Ejemplo3Look .java
import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
import javax.swing.plaf.metal.*;
public class Ejemplo3Look extends JFrame
{
   public Ejemplo3Look()
   {
      super("Ejemplo 3 - Halloween");
      JButton boton = new JButton("Mostrar dialogo");
      boton.addActionListener(new ActionListener(){
            public void actionPerformed(ActionEvent e){
               JOptionPane.showMessageDialog(null,
               "Y así­­ se ve un cuadro de dialogo de alerta",
               "Mensaje",JOptionPane.WARNING_MESSAGE);
            }
         }
      );
      getContentPane().add(new JLabel("Asi se ve un Frame"), BorderLayout.NORTH);
      getContentPane().add(boton);
      setSize(200,80);
      setVisible(true);
   }
   public static void main(String args[])
   {
      MetalLookAndFeel.setCurrentTheme(new EstiloHalloween());
      try{
         UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
      } catch (Exception ex) {
         System.out.println("Falló la carga del tema");
         System.out.println(ex);
      }
      JFrame.setDefaultLookAndFeelDecorated(true);
      JDialog.setDefaultLookAndFeelDecorated(true);
      Ejemplo3Look ventana = new Ejemplo3Look();
      ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   }
}

Como puedes ver estamos utilizando únicamente los tres colores primarios para interfaces gráficas (primary1, primary2 y primary3). La salida del programa es:

Pero ahora vamos a ver un programa que utiliza todas las combinaciones de colores; la clase es EstiloHalloween2:

Código:

// EstiloHalloween2.java
import javax.swing.plaf.*;
import javax.swing.plaf.metal.*;
import javax.swing.*;
public class EstiloHalloween2 extends DefaultMetalTheme
{
   public String getName() { return "Halloween"; }
   
   private final ColorUIResource primary1 = new ColorUIResource(204, 102, 0);
   private final ColorUIResource primary2 = new ColorUIResource(255, 0, 0);
   private final ColorUIResource primary3 = new ColorUIResource(255, 204, 102);

   private final ColorUIResource secondary1 = new ColorUIResource( 111,  111,  111);
   private final ColorUIResource secondary2 = new ColorUIResource(255, 204, 102);
   private final ColorUIResource secondary3 = new ColorUIResource(204, 102, 0);

   private final ColorUIResource black = new ColorUIResource(255, 255, 255);
   private final ColorUIResource white = new ColorUIResource(0, 0, 0);

   protected ColorUIResource getPrimary1() { return primary1; }
   protected ColorUIResource getPrimary2() { return primary2; }
   protected ColorUIResource getPrimary3() { return primary3; }

   protected ColorUIResource getSecondary1() { return secondary1; }
   protected ColorUIResource getSecondary2() { return secondary2; }
   protected ColorUIResource getSecondary3() { return secondary3; }
   
   protected ColorUIResource getBlack() { return black; }
   protected ColorUIResource getWhite() { return white; }
}

No explico esta clase ya que tiene la misma escencia de la primera, solo que, aparte de utilizar primary1, primary2 y primary3, utiliza secondary1, secondary2 y secondary3, y el color de fondo de las cajas de texto (white) y de las letras (black).

La aplicación que utiliza la clase EstiloHalloween2 es esta:

Código:

// Ejemplo4Look .java
import javax.swing.*;
import java.awt.event.*;
import java.awt.*;
import java.io.*;
import javax.swing.plaf.metal.*;
public class Ejemplo4Look extends JFrame
{
   public Ejemplo4Look()
   {
      super("Ejemplo 4 - Halloween");
      getContentPane().add(new JButton("Los botones XD"));
      getContentPane().add(new JLabel("Así­ se ven las labels"), BorderLayout.NORTH);
      getContentPane().add(new JTextField("Y así­ las cajas de texto"), BorderLayout.SOUTH);
      getContentPane().add(new JScrollPane(new JTextArea("Area de\ntexto")), BorderLayout.WEST);
      getContentPane().add(new JSlider(SwingConstants.VERTICAL, 0, 200, 10 ),  BorderLayout.EAST);
      setSize(400,200);
      setVisible(true);
   }
   public static void main(String args[])
   {
      MetalLookAndFeel.setCurrentTheme(new EstiloHalloween2());
      try{
         UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
      }catch (Exception ex){
         System.out.println("Falló la carga del tema");
         System.out.println(ex);
      }
      JFrame.setDefaultLookAndFeelDecorated(true);
      JDialog.setDefaultLookAndFeelDecorated(true);
      try{
         UIManager.setLookAndFeel(new MetalLookAndFeel());
      }catch ( UnsupportedLookAndFeelException e ){
         System.out.println ("Metal Look & Feel no es soportada en esta plataforma");
         System.exit(0);
      }
      Ejemplo4Look ventana = new Ejemplo4Look();
      ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   }
}

Esta es la apriencia del programa:

Y de nuevo: mil disculpas si se víé horrible, pero no soy diseíñador así­ que no me jodan XD.

Adjunto la versión en PDF
Y los ejercicios realizados (abajo)

Bien, espero que les haya gustado el artí­culo, y si estás buscando algo más avanzado puedes buscar entre la documentación en lí­nea de Java o en los demos del SDK. Y cualquier duda, sugerencia, insultos y demás, me pueden escribir al correo castidiablo@gmail.com, o por PM.

Umm, se me olvidaba algo: podeis hacer con el tuto lo que quieras: copias, modificaciones, ampliaciones, etc. ¿derechos de autor? mis polainas.

Saludos!!!

[Toxico]

cuando descargo el archivo, pone que esta el archivo corrupto 

[deya]

cuando descargo el archivo, pone que esta el archivo corrupto 

Sip, igual a mi. Seria bueno que lo corrigieran.

Salu2 

Ah, y excelente manual. Felicidades. ! ! !

[Casidiablo]

Sep, además ni salia el tuto en pdf. Pero ya está Solucionado!!!

Gracias por informar. Saludos!!!!

[deya]

Sep, además ni salia el tuto en pdf. Pero ya está Solucionado!!!

Gracias por informar. Saludos!!!!

Hola.

Pues no funciona el link al pdf

Salu2 

[Casidiablo]

Y ahora???

[le_roi]

Las descargas funcionan a la fecha, el archivo no está más corrupto -si es que lo estaba-, en pocas palabras, funcionan las descargas.

Saludos y gracias a Casidiablo.

[apache_scrc]

compadre no entiendo muy bien.. necesito tu ayuda urgente , estoy trabajando con el netbeans!.. te mande un correo!

[Casidiablo]

Mejor has un post con tus dudas (dudas específicas), de esta forma te podremos ayudar entre todos y les sirve a todos.

Un saludo!

[egyware]

Que bueno que coloques tus tutos en el foro 
pero a mi me gustaria saber si se podra  cambiar el estilo de la ventana no me refiero L&F (no los colores) si no cambiarle la forma como lo hace el programa StyleXP, osea inventar un nuevo L&F
xauu