Ventanas con estilo gracias a Substances

Hoy explicaré en simples pasos cómo usar Substance en nuestras aplicaciones, que de hecho es una muy buena forma de darle estilo a nuestras ventanas

¿Que haremos?

Crearemos una ventana simple(JFrame, JTextField, JButton) a código. Sin ayuda de Netbeans u otro programa que solo tienes que arrastrar componentes, que de hecho es una muy buena forma, pero el motivo es enseñar.

Primero que todo haremos una nueva clase llamada «JVentana» que como el nombre lo indica tendrá lo suficiente para crear una ventana y también incluiremos un evento al botón:

public final class JVentana{
...}

Ahora agregamos 3 atributos de tipo JFrame, JTextField, JButton:

private JFrame Frame_principal;
private JTextField textField_texto;
private JButton button_saludo;

Siguiendo de lo antes realizado agregaremos un método llamado «inicializar», que inicializará los atributos que declaramos anteriormente:

public void inicializar(){
  Frame_principal = new JFrame("Sethcrofts para http://www.lineadecodigo.com");
  textField_texto = new JTextField();
  textField_texto.setColumns(40);
  button_saludo = new JButton("Saludar");
}

Explicación del método inicializar:

1. Creamos el JFrame asigándole un nombre en su constructor
2. Creamos el JTextField
3. Seteamos el JTextField para que sea mas largo (por columnas)
4. Creamos el JButton

Siguiendo lo anterior iremos a crear otro método llamado «agregarComponentes»:

public void agregarComponentes(){
  Frame_principal.add(textField_texto);
  Frame_principal.add(button_saludo);
  Frame_principal.setLayout(new FlowLayout());
  Frame_principal.setVisible(true);
  Frame_principal.setResizable(false);
  Frame_principal.pack();
}

Explicación del método agregarComponentes:

1. Agregamos el JTextField creado al FramePrincipal
2. Agregamos el JButton creado al FramePrincipal
3. Seteamos nuestra ventana principal al modo FlowLayout (Alterará la forma en que se ubicarán los componentes en el Frame)
4. Hacemos visible la ventana principal
5. Seteamos la opción de redimensionar la ventana (true=SI, false=NO)
6. Seteamos la ventana principal, para que se adapte al tamaño de nuestros componentes para evitar espacios innesesarios

Ahora lo que nos queda hacer por último es programar nuestro evento para que al hacer click en el botón se genere un mensaje:

public void asignarEventos(){
  button_saludo.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent e) {
        if(textField_texto.getText().equalsIgnoreCase("")){
            JOptionPane.showMessageDialog(null, "Ingrese un nombre.");
        }else{
            JOptionPane.showMessageDialog(null, "Hola: "+textField_texto.getText());
        }
    }
  });
}

Explicación del método asignarEventos:

1. Asignamos un evento (ActionListener) al botón (button_saludo), como su nombre lo indica escuchará cada vez que se presione.
2. Agregamos el método actonPerformed (Si usas Netbeans esa parte se hace por defecto, así que solo tendrás que asignar instrucciones)
3. Preguntamos que si el textField_texto está vacio que realize la siguiente acción
4. Desplegamos un mensaje en pantalla (como un alert() en Javascript, MessageBox en .NET )
5. Si no es así, entonces saludará al nombre ingresado en el text

Y bueno ya casi terminando crearemos nuestro constructor:

public JVentana(){
  inicializar();
  agregarComponentes();
  asignarEventos();
}

Explicación del constructor:

1. Llamamos al método inicializar
2. Llamamos al método agregarComponentes
3. Llamomos al método asignarEventos

Es importante la posición en que pones las llamada a los métodos, porque si pones por ejemplo agregarComponentes se generará un error ya que aún no se han creado los componente

Nuestra clase sería verse algo así :

package ejemplosubstance;

import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JTextField;

public final class JVentana{

  private JFrame Frame_principal;
  private JTextField textField_texto;
  private JButton button_saludo;

  public JVentana(){
    inicializar();
    agregarComponentes();
    asignarEventos();
  }

  public void inicializar(){
    Frame_principal = new JFrame("Sethcrofts para http://www.lineadecodigo.com");
    textField_texto = new JTextField();
    textField_texto.setColumns(40);
    button_saludo = new JButton("Saludar");
  }

  public void agregarComponentes(){
    Frame_principal.add(textField_texto);
    Frame_principal.add(button_saludo);
    Frame_principal.setLayout(new FlowLayout());
    Frame_principal.setVisible(true);
    Frame_principal.setResizable(false);
    Frame_principal.pack();
  }

  public void asignarEventos(){
    button_saludo.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        if(textField_texto.getText().equalsIgnoreCase("")){
          JOptionPane.showMessageDialog(null, "Ingrese un nombre.");
        }else{
          JOptionPane.showMessageDialog(null, "Hola: "+textField_texto.getText());
        }
      }
    });
  }
}

Luego que tengamos todo listo viene la parte principal de éste tutorial por así decirlo «darle estilo a nuestras ventanas». Para ellos vamos a utilizar Substances.

Lo primero que tenemos que hacer es descargarnos el jar de Substances.

Descargar Substances Version: 5.3

Luego que lo tenemos descargado lo añadimos al proyecto, desconosco la manera en que algunas aplicaciones hacen éste proceso pero Netbeans lo hace de la siguiente manera

1. Botón derecho sobre Libraries
2. Add Jar/Folder (Agregar JAR / Carpeta)
3. Buscamos y seleccionamos nuestro JAR descargado

Luego lo único que tenemos que hacer es nuestro honorable MAIN que quedaría de la siguiente manera:

public static void main(String[] args) {
  java.awt.EventQueue.invokeLater(new Runnable() {
    public void run() {
      try {
        Frame.setDefaultLookAndFeelDecorated(true);
        SubstanceLookAndFeel.setSkin("org.jvnet.substance.skin.OfficeSilver2007Skin");
        new JVentana();
      } catch (Exception e) {
        JOptionPane.showMessageDialog(null, "Error: "+e);
      }
    }
  });
}

Explicaré la dos lineas que son nuevas para ustedes. Sí, «JFrame.setDefaultLookAndFeelDecorated» y «SubstanceLookAndFeel.setSkin»

1. La primera setea el Frame que vendrá luego a que adopte el decorado de Subtances y que decorado tendrá.
2. Bueno la segunda linea de encarga del decorado en éste caso es «officeSilver2007Skin»

Si todo va bien deberíamos ver algo así

Publicaciones relacionadas:

Crear un componente JTextField Un juego sencillo con Java Swing Click en botón con Java Swing Detectar botón pulsado con Java Swing Añadir un tooltip a un JButton