Skip to main content

Experimenting with scroll panes and scroll bars - it's a go

Posted by kirillcool on November 11, 2006 at 12:09 AM PST

One feature that was suggested in the original entry (thanks Alan) was to animate the opacity of the scroll track when the mouse enters / leaves the scroll bar. This turned out to be trickier than I originally thought (mostly since i decided to animate the scroll track and the scroll thumb on the scroll button rollovers) but the result is pretty nice (see the WebStart link and the screenshots below). The main reason for pretty much a complete rewrite of the rendering code is that the scroll buttons are child components of the scroll bar and are painted / animated separately. Fortunately, the animation layer in the laf-widget is flexible enough to track any ButtonModel changes, so the scroll bar UI delegates "tricks" it to track a composite model that wraps the models for the scroll buttons and a "surrogate" model of the scroll thumb (see the details in the code).

First, the WebStart link itself. The top panel contains the following controls that show (almost) all available configuration options for scroll panes:

  • The enabled checkbox enables / disables the scroll pane.
  • The combo allows changing the button policy.
  • The flat checkbox marks all the scroll buttons to have flat appearance. Flat button shows the background only on rollover / selected / pressed state (think about toolbar buttons).
  • The active checkbox marks all the scroll buttons to always be painted in theme active color. An active non-flat button will provide visual consistency with the scroll thumb, while non-active flat button will draw less attention from the viewport.
  • The overlay checkbox marks the scroll tracks, scroll thumbs and scroll buttons to paint the viewport under them.

And now for some screenshots. All the screenshots show enabled, non-flat, active and overlayed scroll bars with 40% inactive and 70% active opacity on scroll bars. The first screenshot shows the mouse on the viewport (scrollbar is non-active):

The second screenshot shows the mouse on the track. The track and the thumb are painted in active opacity (compare with the vertical track and thumb):

The third screenshot shows the mouse on the left scroll button. The button, the track and the thumb are painted in active opacity (compare with the right button):

The fourth screenshot shows the mouse on the right scroll button. The button, the track and the thumb are painted in active opacity (compare with the left button):

The code for the test application (and the supporting UI delegates) is not yet in CVS (it will be added once 3.1 is officially out and properly tagged). To see the code, download the distribution zip from this location and see the src/test/ScrollDemo.java.

Related Topics >>