CISC124 Quiz 3 marking underway. Assn 5 due Friday. Fall 2018 Fall 2018 CISC124 2/16/2019 CISC124 Quiz 3 marking underway. Assn 5 due Friday. Fall 2018 CISC124 - Prof. McLeod Prof. Alan McLeod

Today Review order of window construction and display. Event Handlers. Input Nodes. Focus on Assn 5. Change Event Listeners. Fall 2018 CISC124 - Prof. McLeod

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

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 an @FXML annotation. Events are attached to controls, if the fxml contains event tags. Fall 2018 CISC124 - Prof. McLeod

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

Attaching an Event to a Node From last time: There are two simple ways of doing this: In initialize(), use a lambda function in the .setOnAction() or .addListener() mutators. Allow Scenebuilder to create a method skeleton for you, fill it in. The method will be attached to the node by the fxml file. Fall 2018 CISC124 - Prof. McLeod

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

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

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

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

SceneBuilder Links Using SceneBuilder in eclipse: https://docs.oracle.com/javase/8/scene-builder-2/work-with-java-ides/sb-with-eclipse.htm Another example: http://docs.oracle.com/javase/8/scene-builder-2/get-started-tutorial/jfxsb-get_started.htm#JSBGS101 User’s Guide: http://docs.oracle.com/javase/8/scene-builder-2/user-guide/index.html Fall 2018 CISC124 - Prof. McLeod

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: http://docs.oracle.com/javase/8/javafx/user-interface-tutorial/ui_controls.htm Fall 2018 CISC124 - Prof. McLeod

RadioButton, ToggleButton, ChoiceBox, CheckBox ??? 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, CheckBox ??? A Slider or Spinner would work, but would be overkill. See RadioProject for the use of RadioButtons. Fall 2018 CISC124 - Prof. McLeod

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

Change Event Listeners How to add these in the fxml file?... In the initialize() method, using a lambda function: text3.textProperty().addListener((observableValue, oldText, newText) -> { System.out.println(newText); }); Controls have many properties to which you can add listeners. This is the easiest way to do it. Fall 2018 CISC124 - Prof. McLeod

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

Best Input for Assn 5?, Cont. See ToggleProject. Very similar to the use of RadioButtons. (Also note use of a new window icon through an Image object coded in Main.java.) Fall 2018 CISC124 - Prof. McLeod

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”). Create an ObservableList collection to hold the choices: private ObservableList<String> choiceList = FXCollections.observableArrayList( "Choice 1", "Choice 2", "Choice 3", "Choice 4", "Choice 5"); Fall 2018 CISC124 - Prof. McLeod

ChoiceBox Project, Cont. In initialize(), using the ChoiceBox instance: Invoke .setValue() first to set the initial value shown. This is a bit strange, but it works this way. Invoke .setItems() to add the ObservableList to the instance. Add a ChangeListener to the object returned by the .valueProperty() method. Fall 2018 CISC124 - Prof. McLeod

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

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

CheckBox These are very simple to use. Suited for binary choices – “On” or “Off”. (There is a third choice, which is “Undefined”). You cannot group them together, so they won’t act like toggles. The .isSelected() accessor returns a true or false. Use the .setSelected(boolean) mutator to set the box checked or not. Use .selectedProperty() to provide the property for a change listener. Fall 2018 CISC124 - Prof. McLeod

Text Input Use TextField, TextArea, PasswordField controls. See FXTextInput. Note: Default Button, Cancel Button. Default text. Prompt text (don’t need a label!). Multi-line input – and scroll bar appearance. Obtaining the text. Clearing the fields. Change events. Restricting input. Fall 2018 CISC124 - Prof. McLeod

Other TextField Properties Did you see the effect of pressing <enter> and <esc>? Did you see the difference between “Prompt Text” and “Text”? Test the effect of “Editable”, “Disable” and “Focus Traversable” properties. Fall 2018 CISC124 - Prof. McLeod

Aside – The Tab Order Also called the “Focus Traversal Policy”… When using keyboard navigation, pressing <tab> moves you “forward” from node to node, providing the nodes accept the focus (they are “focus traversable”). <shift><tab> moves you “backwards”. How do you change the Tab Order of your nodes? Move the nodes around in the Scenebuilder hierarchy tab or move them around in the fxml file. Fall 2018 CISC124 - Prof. McLeod