Kirill Grouchnikov's Blog

Spicing up your JTabbedPane - part VI

This is 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).

This entry describes the new feature available in the next version of Substance look-and-feel (code-named Japan) and any other third-party LAF using laf-widget layer.

The vast majority of code was written by Nigel Hughes and contributed to the laf-widget under Apache license. Nigel first introduced the carousel component back in December, and later in January followed up with carousel menu (inspired by Apple TV interface). I spent the last weekend integrating this functionality in the tab overview dialog that provided a grid overview up until now. The time was spent well on both sides, with Nigel graciously making numerous changes that i requested to both carousel and carousel menu (thanks for bearing with all my requests), and me enhancing the TabPreviewPainter class that defines the tabbed overview dialog functionality.

By default, the tab overview button will show the regular grid overview dialog. To show the new carousel functionality, override the public TabOverviewKind getOverviewKind(JTabbedPane tabPane) method of TabPreviewPainter or DefaultTabPreviewPainter and return either TabOverviewKind.ROUND_CAROUSEL or TabOverviewKind.MENU_CAROUSEL.

Here is an example of the TabOverviewKind.ROUND_CAROUSEL tab overview (the WebStart link is at the end):

Here is an example of the TabOverviewKind.MENU_CAROUSEL tab overview (the WebStart link is at the end):

In order to see this functionality in a WebStart demo, click the button below, wait for the application to load and:

• Click the "General settings" task pane on the left hand side.
• Select either "round carousel" or "menu carousel" in the "Overview kind" combo box (under "Miscellaneous" section).
• Click the small button to the left of the tabs (the one with the magnifying glass

To view dynamically updating overview dialog (updating painting, automatic tracking of added and removed tabs) go to the "Tabbed Pane", configure its tab overview kind in the "Tabbed Pane" task pane and follow the instructions above.

Comments

• Nice krill, i think though in the menu carousel you still should be able to select the next actual panel by click on it aswell as in the menu

  Posted by: ruxton on February 14, 2007 at 05:16 AM

• Hi, nice application. But one BIG issue is the performance over network when remote displaying over the X protocol. You are not the only one with this problem. The commercial laf alloy has this "bug", too. Metal makes no problems, JGoodies laf makes no problems, as if you were sitting in front of the screen. With your laf i can go for a coffee when maximizing the window. Any suggestions?

  Posted by: plutus78 on February 14, 2007 at 08:37 AM

• Very cool! This is a real killer feature.
  When selecting in the round carousel using a double click I think the mouse event gets transfered to the underlying widget as well. To see this select the list from the carousel and notice that the selection is not where your mouse is pointing. Also I'd expect the current selected tab to be in the front of the carousel.
  One last thing, I think it would be nice to have something like OK/Cancel or something else more obvious (and possibly accessible) from a double click, or is there something I'm missing?

  Posted by: vprise on February 14, 2007 at 09:11 AM

• Excellent addition Kirill. I used the Substance Look & Feel on the Build Order Analyzer (https://buildorderanalyzer.dev.java.net/). The Substance L&F gave the BOA the ability to take on the UI from the game itself giving the end user the feel of an 'in game' experience with the utility. Substance is an excellent L&F and every GUI could benefit from it's use. The Carousel would be a great addition to the Swing components. I can think of several places in the application where I could use this apart from the tab previewing. Now that Java is open source, is there any chance you will be contributing the Carousel to the Swing code base?

  Posted by: valdarez on February 14, 2007 at 01:03 PM

• ruxton - the mouse click handling will be aligned with the round carousel.

  vprise - i'm working with Nigel on unifying the mouse handling so that we don't "compete" over the same events. About OK / Cancel - are you talking about adding buttons?

  valdarez - see the link to Nigel's blog. You can download the entire sources to the components themselves and the test applications using those. The source is licensed under ASL, so as long as you abide by that license, you can use them in your projects. Specifically in Substance these classes reside in internal contrib packages in order to prevent name clashing with application version.

  plutus78 - that's the price you pay for the Java2D-intensive LAFs. Substance doesn't target low-end machines or UIs that are beamed over slow networks.

  Posted by: kirillcool on February 14, 2007 at 01:27 PM

• Yes, I'm talking about adding buttons. Its was not immediately clear to me how to select the specific entry I picked and I assume it will confuse the users as well since this is a new widget to most of them.

  Posted by: vprise on February 14, 2007 at 10:47 PM

• Very impressive demo. I noticed that the center tabbed pane and its components can be resized, although only with Substance LAF (When e. g. Metal is selected and the slider at the bottom is moved, the LAF switches to Substance). Is the resizing functionality part of the Substance LAF or does it involve some other library? In the 3.2 release download I couldn't find any reference to the resizing capability (API docs, release notes, samples). Have I overlooked something or will this feature be introduced with 3.3?

  Posted by: fplass on February 15, 2007 at 11:29 PM

• Very cool looking screen shots; with the demo, I always got only the overview with the grid when running the demo (Mac OS 10.4.8 w/ 1.5.0_06).

  One minor nit: With vertical tabs, the popup when you hover over the tab appears mostly offscreen.

  Posted by: timboudreau on February 16, 2007 at 01:34 AM

• fplass - the slider in the right part of the status bar uses this new API which is currently under development. The functionality itself uses code from Looks and is not supported by the core LAFs. The latest 3.3dev drops take the desktop global DPI settings and also allows setting a custom font policy (this is what that slider does).
  tim - thanks for catching this. Indeed i need to show the preview window so that it's not cut off the screen. Consider it fixed. About the grid kind - did you change the setting in the relevant combo? There is one for the main tabbed pane and one for the "Tabbed Pane" tab - they are in two different task panes.

  Posted by: kirillcool on February 16, 2007 at 08:46 AM

• I have a fairly stout PC with plenty of RAM and I noticed that there is a bit of delay when viewing the tabs in the Menu Carousel. I'm not sure what's causing the slight delay, but perhaps the user could be tricked into not seeing the slight delay by allowing the initial display of the tabs in the carousel to appear from the back and then move forward towards the front. It looks like only 5 are visible at any point in time. This way only 5 of the tabs would have to be rendered before it is displayed. Right now it appears all tabs have to be rendered, with the last tab in the carousel being rendered first.

  Posted by: valdarez on February 20, 2007 at 01:00 PM

• valdarez - this really depends on which tab is selected. Currently, all tabs are rendered (starting from the first, but this should be changed to start from the selected) in a separate thread. The carousel menu is created with placeholders, which are later updated as the tab thumbnails are being computed. The carousel menu doesn't "pull" the tab thumbnails, it's the other way around - this provides a very clean separation between the component (carousel menu) and the using code (tab overview dialog).

  The number of visible tabs and their relative location depend on the number of total tabs and the current implementation of this component. The rendering time itself depends only on the tabbed pane previewer that is used. For the test application, i use the default previewer which renders each tab on a temporary image and then scales that image. This test application has quite a few controls on each one of the tabs, which makes the initial preview phase (rendering on one thread and carousel initial animating layout on another thread) quite heavy. For the real application i'd advise implementing custom preview painter to provide faster (and application-specific) implementation of the preview for each tab.

  Posted by: kirillcool on February 20, 2007 at 11:26 PM

This work is licensed under a Creative Commons License.