Personalizar la barra de título de una ventana [Java GUI]
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
- Lo primero que haremos será crear un proyecto nuevo en NetBeans al que titularemos 'AspectoFrame'.
- 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
- Dentro del paquete principal vamos a crear una nueva ventana JFrame dando clic derecho sobre el paquete > Nuevo > JFrame y la llamaremos 'Ventana'.
- 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'.
- 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.
- 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:
- 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.
- Ya con las imágenes dentro del paquete agregamos una etiqueta del lado derecho del panel y borramos el texto que contenga.
- 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.
- Hacemos algo parecido pero para los botones de maximizar y minimizar..
- 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.
- 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();
}
El código fuente los tienes aca, los íconos los puedes ver al final, solo bajalo y pruebalo, cualquier duda ponla como comentario.
Para más información de las cases
JFrame
Image
MoiseInfo
IconImage
Point
import java.awt.Image;
import java.awt.MouseInfo;
import java.awt.Point;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
/**
*
* @author Jimbo
*/
public final class BarraT extends javax.swing.JFrame {
/**
* Creates new form BarraT
*/
private int x;
private int y;
public BarraT() { // Los métodos pueden ser sobrecargados
initComponents();
this.setTitle("Ventana Personalizada de Jimbo");
setLocationRelativeTo(null);
}
@Override
public void setTitle(String title) { //setTitle sobreescrito
super.setTitle(title);
this.labelTextoTitulo.setText(title);
}
@Override
public void setIconImage(Image im){ //SetIconImage sobreescrito
super.setIconImage(im);
this.labelIcono.setIcon(new ImageIcon(im));
}
@SuppressWarnings("unchecked")
private void initComponents() {
barraTitulo = new javax.swing.JPanel();
labelCerrar = new javax.swing.JLabel();
labelMaximizar = new javax.swing.JLabel();
labelMinimizar = new javax.swing.JLabel();
labelTextoTitulo = new javax.swing.JLabel();
labelIcono = new javax.swing.JLabel();
setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
setUndecorated(true);
barraTitulo.setBackground(new java.awt.Color(0, 0, 0));
barraTitulo.addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent evt) {
barraTituloMouseClicked(evt);
}
public void mousePressed(java.awt.event.MouseEvent evt) {
barraTituloMousePressed(evt);
}
});
barraTitulo.addMouseMotionListener(new java.awt.event.MouseMotionAdapter() {
public void mouseDragged(java.awt.event.MouseEvent evt) {
barraTituloMouseDragged(evt);
}
});
labelCerrar.setIcon(new javax.swing.ImageIcon(getClass().getResource("gnome_window_close.png")));
labelCerrar.addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent evt) {
labelCerrarMouseClicked(evt);
}
public void mouseEntered(java.awt.event.MouseEvent evt) {
labelCerrarMouseEntered(evt);
}
public void mouseExited(java.awt.event.MouseEvent evt) {
labelCerrarMouseExited(evt);
}
});
labelMaximizar.setIcon(new javax.swing.ImageIcon(getClass().getResource("windows_fullscreen.png")));
labelMaximizar.addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent evt) {
labelMaximizarMouseClicked(evt);
}
});
labelMinimizar.setIcon(new javax.swing.ImageIcon(getClass().getResource("window_down.png")));
labelMinimizar.addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent evt) {
labelMinimizarMouseClicked(evt);
}
});
labelTextoTitulo.setFont(new java.awt.Font("Courier New", 1, 18));
labelTextoTitulo.setForeground(new java.awt.Color(255, 255, 255));
labelTextoTitulo.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
labelIcono.setIcon(new javax.swing.ImageIcon(getClass().getResource("facebook.png")));
javax.swing.GroupLayout barraTituloLayout = new javax.swing.GroupLayout(barraTitulo);
barraTitulo.setLayout(barraTituloLayout);
barraTituloLayout.setHorizontalGroup(
barraTituloLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(javax.swing.GroupLayout.Alignment.TRAILING, barraTituloLayout.createSequentialGroup()
.addComponent(labelIcono, javax.swing.GroupLayout.PREFERRED_SIZE, 40, javax.swing.GroupLayout.PREFERRED_SIZE)
.addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED)
.addComponent(labelTextoTitulo, javax.swing.GroupLayout.DEFAULT_SIZE, 344, Short.MAX_VALUE)
.addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
.addComponent(labelMinimizar, javax.swing.GroupLayout.PREFERRED_SIZE, 32, javax.swing.GroupLayout.PREFERRED_SIZE)
.addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED)
.addComponent(labelMaximizar, javax.swing.GroupLayout.PREFERRED_SIZE, 32, javax.swing.GroupLayout.PREFERRED_SIZE)
.addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
.addComponent(labelCerrar, javax.swing.GroupLayout.PREFERRED_SIZE, 32, javax.swing.GroupLayout.PREFERRED_SIZE))
);
barraTituloLayout.setVerticalGroup(
barraTituloLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(barraTituloLayout.createSequentialGroup()
.addGroup(barraTituloLayout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addComponent(labelMinimizar, javax.swing.GroupLayout.PREFERRED_SIZE, 32, javax.swing.GroupLayout.PREFERRED_SIZE)
.addComponent(labelMaximizar, javax.swing.GroupLayout.PREFERRED_SIZE, 32, javax.swing.GroupLayout.PREFERRED_SIZE)
.addComponent(labelCerrar, javax.swing.GroupLayout.PREFERRED_SIZE, 32, javax.swing.GroupLayout.PREFERRED_SIZE))
.addGap(0, 7, Short.MAX_VALUE))
.addComponent(labelTextoTitulo, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
.addComponent(labelIcono, javax.swing.GroupLayout.PREFERRED_SIZE, 0, Short.MAX_VALUE)
);
javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
getContentPane().setLayout(layout);
layout.setHorizontalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addComponent(barraTitulo, javax.swing.GroupLayout.Alignment.TRAILING, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
);
layout.setVerticalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(layout.createSequentialGroup()
.addComponent(barraTitulo, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
.addGap(0, 277, Short.MAX_VALUE))
);
pack();
}
private void barraTituloMouseDragged(java.awt.event.MouseEvent evt) {
Point ubicacion = MouseInfo.getPointerInfo().getLocation();
setLocation(ubicacion.x - x, ubicacion.y - y);
}
private void barraTituloMousePressed(java.awt.event.MouseEvent evt) {
x = evt.getX();
y = evt.getY();
}
private void barraTituloMouseClicked(java.awt.event.MouseEvent evt) {
if(evt.getClickCount() == 2){
restaurarVentana();
}
}
private void labelMinimizarMouseClicked(java.awt.event.MouseEvent evt) {
setExtendedState(JFrame.ICONIFIED);
}
private void labelMaximizarMouseClicked(java.awt.event.MouseEvent evt) {
restaurarVentana();
}
private void labelCerrarMouseExited(java.awt.event.MouseEvent evt) {
labelCerrar.setIcon(new javax.swing.ImageIcon(getClass().getResource("gnome_window_close.png")));
}
private void labelCerrarMouseEntered(java.awt.event.MouseEvent evt) {
labelCerrar.setIcon(new javax.swing.ImageIcon(getClass().getResource("button_cancel.png")));
}
private void labelCerrarMouseClicked(java.awt.event.MouseEvent evt) {
dispose();
}
private void restaurarVentana() {
if(getExtendedState() == JFrame.MAXIMIZED_BOTH){
setExtendedState(JFrame.NORMAL);
labelMaximizar.setIcon(new javax.swing.ImageIcon(getClass().getResource("windows_fullscreen.png")));
}else{
setExtendedState(JFrame.MAXIMIZED_BOTH);
labelMaximizar.setIcon(new javax.swing.ImageIcon(getClass().getResource("windows_nofullscreen.png")));
}
}
public static void main(String args[]) {
try {
for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) {
if ("Nimbus".equals(info.getName())) {
javax.swing.UIManager.setLookAndFeel(info.getClassName());
break;
}
}
} catch (ClassNotFoundException ex) {
java.util.logging.Logger.getLogger(BarraT.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
} catch (InstantiationException ex) {
java.util.logging.Logger.getLogger(BarraT.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
} catch (IllegalAccessException ex) {
java.util.logging.Logger.getLogger(BarraT.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
} catch (javax.swing.UnsupportedLookAndFeelException ex) {
java.util.logging.Logger.getLogger(BarraT.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
}
java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new BarraT().setVisible(true);
}
});
}
private javax.swing.JPanel barraTitulo;
private javax.swing.JLabel labelCerrar;
private javax.swing.JLabel labelIcono;
private javax.swing.JLabel labelMaximizar;
private javax.swing.JLabel labelMinimizar;
private javax.swing.JLabel labelTextoTitulo;
}
Los iconos que necesitas estan aca, son formato PNG
No pretendamos que las cosas cambien si siempre hacemos los mismo.
