javafx: event handling, layout 9-16-2013 - clarkson...
TRANSCRIPT
JavaFX: Event Handling, Layout
9-16-2013
JavaFX
Event Handling
Layout Managers
HW#2 posted; due 9/23/2013
Reading Assignment: Handling JavaFX Events
Working with Layouts in JavaFX
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
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
Action to perform:
ring the bell when the button is clicked
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();
}
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)
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.
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
BorderPane GridPane
HBox
VBox FlowPane
AnchorPane
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
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle(“JavaFX Welcome”);
primaryStage.show();
}
@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();
}
// 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
scenetitle
(0,0)
spans 2 cols, 1 row
userName
(0, 1)
userTextField
(1, 1)
pw
(0, 2)
pwBox
(1, 2)
// 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);
// 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”);
}
});