<main id="main-doc">
<section class="main-section">
<header><h1 id="N">Introduction</h1>
  <p>JavaFX is a library for building rich client applications with Java. It provides an API for designing GUI applications that run on almost every device with Java support.

In this tutorial, we're going to focus on and cover some its key capabilities and functionality.</p></header></section>
  <section class="main-section">
    <header><h1 id="A">JavaFX API</h1>
    <p>In Java 8, 9, and 10 no additional setup is necessary to start working with the JavaFX library. The project will be removed from the JDK starting with JDK 11.</p>
      <ol>
        <h2><li>Architecture</h2>
        <p>JavaFX uses hardware accelerated graphics pipeline for the rendering, known as Prism. What's more, to fully accelerate the graphics usage, it leverages either software or hardware rendering mechanism, by internally using DirectX and OpenGL.

JavaFX has a platform dependent Glass windowing toolkit layer to connect to the native operating system. It uses the operating system's event queue to schedule thread usage. Also, it asynchronously handles windows, events, timers.

The Media and Web engines enable media playback and HTML/CSS support.</p>
        <ul>
        <li>Stage is the main container and the entry point of the application. It represents the main window and passed as an argument of the start() method.</li>
        <li>Scene is a container for holding the UI elements, such as Image Views, Buttons, Grids, TextBoxes.</li>
        </ul>
        <p>The Scene can be replaced or switched to another Scene. This represents a graph of hierarchical objects, which is known as a Scene Graph. Each element in that hierarchy is called a node. A single node has its ID, style, effects, event handlers, state.

Additionally, the Scene also contains the layout containers, images, media.</p>
        </li>
      <h2><li> Threads</h2>
      <p>At the system level, the JVM creates separate threads for running and rendering the application:</p>
      <ul>
      <li>Prism rendering thread – responsible for rendering the Scene Graph separately.</li>
      <li>Application thread – is the main thread of any JavaFX application. All the live nodes and components are attached to this thread.</li>
      </ul>
      <h2><li>Lifecycle</h2>
      <p>The javafx.application.Application class has the following lifecycle methods:</p>
      <ul>
      <li>init() – is called after the application instance is created. At this point, the JavaFX API isn't ready yet, so we can't create graphical components here.</li>
      <li>start(Stage stage) – all the graphical components are created here. Also, the main thread for the graphical activities starts here.</li>
      <li>stop() – is called before the application shutdown; for example, when a user closes the main window. It's useful to override this method for some cleanup before the application termination.</li>
      </ul>
      <p>The static launch() method starts the JavaFX application.</p>
      <h2><li>FXML</h2>
      <p>JavaFX uses a special FXML markup language to create the view interfaces.

This provides an XML based structure for separating the view from the business logic. XML is more suitable here, as it's able to quite naturally represent a Scene Graph hierarchy.

Finally, to load up the .fxml file, we use the FXMLLoader class, which results in the object graph of the scene hierarchy.</p>
      </li>
    </ol></section>
     <section class="main-section"> 
       <h1 id="B">Getting Started</h1>
      <p>To get practical, and let's build a small application that allows searching through a list of people.

First, let's add a Person model class – to represent our domain:</p>
       <code>
1-public class Person {
    2-private SimpleIntegerProperty id;
    3-private SimpleStringProperty name;
    4-private SimpleBooleanProperty   isEmployed;
 5-
    6-// getters, setters
}</code>
       <p>Notice how, to wrap up the int, String and boolean values, we're using the SimpleIntegerProperty, SimpleStringProperty, SimpleBooleanProperty classes in the javafx.beans.property package.

Next, let's create the Main class that extends the Application abstract class:</p>
       <code>public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) throws Exception {
        FXMLLoader loader = new FXMLLoader(
          Main.class.getResource("/SearchController.fxml"));
        AnchorPane page = (AnchorPane) loader.load();
        Scene scene = new Scene(page);
 
        primaryStage.setTitle("Title goes here");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}</code>
       <p>Our main class overrides the start() method, which is the entry point for the program.

Then, the FXMLLoader loads up the object graph hierarchy from SearchController.fxml into the AnchorPane.

After starting a new Scene, we set it to the primary Stage. We also set the title for our window and show() it.

Note that it's useful to include the main() method to be able to run the JAR file without the JavaFX Launcher.</p>
  <ul>
    <h2><li>FXML View</h2></li>
       <p>Let's now dive deeper into the SearchController XML file.

For our searching application, we'll add a text field to enter the keyword and the search button:</p>
       <code> <AnchorPane
  xmlns:fx="http://javafx.com/fxml"
  xmlns="http://javafx.com/javafx"
  fx:controller="com.baeldung.view.SearchController">
    <children>
 
        <HBox id="HBox" alignment="CENTER" spacing="5.0">
            <children>
                <Label text="Search Text:"/>
                <TextField fx:id="searchField"/>
                <Button fx:id="searchButton"/>
            </children>
        </HBox>
 
    </children>
</AnchorPane> </code>
      <p>AnchorPane is the root container here, and the first node of the graph hierarchy. While resizing the window, it will reposition the child to its anchor point. The fx: controller attribute wires the Java class with the markup.

There are some other built-in layouts available:</p> 
       <ol>
       <li>BorderPane – divides the layout into five sections: top, right, bottom, left, center</li>
       <li>HBox – arrange the child components in a horizontal panel</li>
       <li>VBox – the child nodes are arranged in a vertical column</li>
       <li>GridPane – useful for creating a grid with rows and columns</li>
       </ol>
       <p>In our example, inside of the horizontal HBox panel, we used a Label to place text, TextField for the input, and a Button. With fx: id we mark the elements so that we can use them later in the Java code.

Then, to map them to the Java fields – we use the @FXML annotation:</p>
       
       <code>public class SearchController {
  
    @FXML
    private TextField searchField;
    @FXML
    private Button searchButton;
     
    @FXML
    private void initialize() {
        // search panel
        searchButton.setText("Search");
        searchButton.setOnAction(event -> loadData());
        searchButton.setStyle("-fx-background-color: #457ecd; -fx-text-fill: #ffffff;");
    }
}</code>
       <p>After populating the @FXML annotated fields, initialize() will be called automatically. Here, we're able to perform further actions over the UI components – like registering event listeners, adding style or changing the text property.

Finally, all of this logic described here will produce the following window:

</p>
       </ul>
</section>
</main>
<nav id="navbar">
<header><h1>JavaFx</h1></header>
  <div id="Introduction" class="r"><a href="N">Introduction</a></div>
  <div id="JavaFx API" class="r"><a href="A">JavaFX API</a></div>
  <div id="Getting started" class="r"><a href="b">Getting started</a>
    </div></nav>