Programování v JavaFX: jednoduché GUI aplikace

• 
• 
• 

Dalších 12 fotografií

Z minulého dílu máme již k dispozici kompletní vývojové prostředí pro JavaFX – IJI, JFXSB i databázový stroj PG. Můžeme tedy začít s vlastním vývojem aplikací. A jak je dobrým zvykem, začneme těmi úplně nejjednoduššími. Nebude to sice obligátní „Hello World“, ale bude to velmi podobné. Na dvou aplikacích si jednak ukážeme, co všechno nám nabízí prostředí IJI, a také základní rozdíly mezi aplikacemi v čisté Javě a JavaFX.

V minulém dílu to sice nebylo zmíněno, ale při instalaci IJI se v hlavním menu vytvořil příslušný spouštěč, takže není nutné tuto aplikaci spouštět pomocí souboru z terminálu nebo správce souborů. Pokud bychom byli výjimečně pohodlní, můžeme si potřebné spouštěcí ikony vložit přímo na plochu. Spustíme tedy IJI a po naběhnutí uvidíme základní nabídku možností. Ty jsme rozebrali v minulém dílu a tak dnes využijeme tu první – Create New Project a s její pomocí vytvoříme základní aplikaci pro Javu. Jak ukazuje první obrázek první galerie, Java je na prvním místě a kromě ní jsou v levém okně formuláře k dispozici další jazyky a platformy – Android, Java FX, vývoj pluginů pro IJI, Maven, Gradle, Groovy, Griffon a Kotlin.

Tip: pořádáme vlastní školení programování v jazyce Java

Jednotlivé položky nebudeme rozebírat ani komentovat. Jedno je ale celkem důležité – instalovali jsme komunitní verzi IJI v základním nastavení pluginů a přesto máme k dispozici mnoho zajímavých možností. To ponecháme stranou a zaměříme se na projekt. Jak je z obrázku také patrné, je nutné k němu přiřadit nějaké vývojové „zázemí“ – položka Project SDK. Možnostmi pro přidání dalších knihoven (Groovy a Kotlin) se nebudeme zabývat.

Jak je z obrázku patrné, automaticky není žádné SDK projektu přiřazeno a my máme k dispozici dva ovládací prvky – rozbalovací šipku na pravém okraji editačního pole a tlačítko New. To využijeme (šipka nám v tuto chvíli moc nepomůže) a získáme přístup ke třem variantám, jak to ukazuje druhý obrázek v první galerii. Pro nás je zajímavá hned ta první – JDK. Po jejím výběru se otevře správce souborů a v něm je automaticky nalezeno v minulém díle instalované prostředí Java 8 – viz třetí obrázek první galerie. Vybereme položku java-8-oracle a klikneme na tlačítko OK. Jak ukazuje čtvrtý obrázek v první galerii, v poli SDK se objeví aktuálně instalovaná a hlavně vybraná verze Javy. V dolní části okna si můžeme ještě všimnout volby pro využití knihoven a také chybového hlášení, že není specifikována žádná knihovna. Příslušné ovládací prvky nám ale v tuto chvíli nepovolí žádnou změnu či nápravu, takže to přejdeme taktním mlčením… Je samozřejmě možné do vývojového systému instalovat více verzí Javy a při každém novém projektu si vybírat, které pro něj bude vhodné a použitelné. My máme jenom tuto jedinou verzi, takže nastavení necháme a posuneme se dále tlačítkem Next.

Následně se objeví další okno, kde jsou dvě položky – Create project from template a Command Line App (viz pátý obrázek první galerie). Druhá možnost se nedá přímo vybrat, takže musíme zaškrtnout políčko před tou první. Výsledek vidíme na šestém obrázku v první galerii. Jak nám napovídá spodní okno, jedná se o jednoduchou Java aplikaci s metodou main. Pokračujeme dál tlačítkem Next a dostaneme se do nastavení názvu projektu, jeho umístění v adresářové struktuře a názvu základního balíčku. Umístění a název balíčku necháme beze změny (jak ukazuje sedmý obrázek první galerie) a změníme pouze název projektu. Výsledek je vidět na osmém obrázku v první galerii. Pak už zbývá kliknout na tlačítko Finish a poprvé spatřit hlavní okno IJI – viz devátý obrázek první galerie. Jak je na obrázku vidět, otevřelo se také okno s denními tipy, které zavřeme a nastavíme tak, aby se už neotvíralo. Pokud bychom ho v budoucnu chtěli znovu otevřít či nastavit, stačí použít menu Help → Tip of the Day. Po zavření okna s denními tipy máme před sebou otevřený soubor Main.java s velmi jednoduchým obsahem a žádným výkonným příkazem. Zatím ho tedy necháme stranou a podíváme se do levé části okna, kde jsou hlavní parametry projektu. Položka External Libraries ukazuje na součásti vývojového prostředí Java, které odpovídají vybrané verzi SDK – viz desátý obrázek v první galerii. Pod názvem projektu se pak ukrývá kompletní hierarchie souborů a adresářů projektu, jak to ukazuje obrázek č. 11 první galerie. Pro naše účely jsou důležité adresáře src, balíček com.company a soubor Main.

