1. Notices Assn 4 posted. Due last day of class. Last quiz this week in Moodle, in the lab. Would the student doing the USATS please get them from Emily Crawford at academics@compsa.queensu.ca. Winter 2016CMPE212 - Prof. McLeod1

2. Quiz 3 Topics Main new topics from last quiz are: –ArrayList Collection Type. –Generics: Generic Classes & Methods, Use of Wildcards. The Class Object. –Lambda Functions. –Method References. –JavaFX Nodes in general, Pane Objects and how to use them. And older topics such as writing methods, loops, conditionals, arrays, encapsulation and inheritance are still fair game. Winter 2016CMPE212 - Prof. McLeod2

3. JavaFX That You Need for Assn 4 You don’t have to use the stylesheet and the fxml file, but it makes it easier and the code is much tidier: –Styling with the css file. –Using SceneBuilder to work with the fxml file and assist with the controller *.java file. Panes and layout managers. Obtaining and restricting user input. The Canvas object and how to draw to it using its GraphicContext object. Animation using Timeline, AnimationTimer, Duration and KeyFrame. Winter 2016CMPE212 - Prof. McLeod3

4. Today As of last night, two people have viewed yesterday’s video. So, how about quick review of what most of you have not been paying attention to? Continuing JavaFX: –Using SceneBuilder and the *.fxml file. –Using SceneBuilder to attach handlers to controls. –SceneBuilder links. Winter 2016CMPE212 - Prof. McLeod4

5. Using SceneBuilder Start by adding a.fxml file to your project: Winter 2016CMPE212 - Prof. McLeod5

6. Using SceneBuilder, Cont. Give the file a name and choose a Pane: Winter 2016CMPE212 - Prof. McLeod6

7. 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. Winter 2016CMPE212 - Prof. McLeod7

8. Using SceneBuilder, Cont. (Install SceneBuilder first!) Right-click on the file and choose “Open with SceneBuilder”. Winter 2016CMPE212 - Prof. McLeod8

9. SceneBuilder (after some work) Winter 2016CMPE212 - Prof. McLeod9

10. 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. Winter 2016CMPE212 - Prof. McLeod10

11. 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 s, and when you go back to eclipse, use to refresh the view of the.fxml file. You can also preview your window using “Preview” or p in SceneBuilder. Winter 2016CMPE212 - Prof. McLeod11

12. 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. Winter 2016CMPE212 - Prof. McLeod12

13. 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.Project11DemoContr oller” 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. Winter 2016CMPE212 - Prof. McLeod13

14. 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. Add code to the initialize() method. Note that SceneBuilder will not create or edit *.java files in your project. You can also add method skeletons for any of the events associated with the control. Winter 2016CMPE212 - Prof. McLeod14

15. 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!! Winter 2016CMPE212 - Prof. McLeod15

16. Order of Operations: The order is critical, especially if you have to interpret errors: 1.The application invokes main, which invokes launch, which invokes start, supplying it with the Stage object. 2.The start() method in Main.java identifies and then starts loading the fxml file as part of the creation of the root object. 3.The *.css file is located and loaded. 4.The controller class is located. Winter 2016CMPE212 - Prof. McLeod16

17. Order of Operations, Cont. 5.The rest of the fxml file is processed, creating and configuring the controls. Stylesheet changes are applied. 6.The controller class is instantiated. All controls with a fx:id are injected into the instance of the controller class everywhere there is an @FXML annotation. 7.Events are attached to controls, if the fxml contains event tags. Winter 2016CMPE212 - Prof. McLeod17

18. Order of Operations, Cont. 8.When the injection process is complete the initialize() method in the controller class is invoked. 8.Back in the start method, the root object has been created and now contains the scene graph for the window. 9.The scene object is added to the Stage object. 10.The Stage object is shown. 11.Now containers and controls will have their actual sizes. Winter 2016CMPE212 - Prof. McLeod18

19. Event Handlers, Cont. In the video I showed you how to add the event handler using a lambda function in the initialize() method in the controller class: myButton.setOnAction(event -> { if (myLabel.getText().equals("Hello!")) myLabel.setText("Goodbye!"); else myLabel.setText("Hello!"); }); Winter 2016CMPE212 - Prof. McLeod19

20. Event Handlers, Cont. You can also attach a handler to a control in the fxml file. Using SceneBuilder with the control of interest: Winter 2016CMPE212 - Prof. McLeod20 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.

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

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. Winter 2016CMPE212 - Prof. McLeod22

23. SceneBuilder Links Using SceneBuilder in eclipse: https://docs.oracle.com/javase/8/scene-builder- 2/work-with-java-ides/sb-with-eclipse.htm For connecting code to fxml: https://blogs.oracle.com/jmxetc/entry/connecting_sc enebuilder_edited_fxml_to Another example: http://docs.oracle.com/javase/8/scene-builder-2/get- started-tutorial/jfxsb-get_started.htm#JSBGS101 Winter 2016CMPE212 - Prof. McLeod23

24. SceneBuilder Links, Cont. User’s Guide: http://docs.oracle.com/javase/8/scene-builder- 2/user-guide/index.html Winter 2016CMPE212 - Prof. McLeod24