JavaFX

In this week we cover JavaFX, which is a professional Graphical User Interface library. We use a series of videos with exercise. Through these, we show you some of the fundamental skills. The aim is that you should be able to use these with some of JavaFX components (layout, controls) we do not teach you directly.

Create a Graphical HelloWorld

The first video gives a little background to GUI libraries.

After that we need a development stack, we obviously need a Graphical Hello World. This video shows you how to set up a functioning JavaFX HelloWorld. Try and add more text to the application, for instance change it to display your name and address using several lines. You can find the code from the video here.

Once that we have the HelloWorld it is time to do something interesting with it. Let's create an application that has a button that changes text when it is clicked. This video shows you how to do this. Here is the code. Once you have done this try and change the layout using one of the other panes.

A Game

This is the first marked assignment work 1/3 for the grade (minor part so don't spend too much time on it)

There is a common guessing game where the computer picks a random number, and then it is the player's task to guess the number. The computer will only provide feedback such as "Too low" or "Too high", and the player has to guess again. Obviously, when the player finally picks the correct number then the player is congratulated and the game ends. It is your task to create the game.

Hint:
  • You can use a TextField for the input.
    • Remember, that a TextField is not a String.
    • You can access the text as a string using the getText() method.
  • You can use Integer.parseInt to convert a String to an Integer.
    • It throws an NumberFormatException if the String isn't an Integer.
    • Your code must deal gracefully with user errors (i.e. cope without crashing and tell the user they made a mistake)

If you have extra time:
  • You might want to use pictures when providing feedback. In this video, I show how to do this. (code and dragon image).
  • You might also want to include buttons with images instead of text. This tutorial shows how that is done.

Animation

Animation is often part of an interesting user interface, for instance in games but also other types of interfaces. This shows you how to animate a ball inside a Scene (code). Follow this and try to change it so that you have three balls instead of one.

Hint:
  • Use an ArrayList/Array to store the circles and necessary data
  • You might want to create a Ball class that store everything about one Ball. Then you only need one array
    • ArrayList balls
  • Instead of setting the X and Y, use Translate, e.g. getTranslateX and getTranslateY. See a version for two balls without an array here
If you have more time:
  • Add buttons to control the animation (start/pause/restart/stop)
  • Add interesting behaviour (collision of balls, click a ball and it changes colour)
  • Have fun, make it into a game

Assignment

You now have the tools to begin on the main part of this week's assignment. I suggest you begin on it now. Once you have managed the B grade level of the assignment, then come back and use the below section to help you with the rest of the assignment.

Animation with control buttons

The TimeLine has methods for pause/start/stop the Animation. To provide an interface for the user to do this, you probably want to add buttons. You can add buttons to the Group in the above example. Try that. Notice that the ball will continue through the button. You probably do not want that.

The following video shows how you can create a Pane and add it in a BorderPane. The BorderPane is powerful but has some weaknesses too. This video shows how you can specify what controls grow within VBox, HBox and GridPane. This gives you a lot of flexibility when creating user interfaces. (code)