JavaFX – Bind with Caution!

JavaFX “bind” and “on replace” are really nice and useful features. But recently I came across many misuse of this feature which results in performance issues. Here we will look into couple of common usage which leads to performance issues..

An example application is shown below…

For Applet mode, click on above image

For standalone mode

Example: In below code, the user wants to perform “update” operation when ever there is any change in x, y, w and height. The initial values of these variables are set to 0. Later as and when the application is shown on screen, actual values of these are updated.

var x = 0 on replace { update(); } var y = 0 on replace { update(); } var width = 0 on replace { update(); } var height = 0 on replace { update(); } function update() {     /**      * Performs complex update process!      */ }

But during this process, the “update” method is invoked 8 times! 4 times when the variable is initialized to 0 and another 4 times when the actual value is set. Instead if we perform a simple check to ensure that all variables are set before update, we could have easily avoided performing the complex operation so many times and improve performance.

function update() {     if((x > 0) and (y > 0) and (width > 0) and (height > 0)) {         /**          * Performs complex update process!          */     } }

Another common usage is binding to value of Slider or ScrollBar. Objective is to perform some operation as and when the value is updated by user.

var slider = Slider {     min: 0     max: 100     value: 50 } var sliderValue = bind slider.value on replace {     /**      * Perform Complex Operation!!!!      */ }

But this will end up performing the operation many many times before the actual value required by user is set. Also the slider won’t be responsive, since we are constantly repeating the task. So instead of performing operation for each and every value with in the interval, we may just wait for few milli-seconds before performing the actual operation.

var slider = Slider {     min: 0     max: 100     value: 50 } var timeline = Timeline {     keyFrames: KeyFrame {         time: 50ms         action: function() {             /**              * Perform Complex Operation!!!!              */         }     } } var sliderValue = bind slider.value on replace {     timeline.playFromStart(); }

In above code a Timeline is started when ever the user changes the slider value. The actual operation is performed only after few (50ms in above code) milli-seconds. This will ensure that we won’t perform complex operation until user settles for a value.

Also bind is used for layout of nodes along with boundsInLocal, boundsInParent etc. Instead try to use various layouts such as Flow, HBox, Panel, Stack, Tile, VBox and LayoutInfo.

Also refer to Girish’s blog which talks about another common performance issue related to dynamic update of nodes.

These are not the only issues or only solutions, the objective is to just caution the usage, so that you can optimize the code as per your requirement. Try it out and let me know feedback

Source:

• Main.fx

var dzone_url = “http://blogs.sun.com/rakeshmenonp/entry/javafx_bind_with_caution”;
var dzone_style = ‘2’;