 |
|
 |
 |
|
|
 
Romain Guy's BlogSynth Week, Components Orientation SupportPosted by gfx on September 23, 2005 at 12:32 AM | Comments (7)Many Swing components can be oriented according to your needs. Scrollbars are among the most common oriented components. Despite some support in Synth for oriented components, it is far from being exhaustive in Tiger. While some left aside components can be easily forgotten, for instance the window of a floatable toolbar being dragged, Synth lacked support for important oriented components, like scrollbars. Scrollbars are a great example because many users ran into the problem of skinning both horizontal and vertical scrollbars with a different picture. The following snippet shows how to style scrollbars' track:
<style id="scrollbarTrackStyle">
<state>
<imagePainter method="scrollBarTrackBackground"
path="images/scrollBar-track.png" sourceInsets="0 7 0 7" />
</state>
</style>
<bind style="scrollbarTrackStyle" type="REGION" key="ScrollBarTrack" />
This code works fine when you use a picture which can be stretched horizontally or vertically. Unfortunately, most modern look and feels require the use of gradients to show good looking scrollbars and this is where the problem arise. Take a look at the following screenshot and compare the two scrollbars:  Fig. 1. Ouch, scrollbars look... weird. The result is not really surprising since we use only one picture for both scrollbars. This picture is a gradient meant to be stretched on the vertical axis, thus the glitch in the horizontal scrollbar. By taking a closer look at Synth documentation we discover a special attribute for painters, called "direction". On the screenshot, you can notice the four arrow buttons (two for each scrollbar) are rendered perfectly, thanks to the direction attribute:
<style id="scrollBarArrowStyle">
<state>
<imagePainter method="arrowButtonForeground"
path="images/scrollBar-up.png" center="true" direction="north" />
<imagePainter method="arrowButtonForeground"
path="images/scrollBar-down.png" center="true" direction="south" />
<imagePainter method="arrowButtonForeground"
path="images/scrollBar-left.png" center="true" direction="west" />
<imagePainter method="arrowButtonForeground"
path="images/scrollBar-right.png" center="true" direction="east" />
</state>
</style>
<bind style="scrollBarArrowStyle" type="REGION" key="ArrowButton" />
It would be logical to do the same for the track but you can't because Synth doesn't support direction for scrollbars tracks. And for many other components and methods for that matter. Filed as bug #5033822, this issue is fixed in Mustang b53. Instead of fixing scrollbars only, we took a look at all Swing components and added orientation support wherever we could. This means you can now skin oriented tabbed panes (and their sub-regions), toolbars, etc. The following snippet addresses the issue for our scrollbars:
<style id="scrollbarTrackStyle">
<state>
<imagePainter method="scrollBarTrackBackground"
path="images/scrollBar-track-horizontal.png"
direction="horizontal" sourceInsets="0 7 0 7" />
<imagePainter method="scrollBarTrackBackground"
path="images/scrollBar-track-vertical.png"
direction="vertical" sourceInsets="7 0 7 0" />
</state>
</style>
<bind style="scrollbarTrackStyle" type="REGION" key="ScrollBarTrack" />
Synth can now render the scrollbars properly, as in the following screenshot:  Fig. 2. Thanks to Mustang, scrollbars (and other components) look great. Adding extensive oriented components support in Synth required a lot of changes in SynthPainter. Therefore, some methods might have been forgotten. In such a case, just send me an email and I'll add the missing method as soon as possible. Bookmark blog post:  del.icio.us  Digg  DZone  Furl  Reddit
CommentsComments are listed in date ascending order (oldest first) | Post Comment
| |
 java.net RSS Feeds
|
