ide-eclipse.html

<h2>JavaFX and Eclipse</h2>

<p>
    This section explains how to create a JavaFX application in Eclipse.
    JavaFX 15.0.1 and Eclipse 2020-12 (4.18.0) were used for the IDE screenshots.
</p>

<p>
    Download an appropriate JDK for your operating system and set <kbd>JAVA_HOME</kbd> to the JDK directory.
    Refer to <a href="#install-java">Install Java</a> section for more information.
</p>

<p>
    Include the new JDK as <kbd>Installed JREs</kbd> in <kbd>Eclipse -> Window -> Preferences -> Java -> Installed JREs -> Add</kbd>.
</p>

<p>
    You can create a JavaFX modular or non-modular project and use the IDE tools, Maven or Gradle build tools.
</p>

<h3>Non-modular projects</h3>

<div id="ECLIPSE-IDE"></div><h4>IDE</h4>

<p>
    Follow these steps to create a JavaFX non-modular project and use the IDE tools to build it and run it.

    Alternatively, you can download a similar project from <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Java" target="_blank">here</a>.
</p>

<p>
    Download the appropriate
    <a target="_blank" href="https://gluonhq.com/products/javafx/">JavaFX SDK</a>
    for your operating system and unzip it to a desired location, for instance
    <kbd>/Users/your-user/Downloads/javafx-sdk-<span class="JFX_VERSION">11</span></kbd>.
</p>

<p>
    Create a new <kbd>User Library</kbd> under <kbd>Eclipse -> Window -> Preferences -> Java -> Build Path -> User Libraries -> New</kbd>. 

    <a href="images/ide/eclipse/ide/eclipse01.png" target="_blank"><img src="images/ide/eclipse/ide/eclipse01.png" alt="Add User Library"/></a>

    Name it <kbd>JavaFX<span class="JFX_MAJOR">11</span></kbd> and include the jars under the <kbd>lib</kbd> folder from JavaFX <span class="JFX_MAJOR">11</span>.

    <a href="images/ide/eclipse/ide/eclipse02.png" target="_blank"><img src="images/ide/eclipse/ide/eclipse02.png" alt="Add JavaFX jars"/></a>
</p>

<h5>1. Create a Java project</h5>
    
<p>
    Select <kbd>File -> New -> Java Project</kbd>, and provide a name to the project, like <kbd>HelloFX</kbd>, and a location.

    <a href="images/ide/eclipse/ide/eclipse03.png" target="_blank"><img src="images/ide/eclipse/ide/eclipse03.png" alt="Create a Java project"/></a>

    Make sure JDK 11 or greater is selected.

    You don't need to add a <kbd>module-info.java</kbd> file. You can include the <kbd>JavaFX<span class="JFX_VERSION">11</span></kbd> library into the classpath.
    
    <a href="images/ide/eclipse/ide/eclipse04.png" target="_blank"><img src="images/ide/eclipse/ide/eclipse04.png" alt="Add JavaFX11 library"/></a>

    An empty project will be opened.
</p>

<h5>2. Add JavaFX classes</h5>

<p>    
    You can add a main class <kbd>Main</kbd>, based on this <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Java/hellofx/src/hellofx/Main.java" target="_blank">one</a>, 
    with an <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Java/hellofx/src/hellofx/hellofx.fxml" target="_blank">FXML</a> file and 
    a <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Java/hellofx/src/hellofx/Controller.java" target="_blank">controller</a>.
    
    <a href="images/ide/eclipse/ide/eclipse05.png" target="_blank"><img src="images/ide/eclipse/ide/eclipse05.png" alt="Add JavaFX project"/></a>
</p>

<div class="alert alert-danger">
    <strong>Warning: </strong>
    If you now run the project it will compile but you will get this error:

<pre><code>
Error: JavaFX runtime components are missing, and are required to run this application
</code></pre>

    This error is shown since the Java <span class="JDK_MAJOR">11</span> launcher checks if the main class extends 
    <kbd>javafx.application.Application</kbd>. If that is the case, it is required to 
    have the <kbd>javafx.graphics</kbd> module on the module-path.
</div>
    
<h5>3. Add VM arguments</h5>

<p>
    To solve the issue, click on <kbd>Run -> Run Configurations...  -> Java Application</kbd>, 
    create a new launch configuration for your project named `hellofx` and add these VM arguments:
</p>

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#nix-eclipse-non-ide-1" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-eclipse-non-ide-1" data-toggle="tab">Windows</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="nix-eclipse-non-ide-1">
<pre class="no-border-radius"><code>
--module-path /path/to/javafx-sdk-<span class="JFX_VERSION">11</span>/lib --add-modules javafx.controls,javafx.fxml
</code></pre>
    </div>
    <div class="tab-pane" id="win-eclipse-non-ide-1">
<pre><code>
--module-path "\path\to\javafx-sdk-<span class="JFX_VERSION">11</span>\lib" --add-modules javafx.controls,javafx.fxml
</code></pre>
    </div>
