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.setOnMouseEntered () a yesBT.setOnMouseExited (). 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:
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.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 275x (5.6 kB)
Aplikácia je vrátane zdrojových kódov v jazyku Java