Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
Discount week - April - 30

JavaFX 2 QUICKSTART: Udalosti a CSS

Zdrojové kódy budem, tak ako v predchádzajúcom diele, z dôvodu úspory miesta uvádzať bez importov. Všetky tu uvedené kódy si môžete stiahnuť v priloženom zipsu.

Event (udalosť)

Udalosť vzniká určitú podujatí (činností) ako napríklad pohybom myši, stlačením tlačidla alebo klávesy (KeyEvent - stlačením klávesy na klávesnici, MouseEvent - pohybom myši alebo stlačením tlačidla na myši, ...). Udalosť (event) je objekt, ktorý má v sebe všetky informácie, týkajúce sa danej udalosti (aký je to typ udalosti, kde udalosť vznikla, kto ju vyvolal, ...).

Uzol (node) si môže zaregistrovať ovládač (handler), ktorý bude zavolaný v prípade, že vznikne určitá udalosť. Handler potom v metóde handle () definuje, čo sa má stať.

public class YesNo extends Application {
    private Button yesBT, noBT;
    private final int PANE_WIDTH = 400;
    private final int PANE_HEIGHT = 200;

    @Override
    public void start(Stage stage) {
        try {
            BorderPane rootPane = new BorderPane();     // vytvoření BorderPane rozvržení, tento uzel bude root node scene grafu
            rootPane.setPadding(new Insets(20));
            Font font = Font.font("Verdana", FontWeight.BOLD, 20);

            VBox topPane = new VBox();                  // vytvoření VBox rozvržení (do něj vložíme Label)
            topPane.setAlignment(Pos.CENTER);               // nastavení zarovnání obsahu VBox na střed
            Label questionLB = new Label("Líbí se vám tento tutoriál?");    // vytvoření nového štítku
            questionLB.setFont(font);                   // nastavení písma textu na štítku
            topPane.getChildren().add(questionLB);

            VBox bottomPane = new VBox();
            bottomPane.setAlignment(Pos.CENTER);
            final Label responseLB = new Label();
            responseLB.setFont(font);
            bottomPane.getChildren().add(responseLB);

            rootPane.setTop(topPane);       // do horní části BorderPane rozvržení vloží VBox rozvržení se štítkem
            rootPane.setBottom(bottomPane);     // totéž pro dolní část BorderPane rozvržení


            yesBT = new Button("Ano");      // vytvoří nové tlačítko s popiskem
            yesBT.setFont(font);            // nastaví písmo pro popisek tlačítka
            noBT = new Button("Ne");
            noBT.setFont(font);

            GridPane centerPane = new GridPane();           // vytvoří GridPane rozvržení
            centerPane.setPrefSize(PANE_WIDTH, PANE_HEIGHT);    // nastaví požadovanou velikost pro rozvržení GridPane
            centerPane.add(yesBT, 0, 0);                // umístí tlačítko yesBT na pozici sloupec (x) = 0, řada (y) = 0 v rozvržení GridPane
            centerPane.add(noBT, 1, 0);             // umístí tlačítko noBT na pozici x = 1, y = 0
            centerPane.setHgap(30);                 // nastaví vodorovnou mezeru mezi komponentami
            centerPane.setAlignment(Pos.CENTER);            // nastaví zarovnání obsahu GridPane rozvržení na střed
            rootPane.setCenter(centerPane);             // vloží GridPane rozvržení do centrální části BorderPane rozvržení


            // tlačítko yesBT si zaregistruje ovladač (handler), který bude reagovat na událost kliknutí na tlačítko
            yesBT.setOnAction(new EventHandler<ActionEvent>() {

                @Override
                // metoda, ve které je určeno, co se v případě zavolání handleru má provést
                public void handle(ActionEvent event) {
                    responseLB.setText("Díky, pochvala potěší.");       // nastaví text štítku
                }

            });

            // tlačítko si registruje ovladač, který bude reagovat na událost, kdy kurzor najede na tlačítko
            yesBT.setOnMouseEntered(new EventHandler<MouseEvent>() {

                @Override
                public void handle(MouseEvent event) {
                    yesBT.setScaleX(1.5);       // nastavuje měřítko, dle kterého se bude měnit velikost komponenty podél osy x
                    yesBT.setScaleY(1.5);       // totéž pro osu y
                }

            });

            // tlačítko si registruje ovladač, který bude reagovat na událost, kdy kurzor opustí tlačítko
            yesBT.setOnMouseExited(new EventHandler<MouseEvent>() {

                @Override
                public void handle(MouseEvent event) {
                    yesBT.setScaleX(1);         // velikost dle osy x se vrátí k původnímu rozměru
                    yesBT.setScaleY(1);         // totéž pro osu y
                }

            });

            noBT.setOnMouseEntered(new EventHandler<MouseEvent>() {

                @Override
                        public void handle(MouseEvent event) {
                    Random gen = new Random();
                    int x = gen.nextInt((int)(PANE_WIDTH - noBT.getWidth()));       // generuje náhodné číslo pro x (v rozsahu šířky GridPane)
                    int y = gen.nextInt((int)(PANE_HEIGHT - noBT.getHeight()));     // totéž pro y (v rozsahu výšky GridPane)
                    noBT.setLayoutX(x);                                             // nové umístění tlačítka (pozice na ose x)
                    noBT.setLayoutY(y);                                             // totéž pro osu y
                        }
                });

            noBT.setOnAction(new EventHandler<ActionEvent>() {

                @Override
                        public void handle(ActionEvent event) {
                    noBT.setVisible(false);
                        }

            });

            Scene scene = new Scene(rootPane);
            stage.setScene(scene);
            stage.setTitle("YesNo");
            stage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}
Screeshot JavaFX aplikácie

Kaskádové štýly (CSS)

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Kód, ktorý slúži len pre štýlovanie vzhľadu aplikácie a pre jej funkčnosť nie je nevyhnutný, je možné vypustiť a celej štýlovanie možno vykonať pomocou kaskádových štýlov. Ak máte nejaké skúsenosti s tvorbou HTML stránok, určite vám to znie povedome.

Štýl aplikácie možno nadefinovať pomocou kaskádových štýlov v samostatnom súbore a tento súbor umiestniť do adresára, kde sa nachádza náš .java súbor. V .java súboru potom stačí povedať, v akom súboru so štýlmi nachádzajú.

Uzly ako napríklad Label, Button, ... už automaticky patrí do tried (.label, .button). Všetkým uzlom je možné pridať triedu aj id a tie následne pomocou CSS stylovať. Štýlovanie je hierarchickej. To znamená, že štýl rodičovského uzla sa vzťahuje aj na jeho potomkov a potomkov potomkov. V potomkovi sa štýl dá predefinovať a má vyššiu prioritu (prebije štýl rodičia).

Ako príklad si zoberieme predchádzajúce aplikáciu, ktorej vzhľad ale teraz budeme definovať pomocou CSS.

.java súbor

public class YesNoCSS extends Application {
    private Button yesBT, noBT;
    private final int PANE_WIDTH = 400;
    private final int PANE_HEIGHT = 200;

    @Override
    public void start(Stage stage) {
        try {
            BorderPane rootPane = new BorderPane();
            rootPane.setId("rootPane");                 // nastaví id tomuto uzlu

            VBox topPane = new VBox();
            topPane.getStyleClass().add("vBox");                // nastaví třídu (class) tomuto uzlu
            Label questionLB = new Label("Líbí se vám tento tutoriál?");
            topPane.getChildren().add(questionLB);

            VBox bottomPane = new VBox();
            bottomPane.getStyleClass().add("vBox");
            final Label responseLB = new Label();
            bottomPane.getChildren().add(responseLB);

            rootPane.setTop(topPane);
            rootPane.setBottom(bottomPane);

            yesBT = new Button("Ano");
            noBT = new Button("Ne");

            GridPane centerPane = new GridPane();
            centerPane.setId("centerPane");
            centerPane.setPrefSize(PANE_WIDTH, PANE_HEIGHT);
            centerPane.add(yesBT, 0, 0);
            centerPane.add(noBT, 1, 0);
            rootPane.setCenter(centerPane);


            /*
             * Kód metod zůstává stejný.
             */

            Scene scene = new Scene(rootPane);
            scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());  // nastaví scene styl
            stage.setScene(scene);
            stage.setTitle("YesNoCSS");
            stage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

.css súbor

/* námi definované id rootPane */
#rootPane {
    -fx-font-size: 20pt;
    -fx-font-family: "Verdana";
    -fx-font-weight: bold;
    -fx-padding: 20;
}

/* námi definované id centerPane */
#centerPane {
    -fx-hgap: 30;
    -fx-alignment: center;
}

/* class (třída), kterou mají všechny štítky */
 .label {
    -fx-text-fill: black;
    -fx-alignment: center;
    -fx-text-alignment: center;
}

/* námi definovaná třída */
.vBox {
    -fx-alignment: center;
}

Vzhľadovo sa nič nezmenilo a náš kód je teraz lepšie čitateľný. CSS umožňujú použitie i tzv. Pseudo-tried (napr. Hover, ktorá sa aplikuje, ak je nad daným uzlom kurzor myši). Pomocou pseudo-triedy hover, môžeme nahradiť aj kód metód yesBT.setOnMou­seEntered () a yesBT.setOnMou­seExited (). Príklad nájdete v priloženom zipsu v balíčku applicationCSS02.

A to je všetko. Dúfam, že sa vám tento krátky tutoriál páčil, a že ste sa niečo nové naučili. Ak vás JavaFX zaujala, odporúčam sa pozrieť na zdroje uvedené na konci každého dielu tohto tutoriálu.

zdroje:


 

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

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 271x (5.6 kB)
Aplikácia je vrátane zdrojových kódov v jazyku java

 

Všetky články v sekcii
Okenné aplikácie v Java FX
Článok pre vás napísal vita
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
vita
Aktivity (1)

 

 

Komentáre

Avatar
Pavel Vosyka
Člen
Avatar
Pavel Vosyka:7.10.2015 15:35

Jsou tady i media queries a dají se tak dělat responzivní aplikace, podobně jako weby?

Odpovedať
7.10.2015 15:35
"nikdy nepiš nic 2x"
Avatar
Petr Štechmüller
Překladatel
Avatar
Odpovedá na Pavel Vosyka
Petr Štechmüller:7.10.2015 16:07

Ahoj, media queries tu nejsou. Dale tu nejsou žádné věci z CSS3 + nějaké pseudotridy z CSS 2.1. Ale responzivni aplikace se dají dělat, melo by stačit používat správný layouty...

Odpovedať
7.10.2015 16:07
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Pavel Vosyka
Člen
Avatar
Odpovedá na Petr Štechmüller
Pavel Vosyka:9.10.2015 12:57

Aha, aha. Díky :-)

Odpovedať
9.10.2015 12:57
"nikdy nepiš nic 2x"
Avatar
Pavol Franek
Člen
Avatar
Pavol Franek:16.11.2017 20:07

Ahoj, síce to v texte nepíšeš ale predpokladám že podľa metódy noBT.setOnMou­seEntered sa malo tlačidlo pohybovať vždy keď naň prejdeš myšou ale to ti nefunguje.

Podľa všetkého to nefunguje v BorderPane ale len v klasickom Pane.
Ak by niekomu pomohlo ja som to vyriešil takto.

public void start(Stage primaryStage)
    {
        try
        {
            Font font = Font.font("Verdena", FontWeight.BOLD, 20);      //vytvorenie instancie pre typ pisma

            BorderPane rootPane = new BorderPane();                     //vytvorenie BorderPane rozvrhnutia, tento uzol bude root node sceny grafu
            rootPane.setPadding(new Insets(20));                        //nastavenie medzeri medzi komponentami

            VBox topPane = new VBox();                                  //vytovrenie VBox rozvrhnutia
            topPane.setAlignment(Pos.CENTER);                           //nastavenie zarovnania obsahu VBox na stred
            Label questionLB = new Label();                             //vytvorenie labelu bez textu
            questionLB.setText("Páči sa Vám tento tutorial?");          //nastavenie textu labelu
            questionLB.setFont(font);                                   //nastavenie fontu pre label
            topPane.getChildren().add(questionLB);                      //priadnie labelu do rozvrhnutia

            VBox bottomPane = new VBox();                               //vytovrenie VBox rozvrhnutia
            bottomPane.setAlignment(Pos.CENTER);                        //nastavenie zarovnania obsahu
            final Label responseLB = new Label();                       //vytvorenie labelu bez textu
            responseLB.setFont(font);                                   //nastavenie fontu pre label
            bottomPane.getChildren().add(responseLB);                   //priadnie labelu do rozvrhnutia

            rootPane.setTop(topPane);                                   //vlozenie do Top casti BorderPane rozvrhnutia VBox so stitkom
            rootPane.setBottom(bottomPane);                             //vlozenie do Bottom casti BorderPane rozvrhnutia VBox so stitkom

            yesBT = new Button("Ano");                                  //vytvorenie noveho tlacidla s popiskom
            yesBT.setFont(font);                                        //nastavenie fontu pre tlacidlo
            noBT = new Button("Nie");                                   //vytvorenie noveho tlacidla s popiskom
            noBT.setFont(font);                                         //nastavenie fontu pre tlacidlo
            noBT.setLayoutX(120);                                       //nastavenie prvej X pozicie tlacidal
            noBT.setLayoutY(77);                                        //nastavenie prvej Y pozicie tlacidal

            GridPane centerPane = new GridPane();                       //vytvorenie GridPane rozvrhnutiia

            centerPane.setPrefSize(PANE_WIDTH, PANE_WIDTH);             //nastavenie pozadovanej velkosti rozvrhnutia pre GridPane
            centerPane.add(yesBT, 0, 0);                                //umiestnenie tlacidla na poziciu stlpca (x) = 0, riadku (y) = 0 v rozvrhnutia GridPane

            Pane btPane = new Pane();                                   //vytvorenie Pane rozvrhnutia
            btPane.setPrefHeight(BT_PANE_HIGHT);                        //nastavenie preferovanej velkosti
            btPane.setPrefWidth(BT_PANE_WIDTH);                         //nastavenie preferovanej velkosti
            btPane.getChildren().add(noBT);                             //priadeni tlacdla do Pain
            centerPane.add(btPane, 1, 0);                               //umiestnenie Pane na poziciu stlpca (x) = 1, riadku (y) = 0 v rozvrhnutia GridPane
            centerPane.setHgap(30);                                     //nastavenie vodorovnej medzeri medzi komponentami
            centerPane.setAlignment(Pos.CENTER);                        //nastavenie zarovnania obsahu GridPane na stred

            rootPane.setCenter(centerPane);

            //tlacidlo yesBT si zaregistruje ovladac(handler), ktorý bude reagovat na udalost - kliknutie na tlacidlo
            yesBT.setOnAction(new EventHandler<ActionEvent>()
            {
                //metoda, v ktroej je urcene, co sa vykona v priapde zavolania handleru
                @Override
                public void handle(ActionEvent event)
                {
                    responseLB.setText("Ďakujem, pochvala poteší.");
                }
            }
            );

            //tlacidlo yesBT si registruje ovladac(handler), ktorý bude reagovat na udalost - kurzor prejde na tlacidlo
            yesBT.setOnMouseEntered(new EventHandler<MouseEvent>()
            {
                //metoda, v ktorej je urcena co sa vykona v pripade zavolania handleru
                @Override
                public void handle(MouseEvent event)
                {
                    yesBT.setScaleX(1.5);                               //nastavuje meradlo, podla ktoreho sa bude velkost komponentu menit pozdlz osy x
                    yesBT.setScaleY(1.5);                               //nastavuje meradlo, podla ktoreho sa bude velkost komponentu menit pozdlz osy y
                }
            }
            );

            //tlacidlo yesBT si registruje ovladac(handler), ktorý bude reagovat na udalost - kurzor opusti tlacidlo
            yesBT.setOnMouseExited(new EventHandler<MouseEvent>()
            {
                //metoda, v ktorej je urcena co sa vykona v pripade zavolania handleru
                @Override
                public void handle(MouseEvent event)
                {
                    yesBT.setScaleX(1);                                 //nastavuje meradlo, podla ktoreho sa bude velkost komponentu menit pozdlz osy x
                    yesBT.setScaleY(1);                                 //nastavuje meradlo, podla ktoreho sa bude velkost komponentu menit pozdlz osy y
                }
            }
            );

            //tlacidlo yesBT si registruje ovladac(handler), ktorý bude reagovat na udalost - kurzor prejde na tlacidlo
            noBT.setOnMouseEntered(new EventHandler<MouseEvent>()
            {
                //metoda, v ktorej je urcena co sa vykona v pripade zavolania handleru
                @Override
                public void handle(MouseEvent event)
                {
                    Random rand = new Random();
                    //generuje nahodne cisla pri x (v rozsahu sirky GridPane)
                    int x = rand.nextInt((int) (BT_PANE_WIDTH - noBT.getWidth()));
                    //generuje nahodne cisla pri y (v rozsahu sirky GridPane)
                    int y = rand.nextInt((int) (BT_PANE_HIGHT - noBT.getHeight()));
                    noBT.setLayoutX(x);                                 //nastavuje meradlo, podla ktoreho sa bude velkost komponentu menit pozdlz osy x
                    noBT.setLayoutY(y);                                 //nastavuje meradlo, podla ktoreho sa bude velkost komponentu menit pozdlz osy y
                }
            }
            );

            //tlacidlo noBT si zaregistruje ovladac(handler), ktorý bude reagovat na udalost - kliknutie na tlacidlo
            noBT.setOnAction(new EventHandler<ActionEvent>()
            {
                //metoda, v ktroej je urcene, co sa vykona v priapde zavolania handleru
                @Override
                public void handle(ActionEvent event)
                {
                    noBT.setVisible(false);                             //schovane tlacidla
                }
            }
            );

            Scene scene = new Scene(rootPane);

            primaryStage.setScene(scene);
            primaryStage.show();
        } catch (Exception e)
        {
            e.printStackTrace();
        }
    }
 
Odpovedať
16.11.2017 20:07
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 4 správy z 4.