• Home
  • Events
  • About
  • JavaFX Abacus Tutorial, Part II

    This is the second part of a basic tutorial on JavaFX. The first part can be found here and the code is on github. The running example of the tutorial is to build an abacus. If you are curious how the final solution will look like, please
    have look at this 7 min video.

    Your latest homework assignment was to extend the single-circle-version to a board of 10 * 10 circles.
    Have you done it? Cool.
    When starting you should now see something like
    10 X 10 circles.
    You should now be familiar with how to create a simple JavaFX application, how to use the SceneGraph, adding child nodes, and using builders.

    Today, we will introduce event handling and translation.

    Each node in the SceneGraph can be transformed in various ways by translation, rotation, scaling, and more.
    What we need for the movement is a translation, which is a transformation that displays the node at a given x/y offset from its original position.

    Setting the translation is easy. Simply change the translateX property of the node.

    will display the node 100 pixels to right from its original position.

    Unlike Swing, there is no need to clear the canvas and repaint all nodes on the new position! Changing the translateX property is all it takes. The SceneGraph takes care of proper repainting.

    Let’s say we want the circles in our abacus to move 100 pixel to the right when we click on it. This requires an event handler on the circle that changes the translateX value. Here is how you set such an event handler as an anonymous inner class:

    As an optimization of the above, you can share one event handler between all the circles. In this case use

    The full code now looks like so:

    Clicking on a circle now moves it to the right “on its rail”.
    circles with translations


    Your homework assignment is to make the circle moving back to its
    original position (translateX becomes 0) when you click on a circle
    that has been moved before.

    Next week, we will animate the movements.


    If you are committed to learn JavaFX, please consider joining one of our JavaFX workshops at Canoo.

    See you next time!
    Dierk König

    P.S. Tim Yates has posted a GroovyFX version.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks


    1. Hamlet D'Arcy said,

      January 16, 2013 @ 8:16

      This black and white abacus reminds me of some classic optical illusions, like this one: http://www.illusions.org/dp/1-2.htm

      I’d love to see a small JavaFX project that implements a bunch of the illusions from that sight… maybe at the next Hackergarten?

    2. Daynacook said,

      August 12, 2013 @ 12:41

      This one is great and is really a good post. I think it will help me a lot in the related stuff and is very much useful for me. Very well written I appreciate & must say good job.


    3. sidsahu said,

      November 13, 2013 @ 6:02

      Pretty good post. I just stumbled upon your blog and wanted to say that I have really enyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon

    4. Asif Ansari said,

      January 14, 2014 @ 21:46

      I really liked how you leave some work upto the readers(Homework)…Its comes like a challenge to solve.Great Work.

    5. Ekino said,

      January 14, 2014 @ 21:49

      HomeWork :

      else circle.setTranslateX(MOVE_WAY);

    6. mouzitoto said,

      February 9, 2014 @ 18:01

      Very helpfull post. Thank u!

    7. ariesta said,

      July 4, 2016 @ 22:10

      how run javafx in browser ?

    8. Dierk said,

      July 4, 2016 @ 22:57

      There is no really good option to run JavaFX in the browser.
      Among the options are: Applets (somewhat deprecated),

    RSS feed for comments on this post

    Leave a Comment

    Time limit is exhausted. Please reload the CAPTCHA.