</div>

<div class="alert alert-warning">
    <strong>Warning: </strong>
    Make sure the checkbox <b>"Use the -XstartOnFirstThread argument when launching with SWT"</b> is not checked.
</div>

<p>
    <a href="images/ide/eclipse/ide/eclipse06.png" target="_blank"><img src="images/ide/eclipse/ide/eclipse06.png" alt="VM arguments"/></a>

    Click apply and close the dialog.
</p>

<h5>4. Run the project</h5>

<p>
    Click <kbd>Run -> Run As -> Java Application -> Main - hellofx</kbd> to run the project.
</p>

<h5>Environment variable</h5>

<p>
    You can replace the module path with the environment variable <kbd>PATH_TO_FX</kbd> if you add the path to 
    <kbd>Eclipse -> Preferences -> Run/Debug -> String Substitution -> New...</kbd>.

    <a href="images/ide/eclipse/ide/eclipse07.png" target="_blank"><img src="images/ide/eclipse/ide/eclipse07.png" alt="String Substitution"/></a>

    This will let you use <kbd>${PATH_TO_FX}</kbd> as vm argument:

    <a href="images/ide/eclipse/ide/eclipse08.png" target="_blank"><img src="images/ide/eclipse/ide/eclipse08.png" alt="New VM arguments"/></a>

    And you can distribute the project or reuse it in other projects too.
</p>

<h5>E(fx)clipse</h5>

<p>
    If you use the <a href="http://www.eclipse.org/efxclipse/index.html">e(fx)clipse</a> plugin, 
    make sure you are running at least the version 3.6.0 that can be installed using from the Eclipse Marketplace.

    <a href="images/ide/eclipse/ide/eclipse09.png" target="_blank"><img src="images/ide/eclipse/ide/eclipse09.png" alt="E(fx)clipse"/></a>

    Note that you will have to do exactly the same as in the regular Java project above, including the <kbd>JavaFX<span class="JFX_VERSION">11</span></kbd> library
    and adding the necessary VM arguments.
</p>

<div id="ECLIPSE-Maven"></div><h4>Maven</h4>

<p>
    Follow these steps to create a JavaFX non-modular project and use the Maven tools to build it and run it.
    
    Alternatively, you can download a similar project from <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Maven" target="_blank">here</a>.

    Make sure you have the Maven Integration for Eclipse m2e plugin installed, but
    Eclipse 2019-03 already ships by default the latest version.
</p>

<h5>1. Create a Maven project</h5>

<p>
    Create a <kbd>File -> New -> Project... -> Maven -> Maven project</kbd>.

    <a href="images/ide/eclipse/maven/eclipse00.png" target="_blank"><img src="images/ide/eclipse/maven/eclipse00.png" alt="Create a Maven project"/></a>

    The first time you will need to add the JavaFX archetypes: Select <kbd>Add Archetypes...</kbd> and type: <kbd>org.openjfx</kbd> for the group id,
    <kbd>javafx-archetype-simple</kbd> or <kbd>javafx-archetype-fxml</kbd> for the artifact id, and <kbd><span class="JFX_MVN_ARCH_VERSION">0.0.1</span></kbd> for the version.

    <a href="images/ide/eclipse/maven/eclipse01.png" target="_blank"><img src="images/ide/eclipse/maven/eclipse01.png" alt="Add JavaFX archetypes"/></a>

    Type <kbd>org.openjfx</kbd> in the filter field and select the archetype, between <kbd>javafx-archetype-fxml</kbd> or <kbd>javafx-archetype-simple</kbd>, based on the use
    of FXML or not in your project.

    <a href="images/ide/eclipse/maven/eclipse02.png" target="_blank"><img src="images/ide/eclipse/maven/eclipse02.png" alt="JavaFX Maven archetypes"/></a>

    Provide the groupId, like <kbd>org.openjfx</kbd>, the artifactId, like <kbd>hellofx</kbd>.
    You can edit the <kbd>javafx-version</kbd> property, and set it to <span class="JFX_VERSION">11</span>,
    and the plugin version to <span class="JFX_MVN_PLUGIN_VERSION">0.0.1</span>.

    <a href="images/ide/eclipse/maven/eclipse03.png" target="_blank"><img src="images/ide/eclipse/maven/eclipse03.png" alt="JavaFX FXML archetype"/></a>

    When the project opens, select the JDK 11 or greater for the project (<kbd>File -> Properties -> Java Build Path -> Libraries</kbd>).
    
    <a href="images/ide/eclipse/maven/eclipse04.png" target="_blank"><img src="images/ide/eclipse/maven/eclipse04.png" alt="Set JDK"/></a>

    For a non-modular project, you can remove the <kbd>module-info.java</kbd> file.
</p>

<h5>2. Verify the pom</h5>

