ide-intellij.html

<h2>JavaFX and IntelliJ IDEA</h2>

<p>
    This section explains how to create a JavaFX application in IntelliJ IDEA.
    JavaFX 15.0.1 and IntelliJ IDEA 2020.1 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>
    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="IDEA-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/IntelliJ/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_MAJOR">11</span></kbd>.
</p>

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

<p>
    <a href="images/ide/intellij/ide/idea01.png" target="_blank"><img src="images/ide/intellij/ide/idea01.png" alt="Create a JavaFX project"/></a>

    Provide a name to the project, like <kbd>HelloFX</kbd>, and a location.

    When the project opens, the JavaFX classes are not recognized.

    <a href="images/ide/intellij/ide/idea02.png" target="_blank"><img src="images/ide/intellij/ide/idea02.png" alt="Missing JavaFX classes"/></a>
</p>

<h5>2. Set JDK <span class="JDK_MAJOR">11</span></h5>

<p>    
    Go to <kbd>File -> Project Structure -> Project</kbd>, and set the project SDK to <span class="JDK_MAJOR">11</span>. You can also set the language level to 11 or greater.
    <a href="images/ide/intellij/ide/idea03.png" target="_blank"><img src="images/ide/intellij/ide/idea03.png" alt="Set JDK 11"/></a>
</p>

<h5>3. Create a library</h5>

<p>
    Go to <kbd>File -> Project Structure -> Libraries</kbd> and add the JavaFX <span class="JFX_MAJOR">11</span> SDK as a library to the project. 
    Point to the <kbd>lib</kbd> folder of the JavaFX SDK.
    <a href="images/ide/intellij/ide/idea04.png" target="_blank"><img src="images/ide/intellij/ide/idea04.png" alt="Create Library"/></a>
    Once the library is applied, the JavaFX classes will be recognized by the IDE.
    <a href="images/ide/intellij/ide/idea05.png" target="_blank"><img src="images/ide/intellij/ide/idea05.png" alt="JavaFX classes are recognized"/></a>
</p>

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

<pre><code>
Caused by: java.lang.RuntimeException: Exception in Application start method
	at javafx.graphics/com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:900)
...
Caused by: java.lang.IllegalAccessError: class com.sun.javafx.fxml.FXMLLoaderHelper (in unnamed module @0xXXXXX) cannot access class com.sun.javafx.util.Utils (in module javafx.graphics) because module javafx.graphics does not export com.sun.javafx.util to unnamed module @0xXXXXX
...
</code></pre>

    This error happens because IntelliJ only adds the modules <kbd>javafx.base</kbd> and <kbd>javafx.graphics</kbd> to the module-path, but for this sample it is required to
    add the <kbd>javafx.controls</kbd> and <kbd>javafx.fxml</kbd> modules as well.
</div>

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

<p>
    To solve the issue, click on <kbd>Run -> Edit Configurations...</kbd> and add these VM options:
</p>

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#nix-idea-non-ide-1" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-idea-non-ide-1" data-toggle="tab">Windows</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="nix-idea-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-idea-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>

<p>
    Note that the default project created by IntelliJ uses FXML, so <kbd>javafx.fxml</kbd> 
    is required along with <kbd>javafx.controls</kbd>. If your project uses other modules, 
    you will need to add them as well.

    <a href="images/ide/intellij/ide/idea06.png" target="_blank"><img src="images/ide/intellij/ide/idea06.png" alt="VM options"/></a>

    Click apply and close the dialog.
</p>

<p>
    Alternatively, you can define a global variable that can be used in future projects. Go to
    <kbd>Preferences (File -> Settings) -> Appearance & Behavior -> Path Variables</kbd>, and define the name 
    of the variable as <kbd>PATH_TO_FX</kbd>, and browse to the lib folder of the JavaFX SDK to set its value, 
    and click apply.
    <a href="images/ide/intellij/ide/idea07.png" target="_blank">
        <img src="images/ide/intellij/ide/idea07.png" alt="Path Variable"/>
    </a>