Nyní svou pozornost přesuneme do pravé horní části hlavního okna, kde je sedm ikon či voleb:

1. Make Project
2. Select Run/Debug Configuration
3. Run ‚Main‘
4. Debug ‚Main‘
5. Run ‚Main‘ with Coverage
6. Project Structure
7. Search Everywhere

Při najetí na příslušnou ikonu se objeví bublinová nápověda s výše uvedeným obsahem. Pro tuto chvíli necháme ukázky a rozbor uvedených možností stranou a rovnou zkusíme kliknout na zelenou šipku s funkcí Run ‚Main‘. Ihned vidíme nějakou aktivitu a po jejím ukončení se objeví ve spodní části okno s výsledkem. Ten samozřejmě vůbec nic neukazuje, ale spolu s hlášením ve stavovém řádku je jasné, že náš „projekt“ byl řádně přeložen a spuštěn. Více je vidět na obrázku č. 12 v první galerii. Pokud by nám překáželo okno Tool Windows Qucik Access, můžeme ho zavřít kliknutím na tlačítko Got It!. Dalším důkazem aktivity je nově vytvořený adresář out ve stromové struktuře projektu. Jak ukazuje poslední obrázek první galerie, jeho hlavním obsahem je soubor Main.class.

• 
• 
• 

Dalších 13 fotografií

Náš výtvor sice cosi dělá, ale pro nás to není vůbec důležité, tím méně zajímavé. Od začátku se přeci bavíme o GUI aplikacích a aby bylo možné srovnávat, musíme se i v Javě k nějaké dopracovat!. Vrhneme se tedy do struktury projektu a na balíčku com.company klikneme pravým tlačítkem myši. Objeví se nám spousta možností, jak je vidět na prvním obrázku druhé galerie. Pokud vybereme hned tu první – New, objeví se další seznam možností. Zde je možné si vybrat, jaké druhy souborů lze k danému typu projektu přidat- viz druhý obrázek ve druhé galerii. Pro nás jsou zajímavé možnosti až skoro dole v nabídce – GUI Form a Dialog. Pokud vybereme tu první, tak se objeví dialog, kde jsou 4 položky – viz třetí obrázek druhé galerie. My vyplníme pouze název nového souboru/třídy. Nastavení layoutu necháme být (zájemci mohou kliknout na rozbalovací šipku a zkusit jiné nastavení). Necháme zaškrtnuté vytvoření příslušné třídy s tím, že její název se vyplní automaticky. Po kliknutí na tlačítko OK se přesuneme zpět do hlavního okna, které se ale zásadně změnilo – viz čtvrtý obrázek ve druhé galerii. Ve struktuře projektu nám přibyly dva soubory – mainForm.java a mainForm.form. V prostředním sloupci je vidět struktura GUI dané třídy, kde jsou obsaženy dvě položky: Form a Panel. V pravé části okna je pak tvůrce GUI, kde je možné přidávat a definovat veškeré potřebné součásti GUI. My si postupně přidáme dva prvky – JButton a JLabel. U tlačítka nastavíme či změníme dvě vlastnosti – font a text v tlačítku. Výsledek je vidět na pátém obrázku druhé galerie. Při přidání si můžeme všimnout automatického doplnění mezer a nastavení názvu daného prvku. U labelu nastavíme opět typ fontu a nápis a také změníme barvu písma na černou pomocí příslušných dialogů. Výsledek je viditelný na šestém obrázku ve druhé galerii. Aby nedošlo ke zbytečným dohadům a dotazům – Java aplikaci ukazujeme pouze pro srovnání a proto u ní nebudeme komentovat a rozebírat žádný kód, možnosti IJI ani nic podobného! Toto vše si necháme až na hlavní záběr seriálu – aplikace JavaFX!

