JavaFX: Transparency and Linux

There have been a few posts regarding transparency under Linux. I have put that code together so that it can be used directly. This works for me:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public def osName = FX.getProperty( "javafx.os.name" );
public def IS_LINUX = osName.contains( "inux" );
public def IS_MAC = osName.contains( "mac" );
public def IS_WINDOWS = osName.contains( "indows" );
public def IS_SOLARIS = osName.contains( "olaris" );

/**
 * Is the version of the running JDK at least major.minor.micro_update?
 * In 1.6.0_18 macro=1,minor=6,micro=0,update=18
 */
public function jdkAtLeast( macro: Integer, minor: Integer, micro: Integer, update: Integer ): Boolean {
  def runtimeVersion = java.lang.System.getProperty( "java.runtime.version" );  
  def pattern = java.util.regex.Pattern.compile( "^(\\d)\\.(\\d)\\.(\\d)_(\\d+)-" );
  def matcher = pattern.matcher( runtimeVersion );
  if ( matcher.find() ) {
    def currentMacro = Integer.valueOf( matcher.group( 1 ) );
    def currentMinor = Integer.valueOf( matcher.group( 2 ) );
    def currentMicro = Integer.valueOf( matcher.group( 3 ) );
    def currentUpdate = Integer.valueOf( matcher.group( 4 ) );
    if ( currentMacro < macro or currentMinor < minor or currentMicro < micro or currentUpdate < update ) {
      return false;
    }
    }
  true
  }

public function fixTransparency() {
  if ( IS_LINUX and jdkAtLeast( 1, 6, 0, 14 ) ) {
    java.lang.System.setProperty( "javafx.allowTransparentStage", "true" );
  }
}

JavaFX: Bug in Timeline(?!)

The behavior of the Timeline has changed for performance reasons in 1.3. Now the sequence containing the KeyFrames is only recalculated/updated if you call evaluateKeyValues manually.

But also the behavior has changed in another way:
I have a Timeline that contains an optional KeyFrame. When looking at the docs the timeline should simply skip a KeyFrame if the time is negative:

KeyFrames having time < 0s will be ignored by the Timeline.

Exactly what I am looking for. But never believe the documentation:

1
2
3
4
5
6
7
8
9
10
  Timeline {
      keyFrames: [
        KeyFrame {
          time: -1ms
          action: function () {
            throw new UnsupportedOperationException("aaah!");
          }
        }
      ]
    }.playFromStart();

This small snippet throws the exception… Any ideas or comments?

JavaFX 1.3: Template for custom controls

Here is a small template that helps you to create your own custom control without any problem:

Just paste this code into your fx file and rename the classes using the IDE you prefer…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
public class MyOwnControl extends Control {
  init {
    if ( skin == null ) {      
      skin = MyOwnControlSkin {};
    }
  }
}

public class MyOwnControlSkin extends Skin {
  def myBehavior = bind behavior as MyOwnBehaviour;
  def myControl = bind control as MyOwnControl;    

  init {
    behavior = MyOwnBehaviour{};

    node =  Rectangle {
      width: bind control.width
      height: bind control.height      
    }
  }

  override function getPrefWidth( number ) {
    //return your pref width - hard coded values are ok for most cases
  }

  override function getPrefHeight( number ) {
    //return your pref height - hard coded values are ok for most cases
  }

  /*
  //It is not absolutly necessary to override those methods, but strongly recommended.
  override function getMaxWidth() {
    //Return the max width
  }

  override function getMaxHeight() {
    //Return the max height
  }

  override function getMinWidth() {
    //Return the min width
  }

  override function getMinHeight() {
    //Return the min height
  }*/

  override function contains( localX: Number, localY: Number ): Boolean {
    node.contains( localX, localY );
  }

  override function intersects( localX: Number, localY: Number, localWidth: Number, localHeight: Number ): Boolean {
    node.intersects( localX, localY, localWidth, localHeight );
  }
}

public class MyOwnBehaviour extends Behavior {
  def myControl = bind skin.control as MyOwnControl;
}

JavaFX: Custom controls in 1.3

The 1.3 release of JavaFX is a huge on. Many things have been improved. Also some incompatible API changes occured.

Creating Custom controls has been really hard in 1.2. I have created a template that did what it should. But with the 1.3 release this template does no longer work.

So here we go and look at the issues related to custom controls one more time…. It is the same setup: The custom control is placed within a Stack.

Empty control

