javajiggle.com

For my last post I showed how easy it is to add components to the tabs in JTabbedPane. Someone replied that the example was a bit primitive and asked me how to add buttons that look similar to the Firefox tab buttons. Below is an example that uses Firefox buttons.

import java.awt.*;
import java.awt.event.*;
import java.net.*;

import javax.swing.*;

public class JtabbedCloseExample extends JFrame {

JTabbedPane jtabbedPane;

class TabButton extends JPanel implements ActionListener {

ImageIcon reg = null;
ImageIcon over = null;public TabButton( String label ){

super(new FlowLayout());add( new JLabel( label ));
try{

// load firefox buttons
reg = new ImageIcon(new URL(“http://javajiggle.com/images/regular.JPG”));
over = new ImageIcon(new URL(“http://javajiggle.com/images/hoverOver.JPG”));

} catch( Exception e ){

e.printStackTrace();

}
setOpaque(false);
final TabButton self = this;
final JButton button = new JButton(reg);
button.setOpaque(false);
button.setRolloverIcon(over);
button.setPressedIcon(over);
button.setBorderPainted( false );
button.setContentAreaFilled(false);
button.addActionListener( this );
add( button );

}

public void actionPerformed(ActionEvent ae ){

// close the tab which was clicked
jtabbedPane.remove(jtabbedPane.indexOfTabComponent( this ) );

}

}

public JtabbedCloseExample() {

jtabbedPane = new JTabbedPane();
jtabbedPane.add(new JTextArea(“Tab 1 text area. Using Firefox buttons!”));
jtabbedPane.add(new JTextArea(“Tab 2 text area. Using Firefox buttons!”));
jtabbedPane.add(new JTextArea(“Tab 3 text area. Using Firefox buttons!”));
jtabbedPane.setTabComponentAt( 0, new TabButton(“Tab 1″) );
jtabbedPane.setTabComponentAt( 1, new TabButton(“Tab 2″) );
jtabbedPane.setTabComponentAt( 2, new TabButton(“Tab 3″) );
getContentPane().add( jtabbedPane );
setSize(new Dimension(300, 200));
setVisible(true);

}

public static void main ( String [] args ){

new JtabbedCloseExample();

}

}

As you already know, JTabbedPane provides a convenient way for components such as JPanels to share the same real estate on the screen. It also allows a user to select a desired panel by clicking on a tab. If you’ve ever used a Firefox browser than you truly appreciate tabbed panes. Firefox displays each web page in a separate tab, allowing a user to switch between pages by clicking on a corresponding tab.

Up until JDK 1.6, we had limited control of what was rendered on a tab itself. In particular we were limited to the label, the icon and a tooltip. In other words we could not place a button on a tab itself as is done in a Firefox browser. Many improvised by manually drawing components and simulating their behavior. Although this solution worked great, the code was way too complicated for a simple task. With JDK 6 came three new methods which completely changed the behavior of a tabbed pane. You can now set componets on a tab itself. In addition, swing will render these components for you. All possible with three methods below:

public void setTabComponentAt(int index, Component component) – allows you to add a component such as a button to a tab. The rendering and the event handling is done for you by swing.

public Component getTabComponentAt(int index) – gets a component for a corresponding index that was set by a setTabComponentAt(..) method above.

public int indexOfTabComponent(Component tabComponent) – reverse lookup, that returns an index of a tab that corresponds to the tab component set by a setTabComponentAt(..) method above. This is particularly handy if you are using a button to remove a corresponding tab from a tabbed pane.

Below is a simple example that illustrates how to implement a Firefox style close button on the individual tab. Keep in mind this example won’t work on versions prior to JDK 1.6!

import java.awt.*;

import java.awt.event.*;

import javax.swing.*;

public class JtabbedCloseExample extends JFrame {

JTabbedPane jtabbedPane;

class TabButton extends JPanel implements ActionListener {

public TabButton( String label ){

super(new FlowLayout());

add( new JLabel( label ));

JButton button = new JButton(“X”);

button.addActionListener( this );

button.setMargin(new Insets(0,0,0,0));

add( button );

}

public void actionPerformed(ActionEvent ae ){

// close the tab which was clicked
jtabbedPane.remove(jtabbedPane.indexOfTabComponent( this ) );

}

}

public JtabbedCloseExample() {

jtabbedPane = new JTabbedPane();

jtabbedPane.add(new JTextArea(“Tab 1 text area”));

jtabbedPane.add(new JTextArea(“Tab 2 text area”));

jtabbedPane.add(new JTextArea(“Tab 3 text area”));

jtabbedPane.setTabComponentAt( 0, new TabButton(“Tab 1″) );

jtabbedPane.setTabComponentAt( 1, new TabButton(“Tab 2″) );

jtabbedPane.setTabComponentAt( 2, new TabButton(“Tab 3″) );

getContentPane().add( jtabbedPane );

setSize(new Dimension(300, 200));

setVisible(true);

}

public static void main ( String [] args ){

new JtabbedCloseExample();

}

}

This is not the best looking window. However, it clearly illustrates the easy with which you can add your custom components to the tabs!