Custom Transitions

Long time since my last post, but I didn't had enough time to do more JavaFx work...

JavaFX has a lot of built in ready to use animations, called Transitions. There is a base class javafx.animation.Transition and many useful implementations, like the ScaleTransition for animating the size, the RotateTransition for animationg the rotation, or the FadeTransition for animation the transparency or the TranslateTransition for moving a node.

They are easy to use: Instantiate them, set a start and end value and a duration, and call play. Here an example that fades out myNode in 500 milliseconds:

FadeTransition transition = new FadeTransition(Duration.millis(500), myNode);
transition.setFromValue(1);
transition.setToValue(0);
transition.play();

But sometimes, the built in transitions don't fit. Either because the built in transitions only work on nodes, but e.g. not on popups, or because you want to have an animation, that is not yet implemented. So write your own! It is very easy. Just subclass the abstract class Transition and implement the protected method interpolate. Thats all. The param frac is a double between 0 and 1. From this value, the value change of your transition has to be calculated. This is very easy if the target value is a double between 0 and 1 like for opacity. So the easiest possible example is a fade transition for popups:

private class FadeTransitionForPopup extends Transition{
  private Popup popup;
  public FadeTransitionForPopup (Popup popup){
    this.popup = popup;
  } 


  @Override
  protected void interpolate(double frac) {
    popup.setOpacity(frac)    
  }
}

Major bug with Java 8 default methods in interfaces found in JavaFx project

I work on a Swing to JavaFx migration project with the guys of canoo. We reimplement features of existing Swing controls with JavaFx. On implementing additional features for the TableView we found a major bug when moving columns. We filed that bug in the openfx JIRA and had some discussions with the Oracle developers.

On trying a workaround we were told of, a canoo developer found, that it was no JavaFx bug in the TableView, it was a critical bug in the Java 8 VM itself!

If you use the new default interface methods, an interface can provide a default implementation for a method. That means, that an implementing class does not have to implement this method, but it can do. See the example:

public interface MyInterface{
  default int answerToAllQuestions(){
    return 42;
  }
 }

public class MyClass implements MyInterface{

}

public class MySecondClass implements MyInterface{
  public int answerToAllQuestions(){
    return 21;
  }
}

The interface MyInterface defines a default method. We have two classes implementing the interface. The first one does not implement the method of the interface, so the default method implementation will be used. The second class implements the method.

The bug is now, that if you have a class overriding a default method, the using of that method instead of the default method is not stable. After some time the VM decides sometimes to use the interface default implementation instead of the method in the implemented class. That can result in weired behaviour, that is really hard to reproduce and find out.

This bug (see the JIRA here) costed us more than 25 days of work, so have that problem in mind, if you use interface default methods in your project. A big problem is, that the collection and the new stream framework use that feature heavily. It will be interesting to see, if this P1 bug will be fixed before the release of the first Java 8 release in March.

UPDATE:
The bug was fixed. The cause was an over optimization of the hot spot compiler. So the fix will be part of the official JDK 8 release in March! So we can use the default methods in interfaces again with not being afraid of strange behaviour.

Implementing custom JavaFx Bindings

Built in Bindings

Probably you know the JavaFx property binding. (If not here is a tutorial). There are several ways to create a binding. The easiest way is to use the bind or bindBidirectional methods of the property you want to bind. For more complex bindings you can use the Bindings class. It provide a lot of special bindings as static methods e.g. ones that calulate number values, concat string properties, bind ObservableLists, ObservableMaps etc., but nothing for BigDecimal...

Here we have certain excamples for that:

Custom implemented Bindings

If the built in bindings do not fit your needs, JavaFx provides base classes, that you can use for custom implemented bindings. You find them in the package javafx.beans.bindings and all their names end with Binding.

There are only two things to do in your subclass of one of the Binding classes:

• Think about on which other properties your new binding is dependand of. Normally this are the properties you calculate your new value of. Use the bind method to add those properties to the dependencies of the new binding in the initializer block (as done in the examples below) or in the constructor. If the value of one of those changes, the binding value is newly calculated.
• Implement the computeValue method, which returns the new value of the binding.

Normally you think of numbers to compute a value. But you can do this with every object, that can be created from other values, if you use the ObjectBinding class. 

Here are several examples for that:

Nested or dependant JavaFx Properties

In JavaFx the concept of bindable properties makes life pretty much easier. Here is an example: You want the text of a Label be the same, as in one of your properties: myLabel.textProperty().bind(myProperty);

But sometimes you want to bind to a property of an object, that is held in another property. Lets make an example. You have a property selectedCustomer which holds a Customer object. In that Customer object you have a String property called name. If you bind directly to name with bind(selectedCustomer.get().nameProperty()) you get in trouble, if the value of selectedCustomer changes. Of course you can fix that with implementing a ChangeListener and add it to selectedCustomer and rebind it on the change.

Here is a class, that encapsulated that for you, here is the code for your free use:


This is a Java 8 example and makes use of the new Lamda features. Of course you can use that with replacing the lambdas with anonymous inner classes.

The use is very easy:
ObjectProperty<Customer> selectedCustomer =...;
ObjectProperty<String> selectedName = new NestedObjectProperty<>(selectedCustomer, 
  (Customer customer)-> customer.nameProperty(), false);


The Parameters of the constructor are:

• The property that delivers the property to bind against, in our example selectedCustomer
• A Function implementation, that returns the property to bind against, in our example it gets a Customer as parameter and returns a String property
• A boolean, if the binding should be unidirectional or bidirectional

Scaling vs Zooming in JavaFx

JavaFx has a built in scaling functionality. We will see in a few lines, what that means. I needed a zooming functionality like you find it in Firefox. You can make the content e.g. bigger, but that means, that all content is still painted. If the window becomes too small, you get scrollbars, but nothing of the content is lost.

Scaling in JavaFx

Every node in the scene graph in JavaFx has a the ability to scale it's content. But that does NOT effect the layouting behaviour of this node. Here we have a simple exampe with a webview and a slider on the bottom. With the slider you can change the scaling from 0.5 to 2.0. As you can see, if the zoom factor is smaller than 1, there is a white border round our webview, and if the zoom factor is bigger than 1, not all content is shown

How to zoom right?

I didn't find a fitting example on the web, so I tried it several times, to do it right. And the only way, I know is to create your own Pane implementation to connect the scaling and the layout, which must fit together to do a zoom. Here is the code example:


As you can see, we intruduces the class ZoomingPane, that subclasses Pane. There are two important things to do:

Implement a customized layout

To implement an individual layout you must overload the layoutChildren method. The code insight is mainyl copied from StackPane with one main difference: The computing of the contentWidth and the contentHeight uses the zoomFactor.

Adding a Scale transformation

Apply a Scale transformation which is connected to the zoomFactor Property. In our example this ist done in the constructor. We create a new Scale with the factors 1 and 1, which means no zooming at all. The Scale instance is applied to the content. Then we add a ChangeListener to the zoomFactor property, which takes the new zoomFactor, applies it to the Scale transsformation and calls requestLayout() which is important to tell JavaFx to relayout.

You may ask, why I didn't bind the x and y property of the scale to the zoomFactor. The reason is, that we still need the listener to request the new layout, so don't have any advantage.

What we didn't cover in this post is the computation of the preferred, the minimum and the maximum size of our new pane. If you use that ZoomingPane as root node in the scene as I do, this is not necessary.