Java Swing Components Accordion Skinning Tutorial

Before we can begin skinning a JSCAccordion, we need to first decide on what look we want to achieve. After much searching I came across an attractive asp.net accordion which I though would make the perfect subject for this skinning tutorial. This tutorial will show you how to take the the default accordion and skin it to look like the asp.net accordion.

Comparing the asp.net accordion to the standard JSCAccordion, one would imagine that it would take a lot of code to perform the transformation, however this is really not the case.

There are a number of options available to us when going about skinning a JSCAccordion, some include extending the existing JSCAccordion, extending an existing AccordionUI, or lastly simply adjusting an accordion's settings in code. I will follow the last approach as I feel this will lead to a simpler demo, but all options are valid.

Step 1: Create an instance of JSCAccordion

The first step in our tutorial involves creating a new JSCAccordion and adding the required 'Mail', 'Notes' and 'Contacts' tabs.

JSCAccordion accordion = new JSCAccordion();
		
accordion.addTab("Mail", new JLabel());
accordion.addTab("Notes", new JLabel());
accordion.addTab("Contacts", new JLabel());

Although it is possible to add any component to an accordion's tab, we will add a JLabel as they are naturally transparent (non opaque) and will allow us to easily see the tab's background.

Step 2: Adjust basic settings on the JSCAccordion

In order for us to achieve the layout of the asp.net accordion, we will need to change a few basic settings on the JSCAccordion.

• We need to change the orientation of the accordion to render vertically.

• The tab height must be set to 31 pixels.

• We need to disable the rendering of the accordion's shadows.

• The asp.net accordion has a border comprising a black then white rectangle.

  //lays out the accordion's tabs to move vertically.
  accordion.setTabOrientation(TabOrientation.VERTICAL);
  //adjusts the height of the tabs to be 31 pixels
  accordion.setTabHeight(31);
  //stops the accordion rendering its shadows
  accordion.setDrawShadow(false);
  //the asp.net accordion is framed with a black then white border
  accordion.setBorder(BorderFactory.createCompoundBorder(
  	BorderFactory.createLineBorder(Color.BLACK),
  	BorderFactory.createLineBorder(Color.WHITE))
  );

Step 3: Adjusting settings on the SteelAccordionUI

In the previous step, we adjusted settings found on the JSCAccordion, however in order to achieve our final look we will need to adjust some settings on the Accordion's UI. The default UI for the Accordion is the SteelAccordionUI, and it is this UI that we will now manipulate.

In order to bring us one step closer to the asp.net accordion we will now set all the paddings on the SteelAccordionUI to zero.

//we know the default UI for the accordion is the SteelAccordionUI
//so we cast the UI to a SteelAccordionUI.
SteelAccordionUI steelAccordionUI = (SteelAccordionUI) accordion.getUI();
		
//we set all the paddings to zero
steelAccordionUI.setHorizontalBackgroundPadding(0);
steelAccordionUI.setVerticalBackgroundPadding(0);
steelAccordionUI.setHorizontalTabPadding(0);
steelAccordionUI.setVerticalTabPadding(0);
steelAccordionUI.setTabPadding(0)

Setting all the paddings to zero yields us the following result.

Step 4: Replace the background painter

All components from Java Swing Components make use of painters to achieve their look and feel. A painter is a simple class that contains logic to paint (draw) a component. The advantage of keeping this logic in a painter is two fold, firstly its easy to write new painters and secondly all painters are interchangeable. The net result of this is that it becomes very easy to change how a component looks.

The framework upon which all components from Java Swing Components relies includes some simple pre-optimized painters. Instead of creating a new painter from scratch, I will simply make use of existing painters.

Having a look at the asp.net accordion, we can see that we need to draw a gradient from white to grey horizontally to form the background. In order to achieve this we will make use of the GradientColorPainter. This painter paints a simple gradient starting with the startColor and ending with the endColor in a specified direction.

