Montag, 25. November 2013

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:

Montag, 18. November 2013

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

Mittwoch, 13. November 2013

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.