Week 12 Thursday. For milestone #2 and #3, also submit a screenshot of your GUI once it is launched.

Transcription

1 Week 12 Thursday D-Teams have been created Create your A-Team by Friday, or let me know to assign you earlier. Team Project: Tournament-Bracket (D-Team 30 pts) Milestone #1: due before 10pm THIS Friday, April 20 th (A-Team 20 pts) Milestone #2: due before 10pm NEXT Monday, April 23 rd (A-Team 100 pts) Milestone #3: due before 10pm Thursday, May 3 rd For milestone #2 and #3, also submit a screenshot of your GUI once it is launched. Read: Module 12 TODAY in Lecture: JavaFX o ImageView, ObservableList, and Layout containers o Events o Event Handling o application.css (style sheets if there is time) Next Week Finish JavaFX??? Streams creating java.nio.file.files java.nio.file.paths java.nio.streams Terminal Operations Intermediate Operations HTML/CSS/JS Python Copyright 2018 Deb Jim Skrentny CS 400 (S18): W12R - 1

2 ImageView ImageView instances can be added to controls and scenes Create an ImageView instance with an Image Image image = new Image("pretty_picture.jpg"); ImageView imageview = new ImageView(image); ObservableList stores the "children" that have been added to the container use to add new controls to the container add(item) addall(item ) clear() remove(item) removeall(item ) setall(item ) replace all children size() Example: vbox.getchildren().addall( loginbox, imageview, new HBox( cancelbutton, okbutton ) ); int index = vbox.getchildren().indexof( namefield ); vbox.getchildren().get(index); Copyright 2018 Deb Jim Skrentny CS 400 (S18): W12R - 2

3 Events occur when the user interacts with your GUI enters text into a text field clicks a button (left or right-clicks a button or control) moves the mouse (hovers over a control) click and drags a scroll bar clicks and drags a border control (make window bigger) types a key Events must be "heard" Our controls can be Listeners for some events and not others If a control is registered as a listener for the event that occurs, it knows what to do creates an event calls handle() of the EventHandler for that event For example: What can an event handler do when a button is clicked? change the text of a label, text field, button name, etc create a new control remove an existing control enable disable (show hide) an existing control change a scene change a stage Q: How do we make that happen? A: Different controls can listen for different events Different EventHandler objects are needed for each different action that must be "handled". Copyright 2018 Deb Jim Skrentny CS 400 (S18): W12R - 3

4 Event Listening Control's must have EventListeners if there is any action that must occur based on the user's use of that control. Developers add event listeners and handlers to GUI. This provides interaction opportunities for users Q: What is the difference between a listener and a handler A: a listener is a subscription to an event that will trigger a call to a handler (a function) An event listener is an object that monitors a control and triggers an action event if/when particular events occur. An event handler is the code that is run when a listener detects a user input event particular user interface event occurs. In Java FX, the control's event listener is called when the event occurs and the handler provides the code that must execute. Copyright 2018 Deb Jim Skrentny CS 400 (S18): W12R - 4

5 public interface EventHandler<T extends Event> extends EventListener { public void handle(t event) ; } submitbutton.setonaction( new EventHandler<ActionEvent> submitbutton.setonaction(new EventHandler<ActionEvent>() public void handle(actionevent event) { System.out.println("The username is: " + usernameinput.gettext()); }}); Invoked when a specific event of the type for which this handler is registered happens. Create and use EventHandler 1. define a class that implements the interface 2. create an instance of that class 3. register the instance as the handler for a UI control action JavaFX and CSS applied at runtime can change change style sheet without recompiling program similar to HTML css stylesheet syntax prepend: -fx- scene.getstylesheets().add("application.css"); Examples Copyright 2018 Deb Jim Skrentny CS 400 (S18): W12R - 5