Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Componentes / Java / Look and Feel / Libreria swing BlackTabbedPane

Libreria swing BlackTabbedPane

Autor jc mouse viernes, enero 11, 2013

Continuación del tutorial [Personalizar JTabbedPane con Netbeans].

La clase BlackTabbedPaneUI que extendemos de BasicTabbedPaneUI, nos da la posibilidad de sobre escribir métodos propios de esta clase para dar un aspecto diferente a los Tabs (pestañas) y al Contenido del swing JTabbedPane. Para una descripción completa de todas los métodos y propiedades de esta clase, sugiero visitar el API Java Class BasicTabbedPaneUI.

Para este sencillo ejemplo solo necesitamos sobre escribir 3 métodos:

partes jtabbedpane

  1. paintTabBackground. Este método es el encargado de pintar el fondo de una pestaña (Tabs).
  2. paintTabBorder. Como su nombre indica, pinta el borde de una pestaña (Tabs ).
  3. paintContentBorder. Este metodo pinta el borde del contenedor del JTabbedPane.

Antes, dentro la clase declaramos tres variables de tipo Color, ColorSel para el color del Tabs en estado seleccionado, ColorUnSel para los colores de los tabs no seleccionados y colorContentBorder para el color de borde del contenedor.

    public Color colorSel = new Color(0, 0, 0);
    public Color colorUnSel = new Color(192, 192, 192);
    public  Color colorContentBorder = colorSel;

Haciendo uso de java2d pintamos un rectángulo en las coordenadas X,Y  dadas por la propia clase. Este método pinta todos los tabs que tenga el swing, es por eso que se debe hacer una distinción de que tab se esta pintando, si esta seleccionado o no, para eso la propiedad booleana isSelected  nos indica tal estado.

    @Override
    protected void paintTabBackground( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected ) 
    {
        Graphics2D g2 = (Graphics2D)g;
        g2.setColor( (isSelected)? colorSel : colorUnSel );        
        g2.fillRect(rects[tabIndex].x, rects[tabIndex].y, 
                    rects[tabIndex].width, rects[tabIndex].height);    
    }

Para  pintar el borde, de igual modo, utilizando java2d, pintamos un rectángulo (solo el borde) en las coordenadas (x,y) y (w,h) para el ancho y alto del tab.

    @Override
    protected void paintTabBorder(Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected) 
    {
        Graphics2D g2 = (Graphics2D)g;
        g2.setColor( (isSelected)? colorSel : colorUnSel );        
        g2.drawRect(x, y, w, h);
    }

Para terminar, pintamos el borde del contenedor, aquí tenemos que tener en cuenta que un JTabbedPane tiene 4 formas de disponer las pestañas, TOP, BOTTOM, LEFT, RIGHT, y de acuerdo a su posición las coordenadas x, y y el ancho y alto del contendor, así como de los propios tabs, varia. como los tabs son rectangulares no hay problema, para el  contenedor, se deben hacer unos pequeños cálculos. Finalmente pintamos un rectángulo con las variables (x,y,w,h)

    @Override
    protected void paintContentBorder(Graphics g, int tabPlacement, int selectedIndex ) 
    {
        int width = tabPane.getWidth();
        int height = tabPane.getHeight();
        Insets insets = tabPane.getInsets();      

       int x = insets.left;
       int y = insets.top;
       int w = width - insets.right - insets.left;
       int h = height - insets.top - insets.bottom;

        switch(tabPlacement) 
        {
           case LEFT:
              x += calculateTabAreaWidth(tabPlacement, runCount, maxTabWidth);              
              x -= tabAreaInsets.right;              
              w -= (x - insets.left);
              break;
          case RIGHT:
              w -= calculateTabAreaWidth(tabPlacement, runCount, maxTabWidth);              
              w += tabAreaInsets.left;              
              break;
          case BOTTOM:
              h -= calculateTabAreaHeight(tabPlacement, runCount, maxTabHeight);              
              h += tabAreaInsets.top;
              break;
          case TOP:
          default:
              y += calculateTabAreaHeight(tabPlacement, runCount, maxTabHeight);              
              y -= tabAreaInsets.bottom;              
              h -= (y - insets.top);
        }

        if ( tabPane.getTabCount() > 0  )                
        {            
           Color color = UIManager.getColor("TabbedPane.contentAreaColor");
           if (color != null) {
               g.setColor(color);
           }
           else if ( colorContentBorder == null || selectedIndex == -1 ) {
               g.setColor(tabPane.getBackground());
           }
           else {
               g.setColor(colorContentBorder);
           }
           g.fillRect(x,y,w,h);
        }
    }

