javafx: event handling, layout 9-16-2013 - clarkson...

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”);

}

});