1. CMPE212 – Reminders Assignment 5, a JavaFX GUI, due next Friday.
Winter 2019 CMPE212
6/6/2019
CMPE212 – Reminders
Assignment 5, a JavaFX GUI, due next Friday.
Quiz 3 (the last one!) this week. Topics listed in last Wednesday’s lecture. JavaFX Panes on Quiz: Border, Anchor, Flow, GridPane, HBox, VBox. CSS stylesheet use is *not* on the quiz. Remember to use [ ] instead of < > for generics.
Winter 2019
CMPE212 - Prof. McLeod
Prof. Alan McLeod

2. Today Using Scenebuilder, Cont.
Winter 2019 CMPE212
6/6/2019
Today
Using Scenebuilder, Cont.
Go over the project structure that “we” built yesterday.
List the sequence of steps that are taken to build the window.
Start Input Nodes.
Winter 2019
CMPE212 - Prof. McLeod
Prof. Alan McLeod

3. JavaFX Project: Using the FXML File
Let’s review the structure of the project we just built in class and have another look at the contents of the FXML file.
This will help you figure out why your project does not run – where the problem(s) could arise.
Winter 2019
CMPE212 - Prof. McLeod

4. Using the FXML File: Some Questions
Note how the button is shifting back and forth as the size of the label changes – what is causing this and how can you fix it?
How can you change the default size of the window? Can you fix the window borders so it cannot be re-sized? Why would you want to do so? Where do you make changes to the window and not to the GridPane?
Do you still need to process the *.css file in Main.java?
What is the purpose of annotation in the controller class? Do they have to be there?
What happens if you instantiate the node attributes in the controller class, not just declare them?
Winter 2019
CMPE212 - Prof. McLeod

5. Using the FXML File: Question, Cont.
How can you increase the font size of the window title?
How can you customize the window title bar?
It turns out that, by default, you are given a “decorated” window by JavaFX. The title bar design is fixed to system (Windows) chosen defaults. To change this you need to build an “undecorated” window.
For example, see:
Winter 2019
CMPE212 - Prof. McLeod

6. Using the FXML File: Don’t Forget:
In your Main.java file replace the declaration of “root” with (assuming you are using GridPane):
GridPane root = (GridPane) FXMLLoader.load(getClass().getResource("Project11.fxml"));
You don’t need any control instantiations in Main.java or any of the code to do with the controls. No more layout or style code in Main.java!!
Winter 2019
CMPE212 - Prof. McLeod

7. Order of Operations:
The order is critical, especially if you have to interpret errors:
The application invokes main, which invokes launch, which invokes start, supplying it with the Stage object.
The start() method in Main.java identifies and then starts loading the fxml file as part of the creation of the root object.
The *.css file is located (listed in fxml) and loaded.
The controller class is located (listed in fxml).
The rest of the fxml file is processed, creating and configuring the controls. Stylesheet changes are applied.
Winter 2019
CMPE212 - Prof. McLeod

8. Order of Operations, Cont.
The controller class is instantiated. All controls with a fx:id are injected into the instance of the controller class everywhere there is annotation.
Events are attached to controls, if the fxml contains event tags.
When the injection process is complete the initialize() method in the controller class is invoked.
Back in the start method, the root object has been created and now contains the scene graph for the window.
The scene object is added to the Stage object.
The Stage object is shown. Now containers and controls will have their actual sizes.
Winter 2019
CMPE212 - Prof. McLeod

9. SceneBuilder Links Using SceneBuilder in eclipse:
Another example:
User’s Guide:
Winter 2019
CMPE212 - Prof. McLeod

10. Input Nodes Lots of controls accept input from the user:
Button, RadioButton, ToggleButton, CheckBox, ChoiceBox, TextField, TextArea, PasswordField, ListView, TableView, TreeView, TreeTableView, ComboBox, Slider, Menu, Spinner, …
You can even use a dialog which opens a separate window.
See (this is a very useful page):
Winter 2019
CMPE212 - Prof. McLeod

11. RadioButton, ToggleButton, ChoiceBox ???
Best Input for Assn 5?
Pizza choices are very limited and the user cannot add a new choice (like quadruple cheese!).
And, the user makes just a single choice per item.
Which ones would be best?:
RadioButton, ToggleButton, ChoiceBox ???
A Slider or Spinner would work, but would be overkill.
See RadioProject for the use of RadioButtons.
Winter 2019
CMPE212 - Prof. McLeod

12. radioGroup.selectedToggleProperty()
RadioButton, Cont.
Note how the radio buttons have all been added to the same group, “radioGroup” an object of type ToggleGroup, – this way only one can be chosen in the group.
The window needs to respond to a selection change in the radio buttons.
To do this you need to create a Change Listener and add it to the the relevant Property.
In this case the Property is returned by:
radioGroup.selectedToggleProperty()
Winter 2019
CMPE212 - Prof. McLeod

13. Change Event Listeners
How to add these in the fxml file?... (You can’t)
In the initialize() method, using a lambda function:
radioGroup.selectedToggleProperty().addListener((ov, old_toggle, new_toggle) -> {
selectedText.setText(((RadioButton)new_toggle).getId());
});
Controls have many properties to which you can add listeners.
This is the easiest way to do it.
Winter 2019
CMPE212 - Prof. McLeod

14. Change Event Listeners, Cont.
Use to monitor:
Window or container size changes.
Text box changes.
Slider and spinner changes.
ChoiceBox selection changes.
Etc.
See how you can use this to restrict input in a text field, for example. (Later)
Winter 2019
CMPE212 - Prof. McLeod

15. Best Input for Assn 5?, Cont.
See ToggleProject.
Very similar to the use of RadioButtons.
As with the RadioButton node, the “ID” property should not be confused with the fx:id properly.
Also note use of a new window icon through an Image object coded in Main.java. This was also done in RadioProject.
Winter 2019
CMPE212 - Prof. McLeod

16. ChoiceBox Project More involved than the toggle buttons.
Note that both ChoiceBox and ObservableList objects are Generic – so you have to specify the type being stored (like “String”). And you have to instantiate the attribute in the controller class.
Create an ObservableList collection to hold the choices:
private ObservableList<String> choiceList = FXCollections.observableArrayList(
"Choice 1", "Choice 2", "Choice 3", "Choice 4", "Choice 5");
Winter 2019
CMPE212 - Prof. McLeod

17. ChoiceBox Project, Cont.
In initialize(), using the ChoiceBox instance:
Invoke .setItems() to add the ObservableList to the instance.
Then invoke .setValue() to set the initial value shown.
Add a ChangeListener to the property returned by the .valueProperty() method.
Winter 2019
CMPE212 - Prof. McLeod

18. Two Choice Boxes
How to have one choice box changing or limiting the contents of the other choice box?:
See FXTwoChoiceBoxes.
Also shows two techniques for changing the mouse cursor.
Winter 2019
CMPE212 - Prof. McLeod

19. ChoiceBox vs. ComboBox vs. ListBox
ChoiceBox is simple and will not provide a scroll bar. Single choices only.
A ListBox allows multiple selections and is better suited to a larger number of choices.
A ComboBox is a combination of a TextField and a ChoiceBox when you set it to “editable”. Will also show a scroll bar.
Both ListBoxes and ComboBoxes can use cell factories which can be used to customize the appearance of the choices.
Winter 2019
CMPE212 - Prof. McLeod