La clase completa queda de la siguiente forma:

package org.matrix;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Insets;
import javax.swing.UIManager;
import javax.swing.plaf.basic.BasicTabbedPaneUI;
/**
 * @web https://www.jc-mouse.net
 * @author Mouse
 */
public class BlackTabbedPaneUI extends BasicTabbedPaneUI  {

    public Color colorSel = new Color(0, 0, 0);
    public Color colorUnSel = new Color(192, 192, 192);
    public  Color colorContentBorder = colorSel;    

    @Override
    protected void paintTabBackground( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected ) 
    {
        Graphics2D g2 = (Graphics2D)g;
        g2.setColor( (isSelected)? colorSel : colorUnSel );        
        g2.fillRect(rects[tabIndex].x, rects[tabIndex].y, 
                    rects[tabIndex].width, rects[tabIndex].height);    
    }

    @Override
    protected void paintTabBorder(Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected) 
    {
        Graphics2D g2 = (Graphics2D)g;
        g2.setColor( (isSelected)? colorSel : colorUnSel );        
        g2.drawRect(x, y, w, h);
    }

    @Override
    protected void paintContentBorder(Graphics g, int tabPlacement, int selectedIndex ) 
    {
        int width = tabPane.getWidth();
        int height = tabPane.getHeight();
        Insets insets = tabPane.getInsets();      

       int x = insets.left;
       int y = insets.top;
       int w = width - insets.right - insets.left;
       int h = height - insets.top - insets.bottom;

        switch(tabPlacement) 
        {
           case LEFT:
              x += calculateTabAreaWidth(tabPlacement, runCount, maxTabWidth);              
              x -= tabAreaInsets.right;              
              w -= (x - insets.left);
              break;
          case RIGHT:
              w -= calculateTabAreaWidth(tabPlacement, runCount, maxTabWidth);              
              w += tabAreaInsets.left;              
              break;
          case BOTTOM:
              h -= calculateTabAreaHeight(tabPlacement, runCount, maxTabHeight);              
              h += tabAreaInsets.top;
              break;
          case TOP:
          default:
              y += calculateTabAreaHeight(tabPlacement, runCount, maxTabHeight);              
              y -= tabAreaInsets.bottom;              
              h -= (y - insets.top);
        }

        if ( tabPane.getTabCount() > 0  )                
        {            
           Color color = UIManager.getColor("TabbedPane.contentAreaColor");
           if (color != null) {
               g.setColor(color);
           }
           else if ( colorContentBorder == null || selectedIndex == -1 ) {
               g.setColor(tabPane.getBackground());
           }
           else {
               g.setColor(colorContentBorder);
           }
           g.fillRect(x,y,w,h);
        }
    }

}

La clase BlackTabbedPaneUI, se debe implementar en la clase BlackTabbedPane, asi tambien, completar los métodos SET y GET, la clase final queda de la siguiente forma:

package org.matrix;
import java.awt.Color;
import java.awt.Dimension;
import javax.swing.JTabbedPane;
/**
 * @web https://www.jc-mouse.net
 * @author Mouse
 */
public class BlackTabbedPane extends JTabbedPane {

    BlackTabbedPaneUI blackTabbedPaneUI = new BlackTabbedPaneUI();
    /**
 * Constructor de clase
 */
    public BlackTabbedPane(){
        this.setPreferredSize( new Dimension(100,100) );
        this.setForeground(new Color(255, 255, 255));
        this.setUI( blackTabbedPaneUI );
        this.setVisible(true);
    }

    public void setTabSelectedColor( Color color )
    {
        blackTabbedPaneUI.colorSel = color;
        blackTabbedPaneUI.colorContentBorder=color;
    }

    public Color getTabSelectedColor()
    {        
        return ( blackTabbedPaneUI.colorSel==null)? new Color(0,0,0): blackTabbedPaneUI.colorSel ;
    }

    public void setTabUnselectedColor( Color color )
    {
        blackTabbedPaneUI.colorUnSel = color;        
    }

    public Color getTabUnselectedColor()
    {        
        return ( blackTabbedPaneUI.colorUnSel==null)? new Color(192,192,192): blackTabbedPaneUI.colorUnSel ;
    }

}//-->

