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 = on replace update()}
var y = on replace update()}
var width = on replace update()}
var height = 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 > 0and (y > 0and (width > 0and (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:

Advertisements

About Rakesh Menon
-

6 Responses to JavaFX – Bind with Caution!

  1. Vaibhav says:

    Informative, thanks !

  2. ChrisW says:

    Good post, and a reminder to not be so lazy with your code.
    Thanks

  3. Charles Tam says:

    Thanks for your usage tips.

  4. Pingback: JavaFX – Performance Optimization « Java, JavaFX and beyond…

  5. Amit Vijaykumar says:

    hi

    i have a problem here. i have written the below piece of code in javafx

    var mv = MediaView
    {
    mediaPlayer:MediaPlayer
    {autoPlay:true

    media:Media
    {
    source:”E:/bunny.flv”
    }
    }
    }

    var tmp = bind fun(mv.mediaPlayer.currentTime);

    function fun(t:Duration):Integer
    {
    println(“in fun”);
    return 0;
    }

    Stage {
    title : “MyApp”
    onClose: function () { }
    scene: Scene {
    width: 200
    height: 200
    content: [mv]
    }
    }

    the code above tries to call a function whenever the current time of the video changes. this code works fine in javafx1.2 but it is not working in javafx 1.3. the function “fun ()” is not called when the current time changes (in javafx1.3).

    Please help.

    thanks in advance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: