• Home
  • Events
  • About
  • Learning JavaFX by example

    It happened just recently that I prepared a small JavaFX application for a lecture on the topic.
    I’d like to share this experience with all of you in a small series of blog posts.

    The JavaFX application is about building an abacus and along the way we will cover the following topics:

    • getting started with using the JavaFX scenegraph and builders
    • transformations, translations and transitions
    • properties, binding, and event listeners
    • making styles and applying them
    • why you want a presentation model in your app (using dolphin).

    For starting, please have a look at this 7 min video to familiarize yourself with how our abacus will look like and how it works.

    The abacus is a major achievement of human culture when simple counting led to the concept of digits on a scale. It is still useful today for developing a sense and feeling for numbers as well as improving your mental arithmetic.

    Prerequisites

    Please make sure you have the latest JDK 7, which contains JavaFX, and your IDE of choice. That’s all it takes.
    Basic Java knowledge is required.

    Getting started

    All the example code resides on github.

    We start with a simple “Hello World” type of application that we will build upon later.
    The result will show a single black circle like so:
    Abacus_Hello_World

    Just create a single Abacus class like the one below

    A few things to consider about this code.

    You have to extend from Application.

    You need a main method for starting.

    You need to implement the start(stage) method, which will be called with the primary stage.
    The simplest way to think about a stage is to just work with it like a Swing JFrame. It is the outermost frame around your view.

    You need to set a scene for the stage. The scene holds the actual scenegraph that is to be displayed.

    The scene is created with the root node of the scenegraph.

    Note: in the code completion of your IDE you will see this node being called “parent”, which often misleads me into thinking that I have to provide the parent of the scene (the stage) but this is not meant here! You have to provide the “parent” of all scenegraph nodes!

    Our root (parent) is a simple Pane – a node that can have child nodes without caring about their placement.

    Now finally we create the circle by using a CircleBuilder with the “fluent-API” style.

    When adding the circle to the view, note that you cannot do this directly – there is no pane.add(circle).
    Instead, you have to first get the (observable) list of children and add the circle to it.

    Homework

    We need more than one circle. Extend the example such that we have 10 lines of 10 circles.

    The next post in this series will build on your homework.

    Finally

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

    See you next time!
    Dierk König

    Tutorial Part II

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • DZone
    • Y!GG
    • Webnews
    • Digg
    • del.icio.us
    • DotNetKicks
    • Facebook
    • Google Bookmarks
    • Newsrider
    • Twitter
    • YahooBuzz

    1 Comment »

    1. Navin Bansal said,

      July 2, 2013 @ 12:48

      nice tutorial and thanx…

    RSS feed for comments on this post

    Leave a Comment


    5 × three =

    css.php