1. CISC124 Last Quiz this week. Topics listed in last Tuesday’s lecture.
Fall 2018 CISC124
11/26/2018
CISC124
Last Quiz this week. Topics listed in last Tuesday’s lecture.
Fall 2018
CISC124 - Prof. McLeod
Prof. Alan McLeod

2. Today Getting a Button to do something… Using Scenebuilder.
Event Handlers.
Next Topic: Input Nodes.
Fall 2018
CISC124 - Prof. McLeod

3. Getting a Button to do Something
Use the .setOnAction() mutators to add an event handler to the button.
The handler for a mouse click event must implement EventHandler<ActionEvent>.
Four ways of doing this:
Another separate class. (we’ll skip this one…)
A private inner class.
An anonymous class.
A Lambda function.
Fall 2018
CISC124 - Prof. McLeod

4. Project11InnerClass
The handler object can be private and is contained within the same class that defines the rest of the window.
Fall 2018
CISC124 - Prof. McLeod

5. Project11AnonymousClass
Gets rid of private inner class and the need for the Label object to be an attribute.
But it has added some “bloat” to the start() method.
(An anonymous class has to be short!)
Fall 2018
CISC124 - Prof. McLeod

6. Project11Lambda Wow! That was easy!
Button changeButton = new Button("Change Label");
changeButton.setOnAction(event -> {
if (changeLabel.getText().equals("Hello!"))
changeLabel.setText("Goodbye!");
else
changeLabel.setText("Hello!");
});
Wow! That was easy!
Fall 2018
CISC124 - Prof. McLeod

7. Project11Lambda, Cont.
This works because the EventHandler<T extends Event> interface is a Functional Interface – an interface consisting of just a single abstract function:
void handle (T event);
Event is the parent class for many events, so this same handler can be used for a wide variety of event types.
Fall 2018
CISC124 - Prof. McLeod

8. Using SceneBuilder Start by adding a .fxml file to your project:
Fall 2018
CISC124 - Prof. McLeod

9. Using SceneBuilder, Cont.
Give the file a name and choose a Pane:
Fall 2018
CISC124 - Prof. McLeod

10. Using SceneBuilder, Cont.
Not much in the file to start with:
The language is xml or “Extensible Markup Language”, the “fxml” version!
This can be edited manually, but SceneBuilder is much easier.
Fall 2018
CISC124 - Prof. McLeod

11. Using SceneBuilder, Cont.
(Install SceneBuilder first!)
Right-click on the file and choose “Open with SceneBuilder”.
Fall 2018
CISC124 - Prof. McLeod

12. SceneBuilder (after some work)
Fall 2018
CISC124 - Prof. McLeod

13. Using SceneBuilder, Cont.
Choose the pane (GridPane in this case) and on the Properties tab at the right and choose the stylesheet (“application.css”) for your project.
The css settings will override any settings made in the fxml file.
You will see little blue boxes to show which properties have been dictated by the css file.
You can also use the “CSS Analyzer” to display the hierarchy of css changes to any control.
Fall 2018
CISC124 - Prof. McLeod

14. Using SceneBuilder, Cont.
Choose controls and drag them into the pane.
Edit control properties using the “Properties” and “Layout” tabs.
If you are using SceneBuilder, do not edit the fxml file directly.
In SceneBuilder, save your changes, using <Cntrl>s, and when you go back to eclipse, use <F5> to refresh the view of the .fxml file.
You can also preview your window using “Preview” or <Cntrl>p in SceneBuilder.
Fall 2018
CISC124 - Prof. McLeod

15. Using SceneBuilder, Cont.
For each control that needs to interact with Java code, create an fx:id for that control in the “Code” tab. The name has to be unique to your project.
Fall 2018
CISC124 - Prof. McLeod

16. Using SceneBuilder, Cont.
To associate a controller class with your fxml file, choose the “Controller” tab at the bottom, left.
Provide a package and a class name here (“application.Project11Controller” in this case).
Go back to eclipse and create the *.java file with the same name in the package (application, for example) that you specified.
Fall 2018
CISC124 - Prof. McLeod

17. Using SceneBuilder, Cont.
In SceneBuilder, go “View”, then “Show Sample Controller Skeleton”. Choose “Full” and then “Copy”. Paste the code over your controller *.java file.
Note that SceneBuilder will not create or edit *.java files in your project.
Fall 2018
CISC124 - Prof. McLeod

18. Using SceneBuilder, Cont.
The *.fxml file allows you to remove node creation, sizing and positioning out of the Main.java file.
Now you can remove functional code from here as well!
You have two choices:
Write lambda functions in the initialize() method.
Use Scenebuilder to create a separate method skeleton and then fill it in.
Fall 2018
CISC124 - Prof. McLeod

19. Event Handlers
In the initialize() method in the controller class, assuming the fx:id is “myButton”:
myButton.setOnAction(event -> {
if (myLabel.getText().equals("Hello!"))
myLabel.setText("Goodbye!");
else
myLabel.setText("Hello!");
});
Fall 2018
CISC124 - Prof. McLeod

20. Event Handlers, Cont.
You can also attach a handler to a control in the fxml file.
Using SceneBuilder with the control of interest:
Choose one of the possible events of interest and type in a name for the handler.
“On Action” is the general purpose handler often used with buttons.
Fall 2018
CISC124 - Prof. McLeod

21. Event Hanlders, Cont.
This adds “onAction="#myButtonAction" to the fxml tag for the button.
Look in the controller “skeleton” for:
@FXML
void myButtonAction(ActionEvent event) { }
Add this to your controller class and fill it in:
Fall 2018
CISC124 - Prof. McLeod

22. Event Hanlders, Cont.
@FXML
void myButtonAction(ActionEvent event) {
if (myLabel.getText().equals("Hello!"))
myLabel.setText("Goodbye!");
else
myLabel.setText("Hello!"); }
The code in controller is now outside initialize() and is even simpler than the lambda version.
See Project11LambdaFXML.
Fall 2018
CISC124 - Prof. McLeod

23. Using SceneBuilder, Cont.
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 either!!
Fall 2018
CISC124 - Prof. McLeod

24. 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).
Fall 2018
CISC124 - Prof. McLeod

25. Order of Operations, Cont.
The rest of the fxml file is processed, creating and configuring the controls. Stylesheet changes are applied.
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.
Fall 2018
CISC124 - Prof. McLeod

26. Order of Operations, Cont.
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.
Fall 2018
CISC124 - Prof. McLeod

27. SceneBuilder Links Using SceneBuilder in eclipse:
Another example:
User’s Guide:
Fall 2018
CISC124 - Prof. McLeod

28. 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:
Fall 2018
CISC124 - Prof. McLeod