Personalizar la barra de título de una ventana [Java]

Cuando desarrollamos aplicaciones de escritorio en Java normalmente partimos de un objeto JFrame, que es la ventana principal por excelencia en Swing. Si no utilizamos algún LookAndFeel en particular, el aspecto que nos aparece por defecto es un tanto tosco y aburrido. Si utilizamos un LookAndFeel tendremos que configurarlo y conformarnos con lo que éste puede ofrecernos.

Existe una solución práctica (y de poco código) para cambiar el aspecto de la barra de título de una ventana en Java, misma que abordaremos en este artículo.



Creación del Proyecto en NetBeans

1. Lo primero que haremos será crear un proyecto nuevo en NetBeans al que titularemos 'AspectoFrame'.
2. Además del paquete que nos crea por defecto agregaremos uno de nombre 'img' en el cual almacenaremos las imágenes que vamos a utilizar para personalizar la barra.

Definir el aspecto de la ventana

1. Dentro del paquete principal vamos a crear una nueva ventana JFrame dando clic derecho sobre el paquete > Nuevo > JFrame y la llamaremos 'Ventana'.
2. Posteriormente editamos sus propiedades (desde la ventana de Propiedades del lado derecho o dando clic derecho sobre la ventana y seleccionando Propiedades en el menú emergente) y marcamos la propiedad 'undecorated'.
3. Ahora vamos a la paleta y tomamos un JPanel, mismo que arrastramos a nuestra ventana y lo colocamos en la parte superior. Luego cambiamos el tamaño para que ocupe todo el ancho de la ventana y una alto parecido al del título que las ventanas tienen normalmente.
4. Posteriormente editamos las propiedades del Panel para cambiar su color de fondo el que se desee, en mi caso, azul. Tras realizar lo anterior tendremos algo parecido a lo siguiente:
   
5. Una vez realizado lo anterior debes buscar 3 imágenes que nos ayudarán a simular los botones de Cerrar, Maximizar y Minimizar de la ventana, deben de ser de aprox. 15x15 px. Cuando las encuentres debes copiarlas en el paquete 'img' que creamos dentro del proyecto.
6. Ya con las imágenes dentro del paquete agregamos una etiqueta del lado derecho del panel y borramos el texto que contenga.
7. A la etiqueta agregada anteriormente le colocamos la imagen que utilizaremos para simular el botón de Cerrar dando clic derecho sobre la etiqueta > Propiedades > Icon, seleccionamos 'Imagen dentro de proyecto', paquete 'img' y posteriormente la imagen que queremos.
   
8. Hacemos algo parecido pero para los botones de maximizar y minimizar...
   
9. El último elemento que agregaremos será la etiqueta que mostrará el título de la ventana, lo anterior lo haremos colocando una etiqueta dentro del panel que ocupe todo el espacio restante entre los botones y el lado izquierdo de la barra.
10. Una vez agregada la etiqueta cambiamos el tipo, tamaño y color de fuente a nuestra preferencia para que nos quede algo así...
    

Hemos terminado con el aspecto, ahora pasemos al comportamiento.
Arrastrar la ventana...
Para agregar la posibilidad de arrastrar la ventana lo primero que tenemos que hacer es localizar su ubicación en la pantalla en un momento dado, en este caso, al hacer click sobre el panel que sustituirá la barra de título. Para ello definiremos las variables x,y de tipo entero a nivel de clase de la siguiente manera:

    private int x;
    private int y;

Posteriormente damos un click derecho sobre el Panel > Eventos > MousePressed y agregamos el siguiente código al método que se nos generó:

    x = evt.getX();

    y = evt.getY();

Ahora damos nuevamente click derecho sobre el Panel > Eventos > MouseDragged y agregamos el código que nos permitirá arrastrar la ventana:
Point ubicacion = MouseInfo.getPointerInfo().getLocation();//1

    System.out.println("Coordenadas: ("+ubicacion.x+","+ubicacion.y+")");//2
    setLocation(ubicacion.x - x, ubicacion.y - y);//3

