5. diel - PRIPOMIENKOVÉ narodenín v JavaFX - Formuláre druhýkrát

V minulej lekcii, PRIPOMIENKOVÉ narodenín v JavaFX - Návrh formulára , sme si v nástroji JavaFX Scene Builder navrhli hlavné formulár aplikácie. Dnes budeme v Java tutoriálu s formulármi pokračovať.

V projekte bude figurovať trieda Osoba, preto si ju k nemu pridáme a zatiaľ ju ponecháme prázdnu.

public class Osoba {
}

Príprava kontroleru

Prejdime do kontroléra formuláre a vytvorme atribúty s @FXML anotáciou pre komponenty formuláre, ktoré budeme z kódu používať. Rovno si pripravme aj obslužné metódy. Náš kontrolér bude vyzerať asi takto:

public class FXMLDocumentController 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
    }

}

Pracovať budeme s ListView a potom so štyrmi label (to sú tie, ktoré majú na formulári v texte otáznik). Zvyšok komponentov nebudeme v kontroleru potrebovať a je preto zbytočné si ich ukladať. Ďalej tu máme pripravené obslužné metódy pre obe tlačidlá.

Prepojenie kontroleru a FXML

Zmeny v súbore uložte a prejdite do JavaFX Scene Builder, kde ListView a štyrom Labelům nastavte príslušné fx: id. Tlačidlám nastavte obslužné metódy, ako sme to robili u kalkulačky. Nastavovať fx: id im nemusíme.

Pozn .: Pri obslužných metód tlačidiel môžeme parameter ActionEvent vynechať. Štandardne sa tam však uvádza, aj keď ho práve nevyužijeme.

Dialóg

V aplikácii budeme ďalej okrem hlavného formulára potrebovať dialóg pre vytvorenie novej osoby. Dialóg bude vyzerať takto:

Formulár je naozaj jednoduchý. Obsahuje iba dva TextField a Button. Pri úvode do JavaFX sme si hovorili, že okrem FXML a JavaFX Scene Builderu môžeme formulár vytvoriť aj ako inštancia objektov. Vyskúšame si to na dialógu.

Do kontroleru si pridáme novú metódu vytvorObsahDialogu(), ktorá bude vyzerať nasledovne:

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

Metóda robí v podstate to, čo za nás inak robí JavaFX Scene Builder. Tento prístup sa u JavaFX tiež používa, čiže keď si ho teraz popíšeme, budete schopní porozumieť ďalším JavaFX aplikáciám, ktoré FXML z nejakého dôvodu nevyužívajú.

Na začiatku si vytvoríme nové potvrdzovacie tlačidlo s vlastným textom. Toto tlačidlo spolu s tlačidlom Cancel pridáme do dialógu.

Ďalej si vytvoríme GridPane, tabuľkový panel, ktorému nastavíme zarovnanie a okraje.

Teraz si vytvoríme komponenty, ktoré naukladáme do buniek GridPane. Uvedieme vždy komponent, stĺpec a riadok, do ktorého ju chceme vložiť.

Ďalšie riadky tvoria obsluhu udalosti nastavenia výsledku dialógu. Implementáciu logiky si necháme na ďalšiu lekciu. Zatiaľ budeme jednoducho vracať null.

Naplnený GridPane a tlačidlo pridáme dialógu pomocou metódy dialog.getDialogPane().setContent(grid).

Aby sme z tej práce vôbec niečo videli, upravíme obslužnú metódu pripájací tlačidla do nasledujúcej 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árame tu inštanciu nového dialógu. Nastavíme mu titulok a veľkosť okna. Ďalej zavoláme našej vyššie vytvorenú metódu, pomocou ktorej naplníme dialóg vlastným obsahom. Dialóg nakoniec zobrazíme metódou showAndWait (). Tým zabezpečíme, že hlavné okno nebude reagovať do tej doby, než sa dialóg uzavrie. U dialógu sa toto väčšinou robí už len preto, aby si užívateľ nemohol ten istý dialóg vyvolať viackrát. Aj keď nám by v podstate nevadilo, keby užívateľ počas zadávania novej osoby aplikáciu používal a otvoril potrebné ďalšie dialóg na zadávanie novej osoby.

Aplikáciu môžeme spustiť a kliknúť na tlačidlo Pridať:

Tým máme teda formuláre hotové. V budúcej lekcii, PRIPOMIENKOVÉ narodenín v JavaFX - Logická vrstva , sa pustíme do samotnej logiky aplikácie. Dnešný projekt je so zdrojovými kódmi ako vždy k stiahnutiu nižšie.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.