Kirill Grouchnikov's Blog

Spicing up your JTabbedPane - part VI.b

This is an addendum to the sixth part of the series that describes the additional capabilities that you can get on your tabbed panes.

• The first part described close buttons and animation on modified tabs
• The second part described vetoable close buttons and vertical tabs.
• The third part described single-click close of multiple tabs and custom alignment of tab texts on left and right placement.
• The fourth part described hover preview popup and tab overview dialog.
• The fifth part described tab pager (enhanced since first described).
• The sixth part described carousel components integrated into the tab overview dialog.

Since the carousel components (round carousel and menu carousel) look quite better than the existing grid tab overview panel, the later was enhanced to provide better visuals.

Here is how it looked before:

Here is how it looks now:

The main improvement is the drop shadow borders (using the Looks implementation) on the individual thumbnail previews. In addition, the following shows what happens when you move the mouse over the grid:

The implementation itself is quite straightforward and uses a custom glass pane to overlay the animations. In order to see this functionality in a WebStart demo, click the button below, wait for the application to load and click the small button to the left of the tabs (the one with the magnifying glass).

Comments

• Not sure I get what gets posted on the main java.net page but I would direct users to your awesome article http://today.java.net/pub/a/today/2007/02/22/how-to-write-custom-swing-component.html

  Anyway, truly splendid tabbing, love the closing and hovering is very cool. Just a few thoughts.

  Tab highlighting on mouse over. Highlighting is important but I find something faintly off when it does highlight, I think i would say it is the 'double highlight' kind of like you are shading it in - but in a jerky fashion. Maybe it is just a timing issue.
  Tab transition I recently added JXLayer fading to my tabs so that they have a smooth transition, and it looks like you have it but something is a little off if you go back and forth between tabs. I suspect it is that you are fading out the previous tab instead of just fading in the next tab (as a guess)
  Highlight selected tab Another thing I added to my tabs was to have the select tab highlighted, the others faded. The trick is not to make the other tabs not look like they are disabled. I had some success with using 'dark grey' for the text but I am not thrilled with hard coding tab text colors as it may conflict with switching lafs.

  
  

  Posted by: aronsmith on February 26, 2007 at 08:47 AM

• Might be the movie but the scaling seems unnatural to me (linear)...

  Posted by: francisdb on February 26, 2007 at 01:22 PM

• Excelent !!!

  Where is the source code?, please...

  Regards from Cartagena, Colombia.

  Posted by: rogerjose81 on February 26, 2007 at 09:36 PM

• Aron - thanks for the detailed comments. The tab highlighting on mouse hovering is a tradeoff between the time and animation smoothness. The tab thumbnail is not recomputed at each animation cycle - it starts from the original size (100%) and is scaled to 120% applying the Graphics2D.scale API. Computing the real tab thumbnail on each animation cycle may be very expensive (depending on the tab contents) - you can see in the first few frames of the movie that the tab thumbnails are computed asynchronously and then are "fed" into the overview panel. The tab transition is done using the generic layout manager described in this series. The child component that is made invisible is faded out (and not immediately hidden) - this allows much smoother overlaying animations as compared to a few other techniques that have been demonstrated recently. The selected tab has two-pixel wide border as compared to other tabs (one-pixel wide border).

  francisdb - see my response to the first point of Aron above.

  rogerjose81 - you'll have to invest a little time starting from this package.

  Posted by: kirillcool on February 26, 2007 at 10:41 PM

This work is licensed under a Creative Commons License.