JavaFX 2 QUICKSTART: Udalosti a CSS

V minulom dieli, Task v JavaFX , sme sa naučili používať triedu Task, ktorá slúži na spustenie operácie na pozadí.

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

Kaskádové štýly (CSS)

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:

• http://docs.oracle.com/...tutorial.htm
• http://docs.oracle.com/.../cssref.html

V budúcej lekcii, Grafické hodiny v JavaFX - Návrh formulára , začneme prácu na anológových hodinách v JavaFX. Navrhneme si formulár a pripravíme si základy logickej triedy na vykresľovanie ručičiek na Pane.