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

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

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Szerkesztve: 2022, 2024
  * 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 ${userHome}/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)


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


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

</code>

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

<code java MainController.java>
import javafx.event.ActionEvent;
import javafx.fxml.FXML;

public class MainController {

    @FXML
    void onClickButton(ActionEvent event) {
        App.setRoot("secondScene");
    }    
}
</code>


===== Sinto csomag használata =====


  * mkdir app01
  * cd app01
  * code .
  * sin javafx
  * Másold a JavaFX .jar és .so fájlokat a például lib/javafx könyvtárba.
  * Nyisd meg az App.java fájlt
  * Futtasd az App.java fájlt. Ez hibára fut.
  * sin javafx -p lib/javafx
  * Készít a mainScene.fxml fájlban valamit
  * kész