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š.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 1714x (7.19 kB)
Aplikace je včetně zdrojových kódů v jazyce Java