//we will replace the current background painter with a new //GradientColorPainter. 
GradientColorPainter backgroundPainter = new GradientColorPainter();
//paint gradient horizontally
backgroundPainter.setGradientDirection(GradientDirection.HORIZONTAL);
//start with white
backgroundPainter.setStartColor(new Color(255,255,255));
//end with grey
backgroundPainter.setEndColor(new Color(214,213,228));
//apply the painter to the accordion
accordion.setBackgroundPainter(backgroundPainter); 

The result of applying the new background painter renders the following result.

Step 5: Create a new AccordionTabRenderer

The last step in our skinning process it to code an entirely new AccordionTabRenderer. An AccordionTabRenderer is an interface used by the accordion to 'rubber stamp' a single component for each of the tabs. It works exactly the same as TableCellRenderers on the standard Jtable.

The AccordionTabRenderer interface has a single method getTabComponent.

public JComponent getTabComponent(GetTabComponentParameter parameters); 

The JComponent returned by this method will be used to draw the accordion's tabs. It is the responsibility of the AccordionTabRenderer to read the information from the parameters argument and return an appropriately configured component. The advantage of using a renderer is that it saves memory by only making use of a single component for all the tabs and also allows the developer to return any component they want. The only thing to remember is that the component returned is painted on the screen, and is not added to the accordion as a normal component. For all intensive purposes it is being used as a rubber stamp.

The easiest component to return for this tutorial would be a label, as it has text and an image, which is exactly what we need. We will create a class called a DemoAccordionTabRenderer that implements AccordionTabRenderer and extends JLabel. Whenever the getTabComponent method is invoked, it will return itself.

In the constructor of our class we will load the three images required by the renderer. These images are retrieved in the constructor and not during the getTabComponent method as this would result in io every time a tab is drawn. Unfortunately I did not have access to the icons used in the asp.net accordion so I will be making use of some great icons from the Tango icon library instead.

private ImageIcon mailImage;
private ImageIcon notesImage;
private ImageIcon contactsImage;
	
public DemoAccordionTabRenderer() {
 try {
 //images are loaded in the constructor to improve performance.
 //loading images in the getTabComponent method will result in the images
 //being loaded every time a tab is drawn. 
 mailImage = new ImageIcon(ImageIO.read(Thread.currentThread()
			.getContextClassLoader().getResourceAsStream("mail.png")));
 notesImage = new ImageIcon(ImageIO.read(Thread.currentThread().
			getContextClassLoader().getResourceAsStream("notes.png")));
 contactsImage = new ImageIcon(ImageIO.read(Thread.currentThread().
			getContextClassLoader().getResourceAsStream("contacts.png")));
 } catch (IOException e) {
	e.printStackTrace();
 }
}

Now for the most important method, the getTabComponent method. In this method we will read the information from the parameters argument and setup our renderer.

@Override
public JComponent getTabComponent(GetTabComponentParameter parameters) {
	//read the tabText from the parameter
	setText(parameters.tabText);
	//set the text color to white
	setForeground(Color.WHITE);
	//use a slightly smaller bold font
	setFont(getFont().deriveFont(Font.BOLD, 11f));
	//create a border to help align the label
	setBorder(BorderFactory.createEmptyBorder(0,8,0,0));
	//set the gap between the icon and the text to 8 pixels
	setIconTextGap(8);
		
	//set the appropriate image based on the tabText.
	if ("Mail".equals(parameters.tabText)) {
		setIcon(mailImage);
	}
	if ("Notes".equals(parameters.tabText)) {
		setIcon(notesImage);
	}
	if ("Contacts".equals(parameters.tabText)) {
		setIcon(contactsImage);
	}
		
	//returns itself, which extends JLabel
	return this;
}

The final step required to achieve the look of the asp.net accordion is to draw the appropriate background for the AccordionTabRenderer. There are a number of ways this can be achieved, the easiest being to simply override the paintComponent method of the AccordionTabRenderer.

