Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Componentes / Java / Java / Look and Feel / Modificar las pestañas de JTabbedPane

Modificar las pestañas de JTabbedPane

Autor jc mouse lunes, enero 14, 2013

En este tutorial veremos lo fácil que es personalizar las pestañas de un JTabbedPane con unas cuantas lineas de código y un poco de imaginación. Para no ser repetitivo ni aburrido, recomiendo ver tutoriales anteriores sobre la creación y personalización de este tipo de librerías swing [Personalizar JTabbedPane con Netbeans].

Manos a la obra.

La clase BasicTabbedPaneUI contiene todos los métodos necesarios para personalizar todo el componente JTabbePane, es lectura obligatoria , si quieres entender este post, leer el API de BasicTabbedPaneUI.

Modificaremos los tabs de este swing sobre escribiendo los métodos de BasicTabbedPaneUI, el resultado sera sencillo pero nos permitirá entender el funcionamiento de esta clase.

shape tabs

Para modificar la forma de las pestañas, sobre escribiremos 2 métodos, paintTabBackground paintTabBorder.

* paintTabBackground

protected void paintTabBackground( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected ) 
{

}

Entre las variables que tiene este método  encontramos a “x” y “y” que representan las coordenadas de la esquina superior izquierda de cada pestaña. Tenemos a “w” y “h” que son el ancho y alto de cada pestaña respectivamente. isSelected es un boolean que nos indica si la pestaña con la que trabajamos esta seleccionada o no, TabIndex nos indica que  pestaña esta seleccionada.

dimensiones tabs

Conociendo estos parámetros y haciendo uso de un poco de geometría y un editor de imágenes  podremos diseñar la forma de un nuevo tab, por ejemplo:

polygon

Pero ahora debemos llevar esos puntos a código, para eso, colocamos los puntos X en un array y los puntos Y en otro, esta sucesión de puntos, utilizando java2d, serán pintados en un polígono la cual da forma a la pestaña.

xp = new int[]{ x, 
  x,
  x+4,
  x+w+5,
  x+w+5,
  x+w,
  x+w,
  x
            };
yp = new int[]{ y+h,
  y+4,
  y,
  y,
  y+5,
  y+10,
  y+h,
  y+h
            };

Polygon shape = new Polygon( xp, yp, xp.length );
g2D.fill( shape );

* paintTabBorder

protected void paintTabBorder( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected) 
{

}

Lo mismo para pintar los bordes, debemos sobre escribir el método paintTabBorder y haciendo uso de la misma figura  poligonal pintamos los bordes con java2d. Si declaramos el método pero lo dejamos vació, las pestañas no tendrán bordes.

Un JTabbedPane tiene 4 formas de presentar a las pestañas, LEFTRIGHTBOTTOMTOP, siendo esta última la DEFAULT (por defecto) dependiendo de cual este activado y dependiendo de cual sea la forma que queremos darle al tab, la forma poligonal sufre ciertos cambios y podría no mostrarse como quisiéramos, si la pestaña tiene una forma bastante irregular, lo mejor es diseñar y calcular la forma geométrica para cada uno de los posibles estados,   en este ejemplo solo realizamos la modificaciones para TOP.

La clase completa, la cual llame “shapeTabbedPaneUI.java” es:

package swing.xp;
import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import javax.swing.plaf.basic.BasicTabbedPaneUI;
/**
 * @web http://www.jc-mouse.net
 * @author Mouse
 */
public class shapeTabbedPaneUI extends BasicTabbedPaneUI{

    //Para almacenar la forma del tabs
    private Polygon shape;
    //Para almacenar los puntos de la forma poligonal del tabs o.O
    private int xp[] = null; 
    private int yp[] = null;

    @Override
 protected void paintTabBackground( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected ) 
 {
    Graphics2D g2D = (Graphics2D)g;
    //colores degradados para los tabs
    GradientPaint gradientSel = new GradientPaint( 0, 0,  new Color(242,249,242), 0, y+h/2, new Color(217,237,246) );
    GradientPaint gradientUnsel = new GradientPaint( 0, 0,  new Color(232,232,232), 0, y+h/2, new Color(205,205,205) );    

    switch( tabPlacement )
    {
        case LEFT: 
        case RIGHT:        
        case BOTTOM:
            /* codigo para estos tabs */
            break;
        case TOP:
        default:            
            xp = new int[]{ x, 
                            x,
                            x+4,
                            x+w+5,
                            x+w+5,
                            x+w,
                            x+w,
                            x
            };
            yp = new int[]{ y+h,
                            y+4,
                            y,
                            y,
                            y+5,
                            y+10,
                            y+h,
                            y+h
            };
          break;
    }

    shape = new Polygon( xp, yp, xp.length );

    if ( isSelected ) 
    {         
         g2D.setPaint( gradientSel );
    }
    else
    {        
        g2D.setPaint( gradientUnsel );
    }

     g2D.fill( shape );
 }