Ya solo nos queda crear el *.jar, clic derecho sobre el nombre del proyecto y CLEAN AND BUILD. con eso ya tenemos lista nuestra librería JTabbedPane. Para instalar y utilizar este swing desde netbeans, lee el siguiente tutorial [Añadir/Instalar nuevas librerias a Netbeans].

black tabs java

Bajate el proyecto completo en netbeans 7.2 HERE :=D

Si te quedo en alguna duda, preguuuuuuuuuuuuuntame 🙂

enjoy!!!

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

Formulario de autenticación circular

Formulario de autenticación circular

En este tutorial crearemos un formulario de logueo de forma circular usando el lenguaje java y el IDE de Netbeans. Neces...

Añadir Splash Screen en Java/Netbeans

Añadir Splash Screen en Java/Netbeans

¿Splash Screen? El splash screen o traducido al aspañol 😉  es una «Pantalla de bienvenida» que se muestra cuando se ejec...

Manipular colecciones de una forma sencilla

Manipular colecciones de una forma sencilla

Java proporciona Collection Framework, que define varias clases e interfaces para representar un grupo de objetos como u...

Microservicio REST Java con Spark – Parte 1

Microservicio REST Java con Spark – Parte 1

En este y un segundo post desarrollaremos un microservicio java utilizando el framework Spark que implementara las funci...

Integración de FFmpeg con Java

Integración de FFmpeg con Java

FFmpeg es una colección de software libre capaz de decodificar, codificar, transcodificar, mux, demux, transmitir, filtr...

Crea código HTML5 desde java con j2html

Crea código HTML5 desde java con j2html

j2html es una biblioteca para java que permite generar código html seguro desde código java utilizando sus propias etiqu...

