3. diel - Jednoduchá kalkulačka v JavaFX

V minulej lekcii, FXML a prvé formulárové aplikácie v JavaFX , sme si vysvetlili štandardné HelloWorld projekt v NetBeans. Dnes si v Java tutoriálu vytvoríme svoju prvú vlastnú aplikáciu v JavaFX, bude to jednoduchá kalkulačka.

Založte si nový projekt s názvom KalkulackaFX. Rovno si ukážme, ako bude naša výsledná aplikácia vyzerať:

Návrh formulára

Aplikáciu začneme návrhom formulára. Otvoríme FXMLDocument.fxml v JavaFX Scene Builder a formulára odstránime Button a Label.

Na prázdny formulár natiahneme nasledujúce komponenty z Library.

TextField

Ako asi tušíte, TextField slúži na zadávanie textu. My ho využijeme aj na zadanie čísel. Na formulár ho vložíme 2x.

ComboBox

ComboBox je rozbaľovacej ponuka, ktorá nám umožňuje vybrať z niekoľkých preddefinovaných hodnôt. Nám poslúži k výberu početné operácie (sčítanie, odčítanie, násobenie, delenie).

Label

Textové popisky budeme potrebovať dva. Jeden pre znak "rovná sa" a druhý pre výsledok, ktorý kalkulačka vypočítala. Labelům v Properties nastavte text na "=" a "0".

Button

Na formulár vložíme posledný komponent, ktorú bude tlačidlo. Nastavíme mu text na "Vypočítaj".

Previazanie kontroleru a FXML

Presunieme sa do java kontroleru. V kóde budeme potrebovať načítať hodnoty z textových polí a vybranú položku z ComboBox. Tiež budeme potrebovať vypísať výsledok do labelu a reagovať na kliknutie na tlačidlo. Z toho vyplýva, že v kontroleru potrebujeme s týmito komponentmi pracovať. Založíme si pre nich v triede teda atribúty s anotáciou @FXML. Anotácia musí byť naozaj nad každým atribútom. Zároveň si v triede pripravíme obslužnú metódu pre naše tlačidlo. Trieda kontroleru bude vyzerať asi takto:

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

}

Pôvodný label a tlačidlo s obslužnou metódou sme z triedy odstránili. Kód si v NetBeans uložte a presuňte sa do JavaFX Scene Builder. Jednotlivým komponentom na formulári priradíme ich fx: id podľa toho, ako sme si pomenovali atribúty v kontroleru. Celkom teda priradíme 5 fx: id. U tlačidla nesmieme zabudnúť priradiť aj obslužnú metódu.

JavaFX Scene Builder pracuje s java kódom kontroleru. Ak zadáme názov neexistujúceho atribútu, upozorní nás na to chybovou hláškou. Javovský kód samozrejme musí byť uložený, inak to nemá šancu spoznať. To je bohužiaľ nevýhoda toho, že sa aplikácia tvorí v dvoch rôznych nástrojoch.

Obsluha formuláre

Konečne máme všetko pripravené na to, aby sme sa mohli venovať samotnej obsluhe formulára.

Naplnenie combobox

Ako prvý budeme potrebovať nejaké položky do ComboBox. Preto upravíme inicializačnú metódu kontroleru do nasledujúcej podoby:

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

Najprv vytvoríme kolekciu položiek. V JavaFX sa pracuje s tzv. Observed collections, čo by sa dalo preložiť ako pozorovateľné kolekcie. Akonáhle použijeme ObservableArrayList a nastavíme ho ako zdroj údajov nejaké komponente formulára, táto komponenta si svoj obsah sama aktualizuje podľa toho, ako sa kolekcia mení. Tomuto správanie sa niekedy hovorí binding a ušetrí nám veľa starostí a kódu, ktorý by sme inak museli pre obnovovanie formulárov napísať. V našom prípade síce položky meniť nebudeme, avšak komponenty v JavaFX sú implementované tak, že pracujú s observed kolekciami. Ešte dodám, že sa kolekcia vytvárajú pomocou továrenských (statických) metód na triede FXCollections.

Nastavenie položiek pomocou metódy setItems () je triviálne. Aby bola po spustení aplikácie hneď vybratá prvá položka (sčítanie), musíme si získať tzv. SelectionModel (), ktorý sa stará o vybrané položky a na tom vybranú položku nastaviť.

Obsluha tlačidla

Zostáva už len naprogramovať obslužnú metódu tlačidla. Jej kód bude nasledujúce:

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

Ako prvý si naparsujeme čísla z oboch TextField. Text získame metódou gettext (), výnimky pri parsování pre zjednodušenie nebudeme ošetrovať.

Získanie vybrané operácie vykonáme opäť cez SelectionModel, cez metódu getSelectedItem (), ktorá vracia vybranú položku v ComboBox. Položku musíme pretypovať na String. Podobne by sme mohli využiť metódu getSelectedIndex (), ktorá vráti číselný index vybrané položky. Získavanie priamo objektov je však veľmi praktické, v combobox totiž môžeme mať v pokročilejších aplikáciách napr. Inštancia užívateľov. Všetko si počas seriálu ukážeme.

Nasleduje switch, ktorý podľa operácia vypočíta výsledok. Všimnite si ošetrenie delenie nulou. Ideálne by sme pri delení nulou mali zobraziť nejakú chybovú hlášku. JavaFX bohužiaľ zatiaľ túto funkcionalitu stále neobsahuje a musí sa obchádzať, čo si ukážeme v ďalších dieloch seriálu.

Už nezostáva nič iné, než nastaviť výsledok príslušnému labelu. Samozrejme ho musíme najprv previesť na String. Môžeme sa tešiť z hotovej aplikácie.

Distribúcia

Na záver si povedzme, ako aplikáciu šíriť. V NetBeans je vedľa tlačidla Play tlačidlo Clean and Build Project (shift + F11). Po jeho stlačení sa v zložke s vaším projektom vytvorí zložka dist a v nej spustiteľný JAR s vašou aplikáciou. Môžete ju poslať známym a pochváliť sa. Dokonca je tam aj vygenerovaná HTML stránka, kde je vaša kalkulačka ako applet. Môžete si ju dať aj na svoj web.

V budúcej lekcii, Kvíz - Úvod, FXML, Scene Builder a kontrolér v JavaFX , začneme programovať pripomienkovej narodenín priateľov. Bude sa jednať o praktickú a stredne pokročilú aplikáciu, na ktoré sa naučíme veľa zaujímavých techník. Zdrojový kód dnešného projektu je k stiahnutiu nižšie pre prípad, že by vám niečo nefungovalo.

V nasledujúcom kvíze, Kvíz - Úvod, FXML, Scene Builder a kontrolér v JavaFX, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.

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š.