2. díl - Jednoduchá kalkulačka v JavaFX

Java JavaFX Jednoduchá kalkulačka v JavaFX

V minulém dílu našeho seriálu tutoriálů o JavaFX jsme si vysvětlili standardní HelloWorld projekt v NetBeans. Dnes si vytvoříme svou první vlastní aplikaci v JavaFX, bude to jednoduchá kalkulačka.

Založte si nový projekt s názvem KalkulackaFX. Rovnou si ukažme, jak bude naše výsledná aplikace vypadat:

Kalkulačka v JavaFX

Návrh formuláře

Aplikaci započneme návrhem formuláře. Otevřeme FXMLDocument.fxml v JavaFX Scene Builderu a z formuláře odstraníme Button a Label.

Na prázdný formulář natahneme 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 2x.

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. Labelům v Properties nastavte text na "=" a "0".

Button

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

Provázání kontroleru a FXML

Přesuneme se do java kontroleru. V kódu budeme potřebovat načíst hodnoty z textových polí a vybranou položku z ComboBoxu. Také budeme potřebovat vypsat výsledek do labelu 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 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čítko s obslužnou metodou jsme ze třídy odstranili. Kód si v NetBeans uložte a přesuňte se do JavaFX 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 5 fx:id. U tlačítka nesmíme zapomenout přiřadit i obslužnou metodu.

Formulář kalkulačky v JavaFX Scene Builderu

JavaFX 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. Javovský kód samozřejmě musí být uložený, jinak to nemá šanci poznat. 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.

Naplnění ComboBoxu

Jako první budeme potřebovat nějaké položky do ComboBoxu. 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 tom 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 TextFieldů. Text získáme metodou getText(), vyjímky při parsování pro zjednodušení nebudeme ošetřovat.

Získání vybrané operace provedeme opět přes SelectionModel, přes metodu getSelectedItem(), která vrací vybranou položku v ComboBoxu. 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é, v ComboBoxu totiž můžeme mít v pokročilejších aplikacích 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. Můžeme se těšit z hotové aplikace.

Distribuce

Na závěr si řekněme, jak aplikaci šířit. V NetBeans je vedle tlačítka Play tlačítko Clean and Build Project (shift + F11). Po jeho stisknutí se ve složce s vaším projektem vytvoří složka dist a v ní spustitelný JAR s vaší aplikací. Můžete ji poslat známým a pochlubit se. Dokonce je tam i vygenerovaná HTML stránka, kde je vaše kalkulačka jako applet. Můžete si ji dát i na svůj web.

Webová aplikace v JavaFX

Příště začneme programovat upomínač narozenin přátel. Bude se jednat o praktickou a středně pokročilou aplikaci, na které se naučíme spoustu zajímavých technik. Zdrojový kód dnešního projektu je ke stažení níže pro případ, že by vám něco nefungovalo.


 

Stáhnout

Staženo 1079x (165.25 kB)
Aplikace je včetně zdrojových kódů v jazyce java

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (10 hlasů) :
55555


 


Miniatura
Předchozí článek
Úvod do JavaFX
Miniatura
Všechny články v sekci
Okenní aplikace v Java FX

 

 

Komentáře
Zobrazit starší komentáře (25)

Avatar
Erik Palenčík:

Mne nechce otvoriť prehliadač ten webovy subor, Maxthon pritom sekne, internet explorer mi ukaže poruchu, že mam priliš vysolu java security, ktora to nechce dovoliť a chrome nechce nájsť cestu (ale to asi kôli diakritike v mojom mene, ktoré je súčasťou cesty) :( :D

 
Odpovědět 3. ledna 11:30
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na Erik Palenčík
vajkuba1234:

Založ si téma ve fóru. Tam máš jistější odpověď.

Odpovědět 3. ledna 16:05
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Štěpán Zechovský:

Ahoj, rozhodl jsem se rozšířit kalkulačku o funkci ANS, která ji po kliknutí na Button ANS dosadí výsledek do textového pole číslo1. V controlleru jsem vytvořil nový Button:

private Button nactiANS;

a vytvořil jsem metodu

 void handleNactiANSAction (ActionEvent ANS) {
}

V Java FX jsem vytvořil Button a propojení akcí s metodou po vzoru buttonu "Vypočítej".

Bohužel mě nenapadá způsob, jakým předat data z label výsledek do textového pole "číslo1".
Díky za pomoc s návrhem:-)

 
Odpovědět 20. března 10:17
Avatar
Marián
Člen
Avatar
Odpovídá na Štěpán Zechovský
Marián:

Odovzdanie textu z label do textfield (Vysledok je label a cislo1 je textfield):

cislo1.setText(vysledek.getText());
Editováno 22. března 9:46
 
Odpovědět 22. března 9:45
Avatar
Michal Huff
Člen
Avatar
Odpovídá na Erik Palenčík
Michal Huff:

Jdi do Start > Programy > Java > Configure Java > zalozka Secturity > Exception Site List > Edit Site List > Add. Napis file:/// a ono ti to da vyjimku pro vsechny soubory na pocitaci

Odpovědět 31. března 14:06
Než položím hloupou otázku, použiji google.
Avatar
Jan Mach
Člen
Avatar
Jan Mach:

Když udělám soubor html, jak ho mám spustit v Chromu? Tady je screenshot z Chromu, ale mě to pořád chce, abych nainstaloval Javu, ale to nepomůže.

 
Odpovědět 13. srpna 20:39
Avatar
Nezmar Hydra
Člen
Avatar
Nezmar Hydra:

sudo chmod a+x soubor.jar
nastaví jako spustitelný a pak jen kliknout

 
Odpovědět 27. srpna 15:09
Avatar
Kakal Kakal
Člen
Avatar
Kakal Kakal:

nejde mi to

 
Odpovědět  -1 30. září 15:06
Avatar
mkub
Redaktor
Avatar
Odpovídá na Kakal Kakal
mkub:

kristalova gula sa nam rozbila

 
Odpovědět  +3 1. října 17:05
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 35. Zobrazit vše