U labelu si můžeme všimnout, že se do jeho názvu přenesl text, který jsme zadali. To není úplně ideální, takže změníme jeho název tak, jak je vidět na sedmém obrázku druhé galerie. Pokud kdekoliv na ploše vytvářeného formuláře klikneme pravým tlačítkem myši, objeví se plovoucí menu, které ukazuje osmý obrázek v druhé galerii. Když vybereme hned první položku Preview, ukáže se nám vytvořený GUI formulář tak, jak by měl vypadat v aplikaci – viz devátý obrázek druhé galerie. Nyní svou pozornost přesuneme na soubor mainForm.java, který jsme zatím neotevřeli a nedělali v něm žádné změny. Obsah je zde:

package com.company;            --1

import javax.swing.*;           --2

/**                 --3
 * Created by fxguide on DD.MM.YY.  --4
 */                 --5
public class mainForm {         --6
    private JButton klikniSiButton; --7
    private JLabel mainLabel;       --8

}                   --9

Kód obsahuje celkem 9 řádků, které vygenerovalo IJI. Kromě názvu balíčku je zajímavý pouze řádek č. 2, kde se importuje knihovna Swing, která zde slouží pro tvorbu GUI. Na řádcích 7 a 8 jsou pak privátní deklarace obou GUI prvků jako proměnných. Dále nebudeme kód rozebírat a pustíme se do jeho jednoduché úpravy. Přidáme reakci kliknutí na tlačítko, která změní text v labelu a jeho barvu. Využijeme k tomu možnosti IJI a ve formuláři klikneme pravým tlačítkem myši. Objeví se kontextová nápověda – viz desátý obrázek ve druhé galerii. My si vybereme možnost Create Listener nebo klávesovou zkratku dle nápovědy (Ctlr + O). Poté se objeví možnosti pro vytvoření nové reakce a vybereme její druh – viz obrázek č. 11 druhé galerie. My vybíráme samozřejmě možnost MouseListener. Z toho rezultuje další výběr – viz obrázek č. 12 ve druhé galerii. My ponecháme první nastavenou volbu mouseClicked a ukončíme akci tlačítkem OK. Ihned potom vidíme změny v kódu, kde přibylo několik řádků. My k nim doplníme ještě dva další, které provedou námi požadovanou akci změny textu a jeho barvy v labelu. Přitom maximálně využijeme inteligentní nápovědu a doplňování kód, které je v IJI na velmi vysoké úrovni. Pokud bychom zkusili projekt spustit, tak zjistíme dvě věci: kód je bez chyb, ale žádné okno spuštěné aplikace se neobjeví. To je asi celkem pochopitelné, protože ho z hlavní procedury main nijak nevoláme. Proto musíme i zde doplnit nějaký kód. Ten nebudeme nijak komentovat a odkážeme zájemce na přílohy, kde jsou všechny tři použité soubory: Main.java, mainFor­m.form a mainForm.java. Po spuštění tohoto kódu vidíme okno aplikace na předposledním obrázku druhé galerie. Na posledním obrázku ve druhé galerii pak vidíme reakci na kliknutí tlačítka Klikni si!

• 
• 
• 

Dalších 29 fotografií

Tímto by bylo možné uzavřít krátkou ukázku Java aplikace a pomalu se přesunout k aplikacím JavaFX. Vybereme tedy položku hlavního menu File → New → Project a dostaneme se do již známého formuláře pro vytvoření nového projektu. Tentokrát ovšem vybereme možnost Java FX. Jak je vidět na prvním obrázku třetí galerie, tak jsou určité věci jinak, než bylo u prvního projektu Java. Automaticky se doplní již dříve nastavené SDK. Také je samozřejmě jiný typ aplikace a co je důležité: spodní nápověda nám říká, že se jedná o aplikaci pro JavaFX verze 2.0, která obsahuje soubor s jednoduchým GUI, příslušný kontrolér a hlavní třídu Main. Po tlačítku Next následuje formulář s nastavením názvu projektu – viz druhý obrázek ve třetí galerii. Pak už je možné použít tlačítko Finish. To nám, ač by se to mohlo zdát jasné a logické, neotevře hlavní okno IJI s nově vytvořeným projektem. Místo toho se objeví dialog, který je vidět na třetím obrázku třetí galerie. Tento dialog nám nabízí dvě možnosti – otevřít nově vytvořený projekt v novém okně (a mít tak k dispozici oba projekty) nebo nahradit stávající projekt nově vytvářeným. My nebudeme projekt v Javě už používat, takže zvolíme možnost This Window. Je zde také možnost zapamatovat vybranou akci s tím, že při další stejné se již dialog nebude otevírat. Teprve potom se otevře hlavní okno IJI, jak to ukazuje čtvrtý obrázek ve třetí galerii.

