JavaFX: Event Handling, Layout 9-16-2013

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

3. When the event occurs, the event source creates an “event object” and sends it to each registered listener event object

2. Code that carries out the desired response to the event; must “register” with the event source

event listener

event source

1. GUI component that can detect events (button, scrollbar, etc.)

event 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() { public void handle(ActionEvent e) { Toolkit.getDefaultToolkit().beep(); } }); root.getChildren().add(btn); Scene scene = new Scene(root,200,100); primaryStage.setScene(scene); primaryStage.show();

1. btn: type Button local variable in Beeper register (SetOnAction)

event source

event object

event listener

2. : •public interface EventHandler

•must have method: public void handler(ActionEvent e)

3. When the button is clicked, an ActionEvent object is created and sent as arg e to handler

 JavaFX tutorial: Working with Layouts in JavaFX

 javafx.scene.layout.Pane  Subclasses:AnchorPane,

BorderPane, FlowPane, GridPane, HBox, StackPane, TilePane, VBox

 Pane  This

is the base class for layout panes

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

GridPane

5 regions: Top, Bottom, Center, Left, Right regular grid

VBox, HBox

vertical/horizontal box

FlowPane TilePane

“flows” at the boundary similar to flow pane

AnchorPane

can anchor nodes at specific places within the pane

GridPane

BorderPane

HBox

VBox

AnchorPane

FlowPane

 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() { @Override public void handle(ActionEvent e) { actiontarget.setFill(Color.FIREBRICK); actiontarget.setText(“Sign in button pressed”); } });