![Page 1: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/1.jpg)
JavaFX: Event Handling, Layout
9-16-2013
![Page 2: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/2.jpg)
JavaFX
Event Handling
Layout Managers
HW#2 posted; due 9/23/2013
Reading Assignment: Handling JavaFX Events
Working with Layouts in JavaFX
![Page 3: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/3.jpg)
Thus far, we have a visual layout of a GUI, but how do we make it respond to user events (e.g. click a button, select a menu item, etc.)?
Need two things:
a method to be called when the user interacts with the widget (e.g. clicks a button)
a way to know when to trigger that method
Event Delegation Model
![Page 4: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/4.jpg)
event source
event listener
event listener
1. GUI component that can detect events (button, scrollbar, etc.)
2. Code that carries out the desired response to the event; must “register” with the event source
event object
3. When the event occurs, the event source creates an “event object” and sends it to each registered listener
![Page 5: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/5.jpg)
Action to perform:
ring the bell when the button is clicked
![Page 6: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/6.jpg)
public void start(Stage primaryStage) {
StackPane root = new StackPane();
Button btn = new Button("Ding!");
btn.setStyle("-fx-font: 42 arial; -fx-base: #b6e7c9;");
// handle the button clicked event
btn.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent e) {
Toolkit.getDefaultToolkit().beep();
}
});
root.getChildren().add(btn);
Scene scene = new Scene(root,200,100);
primaryStage.setScene(scene);
primaryStage.show();
}
![Page 7: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/7.jpg)
event source
event listener
event object
3. When the button is clicked, an ActionEvent object is created and sent as arg e to handler
1. btn: type Button
local variable in Beeper
2. : •public interface EventHandler
•must have method: public void handler(ActionEvent e)
register (SetOnAction)
![Page 8: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/8.jpg)
JavaFX tutorial: Working with Layouts in JavaFX
javafx.scene.layout.Pane Subclasses:AnchorPane, BorderPane, FlowPane,
GridPane, HBox, StackPane, TilePane, VBox
Pane is the base class for layout panes
This class may be used directly in cases where absolute positioning of children is required since it does not perform layout beyond resizing resizable children to their preferred sizes. It is the application's responsibility to position the children since the pane leaves the positions alone during layout.
![Page 9: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/9.jpg)
Name Description
StackPane nodes added in a stack
BorderPane 5 regions: Top, Bottom, Center,
Left, Right
GridPane regular grid
VBox, HBox vertical/horizontal box
FlowPane “flows” at the boundary
TilePane similar to flow pane
AnchorPane can anchor nodes at specific
places within the pane
![Page 10: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/10.jpg)
BorderPane GridPane
HBox
VBox FlowPane
AnchorPane
![Page 11: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/11.jpg)
public class GridPane extends Pane
GridPane lays out its children within a flexible grid of rows and columns. If a border and/or padding is set, then its content will be laid out within those insets. A child may be placed anywhere within the grid and may span multiple rows/columns. Children may freely overlap within rows/columns and their stacking order will be defined by the order of the gridpane's children list (0th node in back, last node in front).
http://docs.oracle.com/javafx/2/get_started/form.htm
![Page 12: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/12.jpg)
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle(“JavaFX Welcome”);
primaryStage.show();
}
![Page 13: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/13.jpg)
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle(“JavaFX Welcome”);
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25,25,25,25));
// add text, labels, button to the grid
Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
primaryStage.show();
}
![Page 14: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/14.jpg)
// add text, labels, button to the grid
Text scenetitle = new Text(“Welcome”);
scenetitle.setFont(Font.font(“Tahoma”,
FontWeight.NORMAL, 20));
grid.add(scenetitle, 0, 0, 2, 1); // column 0, row 0, span
Label userName = new Label(“User Name:”);
grid.add(userName, 0, 1); // column 0, row 1
TextField userTextfield = new TextField();
grid.add(userTextField, 1, 1); // column 1, row 1
Label pw = new Label(“Password:”);
grid.add(pw, 0, 2); // column 0, row 2
PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2); // column 1, row 2
![Page 15: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/15.jpg)
scenetitle
(0,0)
spans 2 cols, 1 row
userName
(0, 1)
userTextField
(1, 1)
pw
(0, 2)
pwBox
(1, 2)
![Page 16: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/16.jpg)
// create and add button
Button btn = new Button(“Sign in”);
HBox hbBtn = new HBox(10); // horizontal box layout
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
grid.add(hbBtn, 1, 4); // add button to (1, 4)
// add Text control
final Text actiontarget = new Text();
grid.add(actiontarget, 1, 6);
![Page 17: JavaFX: Event Handling, Layout 9-16-2013 - Clarkson …people.clarkson.edu/~jsearlem/cs242/fa13/lectures/10.layout+events.pdf · JavaFX Event Handling Layout Managers HW#2 posted;](https://reader031.vdocuments.mx/reader031/viewer/2022022022/5ba2ec3109d3f26f6e8cd05d/html5/thumbnails/17.jpg)
// handle the button event
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent e) {
actiontarget.setFill(Color.FIREBRICK);
actiontarget.setText(“Sign in button pressed”);
}
});