25 comentarios en “Libreria swing BlackTabbedPane”

  1. Ruben dice:

    Gracias por el tutorial, lo revisare a fondo, pero no se si sepas como lograr pestañas así http://1.s3.envato.com/files/105657.jpg o talvez así (usando imagenes de un .psd generado). Gracias por todo.

    1. Mouse dice:

      lo más fácil es usar imágenes pero también puede hacerse usando java2d 🙂

      1. Fred dice:

        orale interesante aporte justo para mejorar mis jtabbedpane aunque creo que ya me estoy desviando en lo que quiero hacer me estoy yendo a lo visual y no a lo funcional xD

  2. Hugo dice:

    gracias por el tutorial hermano… lo unico con lo que he tenido problemas es para hacer que me aparezcan los dos metodos en la paleta de propiedades de netbeans. de ante mano gracias compadre ojala me puedas responder

    1. Mouse dice:

      :/ no te entiendo, una vez que generas el jar y añades la librería a la paleta de netbeans, solo debes agregar la clase principal la que se extiende de jtabbedpane y no la que tiene el UI al final

  3. MARCO TORBISCO dice:

    Hola Mouse, interesante… lo del aspecto, muy bueno pero necesito que me ayudes si conoces la libreria Flamingo de java o Office LAF o el que esta ahora ultimo y se ve muy bueno por que es menos pesado Pink Matter, estoy realizando un proyecto con esas librerias ya encontre como darle el aspecto delos productos Office o como se conoce en VISUAL Studio la Cinta o Ribbon de Office. ademas quisiera como validar productos licenciados como por ejemplo los que se ven en JIDE, bueno te escribi a tu facebook pero nunca me respondes jejejej. me puedes buscar como http://facebook.com/TorbiscoChumpitazMarco

    1. Mouse dice:

      las librerías viene con sus respectivos demos, flamimgo no es la excepción, puedes personalizarlos pero claro no puedes hacer modificaciones radicales a menos que entiendas su código y lo vuelvas a compilar.

      JIDE tiene muchas librerias intersantes, dime en cual estas intersado y vere si puedo ayudarte 🙂

      perdón por no contestar en facebook pero a veces los mensajes se me pasan y no veo la razón de responder un mensaje con mas de 1 mes de antiguedad o.O 🙁 🙂

      1. MARCO TORBISCO dice:

        Jejejej….muy bien amigo.. mira dime donde cuelgo la libreria jFlamingo para que lo revices , mira mi proyecto cuenta con algunos aspectos que agradan mucho a la paersona para la cual estoy realizando el proyecto, lo priemro que hay que solucionar son:
        Obtener las vistas o Aspectos del Microsoft 2007 o la de 2010 pero en Flamingo y si es mejor lo que tu incluistes con la Libreria swing BlackTabbedPane y estoypens
        ando colocar los aptectos el boton de redireccionamiento al facebook al twiter, a lado del boton configurehelp de la cinta de Flamingo, mira yo quisiera habilitar de JIDE varias opciones voy aenviarte un mensaje por el facebook y colgar imagens y poner archivos que estan en el JIDE,,….. a me olvdaba mi aplicativo tiene como finalidad registrar a empleados, registrar el prestamos de articulos, tomar registro de asistencias a capacitacione sy entrenamientos mira te voy aenviar la svistas par que chekes como voy llendo… a tu instalador de MySQL y Java me servira de maravilla…Yo siempre estoy conectado durante las noches …me amanesco realizando los proyectos por que me gusta …Bueno de Antemno Muchas Gracias 🙂

        1. Mouse dice:

          los swing de JIDE son buenisimos pero son de pago, imitar algunos de ellos seria un buen reto, pero llevaría su tiempo

  4. Julian Andres Garzon Morales dice:

    interesante lo que estas haciendo, pero soy novato y ya genere y contrui el proyecto pero no entiendo que mas hay que hacer…??? te agradecería una ayuda.

  5. Julian Garzon dice:

    ya agregue la librería y la utilizo en un proyecto, los tab´s se visualizan bien pero el contentborder es de color azul… no se por que sucede????

    1. Mouse dice:

      si el contenedor te sale de color azul es porque estas usando el skin por defecto de netbeans, trata con el skin de windows 🙂

  6. richar16 dice:

    Muy bueno el JAR JTabbebPane al estilo win 8. Se te agradece JC. Yo tengo un codigo que copie de un foro y lo modifique a mis gustos, les dejo el post por si a alguien le sirve http://stackoverflow.com/questions/7054466/how-can-i-change-the-shape-of-a-jtabbedpane-tab/7056093#7056093 . Con esto que explico el master JC le entenderan facil al codigo.

  7. josepalermo dice:

    puedes montar el proyecto completo y no solo el jar de este tema se lo agradeceria mucho muchas gracias

    1. Mouse dice:

      los enlaces de descarga estan al final del post

  8. Zagartur dice:

    Hola, yo si que soy bien NUEVO en esto del netbeans, ya segui paso a paso lo indicado y ya tengo mi JAR, ahora como lo utilizo ? :p sorry por la ignorancia, quiero saber como lo aplico?, tengo mi jdialog y ahi puse un contenedor y jtabbedpanes como aplico ahi este JAR?

    Gracias!!

  9. Zagartur dice:

    Sin respuesta? 🙁

  10. Jaime dice:

    Hola esta super el tutorial me agrada mucho pero disculpa la pregunta, ya me descargue el proyecto y lo agregue en las librerías, pero no se como implementarlo para que mi gui salga con la apariencia de blacktabbedPanne..me ayudas porfavor…

    1. Mouse dice:

      Su uso es como cualquier otra librería :/ en si, que error tienes al usarlo???? 🙂

      1. Crisitan dice:

        lo que queremos saber es como usarlo en un proyecto estamos bien noobs XD, estoy aprendiendo a programar, en la paleta de propiedades no sale la opciones de modificacion, como hay que hacer para que aparesca, luego que agregue la libreria? saludos espero puedas ayudarme, megusto mucho el estilo de pesañas en horizontal muchisimas gracias, un video estaria genial, y ver como lo aplicas a un proyecto, o pasar el codigo del proyecto de ejemplo que biene con la libreria. saludos!

        1. Mouse dice:

          en netbeans, en la paleta haces clic derecho y ahi buscas añadir desde jar y sigues los pasos, si todo sale bien aparecerá como otro swing mas

  11. adrian dice:

    saludos!!! buen tuto me a servido demasiado gracias.
    una pregunta ¿ Que libro me recomendarías que venga mas sobre el tema de componentes gráficos en java? que me gustaría darles un toque personal a los programas que creo .
    gracias..

  12. yosel dice:

    SERIA BUENO QUE MUESTRES EN UN VIDEO LOS PASOS DESDE EL CREAR EL .JAR HASTA EL COMO UTILIZARLO ..

  13. luis dimas dice:

    amigo me puedes dar un ejemplo de como colocar un icono en un tab la verdad no hayo la forma

  14. Thanos dice:

    Puedes explicar como usar la libreria en un proyecto………………..

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp