{"id":185396,"date":"2021-05-10T14:31:41","date_gmt":"2021-05-10T09:01:41","guid":{"rendered":"https:\/\/www.jigsawacademy.com\/?p=185396"},"modified":"2022-10-18T12:33:12","modified_gmt":"2022-10-18T07:03:12","slug":"blogs-tutorial-javafx-tutorial","status":"publish","type":"post","link":"https:\/\/www.jigsawacademy.com\/blogs\/tutorial\/javafx-tutorial","title":{"rendered":"JavaFX Tutorial: A Step-By-Step Guide In 2021"},"content":{"rendered":"\r\n<h2><strong>Introduction<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>The JavaFX platform is a Java framework for developing rich internet applications (RIAs) that can operate on a wide range of platforms. It&#8217;s designed to take the place of Swing as a graphical user interface platform in Java applications. In addition, it has more features than Swing.\u00a0<\/p>\r\n\r\n\r\n\r\n<ol><li><strong><a href=\"#What-is-JavaFX?\" class=\"rank-math-link\">What is JavaFX?<\/a><\/strong><\/li><li><strong><a href=\"#Web-and-Media-Engine\" class=\"rank-math-link\">Web and Media Engine<\/a><\/strong><\/li><li><strong><a href=\"#Anatomy-of-a-JavaFX-Application\" class=\"rank-math-link\">Anatomy of a JavaFX Application<\/a><\/strong><\/li><li><strong><a href=\"#Creating-a-JavaFX-Application\" class=\"rank-math-link\">Creating a JavaFX Application<\/a><\/strong><\/li><\/ol>\r\n\r\n\r\n\r\n<h2 class=\"has-vivid-cyan-blue-color has-text-color\" id=\"What-is-JavaFX?\">1. <strong>What is JavaFX?<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>JavaFX is the Java Platform&#8217;s next-generation GUI toolkit. Isn&#8217;t it intriguing? Let&#8217;s take a closer look at the idea in this JavaFX tutorial.<\/p>\r\n\r\n\r\n\r\n<ul><li>JavaFX Architecture<\/li><\/ul>\r\n\r\n\r\n\r\n<p>JavaFX&nbsp;comes with a number of built-in modules that are all linked together. Following are the elements involved.<\/p>\r\n\r\n\r\n\r\n<ul><li>Scene Graph<\/li><\/ul>\r\n\r\n\r\n\r\n<p>The Scene Graph is the first step in creating a JavaFX application. It&#8217;s a node-based hierarchical tree that represents all of the visual elements of the app&#8217;s user interface. A node is a single entity in a scene graph.<\/p>\r\n\r\n\r\n\r\n<ul><li>Graphics Engine<\/li><\/ul>\r\n\r\n\r\n\r\n<p>The scene graph aspect receives graphics support from the JavaFX framework. It commonly supports both 2D and 3D graphics. When the graphics hardware on the device is unable to accommodate hardware-accelerated rendering, software rendering is used.<\/p>\r\n\r\n\r\n\r\n<p>In JavaFX, there are two graphics-accelerated pipelines:<\/p>\r\n\r\n\r\n\r\n<ul><li>Prism<\/li><li>Quantum Toolkit<\/li><\/ul>\r\n\r\n\r\n\r\n<ul><li>Glass Windowing Toolkit<\/li><\/ul>\r\n\r\n\r\n\r\n<p>It&#8217;s a platform-specific layer that links the JavaFX platform to the native OS.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"has-vivid-cyan-blue-color has-text-color\" id=\"Web-and-Media-Engine\">2. Web and Media Engine<\/h2>\r\n\r\n\r\n\r\n<p>Web Engine \u2013 It&#8217;s a web browser that embeds HTML content into a JavaFX scene graph. DOM, CSS, HTML5, JavaScript, and SVG are all supported.<\/p>\r\n\r\n\r\n\r\n<p>Media Engine \u2013 It provides tools for creating media applications that allow media playback on compatible platforms in a desktop window or within a web page.<\/p>\r\n\r\n\r\n\r\n<p>The JavaFX API is supported by these components. The structure of a JavaFX application is the subject of the next section of this JavaFX tutorial.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"has-vivid-cyan-blue-color has-text-color\" id=\"Anatomy-of-a-JavaFX-Application\">3. <strong>Anatomy of a JavaFX Application<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>The Stage, Scene, and Nodes components of a JavaFX application are organized hierarchically.<\/p>\r\n\r\n\r\n\r\n<ul><li>Stage<\/li><\/ul>\r\n\r\n\r\n\r\n<p>It is the application&#8217;s key container and entry point. The location of a stage is determined by two parameters: width and height.<\/p>\r\n\r\n\r\n\r\n<ul><li>Scene<\/li><\/ul>\r\n\r\n\r\n\r\n<p>The scene is a container for the stage&#8217;s visual material. It contains user interface elements including Image Buttons, Views, Grids, and TextBoxes. Javafx.scene is a visual effects library for Java. The javafx.scene package&#8217;s Scene class contains all of the methods for dealing with scene objects.<\/p>\r\n\r\n\r\n\r\n<ul><li>Scene Nodes &amp; Graph<\/li><\/ul>\r\n\r\n\r\n\r\n<p>A scene graph is a hierarchical (tree-like) data structure that represents the contents of a scene. It can be thought of as a list of different nodes. A node is essentially a visual\/graphical entity in a scene graph.&nbsp;<\/p>\r\n\r\n\r\n\r\n<p>Let&#8217;s learn how to build a JavaFX application with an example in this JavaFX tutorial.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"has-vivid-cyan-blue-color has-text-color\" id=\"Creating-a-JavaFX-Application\">4. <strong>Creating a JavaFX Application<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>Let&#8217;s take a look at how to program in JavaFX using the Eclipse IDE. When the button on the stage is pressed, we&#8217;ll make a quick JavaFX application that prints &#8220;Welcome to Jigsaw!&#8221; on the console.<\/p>\r\n\r\n\r\n\r\n<ul><li>JavaFX Application Example&nbsp;Program Explanation<\/li><\/ul>\r\n\r\n\r\n\r\n<p>Let&#8217;s take a look at how this sample software works in detail in this JavaFX tutorial.<\/p>\r\n\r\n\r\n\r\n<p><strong>Step1:<\/strong>&nbsp;Extend the javafx.application package. Override the start() method in the application<\/p>\r\n\r\n\r\n\r\n<p>As previously mentioned, the start() method is where a JavaFX application begins. JavaFX.application should be imported. Override the start() method for this application. Override the start() method and add an object of the javafx.stage class to it.&nbsp;<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>12<\/td><td>@Overridepublic&nbsp;void&nbsp;start(Stage primaryStage)<\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n<hr class=\"wp-block-separator\"\/>\r\n\r\n\r\n\r\n<p><strong>Step 2: <\/strong>Create a Button<\/p>\r\n\r\n\r\n\r\n<p>The javafx.scene.control.Button class is used to make a button. As a result, code the appropriate class.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>1<\/td><td>Button btn = new&nbsp;Button();<\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n<hr class=\"wp-block-separator\"\/>\r\n\r\n\r\n\r\n<p><strong>Step 3:<\/strong>&nbsp;Create an event for the button<\/p>\r\n\r\n\r\n\r\n<p>Call setOnAction() on the button to accomplish this, and pass an anonymous class Event Handler as a parameter to the process. Define a method handle within this anonymous class (). Take a look at the handle() method&#8217;s code.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>1234567<\/td><td>btn.setText(&#8220;Say &#8216;Welcome to Jigsaw!'&#8221;);btn.setOnAction(new&nbsp;EventHandler&lt;ActionEvent&gt;() {<br>@Overridepublic&nbsp;void&nbsp;handle(ActionEvent event) {System.out.println(&#8220;Welcome to Jigsaw!&#8221;);}<\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n<hr class=\"wp-block-separator\"\/>\r\n\r\n\r\n\r\n<p><strong>Step 4:<\/strong> Make a layout and add the button in it.<\/p>\r\n\r\n\r\n\r\n<p>JavaFX typically comes with a variety of formats. One of them should be used to better visualize the widgets. Other nodes, such as buttons, messages, and so on, must be added to this layout.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>12<\/td><td>StackPane root = new&nbsp;StackPane();root.getChildren().add(btn);<\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n<hr class=\"wp-block-separator\"\/>\r\n\r\n\r\n\r\n<p><strong>Step 5:&nbsp;<\/strong>Create the scene<\/p>\r\n\r\n\r\n\r\n<p>In the hierarchy of JavaFx framework structure, the scene is at a higher level. You can make it by using the javafx.scene class. Create a scene class and transfer the layout object to the constructor.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>1<\/td><td>Scene scene = new&nbsp;Scene(root, 300, 250);<\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n<hr class=\"wp-block-separator\"\/>\r\n\r\n\r\n\r\n<p><strong>Step 6:<\/strong>&nbsp;Prepare the stage<\/p>\r\n\r\n\r\n\r\n<p>Make use of the javafx.stage methods. To set some stage attributes, use the Stage class. To view the point, use the show() process. Here&#8217;s the code for it.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>123<\/td><td>primaryStage.setTitle(&#8220;Hello World!&#8221;);primaryStage.setScene(scene); &nbsp;primaryStage.show();<\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n<hr class=\"wp-block-separator\"\/>\r\n\r\n\r\n\r\n<p><strong>Step 7:<\/strong>&nbsp;Create the main method<\/p>\r\n\r\n\r\n\r\n<p>Develop a main method that will be used to launch the program, i.e. call launch() and transfer the command line arguments (args) to it..<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>123<\/td><td>public&nbsp;static&nbsp;void&nbsp;main(String[] args) {launch(args);}<\/td><\/tr><\/tbody><\/table><\/figure>\r\n\r\n\r\n\r\n<hr class=\"wp-block-separator\"\/>\r\n\r\n\r\n\r\n<p><strong>Step 8:<\/strong>&nbsp;Run the application.<\/p>\r\n\r\n\r\n\r\n<p>To make it more fun, you can add a custom template to the JavaFX application&#8217;s UI, such as HTML and CSS.<\/p>\r\n\r\n\r\n\r\n<h2>Conclusion<\/h2>\r\n\r\n\r\n\r\n<p>This concludes our JavaFX Tutorial. We went through the internal structure of the JavaFX application and learned the key capabilities of its lifecycle, architecture, and components in this JavaFX Tutorial.<\/p>\r\n\r\n\r\n\r\n<p>If you want to learn more about Java then check out Jigsaw Academy\u2019s&nbsp;<strong><a href=\"https:\/\/www.jigsawacademy.com\/full-stack-data-science-program-online\/\" target=\"_blank\" rel=\"noreferrer noopener\">Master Certificate In Full Stack Development<\/a>&nbsp;<\/strong>\u2013 a 170 hour-long live online course. It is the first &amp; only program on Full Stack Development with Automation and AWS Cloud. Happy learning!<\/p>\r\n\r\n\r\n\r\n<h2><strong>ALSO READ<\/strong><\/h2>\r\n\r\n\r\n\r\n<ul><li><strong><a href=\"https:\/\/www.jigsawacademy.com\/blogs\/tutorial\/testng-framework\" class=\"rank-math-link\">TestNG Framework In Selenium WebDriver: A Simple Guide In 2 Points<\/a><\/strong><\/li><li><strong><a href=\"https:\/\/www.jigsawacademy.com\/blogs\/tutorial\/xml-parser-python\">XML Parser Python: A Basic Guide In 2 Points<\/a><\/strong><\/li><\/ul>\r\n","protected":false},"excerpt":{"rendered":"<p>Introduction The JavaFX platform is a Java framework for developing rich internet applications (RIAs) that can operate on a wide range of platforms. It&#8217;s designed to take the place of Swing as a graphical user interface platform in Java applications. In addition, it has more features than Swing.\u00a0 What is JavaFX? Web and Media Engine [&hellip;]<\/p>\n","protected":false},"author":105,"featured_media":185398,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9792],"tags":[10182,10184,10185,10181,10183],"form":[1499],"acf":[],"_links":{"self":[{"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/posts\/185396"}],"collection":[{"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/comments?post=185396"}],"version-history":[{"count":1,"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/posts\/185396\/revisions"}],"predecessor-version":[{"id":256240,"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/posts\/185396\/revisions\/256240"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/media\/185398"}],"wp:attachment":[{"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/media?parent=185396"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/categories?post=185396"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/tags?post=185396"},{"taxonomy":"form","embeddable":true,"href":"https:\/\/www.jigsawacademy.com\/wp-json\/wp\/v2\/form?post=185396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}