One of the things I’ve been looking into is how the interface responds to resizing. If you have all of your controls in a nice layout, that is usually taken care of for you. But how do you handle things if the interface is not made up of standard components, something like a graphical game interface for example?
Well, one of the tasks I’ve set for myself recently was the creation of an interface for the game of tic-tac-toe. Such an interface should:
Something like the following:
When the window is re-sized, all of the requirements listed above are met.
Here’s the listing of the program that produces the interface shown above. There is no logic for actually playing the game, just re-sizing and re-drawing the board (with some hard-wired symbols).
And here’s the project file.
Note the use of the
resource-path in the project file. That’s how leiningen finds JavaFX.
The magic begins in the
-start function. That’s the function in your program that JavaFX calls to start things up. The first thing required is that your root node is actually re-sizable. Hence the use of a
Pane. See Amy Fowler’s blog for a nice description of the layout classes. Many JavaFX examples use a
Group object. That won’t work here because it is not re-sizable.
The next important thing that happens in
-start is to bind the width and height properties of the
Canvas to the width and height properties of the root
Pane. This was new to me. It isn’t the same mechanism as is used in Swing. By binding the width and height properties, the canvas gets notified any time they change. The
ChangeListeners added to the two properties get called when the properties change providing the opportunity to re-draw the interface. The re-draw occurs by calling the
redraw-board function on the canvas whenever the size changes.
At first I thought that re-drawing the board on every change during a drag might be too slow. However, I can’t seem to outrun the program no matter how fast I move the mouse. So, this method seems to work for a program with an interface as simple as this one.