</p>
<p>
    Then you can refer to this global variable when setting the VM options as:
</p>

<pre><code>
--module-path ${PATH_TO_FX} --add-modules javafx.controls,javafx.fxml
</code></pre>

<a href="images/ide/intellij/ide/idea08.png" target="_blank"><img src="images/ide/intellij/ide/idea08.png" alt="Path Variable in VM options"/></a>

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

<p>
    Click <kbd>Run -> Run...</kbd> to run the project, now it should work fine.
</p>

<div id="IDEA-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/IntelliJ/Non-Modular/Maven" target="_blank">here</a>.
</p>

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

<p>
    Select <kbd>File -> New -> Project -> Maven</kbd> and enable <kbd>Create from archetype</kbd>.
    If the JavaFX <a href="https://github.com/openjfx/javafx-maven-archetypes" target="_blank">archetype</a> is not
    installed yet, select <kbd>Add archetype...</kbd> and set the groupId (<kbd>org.openjfx</kbd>), the artifactId
    (<kbd>javafx-maven-archetypes</kbd>), and the version (<kbd><span class="JFX_MVN_ARCH_VERSION">0.0.1</span></kbd>), and press OK.

    <a href="images/ide/intellij/maven/idea00.png" target="_blank"><img src="images/ide/intellij/maven/idea00.png" alt="JavaFX Archetype"/></a>
</p>

<p>
    Once installed, select the artifact.

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

    Provide the name to the project, like <kbd>HelloFX</kbd> and a location for the project. Optionally, provide the groupId, like <kbd>org.openjfx</kbd>, the artifactId, like <kbd>hellofx</kbd>.
</p>

<p>
    Select the archetype artifactId, between <kbd>javafx-archetype-fxml</kbd> or <kbd>javafx-archetype-simple</kbd>, based on the use
    of FXML or not in your project. You can create a property for the <kbd>javafx-version</kbd> as well, and set it to <span class="JFX_VERSION">11</span>.

    <a href="images/ide/intellij/maven/idea02.png" target="_blank"><img src="images/ide/intellij/maven/idea02.png" alt="Select archetype"/></a>
</p>

<p>
    Press finish and the project will be created.
</p>

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

<p>
    You can find the generated pom file <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/IntelliJ/Non-Modular/Maven/hellofx/pom.xml" target="_blank">here</a>.
</p>

<p>
    Verify it includes the <kbd>javafx.controls</kbd> and <kbd>javafx.fxml</kbd> dependencies, and includes the <kbd>javafx-maven-plugin</kbd>.

    <a href="images/ide/intellij/maven/idea03.png" target="_blank"><img src="images/ide/intellij/maven/idea03.png" alt="Generated pom"/></a>

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

<p>
    Import the Maven changes. The JavaFX classes will be recognized. Notice also that 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/intellij/maven/idea04.png" target="_blank"><img src="images/ide/intellij/maven/idea04.png" alt="Platform dependencies"/></a>

    As for any other maven dependencies, these jars can be found in the local <kbd>.m2</kbd> repository.
</p>

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

<p>
    Open the Maven Projects window (<kbd>View -> Tool Windows -> Maven</kbd>) and click on <kbd>HelloFX -> Plugins -> compiler -> compiler:compile</kbd> to
    compile the project, and click on <kbd>HelloFX -> Plugins -> javafx -> javafx:run</kbd> to execute the project.
    <a href="images/ide/intellij/maven/idea05.png" target="_blank"><img src="images/ide/intellij/maven/idea05.png" alt="Run project"/></a>
</p>