<p>
    Edit the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Maven/hellofx/pom.xml" target="_blank">pom</a> file,
    and and verify it has the <kbd>javafx.controls</kbd> and <kbd>javafx.fxml</kbd> dependencies and the <kbd>javafx-maven-plugin</kbd> with
    the <kbd>mainClass</kbd> set to <kbd>org.openjfx.hellofx.App</kbd>.

    Maven manages the required dependencies: it will add <kbd>javafx.base</kbd> and <kbd>javafx.graphics</kbd> that are required by
    <kbd>javafx.controls</kbd> and <kbd>javafx.fxml</kbd>, but most important, it will add the required classifier based on your platform, downloading
    the specific platform jars.
    
    <a href="images/ide/eclipse/maven/eclipse05.png" target="_blank"><img src="images/ide/eclipse/maven/eclipse05.png" alt="Update the pom"/></a>
   
    As for any other maven dependencies, these jars can be found in the local <kbd>.m2</kbd> repository.
</p>

<h5>3. Verify the code</h5>

<p>
    Verify the project contains the source code files, like the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Maven/hellofx/src/main/java/org/openjfx/hellofx/App.java" target="_blank">App</a> main class:

    <a href="images/ide/eclipse/maven/eclipse06.png" target="_blank"><img src="images/ide/eclipse/maven/eclipse06.png" alt="Add JavaFX project"/></a>
</p>

<h5>4. Run the project</h5>

<p>
    Click <kbd>Run -> Run As -> Maven Build -> New launch configuration</kbd> to create a new configuration.
    Name it <kbd>hellofx</kbd>, and edit the required goals, adding:
</p>
<pre><code>
clean javafx:run
</code></pre>

<p>
    <a href="images/ide/eclipse/maven/eclipse07.png" target="_blank"><img src="images/ide/eclipse/maven/eclipse07.png" alt="Run project"/></a>
    Run the project <kbd>Run -> Run As -> Maven Build -> hellofx -> Run</kbd>.
</p>

<div class="alert alert-warning">
    <strong>Note: </strong>
    In case <kbd>JAVA_HOME</kbd> is not set to <span class="JDK_MAJOR">11</span>, running the project might
    fail. To avoid it, you can define <kbd>JAVA_HOME</kbd> as an environment variable (where <kbd>${JAVA_HOME}</kbd> takes the value that can be set in <kbd>Eclipse -> Preferences -> Run/Debug -> String Substitution -> New...</kbd>):

    <a href="images/ide/eclipse/maven/eclipse08.png" target="_blank"><img src="images/ide/eclipse/maven/eclipse08.png" alt="Set Java Home"/></a>

    Alternatively, you can add the correct <kbd>java</kbd> command to the javafx-maven-plugin:
    <kbd>&lt;configuration&gt;&lt;executable&gt;/path/to/jdk-<span class="JDK_MAJOR">11</span>/bin/java&lt;/executable&gt;&lt;/configuration&gt;</kbd>.
</div>

<p>
    You can also open a terminal and run <kbd>mvn clean javafx:run</kbd> to run the project.
</p>

<div class="alert alert-danger">
    <strong>Warning: </strong>
    You might find this exception when running your project:

<pre><code class="big">
Exception in thread "WindowsNativeRunloopThread" java.lang.NoSuchMethodError: &lt;init&gt;
    at javafx.graphics/com.sun.glass.ui.win.WinApplication.staticScreen_getScreens(Native Method)
    at javafx.graphics/com.sun.glass.ui.Screen.initScreens(Screen.java:412)
    ...
Exception in thread "JavaFX Application Thread" java.lang.NullPointerException
    at javafx.graphics/com.sun.prism.d3d.D3DPipeline.getAdapterOrdinal(D3DPipeline.java:205)
    at javafx.graphics/com.sun.javafx.tk.quantum.QuantumToolkit.assignScreensAdapters(QuantumToolkit.java:695)
    at javafx.graphics/com.sun.javafx.tk.quantum.QuantumToolkit.runToolkit(QuantumToolkit.java:313)
    ...
</code></pre>

This exception is thrown on Windows when Eclipse VM is set to Oracle JDK 1.8 using Maven or Gradle projects.

A workaround for this is to edit <kbd>eclipse.ini</kbd> and change the <kbd>-vm</kbd> option to JDK <span class="JDK_MAJOR">11</span>.

If that is not possible, another workaround is to add this VM argument to the javafx maven plugin:

<pre><code>
&lt;configuration&gt;
    &lt;options&gt;
        &lt;option&gt;-Djava.library.path=C:\tmp&lt;/option&gt;
    &lt;/options&gt;
    &lt;mainClass&gt;org.openjfx.hellofx.App&lt;/mainClass&gt;
&lt;/configuration&gt;
</code></pre>

</div>

<div id="ECLIPSE-Gradle"></div><h4>Gradle</h4>