We start with an empty control without a skin. The result is the same as in 1.2: Everything is 0.

Simple Control with and empty Skin

Now we create a control and assign an empty skin. This is done within the init-block since createNode no longer exists. This results in the same behavior as in 1.2: There are hard coded values for prefWidth/height that are queried by the stack, set as width/height of the custom control and reflected by the layoutBounds. The boundsInLocal are still (0/0/0/0).

The Stack implementation has been changed. In 1.2 the Stack resized all nodes that implement Resizable to fill the available space. The default behaviour in 1.3 is to use the prefWidth/height.
The old behavior can be achieved by overwriting getHFill()/getVFill.

Skin containing just a Rectangle

Skin with RectangleThe skin returns a Rectangle {widht:70 height:150}. The layoutBounds are not affected in any way. But the boundsInLocal are bound to the bounds of the node.

The result looks different than in 1.2: But just because the control is not resized! As a result the rectangle is drawn somewhere near the middle (but not in the middle). The position of the upper left border of the rectangle is placed by the Stack using the layoutBounds (drawn in red) as initial value for calculation.

So the result might be a little bit “dangerous”: For skins that have boundsInLocal that are near the hard coded values for prefWidth/height (and therefore width/height and therefore layoutBounds) the layout might be “good enough”. So the missing connection between width/height and boundsInLocal could be overlooked…

Skin with prefWidth/Height methods

The implementation of the prefWidth/Height methods is crucial – as written before. It has the expected results: The width/height of the control (and as result the layoutBounds) are changed accordingly by the container.

Connecting the width/height of the rectangle

As written before it is necessary to bind the width/height of the rectangle to the width/height of the control. When this is done the result looks as expected.

Conclusion

Creating custom controls in JavaFX is still quite difficult. And the documentation is still very poor. The template has to be changed slightly (due the removal of the create method). I will do this after the weekend.

The default of the Stack has been changed (and I like that). So it uses the prefWidth/Height per default. While this is the better behavior (imho) it might hide the fact that you have forgotten to implement the getPrefWidth/Height methods.

Please Oracle: Make those methods abstract asap!

JavaFX 1.3: Binding improved

Binding is one of the biggest strengths of JavaFX. I really like that.

And now – with release 1.3 – it seems to work much better. At least some of the simplest cases now work as expected.

The main difference is, that now bindings are lazy by default. They are not evaluated every time a var has changed. This is a big performance improvement for many cases.

JavaFX 1.3 is available…

As (propably) everybody knows, since yesterday JavaFX 1.3 is available.

And I don’t like that new kind of release-date-will-be-a-surprise stuff. Google does it with Android. Oracle with JavaFX… At the same time the code is kept secretly.

I prefer an open source stack. Just to be independent if some big company uses its petty cash to buy some stuff… I have heard this has happened recently…

JavaFX: Gotcha in Skin assignment…

When assigning a new skin in the object literal of the control, it may be ignored if the control doesn’t take care of it.

Instead of the commonly used code:

1
2
3
4
  override function create(): Node {
    skin = MyOwnControlSkin { };      
    super.create();
  }

it is necessary to check whether a skin has already been set:

1
2
3
4
5
6
7
  override function create(): Node {
    if ( skin == null ){
      skin = MyOwnControlSkin { };
    }
       
    super.create();
  }

I think the API should be improved! What about some kind of default skin? Abstract method? Function? Field?

I have updated the template accordingly.

JavaFX: Custom controls template

Update:
This template is made for JavaFX 1.2! For 1.3 use the template posted here instead.

Here is a small template that helps you to create your own custom control without any problem:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
public class MyControl extends Control {
    override function create(): Node {
        if ( skin == null ){
          skin = MySkin{};
        }
        super.create();
    }
}


public class MySkin extends Skin {
  def myBehavior = bind behavior as MyOwnBehaviour;
  def myControl = bind control as MyOwnControl;

  init {
    node =  Rectangle {
      width: bind control.width
      height: bind control.height
    }
    behavior = MyOwnBehaviour{};
  }

  override function getPrefWidth( number ) {
    //return your pref width - hard coded values are ok for most cases
  }

  override function getPrefHeight( number ) {
    //return your pref height - hard coded values are ok for most cases
  }

/*
//It is not absolutly necessary to override those methods, but strongly recommended.
  override function getMinWidth() {
  }

  override function getMinHeight() {
  }

  override function getMaxWidth() {
  }

  override function getMaxHeight() {
  }
*/

