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


4
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:
    1
  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.
    2
  8. Hacemos algo parecido pero para los botones de maximizar y minimizar...
    3
  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í...
    4
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...
netbeans-logo[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!

10 comentarios:

  1. Anónimo dijo...:

    El archivo esta protegido

  1. Monillo007 dijo...:

    La contraseña es:

    http://monillo007.blogspot.com

    Saludox.

  1. Anónimo dijo...:

    gracias

  1. SGA dijo...:

    como haces para darle un tamño x cualquiera como el normal jframe

  1. Luis Navarro dijo...:

    Qué tal,

    Puedes hacerlo con los métodos setBounds() o setSize() directamente.

    Saludos.

  1. Dec dijo...:

    te hago una consulta xq no lo vi en ningun lado... ubiquemosno... tengo un JFrame q es el q tiene el metodo principal... y tengo un JInternalFrame... lo q necesito es que el usuario se loguee del JinternalFrame con sus datos (usu y pass) y que active los botones de acceso en el JFrame q estan inactivos justamente por estar bloqueados antes del loguin...ademas no puedo actualizar el jLabel donde me deberia mostrar el nombre del usuario que se loguea pasandolo como parametro... intente de mil maneras y no puedo... sabes si se puede??

  1. Anónimo dijo...:

    Hola una preguntita, recien mire el post y me gustaria saber como se le puede agregar un menu a este frame, porque he mirado muchas opciones y no he podido, de ser posible porfa decime como. gracias.

  1. Luis Navarro dijo...:

    En Java, concretamente Swing, existe un elemento que te ayuda a agregar barras de menús, se llama JMenuBar, puedes utilizarlo desde el NetBeans arrastrándolo a un panel o ventana.

    Saludos.

  1. Anónimo dijo...:

    Antes que nada te agradezco por el muy buen tutorial, me ha servido de mucho.

    Bueno, tengo una duda, he realizado el proyecto en Eclipse, y todo bien, sin embargo, cuando maximizo la ventana los Label que contienen el titulo y los botones se quedan en la misma posición y el Panel no se redimensiona y toma el nuevo tamaño de la ventana, ni los botones se colocan en la posición donde deberían estar ¿A que se debe esto?

    Agradezco tu ayuda de antemano. Saludos.

  1. carlos mario dijo...:

    Muchas gracias :)

    Me sirvió

Publicar un comentario

Este es un espacio abierto, puedes escribir lo que gustes respetando los siguientes puntos:

1.- Lo que escribas esté relacionado con el post, si gustas contactarme puedes hacerlo aqui.

2.- Todo es cuestionable, aunque ten en cuenta que existen formas de hacerlo, evita las agresiones y revisa tu lenguaje antes de publicar un comentario.

3.- Siempre hay tres verdades: tu verdad, mi verdad y la verdad, por lo que opiniones diferentes no necesariamente son equivocadas.

4.- Los comentarios son una forma de discusión abierta, por lo que al publicar uno, implícitamente entras a una discusión, con todo lo que esto representa.

5. Me reservo el derecho de eliminar comentarios que no respeten las condiciones mencionadas anteriormente.

Toma en cuenta que puedes utilizar emoticones en tu comentario, para ver una lista de los disponibles da clic en este enlace.

 
Monillo007 © 2010 | Designed by Trucks, Manual Bookmarking | Elegant Themes