<p>
    Follow these steps to create a JavaFX project and use the Gradle tools to build it and run it.

    Alternatively, you can download a similar project from <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Gradle" target="_blank">here</a>.

    Make sure you have the Buildship Gradle Integration 3.0 plugin installed, which is bundled with Eclipse 2019-03
</p>

<h5>1. Create a Gradle project</h5>

<p>
    Create a <kbd>File -> New -> Project... -> Gradle -> Gradle project</kbd>.

    <a href="images/ide/eclipse/gradle/eclipse00.png" target="_blank"><img src="images/ide/eclipse/gradle/eclipse00.png" alt="Create a Gradle project"/></a>

    Provide a name to the project, like <kbd>HelloFX</kbd> and a location for the project. Then point <kbd>JAVA_HOME</kbd> to JDK <span class="JDK_MAJOR">11</span>.

    <a href="images/ide/eclipse/gradle/eclipse01.png" target="_blank"><img src="images/ide/eclipse/gradle/eclipse01.png" alt="Gradle project settings"/></a>

    Then close the dialog, the project will be created.

    <a href="images/ide/eclipse/gradle/eclipse02.png" target="_blank"><img src="images/ide/eclipse/gradle/eclipse02.png" alt="Open project"/></a>
</p>

<div class="alert alert-warning">
    <strong>Note: </strong>
    Instead of setting the Java home in the gradle dialog, you can add
    the property <kbd>org.gradle.java.home</kbd> to a <kbd>gradle.properties</kbd> file,
    with the correct path to JDK <span class="JDK_MAJOR">11</span>. This file can be part of the project or under
    the gradle user home <kbd>$USER_HOME/.gradle</kbd>.
</div>

<h5>2. Modify the build</h5>

<p>
    Edit the <kbd>build.gradle</kbd> file and replace it with this
    <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Gradle/hellofx/build.gradle" target="_blank">build</a> file, setting the 
    <kbd>mainClassName</kbd> accordingly to <kbd>org.openjfx.MainApp</kbd>.
</p>
<p>
    Similar to Maven, we can declare the required JavaFX modules in the <kbd>build.gradle</kbd> file.
    However, for Gradle we need to apply the JavaFX gradle plugin:
</p>
<pre><code>
javafx {
    version = "<span class="JFX_VERSION">12</span>"
    modules = [ 'javafx.controls', 'javafx.fxml' ]
}
</code></pre>
<p>
    Refresh the gradle project and you will get the JavaFX dependencies.
    <a href="images/ide/eclipse/gradle/eclipse03.png" target="_blank"><img src="images/ide/eclipse/gradle/eclipse03.png" alt="Update the build"/></a>
    As for any other Gradle dependencies, these jars can be found in the local <kbd>.gradle</kbd> repository.
</p>

<h5>3. Add the source code</h5>

<p>
    Based on this <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Gradle/hellofx/src/main/java/org/openjfx/MainApp.java" target="_blank">MainApp</a> class, 
    add its content to the project main class. Then add the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Gradle/hellofx/src/main/java/org/openjfx/FXMLController.java" target="_blank">controller</a> 
    and the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Gradle/hellofx/src/main/resources/org/openjfx/scene.fxml" target="_blank">FXML</a> and 
    the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Gradle/hellofx/src/main/resources/org/openjfx/styles.css" target="_blank">css</a>
    files.
</p>
<p>
    You can add a main class <kbd>MainApp</kbd>, and an <kbd>FXMLController</kbd> class, and add to resources the <kbd>FXML</kbd> file.

    <a href="images/ide/eclipse/gradle/eclipse04.png" target="_blank"><img src="images/ide/eclipse/gradle/eclipse04.png" alt="Add JavaFX project"/></a>
</p>

<h5>4. Run the project</h5>

<p>
    You can open the Gradle Task window and click on <kbd>build -> build</kbd> to
    build the project, and <kbd>application -> run</kbd> to run the project. If this task is not visible, press the
    <kbd>Refresh Tasks for all projects</kbd> button at the top-right of the Gradle Task window.
</p>
<p>
    You can also click on <kbd>Run -> Run configurations... -> Gradle Project -> hellofx</kbd> to add a run task to the project.
    <a href="images/ide/eclipse/gradle/eclipse05.png" target="_blank"><img src="images/ide/eclipse/gradle/eclipse05.png" alt="Run configuration"/></a>
</p>

<p>
    You can also open a terminal and run:
</p>

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#nix-eclipse-non-gradle-1" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-eclipse-non-gradle-1" data-toggle="tab">Windows</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="nix-eclipse-non-gradle-1">
<pre class="no-border-radius"><code>
./gradlew run
</code></pre>
    </div>
    <div class="tab-pane" id="win-eclipse-non-gradle-1">
<pre><code>
gradlew run
</code></pre>
    </div>
</div>

<div class="alert alert-danger">
    <strong>Warning: </strong>
    You might find this exception when running your project:

<pre><code class="big">
Exception in thread "WindowsNativeRunloopThread" java.lang.NoSuchMethodError: &lt;init&gt;
    at javafx.graphics/com.sun.glass.ui.win.WinApplication.staticScreen_getScreens(Native Method)
    at javafx.graphics/com.sun.glass.ui.Screen.initScreens(Screen.java:412)
    ...
Exception in thread "JavaFX Application Thread" java.lang.NullPointerException
    at javafx.graphics/com.sun.prism.d3d.D3DPipeline.getAdapterOrdinal(D3DPipeline.java:205)
    at javafx.graphics/com.sun.javafx.tk.quantum.QuantumToolkit.assignScreensAdapters(QuantumToolkit.java:695)
    at javafx.graphics/com.sun.javafx.tk.quantum.QuantumToolkit.runToolkit(QuantumToolkit.java:313)
    ...
</code></pre>
    
This is happening running on Windows when Eclipse VM is set to Oracle JDK 1.8 using Maven or Gradle projects.

A workaround for this is to edit <kbd>eclipse.ini</kbd> and change the <kbd>-vm</kbd> option to JDK <span class="JDK_MAJOR">11</span>.

If that is not possible, another workaround is to add this VM argument to the build file:

<pre><code>
run {
    if (osdetector.os == 'windows') {
        systemProperty "java.library.path", "C:\tmp"
    }
}
</code></pre>

</div>

<h3>Modular projects</h3>

<p>
    Download the appropriate
    <a target="_blank" href="https://gluonhq.com/products/javafx/">JavaFX jmods</a>
    for your operating system and unzip it to a desired location, for instance
    <kbd>/Users/your-user/Downloads/javafx-jmods-<span class="JFX_MAJOR">11</span></kbd>.
</p>

<div id="ECLIPSE-Mod-IDE"></div><h4>IDE</h4>

<p>
    Follow these steps to create a JavaFX modular project and use the IDE tools to build it and run it. 
    
    Alternatively, you can download a similar project from <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Java" target="_blank">here</a>.
</p>

<h5>1. Create a Java project</h5>
    
<p>
    Select <kbd>File -> New -> Java Project</kbd> and provide a name to the project, like <kbd>HelloFX</kbd>, and a location.
    Make sure JDK 11 or greater is selected.
    Verify you have selected the option to create a <kbd>module-info.java</kbd> file, and
    select the output folder as <kbd>HelloFX/bin/hellofx</kbd>.
</p>
<p>
    You can add the <kbd>JavaFX<span class="JFX_MAJOR">11</span></kbd> library to the classpath. Then press <kbd>Finish</kbd>.
    A dialog will ask for the name of the module, which should be set in lower case to <kbd>hellofx</kbd>.
    Press <kbd>Create</kbd>. An empty project will be opened.
</p>

<p>
    Create a package <kbd>org.openjfx</kbd> and add a main class <kbd>MainApp</kbd> that extends <kbd>Application</kbd>.
</p>

<h5>2. Edit the module-info class</h5>

<p>
    Edit the <kbd>module-info</kbd> class, and include the required modules <kbd>javafx.controls</kbd> and <kbd>javafx.fxml</kbd>.
    Since FXML uses reflection to access the controller in the module, this has to be opened to <kbd>javafx.fxml</kbd>. Finally,
    export the package <kbd>org.openjfx</kbd>.
</p>

<div class="alert alert-warning">
    <strong>Note: </strong>
    Eclipse will show a warning when creating the <kbd>Application</kbd> class:
    
<pre><code>
The type Stage from module <kbd>javafx.graphics</kbd> may not be accessible to clients due to missing 'requires transitive'
</code></pre>
    
    This warning can be prevented by adding the transitive module to the file:
</div>

<p>
    <a href="images/ide/eclipse/modular/ide/eclipse01.png" target="_blank"><img src="images/ide/eclipse/modular/ide/eclipse01.png" alt="module-info"/></a>
</p>

<h5>3. Add JavaFX classes</h5>

<p>    
    Based on this <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Java/HelloFX/src/org/openjfx/MainApp.java" target="_blank">MainApp</a> class, 
    add its content to the project main class. Then add the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Java/HelloFX/src/org/openjfx/FXMLController.java" target="_blank">controller</a> 
    and the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Java/HelloFX/src/org/openjfx/scene.fxml" target="_blank">FXML</a> and 
    the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Java/HelloFX/src/org/openjfx/styles.css" target="_blank">css</a>
    files.
</p>

<h5>4. Add VM options</h5>

<p>
    Being a modular project, and since we already added the <kbd>JavaFX<span class="JFX_MAJOR">11</span></kbd> library to the module-path,
    there is no need to add any VM arguments.
</p>

<div class="alert alert-warning">
    <strong>Warning: </strong>
    Make sure the checkbox <b>"Use the -XstartOnFirstThread argument when launching with SWT"</b> is not checked.
</div>

<h5>5. Run the project</h5>

<p>
    Click <kbd>Run -> Run Configurations... -> Java Application</kbd> to run the project.
