JavaFX 2 quickstart: Události a CSS

Zdrojové kódy budu, tak jako v předchozím díle, z důvodu úspory místa uvádět bez importů. Všechny zde uvedené kódy si můžete stáhnout v přiloženém zipu.

Event (událost)

Událost vzniká určitou akcí (činností) jako například pohybem myši, stiskem tlačítka či klávesy (KeyEvent – stiskem klávesy na klávesnici, MouseEvent – pohybem myši nebo stiskem tlačítka na myši,...). Událost (event) je objekt, který má v sobě všechny informace, týkající se dané události (jaký je to typ události, kde událost vznikla, kdo ji vyvolal, …).

Uzel (node) si může zaregistrovat ovladač (handler), který bude zavolán v případě, že vznikne určitá událost. Handler pak v metodě handle() definuje, co se má stát.

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é styly (CSS)

Kód, který slouží jen pro stylování vzhledu aplikace a pro její funkčnost není nezbytný, lze vypustit a celé stylování lze provést pomocí kaskádových stylů. Pokud máte nějaké zkušenosti s tvorbou HTML stránek, určitě vám to zní povědomě.

Styl aplikace lze nadefinovat pomocí kaskádových stylů v samostatném souboru a tento soubor umístit do adresáře, kde se nachází náš .java soubor. V .java souboru pak stačí říci, v jakém souboru se styly nacházejí.

Uzly jako například Label, Button, … již automaticky patří do tříd (.label, .button). Všem uzlům je možné přidat třídu i id a ty následně pomocí CSS stylovat. Stylování je hierarchické. To znamená, že styl rodičovského uzlu se vztahuje i na jeho potomky a potomky potomků. V potomkovi se styl dá předefinovat a má vyšší prioritu (přebije styl rodiče).

Jako příklad si vezmeme předchozí aplikaci, jejíž vzhled ale nyní budeme definovat pomocí CSS.

.java soubor

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 soubor

/* 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;
}

Vzhledově se nic nezměnilo a náš kód je nyní lépe čitelný. CSS umožňují použití i tzv. pseudo-tříd (např. hover, která se aplikuje, pokud je nad daným uzlem kurzor myši). Pomocí pseudo-třídy hover, můžeme nahradit i kód metod yesBT.setOnMou­seEntered() a yesBT.setOnMou­seExited(). Příklad naleznete v přiloženém zipu v balíčku applicationCSS02.

A to je vše. Doufám, že se vám tento krátký tutoriál líbil, a že jste se něco nového naučili. Pokud vás JavaFX zaujala, doporučuji se podívat na zdroje uvedené ke konci každého dílu tohoto tutoriálu.

Zdroje:

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