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

    This is the fourth part of a basic tutorial on JavaFX. The other parts 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 was to add rails, which can easily be achieved with rectangles like so:

    We have now achieved a state where we can explore the powerful concept of JavaFX property binding and we will do so in two steps

    • today, we will add numbers that move together with their respective ball
    • next week, we will use property binding to push adjacent balls around.

    In an abacus, each ball represents a digit. Let’s add this digit as a text to each ball:

    The placement of the text is a bit off-center but since this is only a temporary step, we do not bother putting each ball and its text into an exactly aligned layout. (If you want, you can use StackPane for that.)

    You should now see each ball with a white label that tells the digit that it represents.

    Why is the text on top of the ball and not behind? That is because we add it to the scene graph after the ball. What is added later is printed on top. You can also use a z-position if you need more control.

    When you play with the current state of the program, you will find that the action handler that moves the ball seems to be ignored every now and then.
    The reason for this is that you have clicked on the text, not on the ball. The text node will then “consume” the event.
    The simplest way to resolve this is to give the text and the ball the same event handler:

    Ok, now the circles move reliably but the text doesn’t move together with its ball. But we would like to have a display like in the figure below:
    abacus with numbers

    JavaFX property binding comes to the rescue!
    Moving the ball by means of a TranslateTransition as we have done last week means that the translateX property of the circle will change over time.
    We want the translateX property of the text to change in the exact same way. We are binding both translateX properties.

    This finally leads us to the solution below:

    So far, so good, but one important piece of functionality is still missing: when starting and the user clicks on e.g. digit 5, all the digits 4, 3, 2, 1 should also move to the right. The equivalent needs to happen when subtracting by moving balls to the left.


    This weeks homework is a non-coding design exercise. Think about possible solutions for the pushing of adjacent balls.
    If you have followed the tutorial up to this point, you have all the knowledge to solve this task.


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

    See you next week!

    P.S. and – as it has become tradition – the GroovyFX solution by Tim Yates.

    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. Andrei said,

      February 4, 2013 @ 11:40

      Wouldn’t it be nicer to use a Group to contain both the Circle and the Text nodes, and have the event handling and translation on the group level?
      Of course, you don’t have an example for property binding then, but in my opinion it would make more sense as a way to build a complex scene.

    2. Dierk said,

      February 4, 2013 @ 14:38

      Yes, for the problem at hand grouping would definitely make more sense!
      Thanks a lot for pointing that out.

      I only needed the currently solution as an entry-step into property binding.

      When the initial solution will be finished I may show some variants and grouping would be a great candidate.

      thanks for commenting

    RSS feed for comments on this post

    Leave a Comment

    Time limit is exhausted. Please reload the CAPTCHA.