Lekce 5 - Upomínač narozenin v JavaFX - Formuláře podruhé

V minulé lekci, Upomínač narozenin v JavaFX - Návrh formuláře, jsme si v nástroji JavaFX Scene Builder navrhli hlavní formulář aplikace.

Dnes budeme v JavaFX tutoriálu s formuláři pokračovat. Vytvoříme si kontroler, který bude zpracovávat vybrané komponenty formuláře. Ty následně propojíme s naším FXML souborem. Dále si ukážeme, jak si naprogramovat nový dialog, ve kterém budeme moci přidávat své přátele a jejich narozeniny do naší aplikace. Dialog uděláme pomocí metody vytvorObsahDialogu(), kdy formulář vytvoříme jako instanci objektů. Na závěr v kontroleru upravíme metodu pro přidání přátel tak, aby zobrazovala nový dialog.

Příprava kontroleru

Náš kontroler bude odkazovat na třídu Osoba, začneme tedy tím, že si tuto třídu vytvoříme.

Přidání třídy Osoba

V projektu si tedy založíme novou třídu s názvem Osoba, zatím ji však ponecháme prázdnou:

public class Osoba {

}

Přidání atributů a obslužných metod

Přejděme do kontroleru formuláře a vytvořme atributy s @FXML anotací pro komponenty formuláře, které budeme z kódu používat. Rovnou si připravme i obslužné metody. Náš kontroler bude vypadat asi takto:

public class UpominacNarozeninFXMLController implements Initializable {

    @FXML
    private ListView<Osoba> osobyListView;
    @FXML
    private Label dnesLabel;
    @FXML
    private Label nejblizsiLabel;
    @FXML
    private Label narozeninyLabel;
    @FXML
    private Label vekLabel;

    @FXML
    public void handlePridatButtonAction(ActionEvent event) {

    }

    @FXML
    public void handleOdebratButtonAction(ActionEvent event) {

    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }

}

Budeme potřebovat jeden ListView atribut a čtyřmi položky typu Label, to jsou ty, které mají na formuláři v textu otazník. Zbytek komponent nebudeme v kontroleru využívat. Je proto zbytečné si je ukládat. V kódu jsme si také už předepsali dvě obslužné metody pro obě tlačítka.

Propojení kontroleru a FXML

Změny v souboru uložíme a přejdeme do Scene Builderu, kde danému ListView a čtyřem položkám Label nastavíme příslušná fx:id. Tlačítkům nastavíme obslužné metody, jako jsme to dělali u kalkulačky. Nastavovat fx:id jim nemusíme:

U obslužných metod tlačítek můžeme parametr ActionEvent vynechat. Standardně se tam však uvádí, i když ho zrovna nevyužijeme.

Vytvoření dialogu

V aplikaci budeme dále kromě hlavního formuláře potřebovat dialog pro vytvoření nové osoby. Dialog bude vypadat takto:

Formulář je opravdu jednoduchý. Obsahuje pouze dvě pole typu TextField a jeden Button. Při úvodu do JavaFX jsme si říkali, že můžeme formulář vytvořit i jako instance objektů. Vyzkoušíme si to na dialogu.

Do kontroleru si přidáme novou metodu vytvorObsahDialogu(), která bude vypadat následovně:

private void vytvorObsahDialogu(Dialog<Osoba> dialog) {
    // Vytvoření "potvrzovacího" tlačítka pro potvrzení dialogu
    ButtonType createButtonType = new ButtonType("OK", ButtonData.OK_DONE);
    // Nastavení tlačítek dialogu
    dialog.getDialogPane().getButtonTypes().setAll(createButtonType, ButtonType.CANCEL);

    // Mřížka
    GridPane grid = new GridPane();
    grid.setAlignment(Pos.CENTER);
    grid.setPadding(new Insets(10));
    grid.setHgap(10);
    grid.setVgap(10);

    // Komponenty
    TextField jmenoTextField = new TextField();
    TextField datumTextField = new TextField();
    Label jmenoLabel = new Label("Jméno");
    Label datumLabel = new Label("Datum narození");

    grid.add(jmenoLabel, 0, 0);
    grid.add(jmenoTextField, 1, 0);
    grid.add(datumLabel, 0, 1);
    grid.add(datumTextField, 1, 1);

    dialog.setResultConverter(new Callback<ButtonType, Osoba>() {
        @Override
        public Osoba call(ButtonType param) {
            // Obsluha tlačítek dialogu
            return null;
        }
    });

    dialog.getDialogPane().setContent(grid);
}

Metoda dělá v podstatě to, co za nás jinak dělá Scene Builder.

Tento přístup se u JavaFX také používá, my si ho nyní popíšeme, abychom byli schopni porozumět dalším aplikacím, které FXML z nějakého důvodu nevyužívají.

Na začátku jsme si vytvořili nové potvrzovací tlačítko s vlastním textem. Toto tlačítko spolu s tlačítkem Cancel jsme přidali do dialogu.

Dále jsme do metody doplnili GridPane, tabulkový panel, kterému jsme nastavili zarovnání a okraje.

Následně vytváříme komponenty, které naskládáme do buněk GridPane panelu. Uvedeme vždy komponentu, sloupec a řádek, do kterého ji chceme vložit.

Další řádky tvoří obsluhu události nastavení výsledku dialogu. Implementaci logiky si necháme na další lekci. Zatím budeme jednoduše vracet null.

Naplněný GridPane a tlačítko přidáme dialogu pomocí metody dialog.getDialogPane().setContent(grid).

Doplnění metody handlePridatButtonAction()

Abychom z té práce vůbec něco viděli, upravíme obslužnou metodu přidávacího tlačítka do následující podoby:

public void handlePridatButtonAction(ActionEvent event) {
    Dialog<Osoba> dialog = new Dialog<>();
    dialog.setTitle("Nová osoba");
    dialog.setWidth(350);
    dialog.setHeight(250);

    vytvorObsahDialogu(dialog);
    dialog.showAndWait();
}

Vytváříme zde instanci nového dialogu. Nastavíme mu titulek a velikost okna. Dále zavoláme naší výše vytvořenou metodu, pomocí které naplníme dialog vlastním obsahem. Dialog nakonec zobrazíme metodou showAndWait(). Tím zajistíme, že hlavní okno nebude reagovat do té doby, než se dialog uzavře. U dialogu se toto většinou dělá již jen proto, aby si uživatel nemohl ten samý dialog vyvolat vícekrát. I když nám by v podstatě nevadilo, kdyby uživatel během zadávání nové osoby aplikaci používal a otevřel třeba další dialog k zadávání nové osoby.

Aplikaci můžeme spustit a kliknout na tlačítko Přidat:

Tím máme formuláře hotové.

V následujícím kvízu, Kvíz - Layouty, komponenty a pozicování v JavaFX, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.