CS1021 - FXML Review

name: inverse
layout: true
class: taylor msoe
---
class: center, middle

.title[
  # JavaFX
  ## FXML
]

???

* **P** speaker view
* **C** clone slideshow
* **?** help

---
# Imperative GUI Layout - Must do:
![Blur Button](rev5-3a.png)

--
* Create label

--
* Create button

--
* Register handler with button

--
* Create FlowPane

--
* Add controls to FlowPane

--
* Create scene and add it to the stage

--
* Show the stage

---
# Imperative Layout

```
public static final int HEIGHT = 50;
public static final int WIDTH = 200;
private Label displayText;
private Button toggleButton;

@Override
public void start(Stage stage) {
    displayText = new Label("This is a label that contains text");
    toggleButton = new Button("Blur");
    toggleButton.setOnAction(this::toggleBlur);

Pane pane = new FlowPane();
    pane.getChildren().addAll(displayText, toggleButton);

stage.setScene(new Scene(pane, WIDTH, HEIGHT));
    stage.show();
}
```

---
# Declarative GUI Layout with FXML

```
    @Override
    public void start(Stage stage) throws IOException {
        Parent root = FXMLLoader.load(getClass().getResource("blurLabel.fxml");

stage.setScene(new Scene(root));
        stage.show();
    }
```

``` xml
<FlowPane fx:controller="wk5.BlurController" prefHeight="50" prefWidth="200"
          xmlns="http://javafx.com/..." xmlns:fx="http://javafx.com/fxml/1">
  <children>
    <Label fx:id="displayText" text="This is a label that contains text" />
    <Button fx:id="toggleButton" onAction="#toggleBlur" text="Blur" />
  </children>
</FlowPane>
```

---
# Declarative GUI Layout with FXML
## Controller Class

```
public class BlurController {
    @FXML
    private Label displayText;
    @FXML
    private Button toggleButton;

@FXML
    public void toggleBlur(ActionEvent actionEvent) {
        if(displayText.getEffect()==null) {
            toggleButton.setText("De-blur");
            displayText.setEffect(new GaussianBlur());
        } else {
            toggleButton.setText("Blur");
            displayText.setEffect(null);
        }
    }
}
```