Jak je vidět na struktuře projektu, v adresáři src je balíček s názvem sample a v něm tři soubory: Controller.java, Main.java, sample.fxml. Všechny uvedené soubory jsou také otevřené v hlavním okně. Na pravé straně jsou stejné ikony jako v prvním případě. Ani zde nebudeme na nic čekat a zkusíme použít zelenou šipku na překlad a spuštění vygenerované aplikace. To nám ukáže, jestli nápověda z procesu tvorby nového projektu nelhala a skutečně se objeví nějaká GUI aplikace. Jak je jasně patrné z pátého obrázku třetí galerii, nápověda opravdu nelhala! Okno aplikace je viditelné, má titulek, ovládací ikony, ale žádný další obsah. V této chvíli je třeba upozornit ještě na jednu věc: pokud klikneme na ikonu pro uzavření okna, dojde automaticky k ukončení běžící aplikace. To je první velký rozdíl oproti minulé aplikaci Java. O ukončení aplikace nás informuje spodní okno textem

Process finished with exit code 0

O tom, jestli nějaká aplikace běží je možné se přesvědčit také pomocí menu Run → Stop. Pokud je tato položka (resp. čtvercová ikona před ní) šedá, žádná aplikace neběží a není tedy co zastavovat. V případě nějaké běžící aplikace je čtvereček červený a je zde možné všechny instance dané aplikace postupně zastavovat (nebo použít klávesovou zkratku Ctrl+F2).

Necháme zatím spuštění a ukončení aplikace stranou a podíváme se na výše uvedené soubory. Kompletně jsou v přílohách Main1.java, Sam­ple1.fxml a Controller1.ja­va. Začneme tím nejjednodušším – Controller.java. Jeho kód je opravdu velmi stručný:

package sample;

public class Controller {
}

Jak je z výpisu jasné, je zde pouze uveden název příslušného balíčku a deklarován název třídy. Další soubor sample.fxml obsahuje už větší množství kódu, který ale nebudeme nijak rozebírat:

<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<GridPane fx:controller="sample.Controller"
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
</GridPane>

Důležité je v tomto momentě spíše zaměřit naší pozornost na volby, které se objeví, když tento soubor v hlavní okně zobrazíme – viz šestý obrázek ve třetí galerii. Jedná se o volbu Text, která nám ukazuje výše uvedený kód. Druhou možností je pak Scene Builder. Pokud tuto možnost zvolíme, objeví se hlášení, která ukazuje sedmý obrázek třetí galerie. Jak je asi z obrázku a názvu volby patrné, jedná se o možnost spustit JFXSB přímo v prostředí IJI a použít ho pro úpravu či tvorbu GUI. My tuto volbu ponecháme zatím stranou a podíváme se na poslední, nejdůležitější a také „nejrozsáhlejší“ soubor main.java:

package sample;                                 --1

import javafx.application.Application;                      --2
import javafx.fxml.FXMLLoader;                          --3
import javafx.scene.Parent;                         --4
import javafx.scene.Scene;                          --5
import javafx.stage.Stage;                          --6

public class Main extends Application {                     --7

    @Override                                   --8
    public void start(Stage primaryStage) throws Exception{         --9
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));   --10
        primaryStage.setTitle("Hello World");                   --11
        primaryStage.setScene(new Scene(root, 300, 275));           --12
        primaryStage.show();                            --13
    }                                       --14


    public static void main(String[] args) {                    --15
        launch(args);                               --16
    }                                       --17
}                                       --18

Z výpisu je patrné, že kód má celkem 18 řádků včetně ukončovacích závorek. Stručně si popíšeme význam jednotlivých řádků nebo jejich skupin:

• na řádcích 2 – 6 se postupně importují potřebné knihovny pro samotnou aplikaci, použití externího FXML souboru a jednotlivých prvků či balíků GUI
• na řádku 7 je deklarována třída, která má typ aplikace
• na řádku 9 je deklarována startovací procedura, tzv. Entry point včetně zachycení případných chyb a výjimek. Parametrem je pak objekt Stage, což je GUI kontejner nejvyšší úrovně
• na řádku 10 je deklarovaná proměnná, která v sobě obsahuje externí zdrojový soubor *.fxml
• na řádku 11 je definován titulek objektu Stage, potažmo hlavního okna aplikace
• na řádku 12 je definován objekt Scene, což je kontejner zahrnující všechny ostatní komponenty GUI. Scene se definuje jako proměnná s obsahem externího zdrojového souboru a svou základní velikostí
• řádek 13 představuje zobrazení deklarovaného objektu Stage
• na řádku 15 je pak deklarována základní procedura aplikace

