Sunday, June 20, 2010

How to get Java FX pop-up items to render correctly on Unix systems

Our environment : JavaFX 1.3 with JRE 1.6 u20 on Ubuntu 10.04/CentOS 5.5

By default JavaFX pop-ups (from menuitems or choicebox) on Unix systemes come up with a white rectangle beneath them.
There have been posts on the web on how to get pop-ups and transparent stages on unix systems to behave correctly.

See Tor Norbye's & Just Java blog.

The solutions hinge around the fact that you can set a property

javafx.allowTransparentStage to true

for JDK > 1.6 u14 to remove the white rectangular area which is shown underneath the elements. In my experience, you also need to set the compositing manager correctly. In GNOME you would have to go to System>Preferences>Appearence>Visual Effects & select the Normal option. (Assuming that you are using compiz)

The fix has the effect of making the menu display look correct. However, when you move your mouse over the popup items, they show terrible flickering. See RT-8819. Which is a not acceptable trade-off either.

After a bit of digging around, it appears that the stylesheet for JavaFX controls - caspian.css - has an image for the border-image - menu-shadow.png - for the .popup-menu selector. This image seems to be the reason for the bad white rectangle beneath the menu. And appears to be the culprit for the excessive flickering when you set transparency via the javafx.allowTransparentStage property

So the workaround to resolve the flickering issue while hovering on menu items AND removal of the white rectangular area under the popup is to not really worry about transparency settings by removing the underlying image beneath the menu. In code this translates to

1. Do not set javafx.stage.transparency property to true
2. Put in the following style in the sylesheet attached to the Scene

.popup-menu {
    -fx-border-image-source: null;
}

Hope this is useful for folks developing FX apps on UNIX systems!

2 comments:

  1. Thanks for the tip, it fixed my menus!

    Do you know if there's a similar fix for tooltips also? Because they seem to have the same nasty transparency issue.

    ReplyDelete
  2. Anonymous1:56 pm

    Thx! Now it's looking somehow acceptable - saved some hours to investigate this further.

    ReplyDelete