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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 annotation. 7.Events are attached to controls, if the fxml contains event tags. Winter 2016CMPE212 - Prof. McLeod17

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

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

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.

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

Event Hanlders, 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

SceneBuilder Links Using SceneBuilder in eclipse: 2/work-with-java-ides/sb-with-eclipse.htm For connecting code to fxml: enebuilder_edited_fxml_to Another example: started-tutorial/jfxsb-get_started.htm#JSBGS101 Winter 2016CMPE212 - Prof. McLeod23

SceneBuilder Links, Cont. User’s Guide: 2/user-guide/index.html Winter 2016CMPE212 - Prof. McLeod24