---
title: JavaFX 2.x development using FXML
description: JavaFX 2.x development using FXML
---

[![e-Zest logo\_An accion lab company\_Colour](https://blog.e-zest.com/hubfs/images/Logos%20with%20Tagline/Corporate/SVG/e-Zest%20logo_An%20accion%20lab%20company_Colour.svg "e-Zest logo_An accion lab company_Colour")](https://www.e-zest.com/)

- [WORK](https://www.e-zest.com/our-work)
- [SERVICES](https://www.e-zest.com/our-services) 
    - [Product Engineering](https://www.e-zest.com/digital-product-engineering-services)
    - [Enterprise Data Services](https://www.e-zest.com/enterprise-data-services)
    - [Digital Commerce](https://www.e-zest.com/digital-commerce-services)
    - [Digital Operations](https://www.e-zest.com/digital-operations)
    - [Digital Consulting](https://www.e-zest.com/digital-transformation-consulting-services)
    - [Digital Experience Design](https://www.e-zest.com/digital-experience-design)
- [INSIGHTS](https://blog.e-zest.com/)
- [CAREERS](https://www.e-zest.com/careers)
- [ENTERPRISE DATA SERVICES](https://www.e-zest.com/enterprise-data-services)
- [GENERATIVE AI](https://www.e-zest.com/generative-ai)
- [Healthcare](https://healthcare.e-zest.com)
- [Contact Us](https://www.e-zest.com/contact-us)

- ![Elevating Product Engineering with AI and ML](https://blog.e-zest.com/hubfs/Elevating%20Product%20Engineering%20with%20AI%20and%20ML.jpg)

  [BLOGS](https://blog.e-zest.com)
  
  #### Elevating Product Engineering with AI and ML

  As technology evolves and customer choices broaden, there is an increasing ...

  [Read more](https://blog.e-zest.com/elevating-product-engineering-with-ai-and-ml)
- ![e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024](https://blog.e-zest.com/hubfs/e-Zest%20%E2%80%93%20An%20Accion%20Labs%20Company%20-%20Gets%20Recognition%20as%20a%20Contender%20in%20the%20ISG%20Provider%20LensTM%20Study%20on%20Digital%20Engineering%20Services%202024.jpg)

  [NEWS](https://blog.e-zest.com/news)
  
  #### e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024

  We are delighted to announce that e-Zest – An Accion Labs Company has been ...

  [Read more](https://blog.e-zest.com/news/e-zest-an-accion-labs-company-gets-recognition-as-a-contender-in-the-isg-provider-lens-study-on-digital-engineering-services-2024)
- ![e-Zest Solutions supports Digital Pune Mission](https://blog.e-zest.com/hubfs/blog-files/Digital%20Literacy%20Bus%20e-Zest.png)

  [CSR](https://blog.e-zest.com/csr)
  
  #### e-Zest Solutions supports Digital Pune Mission

  **Pune, India:** e-Zest Solutions, a leading digital technology innovation ...

  [Read more](https://blog.e-zest.com/csr/e-zest-solutions-supports-digital-pune-mission)

- [Work](https://www.e-zest.com/our-work)
- [Services](https://www.e-zest.com/our-services)
- [Insights](https://blog.e-zest.com)
- [Careers](https://www.e-zest.com/careers)
- [Enterprise Data](https://www.e-zest.com/enterprise-data-services)
- [Generative AI](https://www.e-zest.com/generative-ai)
- [Innovations](https://www.e-zest.com/innovations)
- [Healthcare](https://healthcare.e-zest.com)
- [About](https://www.e-zest.com/about-us)
- [Contact](https://www.e-zest.com/contact-us)

- [Blog](https://blog.e-zest.com/)
- [News](https://blog.e-zest.com/news)
- [CSR](https://blog.e-zest.com/csr)

- [![Linkedin Icon](https://blog.e-zest.com/hubfs/icons/linkedin_icon_white.svg)](https://www.linkedin.com/company/e-zest-solutions/)
- [![Twitter Icon](https://blog.e-zest.com/hubfs/twitter-logo-silhouette%20(5).svg)](https://twitter.com/ezest)
- [![Facebook Icon](https://blog.e-zest.com/hubfs/facebook-app-logo%20(4).svg)](https://www.facebook.com/61259256638)
- [![Instagram Icon](https://blog.e-zest.com/hubfs/instagram-logo%20(4).svg)](https://www.instagram.com/ezestsolutions/)
- [![Youtube Icon](https://blog.e-zest.com/hubfs/icons/youtube_icon_white.svg)](https://www.youtube.com/user/ezestcorporate)

[![Go to top icon](https://blog.e-zest.com/hubfs/AA%20Assets/top%20button.svg)](https://blog.e-zest.com/javafx-2-x-development-using-fxml/#top)

Hit enter to search or ESC to close

Insights

e-Zest members share technology ideas to foster digital transformation.

- [Blog](https://blog.e-zest.com)
- [News](https://blog.e-zest.com/news)
- [Podcasts](https://www.e-zest.com/podcasts)
- [Healthcare](https://blog.e-zest.com/healthcare)
- [CSR](https://blog.e-zest.com/csr)
- [Whitepaper](https://blog.e-zest.com/whitepaper)
- [Playbook](https://blog.e-zest.com/playbook)
- [Media Kit](https://www.e-zest.com/media-kit)

# JavaFX 2.x development using FXML

[Amol Hingmire](https://blog.e-zest.com/author/amol-hingmire)  May 23, 2012

[JavaFX](https://blog.e-zest.com/topic/javafx) [javafx 2.0](https://blog.e-zest.com/topic/javafx-2-0) [fxml](https://blog.e-zest.com/topic/fxml) [Technology](https://blog.e-zest.com/topic/technology) [java desktop development](https://blog.e-zest.com/topic/java-desktop-development-2)

- <https://www.linkedin.com/shareArticle?mini=true&url=https://blog.e-zest.com/javafx-2-x-development-using-fxml/&title=&summary=&source=>
- <https://twitter.com/intent/tweet?source=https://blog.e-zest.com/javafx-2-x-development-using-fxml/&text=JavaFX%202.x%20development%20using%20FXML>
- <https://www.facebook.com/sharer/sharer.php?u=https://blog.e-zest.com/javafx-2-x-development-using-fxml/>
- <https://www.instagram.com/ezestsolutions/?u=https://blog.e-zest.com/javafx-2-x-development-using-fxml/>

This post simply explains, development of [JavaFX 2 application](https://blog.e-zest.com/javafx/) using FXML.

FXML: you can say as a **Flexible XML**.

Requirements:

- XML knowledge
- CSS knowledge

As per JavaFX 2 architecture, it uses Scene Graph which is the starting point for constructing a JavaFX 2 application. It is a hierarchical tree of nodes that represents all of the visual elements of the application's user interface.

For more information on Scene Graph follow this link:

[http://docs.oracle.com/javafx/2/scenegraph/jfxpub-scenegraph.htm](http://docs.oracle.com/javafx/2/scenegraph/jfxpub-scenegraph.htm)

- **Imports in FXML**

```
<?import javafx.scene.control.*?>
```

Imports all classes from the javafx.scene.control package into the current namespace.

- **Includes in FXML**

```
<fx:include>
```

This tag creates an object from FXML markup defined in another file.  
 This promotes ease of maintenance and separation of UI concern.

- **Controllers in FXML**

We can specify a controller (a handler) for particular FXML. A controller is an object that is associated with the deserialized contents of n FXML document and is responsible for coordinating the behaviors of the objects (often user interface elements) defined by the document.

```
<AnchorPane id="AnchorPane" xmlns:fx="http://javafx.com/fxml" fx:controller="demoshowhide.Sample">
	<children>
	.....
	</children>
</AnchorPane>
```

- **Controller method event handler**

A controller method event handler is a method defined by a document's "controller".  
 Here the controller is binded to that particular FXML.  
 And also please note that we need to specify the *fx:controller* in root tag only otherwise it throw exception.

```
<AnchorPane id="AnchorPane" xmlns:fx="http://javafx.com/fxml" fx:controller="demoshowhide.Sample">
	<children>
	<HBox id="hBox1" layoutX="102.0" layoutY="36.0" prefHeight="37.0" prefWidth="343.0" spacing="30.0">
      <children>
        <Button id="areaBtn" onAction="#loadTextArea" text="SHOW TEXT AREA" />
        <Button id="treeBtn" onAction="#loadTree" text="SHOW TREE VIEW" />
      </children>
    </HBox>
	</children>
</AnchorPane>
```

**Demo Application**

Here is the code for Demo application.  
 This application contains 2 fxml files which contains view related code.  
 A java class which will be a controller for the respective fxml and a launcher class (a application class.)

1. Sample.fxml

```
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.shape.*?>
<?import javafx.geometry.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml" fx:controller="demoshowhide.Sample">
  <children>
    <StackPane id="stackPane1" fx:id="parentStack" layoutX="68.0" layoutY="193.0" prefHeight="147.0" prefWidth="419.0">
      <children>

        <fx:include source="TextArea.fxml" />

        <TreeView id="treeView" fx:id="tree" prefHeight="200.0" prefWidth="200.0" visible="false">
          <TreeItem value="Case Full Name">
            <children>
              <TreeItem>
                <value>
                  <CheckBox id="checkBox1" prefWidth="180.0" text="ONE" />
                </value>
              </TreeItem>
              <TreeItem>
                <value>
                  <CheckBox id="checkBox2" prefWidth="180.0" text="TWO" />
                </value>
              </TreeItem>
              <TreeItem>
                <value>
                  <CheckBox id="checkBox3" prefWidth="180.0" text="THREE" />
                </value>
              </TreeItem>
            </children>
          </TreeItem>
        </TreeView>

      </children>
    </StackPane>

    <HBox id="hBox1" layoutX="102.0" layoutY="36.0" prefHeight="37.0" prefWidth="343.0" spacing="30.0">
      <children>
        <Button id="areaBtn" onAction="#loadTextArea" text="SHOW TEXT AREA" />
        <Button id="treeBtn" onAction="#loadTree" text="SHOW TREE VIEW" />
      </children>
    </HBox>

  </children>
</AnchorPane>
```

1. TextArea.fxml

```
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<TextArea id="textArea" xmlns:fx="http://javafx.com/fxml" fx:id="area" prefWidth="200.0" text="This is demo application ....text area control..." wrapText="true" />
```

1. Sample.java

```
package demoshowhide;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextArea;
import javafx.scene.control.TreeView;
import javafx.scene.layout.StackPane;

/**
 *
 * @author amol.hingmire
 */
public class Sample implements Initializable {

	@FXML
	private TreeView tree;
	@FXML
	private TextArea area;
	@FXML
	private StackPane parentStack;

	@FXML
	private void loadTree(ActionEvent event) {
		tree.setVisible(true);
		area.setVisible(false);
	}

	@FXML
	private void loadTextArea(ActionEvent event) {
		area.setVisible(true);
		tree.setVisible(false);
	}

	@Override
	public void initialize(URL url, ResourceBundle rb) {
		area = (TextArea) parentStack.lookup("#textArea");
	}
}
```

1. DemoShowHide.java

```
package demoshowhide;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author amol.hingmire
 */
public class DemoShowHide extends Application {

	private Stage stage;

	public static void main(String[] args) {
		Application.launch(DemoShowHide.class, args);
	}

	@Override
	public void start(Stage mainStage) throws Exception {
		stage = mainStage;
		Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
		Scene scene = stage.getScene();
		if (scene == null) {
			scene = new Scene(root);
			scene.getStylesheets().add(DemoShowHide.class.getResource("/demoshowhide/demo.css").toExternalForm());
			stage.setScene(scene);
		} else {
			stage.getScene().setRoot(root);
		}
		stage.sizeToScene();
		stage.show();
	}

	public Stage getStage() {
		return stage;
	}

}
```

**Description of Application code**

Here the application will start from DemoShowHide.java which a launcher/application class.

The FXMLLoader loads the fxml file i.e. Sample.fxml.

In the Sample.fxml file we used the include tag, which actually includes the code present in the other (included fxml i.e. source file) fxml file.

As the fxml file gets loaded its associated controller also gets initialized .

Here Sample.java gets initialized which is bound with Sample.fxml.

In its initialize () we performing the lookup to locate/get the desired Node.

To bind the control i.e. Node we use @FXML annotation.

*Note: For FXML details check out for official document at this link  
[http://docs.oracle.com/javafx/2/api/javafx/fxml/doc-files/introduction\_to\_fxml.html](http://docs.oracle.com/javafx/2/api/javafx/fxml/doc-files/introduction_to_fxml.html)*

- <https://twitter.com/intent/tweet?source=https://blog.e-zest.com/javafx-2-x-development-using-fxml/&text=JavaFX%202.x%20development%20using%20FXML>
- <https://www.facebook.com/sharer/sharer.php?u=https://blog.e-zest.com/javafx-2-x-development-using-fxml/>
- <https://www.linkedin.com/shareArticle?mini=true&url=https://blog.e-zest.com/javafx-2-x-development-using-fxml/&title=&summary=&source=>

### Similar Blog

[![Gradients In JavaFX](https://blog.e-zest.com/hs-fs/file-3395198484-png/blog-files/linear-gradient-1.png)](https://blog.e-zest.com/gradients-in-javafx-2/)

[Gradients In JavaFX](https://blog.e-zest.com/gradients-in-javafx-2/)

[One of the very interesting features of](https://blog.e-zest.com/gradients-in-javafx-2/)[JavaFX](https://blog.e-zest.com/javafx/) is its ability to have gradients (Linear or Radial) to the background color of the ...

By Sai Dandem Jul 19, 2012

[![Scroller control in JavaFX 2](https://blog.e-zest.com/hs-fs/file-3443237577-png/blog-files/scroller.png)](https://blog.e-zest.com/scroller-control-in-javafx-2/)

[Scroller control in JavaFX 2](https://blog.e-zest.com/scroller-control-in-javafx-2/)

<https://blog.e-zest.com/scroller-control-in-javafx-2/>[JavaFX 2.x](https://blog.e-zest.com/javafx/) has many fascinating and useful controls. Among them “TabPane” is also one of the control. Here I am not going in ...

By Sai Dandem Jun 13, 2012

[![Sliding in JavaFX (It’s all about clipping)](https://blog.e-zest.com/hs-fs/file-3443235682-png/blog-files/3stages.png)](https://blog.e-zest.com/sliding-in-javafx-its-all-about-clipping/)

[Sliding in JavaFX (It’s all about clipping)](https://blog.e-zest.com/sliding-in-javafx-its-all-about-clipping/)

<https://blog.e-zest.com/sliding-in-javafx-its-all-about-clipping/>[JavaFX](https://blog.e-zest.com/javafx/) animation package provides many amazing animation/transition effects. Let’s look into another effect, “Sliding” effect of ...

By Sai Dandem Apr 09, 2012

[![Percent Width for TableColumn in JavaFX 2.x TableView](https://blog.e-zest.com/hs-fs/file-3443235552-jpg/blog-files/table1.jpg)](https://blog.e-zest.com/percent-width-for-tablecolumn-in-javafx-2-x-tableview/)

[Percent Width for TableColumn in JavaFX 2.x TableView](https://blog.e-zest.com/percent-width-for-tablecolumn-in-javafx-2-x-tableview/)

[The moment I started working with TableView in](https://blog.e-zest.com/percent-width-for-tablecolumn-in-javafx-2-x-tableview/)[JavaFX](https://blog.e-zest.com/javafx/) 2.x, the first question raised in my mind is “Why there is no feature of ...

By Sai Dandem Apr 06, 2012

## Helping Organizations Thrive in the Digital Age

[Contact Us](https://www.e-zest.com/contact-us)

- [About](https://www.e-zest.com/about-us)
- [Services](https://www.e-zest.com/our-services)
- [Work](https://www.e-zest.com/our-work)
- [Insights](https://blog.e-zest.com/)
- [Healthcare](https://healthcare.e-zest.com/)
- [Accion Labs](https://www.accionlabs.com/)

- <https://www.linkedin.com/company/e-zest-solutions/>
- <https://twitter.com/ezest>
- <https://www.facebook.com/eZest/>
- <https://www.instagram.com/ezestsolutions/>
- <https://www.youtube.com/user/ezestcorporate>

- Dallas
- Detroit
- Hannover
- Vienna
- London
- Pune

 © 2025 e-Zest Solutions

- [Privacy Policy](https://www.e-zest.com/privacypolicy)
- [Cookie Policy](https://www.e-zest.com/cookie-policy)

 Contact us

 Contact us

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.