Lekce 3 - Jednoduchá kalkulačka v JavaFX

V minulé lekci, FXML a první formulářová aplikace v JavaFX, jsme si ukázali jak vytvořit nový FXML JavaFX projekt v NetBeans.

Dnes si v Java tutoriálu vytvoříme svou první vlastní aplikaci v JavaFX, bude to jednoduchá kalkulačka.

Založíme si nový projekt s názvem KalkulackaFX a jako minule odstraníme vše, kromě App.java. Rovnou si ukažme, jak bude naše výsledná aplikace vypadat:

Návrh formuláře

Aplikaci započneme návrhem formuláře. Do projektu si přidáme nový FXML soubor i s příslušným kontrolerem, nazveme jej třeba kalkulacka.fxml a otevřeme jej v Scene Builderu.

Na prázdný formulář natáhneme následující komponenty z Library:

TextField

Jak asi tušíte, TextField slouží k zadávání textu. My ho využijeme i k zadání čísel. Na formulář ho vložíme dvakrát.

ComboBox

ComboBox je rozbalovací nabídka, která nám umožňuje vybrat z několika předdefinovaných hodnot. Nám poslouží k výběru početní operace (sčítání, odčítání, násobení, dělení).

Label

Textové popisky budeme potřebovat dva. Jeden pro znak "rovná se" a druhý pro výsledek, který kalkulačka vypočítala. V nabídce Properties nastavíme text pro první Label zadáme = a pro druhý vyplníme 0.

Button

Na formulář vložíme poslední komponentu, kterou bude tlačítko. Nastavíme mu text Vypočítej.

Provázání kontroleru a FXML

Přesuneme se do Netbeans do souboru KalkulackaController. V kódu budeme potřebovat načíst hodnoty z textových polí a vybranou položku z komponent ComboBox. Také budeme potřebovat vypsat výsledek a reagovat na kliknutí na tlačítko. Z toho vyplývá, že v kontroleru potřebujeme s těmito komponentami pracovat. Založíme si pro ně ve třídě tedy atributy s anotací @FXML. Anotace musí být opravdu nad každým atributem.

Zároveň si ve třídě připravíme obslužnou metodu pro naše tlačítko. Třída kontroleru bude vypadat takto:

public class KalkulackaController implements Initializable {

    @FXML
    private TextField cislo1TextField;
    @FXML
    private TextField cislo2TextField;
    @FXML
    private ComboBox operaceComboBox;
    @FXML
    private Button vypocitejButton;
    @FXML
    private Label vysledekLabel;

    @FXML
    private void handleVypocitejButtonAction(ActionEvent event) {
    }

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

}

Kód si v Netbeans uložíme a přesuneme se opět do Scene Builderu. Jednotlivým komponentám na formuláři přiřadíme jejich fx:id podle toho, jak jsme si pojmenovali atributy v kontroleru. Celkem tedy přiřadíme pět fx:id. U tlačítka nesmíme zapomenout přiřadit i obslužnou metodu.

Scene Builder pracuje s java kódem kontroleru. Pokud zadáme název neexistujícího atributu, upozorní nás na to chybovou hláškou. Java kód samozřejmě musí být uložený, jinak provedené změny nepozná. To je bohužel nevýhoda toho, že se aplikace tvoří ve dvou různých nástrojích.

Obsluha formuláře

Konečně máme vše připraveno k tomu, abychom se mohli věnovat samotné obsluze formuláře.

Doplnění položek pro ComboBox

Jako první budeme potřebovat nějaké položky pro náš ComboBox. Proto upravíme inicializační metodu kontroleru do následující podoby:

@Override
public void initialize(URL url, ResourceBundle rb) {
    ObservableList<String> operace = FXCollections.observableArrayList("+", "-", "*", "/");
    operaceComboBox.setItems(operace);
    operaceComboBox.getSelectionModel().selectFirst();
}

Nejprve vytvoříme kolekci položek. V JavaFX se pracuje s tzv. observable collections, což by se dalo přeložit jako pozorovatelné kolekce. Jakmile použijeme ObservableArrayList a nastavíme ho jako zdroj dat nějaké komponentě formuláře, tato komponenta si svůj obsah sama aktualizuje podle toho, jak se kolekce mění. Tomuto chování se někdy říká binding a ušetří nám spoustu starostí a kódu, který bychom jinak museli pro obnovování formulářů napsat. V našem případě sice položky měnit nebudeme, nicméně komponenty v JavaFX jsou implementované tak, že pracují s observable kolekcemi. Ještě dodám, že se kolekce vytvářejí pomocí továrních (statických) metod na třídě FXCollections.

Nastavení položek pomocí metody setItems() je triviální. Aby byla po spuštění aplikace hned vybraná první položka (sčítání), musíme si získat tzv. selectionModel, který se stará o vybrané položky a na něm vybranou položku nastavit.

Obsluha tlačítka

Zbývá již jen naprogramovat obslužnou metodu tlačítka. Její kód bude následující:

@FXML
private void handleVypocitejButtonAction(ActionEvent event) {
    double cislo1 = Double.parseDouble(cislo1TextField.getText());
    double cislo2 = Double.parseDouble(cislo2TextField.getText());
    String operace = (String)operaceComboBox.getSelectionModel().getSelectedItem();
    double vysledek = 0;
    switch (operace)
    {
        case "+":
            vysledek = cislo1 + cislo2;
            break;
        case "-":
            vysledek = cislo1 - cislo2;
            break;
        case "*":
            vysledek = cislo1 * cislo2;
            break;
        case "/":
            if (cislo2 != 0)
            vysledek = cislo1 / cislo2;
            break;
    }
    vysledekLabel.setText(String.valueOf(vysledek));
}

Jako první si naparsujeme čísla z obou komponent TextField. Text získáme metodou getText(), výjimky při parsování pro zjednodušení nebudeme ošetřovat.

Získání vybrané operace provedeme opět přes SelectionModel, pomocí metody getSelectedItem(), jež vrátí položku, kterou jsme vybrali z nabídky ComboBox. Položku musíme přetypovat na String. Podobně bychom mohli využít metodu getSelectedIndex(), která vrátí číselný index vybrané položky. Získávání přímo objektů je však velmi praktické, ComboBox totiž může v pokročilejších aplikacích obsahovat např. instance uživatelů. Vše si během seriálu ukážeme.

Následuje switch, který podle operace vypočítá výsledek. Všimněte si ošetření dělení nulou. Ideálně bychom při dělení nulou měli zobrazit nějakou chybovou hlášku. JavaFX bohužel zatím tuto funkcionalitu stále neobsahuje a musí se obcházet, což si ukážeme v dalších dílech seriálu.

Již nezbývá nic jiného, než nastavit výsledek příslušnému labelu. Samozřejmě ho musíme nejprve převést na String. A můžeme se těšit z hotové aplikace.

V následujícím kvízu, Kvíz - Úvod, FXML, Scene Builder a kontroler 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š.