</p>

<h5>6. Create a custom runtime image</h5>

<p>
    To create a runtime image, run the following commands on a terminal:
</p>

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#nix-eclipse-mod-ide-2" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-eclipse-mod-ide-2" data-toggle="tab">Windows</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="nix-eclipse-mod-ide-2">
<pre class="no-border-radius"><code>
export PATH_TO_FX_MODS=path/to/javafx-jmods-<span class="JFX_VERSION">11</span>
$JAVA_HOME/bin/jlink --module-path $PATH_TO_FX_MODS:bin/hellofx --add-modules=hellofx --output jre
jre/bin/java -m hellofx/org.openjfx.MainApp
</code></pre>
    </div>
    <div class="tab-pane" id="win-eclipse-mod-ide-2">
<pre><code>
set PATH_TO_FX_MODS="path\to\javafx-jmods-<span class="JFX_VERSION">11</span>"
jlink --module-path "%PATH_TO_FX_MODS%;bin\hellofx" --add-modules=hellofx --output jre
jre\bin\java -m hellofx/org.openjfx.MainApp
</code></pre>
    </div>
</div>

<div id="ECLIPSE-Mod-Maven"></div><h4>Maven</h4>

<p>
    Follow these steps to create a JavaFX modular project and use the Maven tools to build it and run it.
    
    Alternatively, you can download a similar project from <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Maven" target="_blank">here</a>.
</p>

<h5>1. Create a Maven project</h5>

<p>
    Create a <kbd>File -> New -> Project... -> Maven -> Maven project</kbd>.

    The first time you will need to add the JavaFX archetypes: Select <kbd>Add Archetypes...</kbd> and type: <kbd>org.openjfx</kbd> for the group id,
    <kbd>javafx-archetype-simple</kbd> or <kbd>javafx-archetype-fxml</kbd> for the artifact id, and <kbd><span class="JFX_MVN_ARCH_VERSION">0.0.1</span></kbd> for the version.

    <a href="images/ide/eclipse/modular/maven/eclipse01.png" target="_blank"><img src="images/ide/eclipse/modular/maven/eclipse01.png" alt="Add JavaFX archetypes"/></a>

    Type <kbd>org.openjfx</kbd> in the filter field and select the archetype, between <kbd>javafx-archetype-fxml</kbd> or <kbd>javafx-archetype-simple</kbd>, based on the use
    of FXML or not in your project.

    <a href="images/ide/eclipse/modular/maven/eclipse02.png" target="_blank"><img src="images/ide/eclipse/modular/maven/eclipse02.png" alt="JavaFX Maven archetypes"/></a>

    Provide the groupId, like <kbd>org.openjfx</kbd>, the artifactId, like <kbd>hellofx</kbd>.
    You can edit the <kbd>javafx-version</kbd> property, and set it to <span class="JFX_VERSION">11</span>,
    and the plugin version to <span class="JFX_MVN_PLUGIN_VERSION">0.0.1</span>.

    <a href="images/ide/eclipse/modular/maven/eclipse03.png" target="_blank"><img src="images/ide/eclipse/modular/maven/eclipse03.png" alt="JavaFX FXML archetype"/></a>

    When the project opens, select the JDK <span class="JDK_MAJOR">11</span> for the project (<kbd>File -> Properties -> Java Build Path -> Libraries</kbd>).

    <a href="images/ide/eclipse/maven/modular/eclipse04.png" target="_blank"><img src="images/ide/eclipse/modular/maven/eclipse04.png" alt="Set JDK"/></a>

<h5>2. Verify the pom</h5>

<p>
    Edit the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Non-Modular/Maven/hellofx/pom.xml" target="_blank">pom</a> file,
    and and verify it has the <kbd>javafx.controls</kbd> and <kbd>javafx.fxml</kbd> dependencies and the <kbd>javafx-maven-plugin</kbd> with
    the <kbd>mainClass</kbd> set to <kbd>hellofx/org.openjfx.hellofx.App</kbd>.

    <a href="images/ide/eclipse/modular/maven/eclipse05.png" target="_blank"><img src="images/ide/eclipse/modular/maven/eclipse05.png" alt="pom"/></a>
</p>

<h5>3. Verify the code</h5>

<p>
    Edit the <kbd>module-info</kbd> class. Rename the module to <kbd>hellofx</kbd>. Also, to prevent Eclipse
    from showing a warning when creating the <kbd>Application</kbd> class, add also the transitive module to the file:
    
    <a href="images/ide/eclipse/modular/maven/eclipse06.png" target="_blank"><img src="images/ide/eclipse/modular/maven/eclipse06.png" alt="module-info"/></a>
</p>

<p>
    Verify the project contains the source code files, like the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Maven/hellofx/src/main/java/org/openjfx/hellofx/App.java" target="_blank">App</a> main class:
    <a href="images/ide/eclipse/modular/maven/eclipse07.png" target="_blank"><img src="images/ide/eclipse/modular/maven/eclipse07.png" alt="Source code"/></a>
