< Java FX

Java FX Visual Studio Code

Szerző: Sallai András

Copyright © Sallai András, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Telepítés

Szükséges szoftverek:

JavaSE JDK

JavaFX

Visual Studio Code

JavaSE JDK:

https://www.oracle.com/java/technologies/javase-downloads.html (2021)

JavaFX:

https://gluonhq.com/products/javafx/ (2021)

Szükséges operációs rendszertől függően:

JavaFX Windows SDK

JavaFX Mac OS X SDK

JavaFX Linux SDK

Visual Studio Code:

https://code.visualstudio.com/ (2021)

VSCode bővítmény

Szükséges bővítmény:

JavaFX Support

SceneBuilder extension for Visual Studio Code

A Java VSCode-ban

A JavaSE JDK feltelepíthető Visual Studio Code-ból is. Ehhez hozzuk elő a parancs panelt:

Ctrl + Shift + p

Kezdjük el írni:

Java

Válasszuk a következő lehetőséget:

Configure Java Runtime

Megjelenik a „Configure Java Runtime” felülete.

Az oldalon találunk egy [ Download ] gombot, amivel telepíthető a JavaSE JDK.

A már telepített Java verziók megtekinthetők a „Intalled JDKs” fülön. Ha VSCode-on kívül telepítettünk JavaSE JDK-t, azok is megjelennek itt.

Telepítés után, indítsuk újra a Visual Studo Code-t.

JavaFX

Windows esetén kapunk egy ilyen fájlt:

openjfx-11.0.2_windows-x64_bin-sdk.zip

Csomagoljuk ki, például:

C:\Users\janos\Library\openjfx

JavaFX projekt

Készítsünk egy JavaFX projektet.

Kattintsunk:

View > Command Palette

Kezdjük el írni, és válasszuk:

Java: Create Java Create...

Legyen egy builder nélküli projekt.

Most hozzá kell adni a projekthez a JavaFX .jar fájlokat.

Nyissuk meg a létrehozott App.java fájlt. Az oldalsávon megjelenik a „JAVA PROJECTS” nézet. Keressük meg a „Referenced Libraries” a fanézetben. A felirat mellett kattintsunk a „+” gombra. Az előugró párbeszédablakban keressük meg a JavaFX lib könyvtárban található .jar kiterjesztésű fájlokat. Válasszuk ki mindent.

javafx.base.jar

javafx.controls.jar

javafx.fxml.jar

javafx.graphics.jar

javafx.media.jar

javafx.swing.jar

javafx.web.jar

javafx-swt.jar

A fanézetben a „Referenced Libraries” alatt megjelennek a programozói könyvtárak.

Ugyanakkor a VSCode hivatkozást helyez el a projekt könyvtárában a következő fájlban:

.vscode/settings.json

Kód a kezdéshez

import javafx.application.Application; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.layout.StackPane; public class App extends Application { @Override public void start(Stage stage) { StackPane root = new StackPane(); Scene scene = new Scene(root, 300, 250); stage.setScene(scene); stage.setTitle("Valami"); stage.show(); } public static void main(String[] args) { launch(args); } }

Ha most futtatjuk, hibát kapunk:

/usr/bin/env /usr/lib/jvm/java-17-openjdk-amd64/bin/java -XX:+ShowCodeDetailsInExceptionMessages -Dfile.encoding=UTF-8 @/tmp/cp_c28gippgcrq8r670mlunh45sf.argfile App
Error: JavaFX runtime components are missing, and are required to run this application

Konfiguráció hozzáadása

Adjunk konfigurációt a projektünkhöz:

Run > Add configuration…

Létrejön a .vscode könyvtárban egy launch.json fájl, ami automatikusan megnyílik. Alapértelmezetten két konfiguráció van benne. Nem kell többet felvenni.

Vegyük fel a minden „request” tulajdonság után, saját „vmArgs” tulajdonságunkat. A következő kódot javítsuk saját útvonal alapján:

Windows alatt is „/” jelek vagy kettő darab „\”, azaz „\\” szükséges!

"vmArgs": "--module-path ${userHome}/Library/javafx-sdk-19/lib --add-modules javafx.controls,javafx.fxml",
Ügyeljünk arra, hogy az útvonal a saját javafx-sdk helye legyen beállítva.

A program elkészült, futtatható.

Alternatív indítás

A Java projekt létrehozása után adjuk hozzá a függőségeket.

Az akciósávon kattintsunk a „Run and Debug”.

To customize Run and Debug create a launch.json file.

A mainClass legyen az induló osztály.

A vmArgs tulajdonság számára állítsa be a javafx helyes útvonalát.

"configurations": [ { "type": "java", "name": "Launch App", "request": "launch", "mainClass": "App", "vmArgs": "--module-path /home/janos/Library/javafx/javafx-sdk-19/lib --add-modules javafx.controls,javafx.fxml" } ]

Forrás:

https://openjfx.io/openjfx-docs/ (2022)

Másik fxml betöltési lehetőség

Adott két fxml fájl:

mainScene.fxml

secondScene.fxml

Legyen cserélhető az FXML állomány:

import java.io.IOException; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; public class App extends Application { private static Scene scene; public static void main(String[] args) throws Exception { launch(args); } @Override public void start(Stage stage) throws IOException { scene = new Scene(loadFXML("mainScene")); stage.setScene(scene); stage.show(); } private static Parent loadFXML(String fileName) throws IOException { FXMLLoader loader = new FXMLLoader(App.class.getResource(fileName+".fxml")); return loader.load(); } static void setRoot(String fileName) { try { trySetRoot(fileName); }catch(IOException e) { System.err.println("Hiba! Az FXML betöltése sikertelen!"); System.err.println(e.getMessage()); } } static void trySetRoot(String fileName) throws IOException { scene.setRoot(loadFXML(fileName)); } }

A cserek az App.setRoot() utasítással lehetséges.

import javafx.event.ActionEvent; import javafx.fxml.FXML; public class MainController { @FXML void onClickButton(ActionEvent event) { App.setRoot("secondScene"); } }