Primeramente obtenemos la ubicación del puntero [1], posteriormente la mostramos en consola [2] con el fin de ver cómo se comporta y por último establecemos la nueva ubicación de la ventana [3].

Cerrar, Maximizar / Restaurar, Minimizar...

Para agregar la acción de Cerrar la ventana damos click derecho sobre la etiqueta que tiene la imagen correspondiente y seleccionamos Eventos > Mouse > MouseClicked. Dentro del método generado por NetBeans agregamos una llamada al método dispose() para cerrar la ventana.
private void lbCerrarMouseClicked(java.awt.event.MouseEvent evt) {

dispose();
    }

Posteriormente damos clic derecho sobre la etiqueta que hará las veces de Maximizar / Restaurar la ventana y seleccionamos Eventos > Mouse > MouseClicked. Dentro del método generado por NetBeans agregamos una llamada al metodo restaurarVentana() que crearemos posteriormente...

    private void lbRestaurarMouseClicked(java.awt.event.MouseEvent evt){                                restaurarVentana();
    }

Y una vez hecho esto creamos el método...

    private void restaurarVentana() {
        if(getExtendedState() == JFrame.MAXIMIZED_BOTH){//1
            setExtendedState(JFrame.NORMAL);//2
        }else{
            setExtendedState(JFrame.MAXIMIZED_BOTH);//3
        }
    }

Lo primero que hacemos es verificar el estado actual de la ventana [1], en caso de que esté maximizada la retornamos a su estado normal [2], en caso contrario la maximizamos [3].
Lo siguiente que haremos será agregar el evento MouseClicked a la etiqueta que tiene la imagen que minimizará la ventana y dentro del método generado agregamos el siguiente código.
setExtendedState(JFrame.ICONIFIED);

Maximizar / Restaurar con doble click...

Para poder maximizar la ventana al dar doble clic sobre el panel de título de la misma debemos dar click derecho sobre el panel > Eventos > MouseClicked y dentro del método agregamos el siguiente código:

    if(evt.getClickCount() == 2){//1
            restaurarVentana();//2
    }

Lo primero que hacemos es verificar la cantidad de click's que se dieron sobre el panel[1], en caso de ser 2 hacemos una llamada al método restaurarVentana() [2] que definimos previamente.

Agregar el título a la ventana...
Ahora vamos a sobreescribir el método setTitle() del JFrame para que establezca el título de la ventana, para ello nos vamos a la vista del código fuente y agregamos el siguiente código...
@Override

public void setTitle(String title) {
        super.setTitle(title);
        lbTitulo.setText(title);
    }

En este caso lo único que hacemos es establecer el título en la etiqueta que definimos para ello luego de llamar al método setTitle() original.

Hacer visible la ventana...   
Para visualizar la ventana al ejecutar la aplicación debemos agregar el siguiente código en el constructor por defecto:

setTitle("Mi ventana personalizada");//1
    setLocationRelativeTo(null);//2
    setVisible(true); //3

Lo primero que hacemos es establecer un título a la ventana [1], luego la centramos [2] y por último la hacemos visible [3].
Para que podamos ver nuestra ventana en operación debemos ir a nuestra clase principal y agregar dentro del método main una nueva instancia de la clase Ventana...

    public static void main(String[] args) {
        new Ventana();
    }

Y listo!

Como ya es costumbre puedes descargar el código fuente del proyecto de este tutorial desde el siguiente enlace...

[Descargar Proyecto]
[Contraseña para descomprimir: http://monillo007.blogspot.com]

¿Alguna duda o algo qué decir? Deja tu comentario. ¿Te gustó el artículo? Compártelo desde los botones de Twitter y/o Facebook de la parte superior o Masunéalo desde el botón de la parte inferior.

No dudes en suscribirte (lado derecho de la ventana) y los nuevos artículos llegarán a tu correo electrónico o lector de feeds favorito.

Saludox!