{"id":32842,"date":"2021-04-28T19:33:58","date_gmt":"2021-04-28T19:33:58","guid":{"rendered":"https:\/\/foojay.io\/?p=32842"},"modified":"2024-02-06T12:19:48","modified_gmt":"2024-02-06T12:19:48","slug":"beginning-javafx-with-intellij","status":"publish","type":"post","link":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/","title":{"rendered":"Beginning JavaFX Applications with IntelliJ IDE"},"content":{"rendered":"\n    <div class=\"article__table\">\n        <div class=\"article__table-header\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path d=\"M8 6H21\" stroke=\"#3562E5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                <path d=\"M8 12H21\" stroke=\"#3562E5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                <path d=\"M8 18H21\" stroke=\"#3562E5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                <path d=\"M3 6H3.01\" stroke=\"#3562E5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                <path d=\"M3 12H3.01\" stroke=\"#3562E5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                <path d=\"M3 18H3.01\" stroke=\"#3562E5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n            <\/svg>\n            Table of Contents\n            <svg class=\"chevron\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path d=\"M18 15L12 9L6 15\" stroke=\"#3562E5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n            <\/svg>\n        <\/div>\n        <div class=\"article__table-body\"><span><a href=\"#h2-0--equirements\">Requirements<\/a><\/span><span><a href=\"#h2-1--lain-ava-roject\">Plain JavaFX Project<\/a><\/span><span><a href=\"#h2-2--aven-ava-roject\">Maven JavaFX Project<\/a><\/span><span><a href=\"#h2-3--radle-ava-roject\">Gradle JavaFX Project<\/a><\/span><span><a href=\"#h2-4--onclusion\">Conclusion<\/a><\/span><span><a href=\"#h2-5--eferences-\">References:<\/a><\/span><\/div><\/div><!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><div class=\"wp-block-image is-style-default\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"174\" height=\"313\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/duke-intellij-shirt.png\" alt=\"\" class=\"wp-image-32843\"><figcaption class=\"wp-element-caption\">JavaFX in IntelliJ IDE<\/figcaption><\/figure>\n<\/div>\n\n\n<p>This article is for the beginner who wants to get started developing JavaFX applications using <a target=\"_blank\" href=\"https:\/\/www.jetbrains.com\/idea\/\">Jetbrains' IntelliJ<\/a> IDE. The article will create three flavors of a HelloWorld JavaFX application as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Plain - Create a new project from scratch using no build tools<\/li>\n\n\n\n<li>Maven - Create a new project using the Maven build tool<\/li>\n\n\n\n<li>Gradle - Create a new project using the Gradle build tool<\/li>\n<\/ul>\n\n\n\n<p>While this article may seem elementary for some, I believe it can help newcomers to the JavaFX platform avoid some pitfalls and really hit the ground running.<\/p>\n\n\n\n<p><span style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">Warning:<\/span> This tutorial will touch the basics on how to create a JavaFX project using the new Java Platform Module System (JPMS) since Java 9. There are redundant naming of directories that may look peculiar to you. This is in regards to the naming of a module directory and Java package namespace in the initial creation of the project. To learn more about Java Platform Module System's naming convention check out <a target=\"_blank\" href=\"https:\/\/blog.joda.org\/2017\/04\/java-se-9-jpms-module-naming.html\">Java SE 9 - JPMS module naming<\/a> by <a target=\"_blank\" href=\"https:\/\/blog.joda.org\/\">Stephen Colebourne<\/a>. For a deep dive into modules check out <a target=\"_blank\" href=\"https:\/\/www.oracle.com\/corporate\/features\/understanding-java-9-modules.html\">Understanding Java 9 Modules<\/a> by Paul Deitel.<\/p>\n\n\n\n<p>New comers to the JavaFX platform that want things even more basic (fundamental) such as using the command line or terminal should look at \"<a href=\"https:\/\/foojay.io\/blog\/a-javafx-app-on-zulufx-in-60-seconds\/\">A JavaFX App on ZuluFX in 60 Seconds<\/a>\".<\/p>\n\n\n\n<p class=\"has-text-align-center\"><div class=\"homepage-today__guide homepage-today__guide--w-image\"\n     data-entry=\"116669\"\n     data-current=\"32842\"\n     style=\"border-color:#E3E3EE;color:#000000\"\n    >\n    <div class=\"homepage-today__guide-title-container\">\n                            <h2 class=\"homepage-today__guide-title\">Prime Time: The High-Performance Java Event<\/h2>\n                <p class=\"homepage-today__guide-description\">\n            Join industry experts from the Java community for a free even dedicated to modernizing Java workloads. When performance, elasticity, scale, and cloud cost matter, make it Prime!        <\/p>\n\t                <a href=\"https:\/\/www.azul.com\/webinars\/prime-time\/register\/?utm_medium=foojay&amp;utm_campaign=Prime-Time&amp;utm_source=foojay&amp;utm_content=&amp;utm_term=\"\n               target=\"_blank\"\n               class=\"homepage-today__guide-btn\"\n                >\n                Register Now                <svg\n                        xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n                        width=\"16\"\n                        height=\"16\"\n                        viewBox=\"0 0 16 16\"\n                        fill=\"none\"\n                >\n                    <path\n                            d=\"M3.33325 8H12.6666\"\n                            stroke=\"white\"\n                            stroke-width=\"1.5\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                    \/>\n                    <path\n                            d=\"M8 3.33331L12.6667 7.99998L8 12.6666\"\n                            stroke=\"white\"\n                            stroke-width=\"1.5\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                    \/>\n                <\/svg>\n            <\/a>\n            <\/div>\n    <div class=\"homepage-today__guide-img-container\">\n        <img loading=\"lazy\" decoding=\"async\" width=\"498\" height=\"472\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2025\/06\/unlock.png\" class=\"attachment-medium size-medium wp-post-image\" alt=\"\" \/>    <\/div>\n<\/div>\n <\/p>\n\n\n\n<p>Next, you'll need to download and install the required software.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h2-0--equirements\">Requirements<\/h2>\n\n\n\n<p>The following are requirements for this tutorial.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a target=\"_blank\" href=\"https:\/\/www.jetbrains.com\/idea\/\">IntelliJ IDE <\/a> - <a target=\"_blank\" href=\"https:\/\/www.jetbrains.com\/idea\/\">https:\/\/www.jetbrains.com\/idea\/<\/a><\/li>\n\n\n\n<li><a target=\"_blank\" href=\"https:\/\/www.azul.com\/downloads\/zulu-community\/?version=java-14&amp;architecture=x86-64-bit&amp;package=jdk\">ZuluFX<\/a> - <a target=\"_blank\" href=\"https:\/\/www.azul.com\/downloads\/zulu-community\/?package=jdk-fx\">https:\/\/www.azul.com\/downloads\/zulu-community\/?package=jdk-fx<\/a> <\/li>\n<\/ul>\n\n\n\n<p>When downloading IntelliJ the free version is called the community edition.<\/p>\n\n\n\n<p>To see how to install ZuluFX please refer to the section '<strong>Installing ZuluFX<\/strong>' at \"<a href=\"https:\/\/foojay.io\/blog\/a-javafx-app-on-zulufx-in-60-seconds\/\">A JavaFX App on ZuluFX in 60 Seconds<\/a>\". <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h2-1--lain-ava-roject\">Plain JavaFX Project<\/h2>\n\n\n\n<p>The following steps will show you how to create a new JavaFX project from scratch (aka Plain old JavaFX Project). Usually this type of project is good for quick prototypes.<\/p>\n\n\n\n<p><strong>Step 1: <\/strong>Create a New Project <\/p>\n\n\n\n<p>After installing and launching <strong>IntelliJ<\/strong> click on the '<strong>New Project<\/strong>' option. In Figure 1 below are three options allowing you to create a Java project. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"498\" height=\"459\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/IntelliJ-NewProject.png\" alt=\"\" class=\"wp-image-32844\"><figcaption class=\"wp-element-caption\">Figure 1. Three ways to create a Java project.<\/figcaption><\/figure>\n\n\n\n<p><strong>*Note:<\/strong> If you've already completed the tutorial <strong>\"<a href=\"https:\/\/foojay.io\/blog\/a-javafx-app-on-zulufx-in-60-seconds\/\">A JavaFX App on ZuluFX in 60 Seconds<\/a>\"<\/strong> then you could select the option '<strong>Open or Import<\/strong>' and select the project directory and jump all the way down to step 15 executing the Hello World FX application.<\/p>\n\n\n\n<p><strong>Step 2:<\/strong> Select Java as a project type <\/p>\n\n\n\n<p>Select <strong>Java<\/strong> as the type of project to be created in the <strong>New Project<\/strong> as shown in figure 2. <\/p>\n\n\n\n<p><strong><span class=\"has-inline-color has-luminous-vivid-amber-color\">*Warning:<\/span><\/strong> You should notice in figure 2 on the left is the option for <strong>JavaFX, where it is NOT selected<\/strong>. I am purposefully avoiding the <strong>non-modular<\/strong> JavaFX application project convention (in favor of the <strong>modular JPMS convention<\/strong>). Non-modular projects are Java Apps prior to Java 9 where JavaFX applications only use the Java <strong>class path<\/strong> as opposed to the new <strong>module path<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"653\" height=\"471\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/01_NewProject.png\" alt=\"\" class=\"wp-image-32845\"><figcaption class=\"wp-element-caption\">Figure 2. Select Java as the project type.<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 3: <\/strong>Choose your JDK (ZuluFX) <\/p>\n\n\n\n<p>Click on the <strong>Add JDK<\/strong> option to locate the JDK's <strong>Home<\/strong> directory. In Figure 3 it shows three options to select a JDK for this project (Download, Add and Detected SDKs. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"469\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Add_JDK.png\" alt=\"\" class=\"wp-image-32846\"><\/figure>\n\n\n\n<p>After selecting the '<strong>Add JDK<\/strong>' option locate the previously installed (ZuluFX) JDK's <strong>Home<\/strong> directory as shown in figure 4 below. Assuming you've already installed <strong>ZuluFX<\/strong> locally, you will select the <strong>Home<\/strong> directory and click the <strong>Open<\/strong> button. In MacOS the parent directory will contain symlinks (Alias) to subdirectories under zulu-14.jdk. This makes it convenient for setting environment variables. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"723\" height=\"377\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/zuluFX_home_links.png\" alt=\"\" class=\"wp-image-32847\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/zuluFX_home_links.png 723w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/zuluFX_home_links-700x365.png 700w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><figcaption class=\"wp-element-caption\">Figure 4. ZuluFX Java JDK that includes JavaFX modules.<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 4:<\/strong> Uncheck Create Project from template option, then Click Next<\/p>\n\n\n\n<p><strong>Step 5:<\/strong>  Name your project <strong>HelloWorldFX<\/strong> and click <strong>Finish<\/strong>. As a convention of mine I will create a projects directory under my home directory. On Windows you would have the following: <code>%HOMEDRIVE%%HOMEPATH%<\/code>\\projects<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"651\" height=\"472\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/HelloWorldFX.png\" alt=\"\" class=\"wp-image-32848\"><figcaption class=\"wp-element-caption\">Figure 5. Naming Project to be created in a projects directory.<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 6:<\/strong> Change <strong>Project Language Level<\/strong>. In IntelliJ's menu options select <strong>File -&gt; Project Structure<\/strong> as shown below.  Select <strong>14 (Preview)<\/strong> and click <strong>OK<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"857\" height=\"551\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Change-Language-level.png\" alt=\"\" class=\"wp-image-32849\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Change-Language-level.png 857w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Change-Language-level-700x450.png 700w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Change-Language-level-768x494.png 768w\" sizes=\"auto, (max-width: 857px) 100vw, 857px\" \/><figcaption class=\"wp-element-caption\">Figure 6. Project language level selection. 14 (Preview) should be selected.<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 7: <\/strong>Unmark the '<strong>src<\/strong>' directory as the source root as shown below in figure 7.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"748\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Unmark-as-Source-Root.png\" alt=\"\" class=\"wp-image-32850\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Unmark-as-Source-Root.png 630w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Unmark-as-Source-Root-430x510.png 430w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><figcaption class=\"wp-element-caption\">Figure 7. Unmark as Source Root. <\/figcaption><\/figure>\n\n\n\n<p><strong>Step 8:<\/strong> Create a module directory as '<strong>com.mycompany.helloworld<\/strong>'. Right mouse button click the '<strong>src<\/strong>' directory in the project (tree) as shown in Figure 8. <strong>New -&gt; Directory<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"286\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Create-a-module-directory.png\" alt=\"\" class=\"wp-image-32851\"><figcaption class=\"wp-element-caption\">Figure 8. Create a module directory using the reverse domain name convention.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"98\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/NewDirectory.png\" alt=\"\" class=\"wp-image-32852\"><figcaption class=\"wp-element-caption\">Figure 9. The name of the new directory for the project module.<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 9:<\/strong> Mark module directory as Root Source. Right mouse click '<strong>com.mycompany.helloworld<\/strong>', Select <strong>Mark Directory as -&gt; Sources Root<\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"702\" height=\"547\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Mark-as-source-root.png\" alt=\"\" class=\"wp-image-32853\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Mark-as-source-root.png 702w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Mark-as-source-root-655x510.png 655w\" sizes=\"auto, (max-width: 702px) 100vw, 702px\" \/><figcaption class=\"wp-element-caption\">Figure 10. Marking the module directory as the <strong>Sources Root<\/strong>.<\/figcaption><\/figure>\n\n\n\n<p> <strong>Step 10:<\/strong> Creating a module-info.java file definition. JPMS defines a module's dependencies and shared modules. Right mouse click the folder <strong>com.mycompany.helloworld<\/strong>, select <strong>New -&gt; module-info.java<\/strong>  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"767\" height=\"363\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Creating-a-module-info.png\" alt=\"\" class=\"wp-image-32854\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Creating-a-module-info.png 767w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Creating-a-module-info-700x331.png 700w\" sizes=\"auto, (max-width: 767px) 100vw, 767px\" \/><figcaption class=\"wp-element-caption\">Figure 11. Creating a JPMS module-info.java file for the JavaFX application.<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 11:<\/strong> Enter (copy &amp; paste) the following module definition into the file.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"true\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">module com.mycompany.helloworld {\n   requires javafx.controls;\n   exports com.mycompany.helloworld;\n}\n<\/pre>\n\n\n\n<p>After hitting Ctrl + S to save the file you will encounter errors in the editor window where the module is referencing (exports) the <strong>com.mycompany.helloworld<\/strong> package which doesn't exist yet. So in the next step let's create the package namespace.<\/p>\n\n\n\n<p><strong>Step 12:<\/strong> Create the package name space of the Java application with the directory path of <strong>com\/mycompany\/helloworld<\/strong>. Right mouse click the folder <strong>com.mycompany.helloworld<\/strong>, <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"791\" height=\"321\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Create-a-package.png\" alt=\"\" class=\"wp-image-32855\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Create-a-package.png 791w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Create-a-package-700x284.png 700w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Create-a-package-768x312.png 768w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><figcaption class=\"wp-element-caption\">Figure 12. Creating directories of the package namespace.<\/figcaption><\/figure>\n\n\n\n<p> After selecting the menu options you will enter the package name <strong>com.mycompany.helloworld<\/strong> and hit <strong>Enter<\/strong> as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"371\" height=\"91\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Newpackagename.png\" alt=\"\" class=\"wp-image-32856\"><figcaption class=\"wp-element-caption\">Figure 13. package name <strong>com.mycompany.helloworld<\/strong><\/figcaption><\/figure>\n\n\n\n<p>Once created you should see the following folder created under the module name as shown in figure 14 below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"315\" height=\"250\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/packagenamespace-directory.png\" alt=\"\" class=\"wp-image-32857\"><figcaption class=\"wp-element-caption\">Figure 14. Package name space under module directory.<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 13: <\/strong>Creating the main JavaFX Application file <strong>HelloWorld.java<\/strong> in the package (folder) <strong>com.mycompany.helloworld<\/strong> (beneath the module directory).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"788\" height=\"224\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Creating-JavaFX-Main.png\" alt=\"\" class=\"wp-image-32858\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Creating-JavaFX-Main.png 788w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Creating-JavaFX-Main-700x199.png 700w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Creating-JavaFX-Main-768x218.png 768w\" sizes=\"auto, (max-width: 788px) 100vw, 788px\" \/><figcaption class=\"wp-element-caption\">Figure 15. Creating the JavaFX main application Java file.<\/figcaption><\/figure>\n\n\n\n<p>Next, the prompt will allow you to select the type of Java Class. Enter the name HelloWorld and select JavaFXApplication beneath denoting the Java Class type as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"345\" height=\"211\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/JavaFXApplication.png\" alt=\"\" class=\"wp-image-32859\"><figcaption class=\"wp-element-caption\">Figure 16. Name of Java class and the class type.<\/figcaption><\/figure>\n\n\n\n<p>After hitting enter the file is created and displayed in the editor as shown in figure 17 below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"883\" height=\"636\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/HelloWorld.java-File.png\" alt=\"\" class=\"wp-image-32860\" style=\"width:712px;height:512px\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/HelloWorld.java-File.png 883w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/HelloWorld.java-File-700x504.png 700w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/HelloWorld.java-File-768x553.png 768w\" sizes=\"auto, (max-width: 883px) 100vw, 883px\" \/><figcaption class=\"wp-element-caption\">Figure 17. HelloWorld.java file generated by IntelliJ.<\/figcaption><\/figure>\n\n\n\n<p>Here you'll notice two things, a generated JavaFX class and no errors from missing a package and class (dependent in the module-info.java file). Also, the generated JavaFX code's <strong>start()<\/strong> method body is empty. In the next step you'll just cut &amp; paste the JavaFX application code into body of the method.<\/p>\n\n\n\n<p><strong>Step 14:<\/strong> Enter or cut &amp; paste the following JavaFX code into the body of the <strong>start()<\/strong> method. <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"true\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">        primaryStage.setTitle(\"Hello World\");\n        Group root = new Group();\n        Scene scene = new Scene(root, 300, 250);\n        Button btn = new Button();\n        btn.setLayoutX(100);\n        btn.setLayoutY(80);\n        btn.setText(\"Hello World\");\n        btn.setOnAction( actionEvent -&gt;\n                System.out.println(\"Hello World\"));\n        root.getChildren().add(btn);\n        primaryStage.setScene(scene);\n        primaryStage.show();<\/pre>\n\n\n\n<p>The final project in IntelliJ should look like the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"797\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-project-editor-1024x797.png\" alt=\"\" class=\"wp-image-32862\" style=\"width:775px;height:603px\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-project-editor-1024x797.png 1024w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-project-editor-655x510.png 655w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-project-editor-768x598.png 768w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-project-editor.png 1145w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Figure 18. The completed HelloWorldFX project in the IntelliJ IDE.  <\/figcaption><\/figure>\n\n\n\n<p><strong>Step 15:<\/strong> Executing the HelloWorldFX application project. <\/p>\n\n\n\n<p>Right mouse click the <strong>HelloWorld<\/strong> file in the Project tree view select <strong>Run<\/strong> as shown in figure 19<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"623\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Initial-Run.png\" alt=\"\" class=\"wp-image-32863\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Initial-Run.png 710w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Initial-Run-581x510.png 581w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><figcaption class=\"wp-element-caption\"><br><br><br>Figure 19. Run the HelloWorld application.<\/figcaption><\/figure>\n\n\n\n<p>The following is the output of running the HelloWorld application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"367\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-output-App.png\" alt=\"\" class=\"wp-image-32865\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-output-App.png 424w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-output-App-300x260.png 300w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><figcaption class=\"wp-element-caption\">Figure 20. The output of the execution of HelloWorld JavaFX application.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h2-2--aven-ava-roject\">Maven JavaFX Project<\/h2>\n\n\n\n<p>The following are steps to create a modular JavaFX application through IntelliJ as a Maven project.  <\/p>\n\n\n\n<p><strong>Step 1: <\/strong>Create a New Project<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"498\" height=\"459\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/IntelliJ-NewProject.png\" alt=\"IntelliJ IDEA New Project\" class=\"wp-image-32844\"><figcaption class=\"wp-element-caption\">Figure 21. New Project<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 2:<\/strong> Select Maven as the project type and Choose Project SDK<\/p>\n\n\n\n<p>*Note: It's preferred to use <strong>ZuluFX<\/strong> due to JavaFX modules are already bundled together with Java JDK. If you choose a JDK that doesn't include JavaFX you will need to add libraries through File -&gt; Project Structure -&gt; Libraries add to locate JavaFX lib directory.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"651\" height=\"471\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/01-New-Project-Maven.png\" alt=\"\" class=\"wp-image-32875\"><figcaption class=\"wp-element-caption\">Figure 22. Selecting Maven as a Project type and Selecting a JDK<\/figcaption><\/figure>\n\n\n\n<p>After hitting Next, you'll set up your project and Maven settings.<\/p>\n\n\n\n<p>Step 3: Name the project and create Maven coordinates<\/p>\n\n\n\n<p>Name the project <strong>MavenHelloWorldFX<\/strong> and a project directory destination. <\/p>\n\n\n\n<p>Next, you'll be specifying Maven coordinates GroupId, ArtifactId and Version as follows.<\/p>\n\n\n\n<p><strong>GroupId:<\/strong> com.mycompany.helloworld<br><strong>ArtifactId: <\/strong>helloworldfx<br><strong>Version:<\/strong> 1.0-SNAPSHOT<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"651\" height=\"469\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/02-New-Project-artifact-coord.png\" alt=\"\" class=\"wp-image-32876\"><figcaption class=\"wp-element-caption\">Figure 23. Naming the project and Maven coordinates<\/figcaption><\/figure>\n\n\n\n<p>Click on <strong>Finish<\/strong>.<\/p>\n\n\n\n<p>The project will output as shown below in Figure 24.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"357\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/03-Empty-Project-1024x357.png\" alt=\"\" class=\"wp-image-32877\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/03-Empty-Project-1024x357.png 1024w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/03-Empty-Project-700x244.png 700w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/03-Empty-Project-768x268.png 768w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/03-Empty-Project.png 1078w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Figure 24. An empty Maven Java project.<\/figcaption><\/figure>\n\n\n\n<p>Step 4: Add Plugins and dependencies into <strong>pom.xml <\/strong>file<\/p>\n\n\n\n<p>Copy &amp; Paste to replace the following <strong>pom.xml<\/strong> into the editor and Save.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;project xmlns=\"http:\/\/maven.apache.org\/POM\/4.0.0\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n  xsi:schemaLocation=\"http:\/\/maven.apache.org\/POM\/4.0.0 http:\/\/maven.apache.org\/maven-v4_0_0.xsd\"&gt;\n    &lt;modelVersion&gt;4.0.0&lt;\/modelVersion&gt;\n    &lt;groupId&gt;com.mycompany.helloworld&lt;\/groupId&gt;\n    &lt;artifactId&gt;helloworldfx&lt;\/artifactId&gt;\n    &lt;version&gt;1.0-SNAPSHOT&lt;\/version&gt;\n\n    &lt;properties&gt;\n        &lt;project.build.sourceEncoding&gt;UTF-8&lt;\/project.build.sourceEncoding&gt;\n        &lt;maven.compiler.release&gt;14&lt;\/maven.compiler.release&gt;\n        &lt;javafx.version&gt;14&lt;\/javafx.version&gt;\n    &lt;\/properties&gt;\n    &lt;dependencies&gt;\n        &lt;dependency&gt;\n            &lt;groupId&gt;org.openjfx&lt;\/groupId&gt;\n            &lt;artifactId&gt;javafx-controls&lt;\/artifactId&gt;\n            &lt;version&gt;${javafx.version}&lt;\/version&gt;\n        &lt;\/dependency&gt;\n    &lt;\/dependencies&gt;\n    &lt;build&gt;\n        &lt;plugins&gt;\n            &lt;plugin&gt;\n                &lt;groupId&gt;org.apache.maven.plugins&lt;\/groupId&gt;\n                &lt;artifactId&gt;maven-compiler-plugin&lt;\/artifactId&gt;\n                &lt;version&gt;3.8.1&lt;\/version&gt;\n                &lt;executions&gt;\n                    &lt;execution&gt;\n                        &lt;id&gt;default-compile&lt;\/id&gt;\n                        &lt;configuration&gt;\n                            &lt;release&gt;${maven.compiler.release}&lt;\/release&gt;\n                        &lt;\/configuration&gt;\n                    &lt;\/execution&gt;\n                &lt;\/executions&gt;\n            &lt;\/plugin&gt;\n            &lt;plugin&gt;\n                &lt;groupId&gt;org.openjfx&lt;\/groupId&gt;\n                &lt;artifactId&gt;javafx-maven-plugin&lt;\/artifactId&gt;\n                &lt;version&gt;0.0.5&lt;\/version&gt;\n                &lt;configuration&gt;\n                   &lt;release&gt;${maven.compiler.release}&lt;\/release&gt;\n                   &lt;mainClass&gt;com.mycompany.helloworld.HelloWorld&lt;\/mainClass&gt;\n                &lt;\/configuration&gt;\n            &lt;\/plugin&gt;\n        &lt;\/plugins&gt;\n    &lt;\/build&gt;\n&lt;\/project&gt;<\/pre>\n\n\n\n<p><strong>Step 5: <\/strong>Project Settings -&gt; Project - Set Language Level<\/p>\n\n\n\n<p>Below you will want to ensure the Project SDK and Project language level is at least 11 or better. In figure 25 the language level was set to Java 14 (Preview). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"874\" height=\"608\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/06-Language-Level.png\" alt=\"\" class=\"wp-image-32880\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/06-Language-Level.png 874w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/06-Language-Level-700x487.png 700w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/06-Language-Level-768x534.png 768w\" sizes=\"auto, (max-width: 874px) 100vw, 874px\" \/><figcaption class=\"wp-element-caption\">Figure 25. Setting Language Level for Project<\/figcaption><\/figure>\n\n\n\n<p>Step 6: Project Settings -&gt; Modules - Set Language Level to 14 (Preview)<\/p>\n\n\n\n<p>Select Modules under Project Settings. Make sure the helloworld project language level is in sync as shown below (fig 26). Then click OK.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"874\" height=\"609\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/07-Language-Level2.png\" alt=\"\" class=\"wp-image-32881\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/07-Language-Level2.png 874w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/07-Language-Level2-700x488.png 700w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/07-Language-Level2-768x535.png 768w\" sizes=\"auto, (max-width: 874px) 100vw, 874px\" \/><figcaption class=\"wp-element-caption\">Figure 26. Setting Language Level for Modules<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 7: <\/strong>Create a <strong>module-info.java<\/strong> file<\/p>\n\n\n\n<p>Right mouse click the <strong>java<\/strong> folder (Project pane), then <br>select menu <strong>New -&gt; module-info.java <\/strong><\/p>\n\n\n\n<p>After the file is created you will want to use the definition in step 6.<\/p>\n\n\n\n<p><strong>Step 6:<\/strong> Copy and paste the following module definition to replace the generated one. Then hit <strong>Save<\/strong>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">module com.mycompany.helloworld {\n    requires javafx.controls;\n    exports com.mycompany.helloworld;\n}<\/pre>\n\n\n\n<p><strong>Step 6:<\/strong> Create a Java package name space <strong>com.mycompany.helloworld<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"169\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/04-Package-namespace.png\" alt=\"\" class=\"wp-image-32878\"><figcaption class=\"wp-element-caption\">Figure 27. New Package name space folder<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"351\" height=\"81\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/05-New-Package-name.png\" alt=\"\" class=\"wp-image-32879\"><figcaption class=\"wp-element-caption\">Figure 28. Entering the package name<\/figcaption><\/figure>\n\n\n\n<p>After entering the package name the following is a created folder under the java directory as shown in figure 29 below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"385\" height=\"356\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/08-Javafolder.png\" alt=\"\" class=\"wp-image-32882\"><figcaption class=\"wp-element-caption\">Figure 29. Creating a new module-info.java file.<\/figcaption><\/figure>\n\n\n\n<p><strong>Step 7:<\/strong> Create the Main JavaFX app file<\/p>\n\n\n\n<p>Right Mouse click the folder <strong>com.mycompany.helloworld <\/strong>(Project pane) to select the popup menu <strong>New -&gt; Class<\/strong>, then type in <strong>HelloWorld<\/strong> as the name of the class as shown in figure 30 below. This will create an empty class. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"386\" height=\"249\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/09-Create-Main-Class.png\" alt=\"\" class=\"wp-image-32883\"><figcaption class=\"wp-element-caption\">Figure 30. Create a Class called HelloWorld<\/figcaption><\/figure>\n\n\n\n<p>Next, <strong>copy &amp; paste<\/strong> or type the following code to replace the code in the recently created <strong>HelloWorld.java<\/strong> file and <strong>Save<\/strong>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"java\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">package com.mycompany.helloworld;\n\nimport javafx.application.Application;\nimport javafx.scene.Group;\nimport javafx.scene.Scene;\nimport javafx.scene.control.Button;\nimport javafx.stage.Stage;\n\npublic class HelloWorld extends Application {\n\n    public static void main(String[] args) {\n        launch(args);\n    }\n\n    @Override\n    public void start(Stage primaryStage) {\n        primaryStage.setTitle(\"Hello World\");\n        Group root = new Group();\n        Scene scene = new Scene(root, 300, 250);\n        Button btn = new Button();\n        btn.setLayoutX(100);\n        btn.setLayoutY(80);\n        btn.setText(\"Hello World\");\n        btn.setOnAction( actionEvent -&gt;\n                System.out.println(\"Hello World\"));\n        root.getChildren().add(btn);\n        primaryStage.setScene(scene);\n        primaryStage.show();\n    }\n}\n<\/pre>\n\n\n\n<p><strong>Step 8:<\/strong> Reload Maven Project <\/p>\n\n\n\n<p>On the right pane there should be tabs to select <strong>Maven<\/strong>. Next, click on the reload tool bar button. This will pull down any plugins or dependencies specified in the <strong>pom.xml<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"334\" height=\"514\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/10-Maven-Reload-project.png\" alt=\"\" class=\"wp-image-32884\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/10-Maven-Reload-project.png 334w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/10-Maven-Reload-project-331x510.png 331w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><figcaption class=\"wp-element-caption\">Figure 31. Maven tab to reload the project plugins and dependencies.<\/figcaption><\/figure>\n\n\n\n<p>Step 9: Executing the <strong>HelloWorldFX<\/strong> application project.<\/p>\n\n\n\n<p>Still on the Maven pane expand the <strong>Plugins<\/strong> folder, <strong>javafx<\/strong>, and double click on <strong>javafx:run<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"367\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-output-App.png\" alt=\"\" class=\"wp-image-32865\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-output-App.png 424w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/Final-output-App-300x260.png 300w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><figcaption class=\"wp-element-caption\">Figure 32. Maven executed Hello World application<\/figcaption><\/figure>\n\n\n\n<p>If you want to run the application using the IDE's Run configuration you'll need to specify VM Options such as the following:<\/p>\n\n\n\n<p>When using ZuluFX:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">--add-modules javafx.controls<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"877\" height=\"212\" src=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/11-VMoptions.png\" alt=\"\" class=\"wp-image-32885\" srcset=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/11-VMoptions.png 877w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/11-VMoptions-700x169.png 700w, https:\/\/foojay.io\/wp-content\/uploads\/2020\/09\/11-VMoptions-768x186.png 768w\" sizes=\"auto, (max-width: 877px) 100vw, 877px\" \/><figcaption class=\"wp-element-caption\">Figure 33. VM Options<\/figcaption><\/figure>\n\n\n\n<p>When using JavaFX as separate libraries such as from GluonHQ (<code>$PATH_TO_FX<\/code>) and a <strong>mods<\/strong> directory (modules output directory):<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">--module-path $PATH_TO_FX:mods --add-modules javafx.controls<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h2-3--radle-ava-roject\">Gradle JavaFX Project<\/h2>\n\n\n\n<p>Because this article is getting way too long, I am only going to post the <strong>build.gradle<\/strong> file below. Because the file and directory structure of a gradle project is the same as a Maven project I trust you can simply go through creating the project in a similar manner and near the end click on the <strong>Gradle<\/strong> tab and the <strong>reload<\/strong> button to see the <strong>run<\/strong> task.  <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"groovy\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">plugins {\n  id 'application'\n  id 'org.openjfx.javafxplugin' version '0.0.8'\n}\n\nrepositories {\n    mavenCentral()\n}\n\njavafx {\n    version = \"14\"\n    modules = [ 'javafx.controls' ]\n}\n\nmainClassName = \"com.mycompany.helloworldfx\/com.mycompany.helloworldfx.HelloWorld\"\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h2-4--onclusion\">Conclusion<\/h2>\n\n\n\n<p>Well there you have it, a Hello World JavaFX Application that was <strong>JPMS<\/strong> based and created using the popular IntelliJ IDE in three project types <strong>Plain<\/strong>, <strong>Maven<\/strong> and <strong>Gradle<\/strong>. <\/p>\n\n\n\n<p>As you get familiar with how to code and execute your application your next step would be how placing check points and incrementally debug your application.<\/p>\n\n\n\n<p>As always feel free to comment if you have questions or need any help. Happy coding!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h2-5--eferences-\">References:<\/h2>\n\n\n\n<p>Understanding Java 9 Modules by Paul Deitel - <a target=\"_blank\" href=\"https:\/\/www.oracle.com\/corporate\/features\/understanding-java-9-modules.html\">https:\/\/www.oracle.com\/corporate\/features\/understanding-java-9-modules.html<\/a>  <\/p>\n\n\n\n<p>Create a new JavaFX project -<a target=\"_blank\" href=\"https:\/\/www.jetbrains.com\/help\/idea\/javafx.html\">https:\/\/www.jetbrains.com\/help\/idea\/javafx.html<\/a>  <\/p>\n\n\n\n<p>OpenJFX.io - <a target=\"_blank\" href=\"https:\/\/openjfx.io\">https:\/\/openjfx.io<\/a><\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This article is for the beginner who wants to get started developing JavaFX applications using IntelliJ IDE. <\/p>\n<p>While this article may seem elementary for some, I believe it can help newcomers to the JavaFX platform avoid some pitfalls and really hit the ground running.<\/p>\n","protected":false},"author":32,"featured_media":32843,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[221,193],"tags":[200,192,199,190,34,155,201],"class_list":["post-32842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-idea","category-javafx","tag-duke","tag-helloworld","tag-intellij","tag-javafx","tag-jdk","tag-jdk14","tag-zulufx"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Beginning JavaFX Applications with IntelliJ IDE | foojay<\/title>\n<meta name=\"description\" content=\"For the beginner to developing JavaFX applications with IntelliJ IDE, this article can help to avoid pitfalls and hit the ground running.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginning JavaFX Applications with IntelliJ IDE | foojay\" \/>\n<meta property=\"og:description\" content=\"For the beginner to developing JavaFX applications with IntelliJ IDE, this article can help to avoid pitfalls and hit the ground running.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/\" \/>\n<meta property=\"og:site_name\" content=\"foojay\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-28T19:33:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-06T12:19:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/duke-intellij-shirt.png\" \/>\n\t<meta property=\"og:image:width\" content=\"174\" \/>\n\t<meta property=\"og:image:height\" content=\"313\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carl Dea\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carl Dea\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/\"},\"author\":{\"name\":\"Carl Dea\",\"@id\":\"https:\\\/\\\/foojay.io\\\/#\\\/schema\\\/person\\\/774bdbf9584c717608454ad20475bb87\"},\"headline\":\"Beginning JavaFX Applications with IntelliJ IDE\",\"datePublished\":\"2021-04-28T19:33:58+00:00\",\"dateModified\":\"2024-02-06T12:19:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/\"},\"wordCount\":1953,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/foojay.io\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/duke-intellij-shirt.png\",\"keywords\":[\"duke\",\"HelloWorld\",\"IntelliJ\",\"JavaFX\",\"JDK\",\"JDK14\",\"zulufx\"],\"articleSection\":[\"IntelliJ IDEA\",\"JavaFX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/\",\"url\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/\",\"name\":\"Beginning JavaFX Applications with IntelliJ IDE | foojay\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/foojay.io\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/duke-intellij-shirt.png\",\"datePublished\":\"2021-04-28T19:33:58+00:00\",\"dateModified\":\"2024-02-06T12:19:48+00:00\",\"description\":\"For the beginner to developing JavaFX applications with IntelliJ IDE, this article can help to avoid pitfalls and hit the ground running.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/#primaryimage\",\"url\":\"https:\\\/\\\/foojay.io\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/duke-intellij-shirt.png\",\"contentUrl\":\"https:\\\/\\\/foojay.io\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/duke-intellij-shirt.png\",\"width\":174,\"height\":313,\"caption\":\"JavaFX application created using IntelliJ\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/foojay.io\\\/today\\\/beginning-javafx-with-intellij\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/foojay.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beginning JavaFX Applications with IntelliJ IDE\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/foojay.io\\\/#website\",\"url\":\"https:\\\/\\\/foojay.io\\\/\",\"name\":\"foojay\",\"description\":\"a place for friends of OpenJDK\",\"publisher\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/foojay.io\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/foojay.io\\\/#organization\",\"name\":\"foojay\",\"url\":\"https:\\\/\\\/foojay.io\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/foojay.io\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/foojay.io\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/cropped-Favicon.png\",\"contentUrl\":\"https:\\\/\\\/foojay.io\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/cropped-Favicon.png\",\"width\":512,\"height\":512,\"caption\":\"foojay\"},\"image\":{\"@id\":\"https:\\\/\\\/foojay.io\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/foojay2020\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/foojay.io\\\/#\\\/schema\\\/person\\\/774bdbf9584c717608454ad20475bb87\",\"name\":\"Carl Dea\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6ed5212dd2bf34bf1e83c4114019f1d3ee2b2c61419f98d03a4be72c50b939c4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6ed5212dd2bf34bf1e83c4114019f1d3ee2b2c61419f98d03a4be72c50b939c4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6ed5212dd2bf34bf1e83c4114019f1d3ee2b2c61419f98d03a4be72c50b939c4?s=96&d=mm&r=g\",\"caption\":\"Carl Dea\"},\"description\":\"Carl Dea is a Lead Developer and Software Engineer at Deloitte. He has authored Java books and has been developing software for 20+ years with many clients, from Fortune 500 companies to nonprofit organizations. He has written software ranging from mission-critical applications to e-commerce applications. Carl has been using Java since the very beginning (when Applets were cool) and is a JavaFX enthusiast (fanboy) dating back to when it used to be called F3\\\/JavaFX script. He greatly loves sharing and advocating Java based technologies.\",\"sameAs\":[\"http:\\\/\\\/carlfx.wordpress.com\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/carldea\\\/\",\"https:\\\/\\\/x.com\\\/carldea\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/carldea\"],\"url\":\"https:\\\/\\\/foojay.io\\\/today\\\/author\\\/carldea\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Beginning JavaFX Applications with IntelliJ IDE | foojay","description":"For the beginner to developing JavaFX applications with IntelliJ IDE, this article can help to avoid pitfalls and hit the ground running.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/","og_locale":"en_US","og_type":"article","og_title":"Beginning JavaFX Applications with IntelliJ IDE | foojay","og_description":"For the beginner to developing JavaFX applications with IntelliJ IDE, this article can help to avoid pitfalls and hit the ground running.","og_url":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/","og_site_name":"foojay","article_published_time":"2021-04-28T19:33:58+00:00","article_modified_time":"2024-02-06T12:19:48+00:00","og_image":[{"width":174,"height":313,"url":"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/duke-intellij-shirt.png","type":"image\/png"}],"author":"Carl Dea","twitter_misc":{"Written by":"Carl Dea","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/#article","isPartOf":{"@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/"},"author":{"name":"Carl Dea","@id":"https:\/\/foojay.io\/#\/schema\/person\/774bdbf9584c717608454ad20475bb87"},"headline":"Beginning JavaFX Applications with IntelliJ IDE","datePublished":"2021-04-28T19:33:58+00:00","dateModified":"2024-02-06T12:19:48+00:00","mainEntityOfPage":{"@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/"},"wordCount":1953,"commentCount":3,"publisher":{"@id":"https:\/\/foojay.io\/#organization"},"image":{"@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/#primaryimage"},"thumbnailUrl":"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/duke-intellij-shirt.png","keywords":["duke","HelloWorld","IntelliJ","JavaFX","JDK","JDK14","zulufx"],"articleSection":["IntelliJ IDEA","JavaFX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/","url":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/","name":"Beginning JavaFX Applications with IntelliJ IDE | foojay","isPartOf":{"@id":"https:\/\/foojay.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/#primaryimage"},"image":{"@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/#primaryimage"},"thumbnailUrl":"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/duke-intellij-shirt.png","datePublished":"2021-04-28T19:33:58+00:00","dateModified":"2024-02-06T12:19:48+00:00","description":"For the beginner to developing JavaFX applications with IntelliJ IDE, this article can help to avoid pitfalls and hit the ground running.","breadcrumb":{"@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/#primaryimage","url":"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/duke-intellij-shirt.png","contentUrl":"https:\/\/foojay.io\/wp-content\/uploads\/2020\/08\/duke-intellij-shirt.png","width":174,"height":313,"caption":"JavaFX application created using IntelliJ"},{"@type":"BreadcrumbList","@id":"https:\/\/foojay.io\/today\/beginning-javafx-with-intellij\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/foojay.io\/"},{"@type":"ListItem","position":2,"name":"Beginning JavaFX Applications with IntelliJ IDE"}]},{"@type":"WebSite","@id":"https:\/\/foojay.io\/#website","url":"https:\/\/foojay.io\/","name":"foojay","description":"a place for friends of OpenJDK","publisher":{"@id":"https:\/\/foojay.io\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/foojay.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/foojay.io\/#organization","name":"foojay","url":"https:\/\/foojay.io\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/foojay.io\/#\/schema\/logo\/image\/","url":"https:\/\/foojay.io\/wp-content\/uploads\/2020\/04\/cropped-Favicon.png","contentUrl":"https:\/\/foojay.io\/wp-content\/uploads\/2020\/04\/cropped-Favicon.png","width":512,"height":512,"caption":"foojay"},"image":{"@id":"https:\/\/foojay.io\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/foojay2020"]},{"@type":"Person","@id":"https:\/\/foojay.io\/#\/schema\/person\/774bdbf9584c717608454ad20475bb87","name":"Carl Dea","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/6ed5212dd2bf34bf1e83c4114019f1d3ee2b2c61419f98d03a4be72c50b939c4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6ed5212dd2bf34bf1e83c4114019f1d3ee2b2c61419f98d03a4be72c50b939c4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6ed5212dd2bf34bf1e83c4114019f1d3ee2b2c61419f98d03a4be72c50b939c4?s=96&d=mm&r=g","caption":"Carl Dea"},"description":"Carl Dea is a Lead Developer and Software Engineer at Deloitte. He has authored Java books and has been developing software for 20+ years with many clients, from Fortune 500 companies to nonprofit organizations. He has written software ranging from mission-critical applications to e-commerce applications. Carl has been using Java since the very beginning (when Applets were cool) and is a JavaFX enthusiast (fanboy) dating back to when it used to be called F3\/JavaFX script. He greatly loves sharing and advocating Java based technologies.","sameAs":["http:\/\/carlfx.wordpress.com","https:\/\/www.linkedin.com\/in\/carldea\/","https:\/\/x.com\/carldea","https:\/\/www.youtube.com\/user\/carldea"],"url":"https:\/\/foojay.io\/today\/author\/carldea\/"}]}},"_links":{"self":[{"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/posts\/32842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/comments?post=32842"}],"version-history":[{"count":0,"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/posts\/32842\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/media\/32843"}],"wp:attachment":[{"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/media?parent=32842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/categories?post=32842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/foojay.io\/wp-json\/wp\/v2\/tags?post=32842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}