</p>

<h5>5. Run the project</h5>

<p>
    Click <kbd>Run -> Run As -> Maven Build -> New launch configuration</kbd> to create a new configuration.
    Name it <kbd>hellofx</kbd>, and add the required goals:
</p>
<pre><code>
clean javafx:run
</code></pre>  

<p>    
    Run the project <kbd>Run -> Run As -> Maven Build -> hellofx -> Run</kbd>.
</p>

<div class="alert alert-warning">
    <strong>Note: </strong>
    In case <kbd>JAVA_HOME</kbd> is not set to <span class="JDK_MAJOR">11</span>, running the project might
    fail. To avoid it, you can define <kbd>JAVA_HOME</kbd> as an environment variable (where <kbd>${JAVA_HOME}</kbd> takes the value that can be set in <kbd>Eclipse -> Preferences -> Run/Debug -> String Substitution -> New...</kbd>):

    <a href="images/ide/eclipse/modular/maven/eclipse08.png" target="_blank"><img src="images/ide/eclipse/modular/maven/eclipse08.png" alt="Set Java Home"/></a>

    Alternatively, you can add the correct <kbd>java</kbd> command to the javafx-maven-plugin:
    <kbd>&lt;configuration&gt;&lt;executable&gt;/path/to/jdk-<span class="JDK_MAJOR">11</span>/bin/java&lt;/executable&gt;&lt;/configuration&gt;</kbd>.
</div>

<p>
    You can also open a terminal and run <kbd>mvn clean javafx:run</kbd> to run the project.
</p>

<div class="alert alert-danger">
    <strong>Warning: </strong>
    You might find this exception when running your project:

<pre><code class="big">
Exception in thread "WindowsNativeRunloopThread" java.lang.NoSuchMethodError: &lt;init&gt;
    at javafx.graphics/com.sun.glass.ui.win.WinApplication.staticScreen_getScreens(Native Method)
    at javafx.graphics/com.sun.glass.ui.Screen.initScreens(Screen.java:412)
    ...
Exception in thread "JavaFX Application Thread" java.lang.NullPointerException
    at javafx.graphics/com.sun.prism.d3d.D3DPipeline.getAdapterOrdinal(D3DPipeline.java:205)
    at javafx.graphics/com.sun.javafx.tk.quantum.QuantumToolkit.assignScreensAdapters(QuantumToolkit.java:695)
    at javafx.graphics/com.sun.javafx.tk.quantum.QuantumToolkit.runToolkit(QuantumToolkit.java:313)
    ...
</code></pre>

    This is happening running on Windows when Eclipse VM is set to Oracle JDK 1.8 using Maven or Gradle projects.

    A workaround for this is to edit <kbd>eclipse.ini</kbd> and change the <kbd>-vm</kbd> option to JDK <span class="JDK_MAJOR">11</span>.

    If that is not possible, another workaround is to add this VM argument to the javafx maven plugin:

<pre><code>
&lt;configuration&gt;
    &lt;options&gt;
        &lt;option&gt;-Djava.library.path=C:\tmp&lt;/option&gt;
    &lt;/options&gt;
    &lt;mainClass&gt;org.openjfx.hellofx.App&lt;/mainClass&gt;
&lt;/configuration&gt;
</code></pre>

</div>

<h5>6. Create a custom runtime image</h5>

<p>
    To create a custom runtime, you can edit the run configuration an modify the goals to <kbd>clean javafx:jlink</kbd>
    or run from a terminal with <kbd>JAVA_HOME</kbd> set to <span class="JDK_MAJOR">11</span>:
</p>

<pre><code>
mvn clean javafx:jlink
</code></pre>

<p>
    Note the plugin allows the usual options as the <kbd>jlink</kbd> command, as well as creating a
    launcher or a zip with the custom image.
</p>

<p>
    And after the image is built, you can run it from command line:
</p>

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#nix-eclipse-mod-mav-1" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-eclipse-mod-mav-1" data-toggle="tab">Windows</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="nix-eclipse-mod-mav-1">
<pre class="no-border-radius"><code>
target/hellofx/bin/launcher
</code></pre>
    </div>
    <div class="tab-pane" id="win-eclipse-mod-mav-1">
<pre><code>
target\hellofx\bin\launcher
</code></pre>
    </div>
</div>

<div id="ECLIPSE-Mod-Gradle"></div><h4>Gradle</h4>

<p>
    Follow these steps to create a JavaFX modular project and use the Gradle tools to build it and run it.
    
    Alternatively, you can download a similar project from <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Gradle" target="_blank">here</a>.
</p>

<h5>1. Create a Gradle project</h5>

<p>
    Create a <kbd>File -> New -> Project... -> Gradle -> Gradle project</kbd>.

    Provide a name to the project, like <kbd>HelloFX</kbd> and a location for the project.
    Then point Java Home to JDK <span class="JDK_MAJOR">11</span>.

    Then close the dialog, the project will be created.
