[[oktatas:programozás:java:java_fx|< Java FX]]

====== Java FX Visual Studio Code ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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:
  * <nowiki>.vscode/settings.json</nowiki>

===== Kód a kezdéshez =====

<code java App.java>
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);
    }
}
</code>


Ha most futtatjuk, hibát kapunk:
<code>
/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
</code>


===== 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:

<code javascript>
"vmArgs": "--module-path C:/Users/janos/Library/javafx-sdk-19/lib --add-modules javafx.controls,javafx.fxml",
</code>

A betűjel: "C:", elhagyható Windowson is.


Linuxon:
<code javascript>
"vmArgs": "--module-path /home/janos/Library/javafx-sdk-19/lib --add-modules javafx.controls,javafx.fxml",
</code>

<note important>Ügyeljünk arra, hogy az útvonal a saját javafx-sdk helye legyen beállítva.</note>

A program elkészült, futtatható.

{{:oktatas:programozas:java:java_fx:javafx_hello_app.png|}}

===== 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**.

{{:oktatas:programozas:java:java_fx:run_and_debug_create_a_launch.png|}}

  * A mainClass legyen az induló osztály.
  * A vmArgs tulajdonság számára állítsa be a javafx helyes útvonalát.

<code javascript .vscode/launch.json>
    "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"
        }
    ]
</code>

{{:oktatas:programozas:java:java_fx:run_and_debug_start_play.png|}}

Forrás:
  * https://openjfx.io/openjfx-docs/ (2022)