 @Override
  protected void paintTabBorder( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected) 
  {

    Graphics2D g2D = (Graphics2D)g;    

     switch( tabPlacement )
    {
        case LEFT: 
        case RIGHT:        
        case BOTTOM:
            /* codigo para estos tabs */
            break;

        case TOP:
        default:           
            xp = new int[]{ x, 
                            x,
                            x+4,
                            x+w+5,
                            x+w+5,
                            x+w,
                            x+w,
                            x
            };
            yp = new int[]{ y+h,
                            y+4,
                            y,
                            y,
                            y+5,
                            y+10,
                            y+h,
                            y+h
            };
          break;
    }

     shape = new Polygon( xp, yp, xp.length );

    if ( isSelected )
    {
         g2D.setColor( new Color(60,127,177) );
         g2D.drawPolyline( xp , yp , xp.length - 1 );
    }
    else
    {
        g2D.setColor( new Color(137,140,149) );
        g2D.drawPolyline( xp , yp , xp.length );
    }     

  } 

}//--> fin clase UI

Implementando esta clase UI en un JTabbedPane, tendremos como resultado:

shape tabs

Este es un ejemplo sencillo de lo que se puede hacer con shapeTabbedPaneUI, la documentación esta ahí, solo debes hacer volar tu imaginación si deseas pestañas más originales.

Descarga el proyecto de este  ejemplo  AQUI 🙂

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Empaquetado de texturas en LibGDX

Empaquetado de texturas en LibGDX

Continuando con los tutoriales sobre LibGDX (Librería para el desarrollo de videojuegos), en esta ocasión veremos como e...

Creación de GUI con Matlab GUIDE

Creación de GUI con Matlab GUIDE

En este videotutorial se vera la creación de Interfaces Gráficas de Usuario (GUI) utilizando MatLab GUIDE herramienta vi...

Pequeño pero poderoso editor de texto para Ubuntu

Pequeño pero poderoso editor de texto para Ubuntu

Geany es un editor de texto para Sistemas Operativos Linux, windows y MAC que utiliza el kit de herramientas GTK+ con ca...

Graficos estadisticos con javafx y swing

Graficos estadisticos con javafx y swing

En este post aprenderemos a usar los gráficos 2d que viene con JavaFX en nuestras aplicaciones java swing. Esto puede se...

Cargar fuente TTF

Cargar fuente TTF

Necesitamos: Android Studio 2 tipos de fuente TTF Agregar Archivo de fuente al proyecto Paso 1: Crear carpeta assets Cli...

Hangman: El juego del ahorcado en java

Hangman: El juego del ahorcado en java

El Juego del ahorcado o Hangman, es un clásico juego de mesa que consiste en adivinar la palabra secreta, si no lo consi...

7 comentarios en “Modificar las pestañas de JTabbedPane”

  1. Juan dice:

    Buenisimo, tambien vi uno sobre como colocar una x para cerrar la pestaña, super, aca el link http://www.myjavazone.com/2011/02/jtabbedpane-con-x.html

  2. VIANEY VARGAS dice:

    amigo mouse hace tiempos sigo su pagina y los proecto sy codigos de verdad que me han servido muchisimo y te agradezco por eso,,,, por compartir… y pues quisiera pedirte un favor si tienes problemas para resolver con sus respectivas soluciones; para cojer mas la logica en la programacion en java ??? porfavor te lo agradezco si me mandas al correo: vvvvianey@gmail.com donde tenga varios problemas para resolver y con solucion de iterfaz swing….. te agradezco por su atencion prestada….

    1. Mouse dice:

      problemas para resolver java hay muchos en la red pero de SWING no mucho, yo no tengo mas los que están en el blog 🙂

  3. Carlos dice:

    Felicitarte nuevamente por lo que estas haciendo … muchos existos

    Te queria pedir un favor nose si pudieras tocar mas adelante como hacer el cambio de foco en vez de que sea con el TAB sea con el ENTER

    MUchas gracias de antemano

    1. Freed dice:

      para ello puedes hacerlo con requestfocus o transferfocus no te detallo bien como usarlo por que estoy en un celular ah e igual puedes apoyarte con algun evento del tipo key

  4. Que tengan bonito día a todos….
    Estos ejemplos son muy interesante e importantes.
    Navegando por internet y como es de costumbre, llegue aquí.

    Y bueno también quiero compartirles un pequeño código:
    Es un nuevo LookAndFeel….
    http://warevalid.xtrweb.com/usar.htm
    Esa es la pagina, espero alguien le interese…
    Gracias….

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

JSON es un formato de texto ligero para el intercambio de datos ampliamente usado en los Servicios Web. En este post uti...

En este post conoceremos algunos de los operadores de comparación que existen en Linux y realizaremos unos ejercicios pa...

En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c...

Todo producto tecnológico tiene un ciclo de vida, algunos bastante corto otros muy largo, podemos mencionar el software...

Android Bolivia

MAUS