The background of the asp.net accordion's tabs is complex linear gradient comprising of a number of colours. In order to achieve the same look, I will be making use of the LinearGradientColorPainter from the Java Swing Components framework. This painter paints a number of gradients together based on a supplied array of colours and floats. The workings of the painter is beyond the scope of this tutorial, however additional information can be found in the Sun (Oracle) api javadocs of LinearGradientPaint.

In the paintComponent method, we will paint the tab's background using our LinearGradientColorPainter and then simply call super.paintComponent() to paint the standard JLabel on top of the background.

private LinearGradientColorPainter painter = new LinearGradientColorPainter();
	
@Override
protected void paintComponent(Graphics g) {
  //setup the painter fractions
  painter.setColorFractions(new float[]{
		0.0f, 0.49f, 0.5f, 0.51f, 0.8f,	1.0f});

  //setup the painter colors
  painter.setColors(new Color[]{
		new Color(167,163,189),new Color(143,138,169),
		new Color(131,126,160),new Color(116,110,146),
		new Color(119,113,148), new Color(138,133,164)});

  //paint the background
  painter.paint((Graphics2D) g, new Rectangle(0, 0, getWidth(), getHeight()));
		
  //original color on g is stored and then later reset
  //this is to prevent clobbering of the Graphics object.
  Color originalColor = g.getColor();
		
  //paints a simple line on the bottom of the tab
  g.setColor(new Color(87,86,111));
  g.drawLine(0, getHeight()-1, getWidth(), getHeight()-1);
		
  g.setColor(originalColor);

  //draws the label on top of the background we just painted.
  super.paintComponent(g);			
}

The last step is to assign our custom AccordionTabRenderer to the accordion.

//apply the new TabRenderer to the accordion.
accordion.setVerticalAccordionTabRenderer(new DemoAccordionTabRenderer()); 

The final result of all our hard work can be seen in the image below.

Although it may have felt like a lot of code, seeing all the code together really shows how easy the skinning process is.

JSCAccordion accordion = new JSCAccordion();
		
accordion.addTab("Mail", new JLabel());
accordion.addTab("Notes", new JLabel());
accordion.addTab("Contacts", new JLabel());

//lays out the accordion's tabs to move vertically.
accordion.setTabOrientation(TabOrientation.VERTICAL);
//adjusts the height of the tabs to be 31 pixels
accordion.setTabHeight(31);
//stops the accordion rendering its shadows
accordion.setDrawShadow(false);
//the asp.net accordion has a border comprising a black then white border
accordion.setBorder(BorderFactory.createCompoundBorder(BorderFactory.createLineBorder(Color.BLACK),BorderFactory.createLineBorder(Color.WHITE)));
		
//we know the default UI for the accordion is the SteelAccordionUI
SteelAccordionUI steelAccordionUI = (SteelAccordionUI) accordion.getUI();	
//we set all the paddings to zero
steelAccordionUI.setHorizontalBackgroundPadding(0);
steelAccordionUI.setVerticalBackgroundPadding(0);
steelAccordionUI.setHorizontalTabPadding(0);
steelAccordionUI.setVerticalTabPadding(0);
steelAccordionUI.setTabPadding(0);
		
//we will replace the current background painter with a new //GradientColorPainter. 
GradientColorPainter backgroundPainter = new GradientColorPainter();
//paint gradient horizontally
backgroundPainter.setGradientDirection(GradientDirection.HORIZONTAL);
//start with white
backgroundPainter.setStartColor(new Color(255,255,255));
//end with grey
backgroundPainter.setEndColor(new Color(214,213,228));
//apply the painter to the accordion
accordion.setBackgroundPainter(backgroundPainter);
	
//apply the new TabRenderer to the accordion.
accordion.setVerticalAccordionTabRenderer(new DemoAccordionTabRenderer());

This brings us to the end of the tutorial, for those of you who are made it this far, the final demo jar and source code have been attached to this article. Enjoy