Z tohoto stručného popisu zatím nemusí být úplně jasný rozdíl mezi objekty Stage a Scene. Moc nám nepomůže ani překlad: Stage = jeviště, podium, scéna, Scene = jeviště, scéna. Postupně si ale za pomoci složitějších aplikací tento rozdíl vyjasníme snad k úplné spokojenosti. Jednoduchou aplikaci máme tedy vytvořenou, ale bohužel toho moc nepředvádí. Bylo by vhodné vytvořit něco podobného, jak v případě aplikace Java – přidat tlačítka a label a nastavit reakci na klik myši na tlačítko. K úpravě GUI je možné použít dvě různé cesty. První z nich je všeobecně známá i z jiných platforem a nástrojů (používali jsem jí dost často i v našem minulém seriálu o jazyce Ada) – ruční implementace jednotlivých komponent přímo do kódu a jejich ruční nastavení. Druhá cesta je asi také každému zřejmá – použití nainstalované aplikace JFXSB. Vrátíme se tedy k chybovému hlášení o nemožnosti jeho spuštění přímo z IJI a klikneme zde na odkaz path. Tím se nám automaticky otevře okno, která je vidět na osmém obrázku ve třetí galerii. My zde nebudeme nic měnit a konfiguraci ukončíme tlačítkem OK. Tím se dostaneme zpět do hlavního okna IJI, kde máme otevřený příslušný soubor v JFXSB. Jak je asi na první pohled zřejmé (a devátý obrázek třetí galerie to dostatečně dokumentuje), přehlednost není silnou stránkou tohoto způsobu a pokud bychom ho chtěli zlepšit, tak bychom museli upravit prostředí IJI. To by nám ale zase zpětně zbytečně komplikovalo život při psaní kódu a vývoji aplikace. proto necháme tuto možnost stranou a využijeme externí aplikaci JFXSB.

JFXSB spustíme a pomocí menu File → Open najdeme a otevřeme příslušný soubor FXML. Kde se přesně nachází je zřejmé z desátého obrázku ve třetí galerii. Jak vypadá výsledek je pak vidět na obrázku č. 11 třetí galerie. Pokud ještě zvětšíme okno na celou plochu monitoru, je jasné, že přehlednost je úplně někde jinde ve srovnání s pidi-okénkem v IJI… Když už máme okno JFXSB před sebou, tak se na něj podíváme trochu podrobněji:

• V levém sloupci jsou jednotlivé skupiny GUI komponent v balíku Library – Containers, Controls, Menu, Miscellaneous, Shapes, Charts a 3D
• pak následují dvě položky v balíku Document – Hierarchy a Controller
• v položce Hierarchy vidíme jednu komponentu – GridPane
• pokud klikneme na položku Controller, uvidíme něco, co je na obrázku č. 12 ve třetí galerii – název přiřazené třídy včetně nadřízeného balíčku

Pokud klikneme na položku GridPane (0 × 0), tak uvidíme změnu jak ve střední části, tak hlavně v pravém sloupci okna – viz obrázek č. 13 třetí galerie. Zde jsou všechny možnosti pro nastavení dané komponenty ve třech záložkách – Properties, Layout a Code. My si otevřeme v levém sloupci položku Controls a vybereme komponentu Button. Komponentu myší „uchopíme“ a přeneseme na plochu ve středu. Výsledek našeho snažení vidíme na obrázku č. 14 ve třetí galerii. Na obrázku vidíme i změnu v položce Hierarchy. Jako v předchozím příkladě změníme velikost fontu a popis tlačítka – viz obrázek č. 15 třetí galerie. Ke změně využijeme hned první dvě položky v pravém sloupci v záložce Properties. To samé uděláme s komponentou Label včetně změny textu i fontu a výsledek vidíme na obrázku č. 16 ve třetí galerii. Pokud použijeme menu Preview → Show Preview in Window, dostaneme výsledek, který zobrazuje obrázek č. 17 třetí galerie. Kdo má zájem, může si pohrát s další položkou menu – Preview – JavaFX Theme a následně pak znovu spustit ukázku hlavního okna. Je zde k dispozici celkem 9 různých témat a je možné si s nimi hrát. My je zatím necháme být, stejně jako další položky v tomto menu – Scene Style Sheets, Internationalization, Preview Size.

