Finished writing the JavaFX chapters for the second edition of my Java 24 Hour Trainer. It included a sample code of the Tic-Tac-Toe game. The front end is done in FXML and the application logic is written in Java.
Using FXML allows to substantially minimize the amount of Java code. This application has 200 lines of code, namely:
Tic-Tac-Toe.fxml: 45 lines
Main.java: 27 lines
TicTacToeContoller.java: 118 lines
application.css: 12 lines.
The FXML and CSS files can be created and modified by people who do not know Java at all (i.e. graphic designers). I haven’t implemented a couple of menus, which would add a couple of dozens lines to the code base. Pretty concise, isn’t it? The source code of the Tic-Tac-Toe project is available among other code samples at https://github.com/yfain/java24hourtrainer2ndedition. I’ve developed this in Eclipse IDE with the E(fx)clipse plugin that generated an initial project for me. At the time of this writing NetBeans 8 IDE has the best support of JavaFX followed by IntelliJ IDEA 14, and then goes Eclipse with E(fx)clipse plugin.
yakovfain.com 
I too have made a small venture into the JavaFX world. As of now, I’m getting used to it and enjoying it. While it isn’t as easy,clean and concise as Adobe AIR, it feels close and somewhat on the right track. I do take issues with how I feel the current UI classes operate with each other as well as the lack of percentages when sizing. Also, the tutorials are kind of all over the place with respect to quality and API relevance.
The best part of it is that it comes with the Java ecosystem (developers, support, JVM, libraries) which I feel is a great boon. With Adobe AIR, I’m not quite sure if they are going to keep it for the desktop as all their AIR feature focus recently seems to be going towards the mobile platforms
Yes, Adobe had better documentation on Flex and AIR. But knowing the benefits of declarative GUI programming from my Flex/AIR days, helped me to learn how things work with JavaFX, when the GUI is built in FXML and styled in CSS. I knew what to look for online. For example, when I needed to change the style of the winning buttons in Tic-Tac-Toe, I knew that I needed to load and apply a class selector (e.g. winning-button) from CSS. But available books just offered calling setStyle() in Java with hardcoded CSS attributes. I knew that there should be a better way and finally figured out that it could be done like this:
myButton.getStyleClass().add(“winning-button”);
Things like this should be included in tutorials, which I did now. 🙂
Yakov, are you associated with Surancebay?
Yes, I am a partner there.
can I contact you regarding an issue? Not directly with your company but a company that uses your services and I wanted to see if there is any way to block my info from going to them
yakovfain@gmail.com
Thanks for this useful example. Im learning and I am very excited.
myButton.getStyleClass().add(“winning-button”); is very nice, but my favourite line of code in your example is the following:
ObservableList buttons = gameBoard.getChildren();
I also learnt from your program that the @FXML annotation is not mandatory on GUI component event listeners like menuClickHandler and buttonClickHandler.
TicTacToe.fxml can still be improved a little (if you comment out -fx-focus-color: transparent;in application.css you see that the buttons are not perfectly aligned), but, as you say, that can be done by people who do not know Java at all.
I am looking forward to more JavaFX tutorials from you!
@FXML annotation is only needed if you want to inject a reference to the GUI component into the controller class. Since the TicTacToeController only reacts on the menu selection – there is no need for such a reference. But if you wanted to “programmatically click” on the menu from the controller, then @FXML would be needed.
Tic Tac Teo Game By King Houssem
https://www.facebook.com/Learn.Java.With.King.Houssem
Yakov, do you consider JavaFX a serious GUI technology on par with Flex today?
From what I have seen so far (watching Sun and Oracle), it remains a stepchild
in hunger of love and care.
Has something changed? I wonder if it really is worth learning comparing to other non-JS ones
like Dart, Vaadin, GWT, etc.
JavaFX is a serious GUI technology, but it’s not something to learn just in case. You know Java already, and if you’ll get a JavaFX project, you’ll pick it up easily.
We’ve completed one project in Dart + AngularDart and deployed it in prod. It’s a Web app to find/rate insurance agents: https://www.easy.insure.
In January we’ll run an internal training for our developers, and then will offer this training to the public.
I will eagerly wait for your Dart class. Will you talk about AtScript as well? See: http://sdtimes.com/atscript-googles-new-superset-javascript-runtime/