Kirill Grouchnikov's Blog

Adding scroll pane previewers to your Swing applications

Previous entries on this blog introduced a few enhancements that were made in Substance look and feel to the scroll panes:

• Improving the user experience with scroll bars showed how to control the location of scroll buttons.
• Experimenting with scroll panes and scroll bars series introduced overlay animation effects on scroll bars (including scroll track, scroll thumb and scroll buttons).

One of the comments requested having a "preview" functionality on the scroll panes. The request outlined having a button in the lower-left / lower-right (depending on the scroll pane orientation). Clicking on a button would bring up a thumbnail of the scroll pane contents allowing to quickly navigate to the relevant section. But wait - it already exists in the JDNC incubator project. So, i contacted the original developer, Pierre Le Lannic, and he graciously agreed to contribute this code to Substance (this was needed since the JDNC license is not BSD compatible). Thanks, Pierre.

Over the course of adopting his code, i've made some changes:

• The control itself is a button that allows rollover effects.
• When you drag the view rectangle, the scroll pane scrolls to that location.
• Dismissing the popup preview (with Escape key) scrolls the viewport to its original location (using the animation layer from laf-widget project).
• The icon itself has been synced with Substance search / preview icons.
• The new LafWidget.COMPONENT_PREVIEW_PAINTER client property can be used to install custom preview painter on the scroll pane. This allows changing the preview painting, preview popup window size etc.

After all this has been done, Pierre came up with a great idea (wish i thought about this first :) - why not put it in the laf-widget (see this java.net article that describes this project). And indeed - why not? This way it can be available not only to Substance, but to any other third-party look-and-feel. This has been done in the latest development drop of both projects. Once again, many thanks to Pierre for his original contribution and the ideas.

Here is the WebStart link to a test application. Press the overview button, move the mouse over the preview popup, release it or press Escape and see how it feels. Use the c-preview checkbox to turn on a custom preview painter (note that it produces larger popup and smoother thumbnail):

For those behind corporate firewalls, here are two screenshots. The first one shows a scroll pane with rolled-over scroll pane selector button:

The second one shows the scroll pane selector popup with preview thumbnail:

Comments

• There is a problem when you move the mouse outside of the preview area. The scrollpane still scrolls appropriately, but the little rectangle in the preview area doesn't update, so it is out of synch with the scrollpane view. When the mouse is back over the preview, the rectangle will move again, but it still out of synch.

  Posted by: davidbrowne on November 18, 2006 at 07:36 PM

• Thanks, David. I'll look into it.

  Posted by: kirillcool on November 18, 2006 at 07:39 PM

• really cool, to make it perfect make the button also translucent ;)

  Posted by: bienator on November 19, 2006 at 10:39 AM

• Michael, the button already takes the active translucency - play with the top slider and rollover the selector button to see it.

  Posted by: kirillcool on November 20, 2006 at 09:21 AM

• Wow, very nifty.

  Two things I notice that might be worth looking into:
  1. I get a bar at the bottom of the preview rectangle that says 'Java Application Window', unlike your screenshot (XP, IE, Java6). (its the same bar I get that bar with the main window too)

  2. Not sure if its what you intended, but the preview rectangle will scroll the view on any mouse move even if the mouse cursor is not within the rectangle. This is unlike what happens with scroll bars.

  This stuff is really cool, and what a great use of that little box in the corner!Keith

  Posted by: commanderkeith on November 20, 2006 at 02:34 PM

• Keith,
  1. You get that since the JNLP is not signed. You can download the substance.jar and substance-tst.jar from here and run java -cp substance.jar;substance-tst.jar test.ScrollDemo to see it without those warnings. Unlike some, i prefer not scaring the users with the JNLP security dialog unless absolutley necessary :)
  2. This has already been mentioned in the first comment and fixed in the code. I'll update the WebStart application accordingly.
  Thanks - and most of the praise goes to the Pierre Le Lannic who is the author of the idea and the original implementation.

  Posted by: kirillcool on November 20, 2006 at 02:39 PM

• David, Keith, the problem with scroll outside the preview window bounds has been fixed. Thanks.

  Posted by: kirillcool on November 21, 2006 at 08:35 PM

• Well, thanks to you for all those enhancements...
  Pierre

  Posted by: weebib on November 22, 2006 at 06:34 AM

This work is licensed under a Creative Commons License.