| CPSC 343 | Database Theory and Practice | Fall 2024 |
Keep in mind the available sources of information:
Chapter 6 of Introduction to Programming Using Java (D. Eck) covers the basics of JavaFX. In particular, section 6.1 introduces the basic JavaFX application structure, section 6.4 introduces some common controls, and section 6.5 introduces some common containers/layouts.
Note: The section on ImageView in the text shows how to create an Image (which loads an image from a file) for use in the ImageView. However, the example is not quite correct — the Image constructor requires the URL of the image to load so you will need to prepend "file:" to the filename e.g. use file:images/1.jpg for the file 1.jpg in the images folder of your project.
The JavaFX documentation has two useful starting points: Using JavaFX UI Controls and Using Built-in Layout Panes. For more advanced configuration of the application's appearance, see Working with Layouts in JavaFX.
Google javafx 17 classname to look up a JavaFX class in the API. If you have trouble finding the right JavaFX version, go directly to the JavaFX 17 API documentation and use the search box near the upper right top of the page.
It is best to start with the textbook for something new, but then you can move on to the JavaFX documentation and finally the API if you want more advanced information.
GUI programs (of any sort, not just Java programs) are typically event-driven. In a traditional console-based imperative programming paradigm, execution of the program starts in main and can be traced all the way to the end of the program just by reading through the statements in order. By contrast, event-driven programs contain a main loop that listens for events and a collection of event handlers that are triggered when an event occurs. Each event handler does some small task which is quickly done.
In Java, the main loop is handled by the system so you only need to worry about the initial setup of the GUI and the event handlers.
Note: the "small task which is quickly done" aspect of event handlers is very important — events are handled one at a time in order, so while one event handler is running, the program does not respond to any other events (or repaint requests). This has important consequences for the design of the methods in a GUI program — you do not want a playGame method that carries out the entire sequence of player turns or a runSimulation method which contains a loop to carry out many steps of the simulation, for example. Instead, the program's execution is divided into chunks based on user interactions — the event handler for the "start" button handles setting up the game but only goes as far as the next user interaction, not through the entire game. In the latter case, where there is a long computation that takes place without user interaction, the task needs to be backgrounded. Timers can be used in the case of a simulation where there is a short task (one step) that happens periodically. Threads are needed in other situations. (More on threads later in the course.)
With JavaFX, everything you see on the screen (windows, text, images, buttons, menus, etc) is represented by an object in the program. Controls are components that the user can interact with. Containers are special kinds of components that can contain other components. Containers are responsible for determining the position and size of the components they contain. While layout can be done manually, using a container that automatically arranges its contents greatly simplifies the programmer's task and also allows the window to be resized gracefully.
There are four basic steps for creating a GUI in JavaFX:
JavaFX components come from the javafx.* packages. Note that there are many name conflicts with elements from the older AWT, so you should be careful when Eclipse suggests imports — choose ones from a javafx package rather than java.awt.
JavaFXDemo and SimpleGUIDemoAlt provide examples. SimpleGUIDemoAlt also demonstrates nesting components to achieve a more complex layout — the buttons are contained in a panel and laid out in a row using HBox, then the window itself is laid out with a BorderPane (buttons at the top, Canvas in the center).
GUI programs actually do things in response to events — these are typically user-generated (mouse movement, mouse clicks, key presses, and other manipulations of GUI controls) but may also be generated by the system (such as from timers). Event handlers contain the code to handle the event i.e. to do whatever the program should do to respond to an event.
Event handling adds two more steps to the four steps already given above:
Event handlers can be pulled out into separate (typically inner) classes, but more common is to just pull them out into private helper methods and utilize lambda expressions. JavaFXDemo3 illustrates lambda expressions; JavaFXDemo2 has the same functionality but uses an event handler class instead. SimpleGUIDemoAlt provides another example (with lambda expressions).
Containers have different behaviors as to how they position and size components. See section 6.5 of the text.
The appearance of individual components is specified using CSS (Cascading Style Sheets), the same language used to style web pages. Section 6.2.5 has more information.
Section 6.6.2 of the text addresses menu bars, as does the JavaFX documentation Using JavaFX UI Controls. Section 13.4.1 addresses dialog boxes. Neither source covers toolbars, but you can google "javafx toolbar" and find some references (including this one).
See section 6.2 in the Javanotes text.
Making a window resizable is not difficult if you are using containers which size and position their components — just make sure you aren't making the stage non-resizable in start. (Remove setResizable(false) line if you have it.)
However, not all controls — and in particular, Canvas - are able to resize themselves. To make a resizable canvas, you need to place the canvas inside a container that is resizable (such as a Pane) and then bind the dimensions of the canvas to the dimensions of the Pane. See the example in section 13.1.2.
See section 13.1 in the Javanotes text.
See section 13.2.4 in the Javanotes text.
For ListView, ComboBox, and TableView, see sections 13.3.3 and 13.3.4 in the Javanotes text.