<div class="alert alert-warning">
    <strong>Note: </strong>
    In case <kbd>JAVA_HOME</kbd> is not set to 11 or greater, running from the Maven Projects window might
    fail. To avoid it, you can either add an environmental variable to Maven Runner:

    <a href="images/ide/intellij/maven/idea06.png" target="_blank"><img src="images/ide/intellij/maven/idea06.png" alt="JavaHome"/></a>

    or set 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>
    The project can be also run from a terminal. Make sure <kbd>JAVA_HOME</kbd> is set to 11 or greater,
    and run <kbd>mvn clean javafx:run</kbd>.
</p>

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

<p>
    Follow these steps to create a JavaFX non-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/IntelliJ/Non-Modular/Gradle" target="_blank">here</a>.
</p>

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

<p>
    Create a Gradle project with Java.
    <a href="images/ide/intellij/gradle/idea01.png" target="_blank"><img src="images/ide/intellij/gradle/idea01.png" alt="Create a Gradle project"/></a>
   
    Provide a name to the project, like <kbd>HelloFX</kbd> and a location for the project.
    Optionally provide the groupId, like <kbd>org.openjfx</kbd>, the artifactId, like <kbd>hellofx</kbd>.

    When the project opens, add a package <kbd>org.openjfx</kbd> and an empty <kbd>MainApp</kbd> class.

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

<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/IntelliJ/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>
    Synchronize the project and you will get the JavaFX dependencies.
    <a href="images/ide/intellij/gradle/idea03.png" target="_blank"><img src="images/ide/intellij/gradle/idea03.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>

<div class="alert alert-warning">
    <strong>Note: </strong>
    In case <kbd>JAVA_HOME</kbd> is not set to 11 or greater, the plugin will fail. To avoid it, make sure Gradle JVM is using the proper JDK:

    <a href="images/ide/intellij/gradle/idea04.png" target="_blank"><img src="images/ide/intellij/gradle/idea04.png" alt="Set Gradle JVM"/></a>
</div>

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

<p>
    Based on this <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/IntelliJ/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/IntelliJ/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/IntelliJ/Non-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/IntelliJ/Non-Modular/Gradle/hellofx/src/main/resources/org/openjfx/styles.css" target="_blank">css</a>  
    files.
    
    Note that the JavaFX classes are recognized by the IDE.
    <a href="images/ide/intellij/gradle/idea05.png" target="_blank"><img src="images/ide/intellij/gradle/idea05.png" alt="HelloFX"/></a>
</p>

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

<p>
    You can open the Gradle window and click on <kbd>hellofx -> Tasks -> build -> build</kbd> to
    build the project, and on <kbd>hellofx -> Tasks -> application -> run</kbd> to execute the project.
    <a href="images/ide/intellij/gradle/idea06.png" target="_blank"><img src="images/ide/intellij/gradle/idea06.png" alt="Run project"/></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-idea-non-gradle-1" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-idea-non-gradle-1" data-toggle="tab">Windows</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="nix-idea-non-gradle-1">
<pre class="no-border-radius"><code>
./gradlew run
</code></pre>
    </div>
    <div class="tab-pane" id="win-idea-non-gradle-1">
<pre><code>
gradlew run
</code></pre>
    </div>
</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="IDEA-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/IntelliJ/Modular/Java" target="_blank">here</a>.
</p>

<h5>1. Create a JavaFX project</h5>
    
<p>
    Provide a name to the project, like <kbd>HelloFX</kbd>, and a location.
    
    When the project opens, rename the <kbd>sample</kbd> package to <kbd>org.openjfx</kbd>.
</p>

<h5>2. Set JDK 11+ and add JavaFX <span class="JFX_MAJOR">11</span></h5>

<p>    
    Go to <kbd>File -> Project Structure -> Project</kbd>, and set the project SDK to <span class="JDK_MAJOR">11</span>. 
    You can also set the language level to 11 or greater and change the default compiler output directory
    <kbd>out</kbd> to <kbd>mods</kbd>.
    
    <a href="images/ide/intellij/modular/ide/idea00.png" target="_blank"><img src="images/ide/intellij/modular/ide/idea00.png" alt="mods output"/></a>