Když změny uložíme a vrátíme se do IJI, tak zjistíme, že se nám soubor sample.fxml docela rozrostl – ukazuje to obrázek č. 18 ve třetí galerii. Změny máme tedy viditelné, takže můžeme zkusit spustit aplikaci. Jak ukazuje obrázek č. 19 třetí galerie, naše změny se v okně aplikace skutečně projevily. Nyní už nám zbývá pouze jedna maličkost – vytvořit reakci na klik tlačítka, který změní text labelu. Nebudeme to zde příliš rozebírat, ale ona maličkost není zase tak úplně jasná a snadná. Problém je totiž v tom, že sice máme v FXML souboru nějaké změny, ale zbytek aplikace (hlavně pak kontrolér) o nich neví! Jenom tak na okraj: jak je z předchozích kroků patrné, JFXSB na základě změn v grafickém návrhu formuláře ukládá vše do uvedeného soubor. Jak z přípony, tak z pohledu na obsah tohoto souboru by mělo být jasné, že se jedná o formu, která vychází z klasického XML formátu.

Vrátíme se tedy ke komponentě Button a v pravém sloupci otevřeme položku Code. Tam jsou pro nás zajímavé první dvě položky – fx:id, On Action. Tyto položky vyplníme tak, jak to ukazuje obrázek č. 20 ve třetí galerii. V první položce deklarujeme název dané komponenty a ve druhé pak název procedury, která bude reagovat na kliknutí tlačítka. Podle obrázku č. 21 třetí galerie pak definujeme název komponenty label a změny uložíme. Jak si můžeme všimnout, tak se nám na pravé straně horní lišty formuláře objevil žlutý trojúhelník s číslovkou 2. Pokud na něj klikneme, dostane se nám varovného hlášení, jak to ukazuje obrázek č. 22 ve třetí galerii. Změny můžeme pozorovat i v položce Document → Controller – viz obrázek č. 23 třetí galerie. A konečně se dostáváme jednak k řešení našeho drobného problému ve vztahu FXML soubor – příslušný kontrolér a za druhé také k tomu, proč je použití JFXSB tak zajímavé! Vybereme menu View → Show Sample Controller Skeleton a dostaneme něco, co je vidět na obrázku č. 24 ve třetí galerii. Další dva obrázky (č. 25 a 26) této galerie ukazují změny, které nastanou při zaškrtnuté volbě Comments a Full. Tuto volbu pak použijeme pro další práci a uložíme si jí do schránky příkazem Copy.

Vrátíme se do IJI a otevřeme soubor Controller.java. Prozatímní 3 řádky smažeme a vložíme do kódu uložený text ze schránky. Zde bohužel narazíme na problém – systém se brání příkazu:

@FXML
void btn1_Click (ActionEvent event)

Myší tedy klikneme na typ ActionEvent a IJI nám napoví, že je dobré použít klávesovou zkratku Alt+Enter. Pak se objeví možnosti, které ukazuje obrázek č. 27 třetí galerie. My si vybereme tu první v pořadí – Import class a pak variantu javafx.event.ActionEvent (pozor na podobnou položku java.awt.event.ActionEvent, která zde však není funkční!). Chyba zmizí a objeví se také nový import – viz obrázek č. 28 ve třetí galerii. Když už máme akci připravenou, přidáme dva příkazy pro změnu labelu:

lbl1.setText("Ahoj FX světe!!!");
lbl1.setTextFill(Color.CYAN);

V kódu Main.java změníme jeden řádek:

primaryStage.setScene(new Scene(root, 640, 480));

Změny uložíme a zkusíme přeložit a spustit aplikaci. Poslední dva obrázky třetí galerie ukazují, jak to vypadá ihned po spuštění a po kliknutí na tlačítko. Upravené soubory jsou v přílohách Main2.java, Sam­ple2.fxml a Controller2.ja­va.

Dnešní díl byl věnován vytvoření a porovnání jednoduchých GUI aplikací v Java a JavaFX. V příštím dílu se zaměříme na vytvoření kostry nové aplikace, ve které se postupně dostaneme ke „spolupráci“ aplikace JavaFX s databázovým strojem PostgreSQL.