  override function contains( localX: Number, localY: Number ): Boolean {
    node.contains( localX, localY );
  }

  override function intersects( localX: Number, localY: Number, localWidth: Number, localHeight: Number ): Boolean {
    node.intersects( localX, localY, localWidth, localHeight );
  }
}

public class MyOwnBehaviour extends Behavior {
  def myControl = bind skin.control as MyOwnControl;
}

JavaFX: Creating custom controls – the right way

Is is quite difficult to create custom controls in JavaFX that perform like they should. This is the result of lack of documentation, unavailability of source code and a not-so-good API…

I struggled with that issue for two days. And finally I think I understood the hole concept. I wrote about that process in this blog some days ago.

If you are just looking for a template, continue here.

Here is a small drawing that visualizes the relevant methods/fields related to custom controls:
control2skin

width/height

The width and height are set by the container. The container calculates the width/height based on the values returned by getPrefWidth/Height and getMaxWidth/Height.

layoutBounds

The layoutBounds are calculated automatically based on the values of width/height of the control.

Attention: The layoutBounds do not depend on the layoutBounds of the node created by the Skin!

This might be counter-intuitive. But it is necessary since the Control is resizable. And therefore the layoutBounds have to depend on the width/size (which are set by the container).

boundsInLocal

The boundsInLocal are bound to the boundsInLocal of the node created by the skin. Just as you might have expected.

getMin/Pref/MaxWidth/height

The control delegates those method calls to the currently active Skin. At least it is necessary to implement the getPrefWidth/Height methods. The default implementation just returns hard coded values (100/50). If you don’t have implemented those methods, the layoutBounds of the control will be wrong. And this will result in odd layout behaviour of your custom node!

Which methods to extend? Which fields to bind?

There are two things you have to do:

Step 1: Override getPrefWidth/Height in Skin

This is *really* necessary. Those methods should have been made abstract. I can’t imagine any case where those methods don’t have to be overridden… So just override them. Returning hard coded values is ok for most cases.

Step 2: Bind the size of the node to Control#width/height

Whenever the layoutBounds of the control change, the size of the node must be adjusted. It depends on your implementation how the relationship might be. For simple nodes without any effects a simple bind should be enough:

1
2
3
4
5
6
7
8
class MySkin extends Skin {
  init {
    node =  Rectangle {
      width: bind control.width
      height: bind control.height
    }
  }
...

Now you have created a custom Control that behaves as expected – and is resizable…

I have created a template to create custom a control and skin.

JavaFX: Bounds by example

There are several misunderstandings related to bounds. (Amy Fowler tried to explain the layout mechanisms some days ago)

There are three bounds that can be used:

  • layoutBounds – represent the *logical* bounds used to layout the node
  • boundsInLocal – represent the *real* bounds used to paint the node
  • boundsInParent – the boundsInLocal transformed to the coordinates of the parent.

And now there is simple stuff you should remember:

layoutBounds are used for layouting (only). They do not have anything to do with boundsInLocal. They are just a logical concept. Sometimes they are the same as the boundsInLocal. Sometimes they are smaller, sometimes larger.

Some examples

layoutBounds == boundsInLocal

This is the case for many very simple nodes. For example a rectangle without any effects like drop shadows.

layoutBounds < boundsInLocal

This is the case for nodes that have some type of effect – for example a drop shadow. That shadow must not be included into the layout. If the layout algorithm used the boundsInLocal (including the drop shadow) the nodes would look misaligned to the human eye.

Aligned using the layoutBounds:

layoutBounds used

Aligned using the boundsInLocal:

sample-unaligned

layoutBounds > boundsInLocal

This is the case if some parts of the node are (yet) invisible, but the human eye interpolates them:

PacMan with bounds

If those Pacman like circles are aligned using the boundsInLocal this will result in: Pacmans aligned with boundsInLocal

While the human eye expects the alignment to be more like that: Pacmans aligned by layoutBounds

Disclamier:

I know that this post does not contain many (if any) new informations. It is just a little bit shorter. And therefore might be helpful for somebody.

Return top
 
9 visitors online now
0 guests, 9 bots, 0 members
Max visitors today: 11 at 01:53 am CEST
This month: 13 at 09-05-2010 05:29 am CEST
This year: 97 at 08-05-2010 02:42 pm CEST
All time: 97 at 08-05-2010 02:42 pm CEST

Switch to our mobile site