</p>
<p>
    Go to <kbd>File -> Project Structure -> Libraries</kbd> and add the JavaFX <span class="JFX_MAJOR">11</span> SDK as a library to the project. 
    Point to the <kbd>lib</kbd> folder of the JavaFX SDK.
</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>.
    
    <a href="images/ide/intellij/modular/ide/idea01.png" target="_blank"><img src="images/ide/intellij/modular/ide/idea01.png" alt="module-info"/></a>
</p>

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

<p>
    Either keep the default sample source code that has an empty controller, or replaced it based on this <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/IntelliJ/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/IntelliJ/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/IntelliJ/Modular/Java/hellofx/src/org/openjfx/scene.fxml" target="_blank">FXML</a> and
    and the <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/IntelliJ/Modular/Java/hellofx/src/org/openjfx/styles.css" target="_blank">css</a>
    files.
    
    <a href="images/ide/intellij/modular/ide/idea02.png" target="_blank"><img src="images/ide/intellij/modular/ide/idea02.png" alt="Source code"/></a>
</p>

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

<p>
    Click on <kbd>Run -> Edit Configurations...</kbd> and add these VM options:
</p>

<pre><code>
--module-path ${PATH_TO_FX}:mods/production
</code></pre>
    
<p>    
    <a href="images/ide/intellij/modular/ide/idea03.png" target="_blank"><img src="images/ide/intellij/modular/ide/idea03.png" alt="VM options"/></a>
    
    Click apply and close the dialog.
</p>

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

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

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

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

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#nix-idea-mod-ide-2" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-idea-mod-ide-2" data-toggle="tab">Windows</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="nix-idea-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:mods/production --add-modules hellofx --output jre
jre/bin/java -m hellofx/org.openjfx.MainApp
</code></pre>
    </div>
    <div class="tab-pane" id="win-idea-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%;mods\production" --add-modules hellofx --output jre
jre\bin\java -m hellofx/org.openjfx.MainApp
</code></pre>
    </div>
</div>

<div id="IDEA-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/IntelliJ/Modular/Maven" target="_blank">here</a>.
</p>

<p>
    Select <kbd>File -> New -> Project -> Maven</kbd> and enable <kbd>Create from archetype</kbd>.
    If the JavaFX <a href="https://github.com/openjfx/javafx-maven-archetypes" target="_blank">archetype</a> is not
    installed yet, select <kbd>Add archetype...</kbd> and set the groupId (<kbd>org.openjfx</kbd>), the artifactId
    (<kbd>javafx-maven-archetypes</kbd>), and the version (<kbd><span class="JFX_MVN_ARCH_VERSION">0.0.1</span></kbd>), and press OK.

    <a href="images/ide/intellij/maven/idea00.png" target="_blank"><img src="images/ide/intellij/maven/idea00.png" alt="JavaFX Archetype"/></a>
</p>

<p>
    Once installed, select the artifact, press <kbd>Next</kbd>, and provide the name to the project, like <kbd>HelloFX</kbd> and a location for the project.
    Optionally, provide the groupId, like <kbd>org.openjfx</kbd> and the artifactId, like <kbd>hellofx</kbd>.
</p>

<p>
    Select the archetype artifactId, 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/intellij/maven/idea02.png" target="_blank"><img src="images/ide/intellij/maven/idea02.png" alt="Select archetype"/></a>

    You can create a property for the <kbd>javafx-version</kbd> as well, and set it to <span class="JFX_VERSION">11</span>.
</p>

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

<p>
    You can find the generated pom file <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/IntelliJ/Modular/Maven/hellofx/pom.xml" target="_blank">here</a>.
</p>