</p>

<div class="alert alert-warning">
    <strong>Note: </strong>
    Instead of setting the Java home in the gradle dialog, you can add
    the property <kbd>org.gradle.java.home</kbd> to a <kbd>gradle.properties</kbd> file,
    with the correct path to JDK <span class="JDK_MAJOR">11</span>. This file can be part of the project or under
    the gradle user home <kbd>$USER_HOME/.gradle</kbd>.
</div>

<h5>2. Modify the build</h5>

<p>
    Edit the <kbd>build.gradle</kbd> file and replace it with this
    <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Gradle/hellofx/build.gradle" target="_blank">build</a> file, setting the 
    <kbd>mainClassName</kbd> accordingly to <kbd>org.openjfx.MainApp</kbd>.
</p>

<p>
    Note the use of the <kbd>org.openjfx.javafxplugin</kbd> plugin, that removes the necessity of adding the 
    JavaFX dependencies and setting the module-path for the compile and run task for them.
</p>
<p>   
    Note also that the use of the <kbd>eclipse</kbd> plugin is required to include the modules to the module path.
    
    <a href="images/ide/eclipse/modular/gradle/eclipse01.png" target="_blank"><img src="images/ide/eclipse/modular/gradle/eclipse01.png" alt="Update the build"/></a>
</p>

<h5>3. Add the module-info class</h5>

<p>
    Add the <kbd>module-info</kbd> class, including the required modules <kbd>javafx.controls</kbd> and <kbd>javafx.fxml</kbd>. 
    Since FXML uses reflection to access the controller in the module, this has to be opened to <kbd>javafx.fxml</kbd>. Finally,
    export the package <kbd>org.openjfx</kbd>.
    
    To prevent Eclipse from showing a warning when creating the <kbd>Application</kbd> class, add also the transitive modules to the file:
    
    <a href="images/ide/eclipse/modular/gradle/eclipse02.png" target="_blank"><img src="images/ide/eclipse/modular/gradle/eclipse02.png" alt="module-info"/></a>
</p>

<h5>3. Add the source code</h5>

<p>
    Based on this <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Gradle/hellofx/src/main/java/org/openjfx/MainApp.java" target="_blank">MainApp</a> class, 
    add its content to the project main class. Then add the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Gradle/hellofx/src/main/java/org/openjfx/FXMLController.java" target="_blank">controller</a> 
    and the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Gradle/hellofx/src/main/resources/org/openjfx/scene.fxml" target="_blank">FXML</a> and 
    and the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/Eclipse/Modular/Gradle/hellofx/src/main/resources/org/openjfx/styles.css" target="_blank">css</a>  
    files.
</p>

<h5>4. Run the project</h5>

<p>
    You can open the Gradle Task window and click on <kbd>build -> build</kbd> to 
    build the project, and <kbd>application -> run</kbd> to run the project. 
    
    You can also click on <kbd>Run -> Run configurations... -> Gradle Project -> hellofx</kbd> to add a run task to the project.
</p>

<p>
    You can also open a terminal and run:
</p>

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#nix-eclipse-mod-gra-1" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-eclipse-mod-gra-1" data-toggle="tab">Windows</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="nix-eclipse-mod-gra-1">
<pre class="no-border-radius"><code>
./gradlew run
</code></pre>
    </div>
    <div class="tab-pane" id="win-eclipse-mod-gra-1">
<pre><code>
gradlew run
</code></pre>
    </div>
</div>

<h5>5. Create a custom runtime image</h5>

<p>
    To create a custom runtime, you can use the <a href="https://badass-jlink-plugin.beryx.org/releases/latest/" target="_blank">org.beryx.jlink</a> plugin.
    It can be easily combined with the JavaFX Gradle plugin.
</p>

<pre><code>
plugins {
  id 'application'
  id 'eclipse'
  id 'org.openjfx.javafxplugin' version '<span class="JFX_PLUGIN_VERSION">0.0.7</span>'
  id 'org.beryx.jlink' version '<span class="JLINK_PLUGIN_VERSION">2.9.4</span>'
}

javafx {
    version = "<span class="JFX_VERSION">12</span>"
    modules = [ 'javafx.controls', 'javafx.fxml' ]
}

jlink {
    launcher {
        name = 'hellofx'
    }
}
</code></pre>

<p>
    Then run <kbd>hellofx -> Tasks -> build -> jlink</kbd> task to create the image.
    
    To run the image:
</p>

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#nix-eclipse-mod-gra-2" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-eclipse-mod-gra-2" data-toggle="tab">Windows</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="nix-eclipse-mod-gra-2">
<pre class="no-border-radius"><code>
build/image/bin/hellofx
</code></pre>
    </div>
    <div class="tab-pane" id="win-eclipse-mod-gra-2">
<pre><code>
build\image\bin\hellofx
</code></pre>
    </div>
</div>