<p>
    Verify it includes the <kbd>javafx.controls</kbd> and <kbd>javafx.fxml</kbd> dependencies, and includes the <kbd>javafx-maven-plugin</kbd>.

    <a href="images/ide/intellij/maven/idea03.png" target="_blank"><img src="images/ide/intellij/maven/idea03.png" alt="Generated pom"/></a>
</p>

<p>
    Open the <kbd>module-info</kbd> class, that includes the required modules <kbd>javafx.controls</kbd> and <kbd>javafx.fxml</kbd>.
    Since FXML uses reflection to access the controller in the module, it has been opened to <kbd>javafx.fxml</kbd>.
    
    <a href="images/ide/intellij/modular/maven/idea04.png" target="_blank"><img src="images/ide/intellij/modular/maven/idea04.png" alt="module-info"/></a>
</p>

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

<p>
    You can open the Maven Projects window and click on <kbd>HelloFX -> Plugins -> compiler -> compiler:compile</kbd> to
    compile the project, and click on <kbd>HelloFX -> Plugins -> javafx -> javafx:run</kbd> to execute the project.
</p>

<div class="alert alert-warning">
    <strong>Note: </strong>
    In case <kbd>JAVA_HOME</kbd> is not set to 11 or greater, running from the Maven Projects window might
    fail. To avoid it, you can either add an environmental variable to Maven Runner:

    <a href="images/ide/intellij/modular/maven/idea05.png" target="_blank"><img src="images/ide/intellij/modular/maven/idea05.png" alt="JavaHome"/></a>

    or set 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>
    The project can be also run from a terminal. Make sure <kbd>JAVA_HOME</kbd> is set to <span class="JDK_MAJOR">11</span>,
    and run <kbd>mvn clean javafx:run</kbd>.
</p>

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

<p>
    To create a custom runtime, using the <a href="https://github.com/openjfx/javafx-maven-plugin" target="_blank">JavaFX Maven plugin</a>,
    you can click on <kbd>HelloFX -> Plugins -> javafx -> javafx:jlink</kbd>, or from a terminal with
    <kbd>JAVA_HOME</kbd> set to <span class="JDK_MAJOR">11</span> you can run:
</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-idea-mod-mav-1" data-toggle="tab">Linux/Mac</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#win-idea-mod-mav-1" data-toggle="tab">Windows</a>
    </li>
</ul>

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

<div id="IDEA-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/IntelliJ/Modular/Gradle" target="_blank">here</a>.
</p>

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

<p>
    Create a Gradle project with Java.

    Provide a name to the project, like <kbd>HelloFX</kbd> and a location for the project.
    Optionally provide the groupId, like <kbd>org.openjfx</kbd>, the artifactId, like <kbd>hellofx</kbd>.

    When the project opens, add a package <kbd>org.openjfx</kbd> and an empty <kbd>MainApp</kbd> class.
</p>

<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/IntelliJ/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.
    
    <a href="images/ide/intellij/modular/gradle/idea01.png" target="_blank"><img src="images/ide/intellij/modular/gradle/idea01.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>.
</p>

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

<p>
    Based on this <a class="samples" href="https://github.com/openjfx/samples/blob/master/IDE/IntelliJ/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/IntelliJ/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/IntelliJ/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/IntelliJ/Modular/Gradle/hellofx/src/main/resources/org/openjfx/styles.css" target="_blank">css</a>  
    files.

    <a href="images/ide/intellij/modular/gradle/idea02.png" target="_blank"><img src="images/ide/intellij/modular/gradle/idea02.png" alt="source code"/></a>
</p>

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

<p>
    You can open the Gradle window and click on <kbd>hellofx->Tasks->build->build</kbd> to 
    build the project, and on <kbd>hellofx->Tasks->application->run</kbd> to execute the project.

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

<h5>6. 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 '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>
    to generate the custom image. Run <kbd>hellofx -> Tasks -> build -> jlink</kbd> task to create the image.
</p>

<p>
    To run the image, type on a terminal:
</p>

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