JavaFX First Tutorial

In this section we will make a simple Hello World application. As it is gui so we will use gui elements to display the text. The first example will be done using command line tools. Make sure that you have Java5+ version installed in your machine, otherwise see Installing Java.

Let's write a script file using JavaFX script. This is similar to writing the program in Java language.

Let's write the script file which will display the Hello World. Name the script file as "HelloWorld.fx". Open the script file in any text editor and write the following

HelloWorld.fx

//Import is similar to Java language imports

import javafx.stage.Stage;

//Stage represents the top level container and will contain other things.

Stage { title: "Hello World" width: 400 height:400 }

Compile the file using javafx compile. Make sure the command line tools for JavaFx are in the path. The tools are in the bin folder of JavaFX installed directory.

javafxc HelloWorld.fx

Once the compilation happens successfully, there will be a HelloWorld.class file created in the directory. This is similar to normal Java program. To run the application, use javafx similar to java command.

javafx HelloWorld

It will open an empty widnow with title "HelloWorld". Now let's write a text on the window using other constructs

import javafx.stage.Stage;

//imports for JavaFX

import javafx.scene.Scene;

import javafx.scene.text.Font;

import javafx.scene.text.Text;

//Stage represents the top level container and will contain other things.

Stage {

   title: "Hello World"

   width: 400

   height:400

   //Definition of scene

   scene: Scene {

           content: [

       Text {

         content: "Hello World"

         x:10

         y:10

         font: Font {

           name: "courier"

           size: 12

         }

       }

           ]

   }

}

In the above code Scene contains all the content. In this case it has a Text element which is "Hello World". The content should be painted starting at x and y values with font courier and size 12. How the output will be will depend on the media.

Again run the javafxc and javafx tool. This time the window rendered will have Hello World on it.

JavaFX is a declarative language in the sense that we tell about the things that we want and leave it to the environment to handle it. The runtime decides as per the media how to handle the output.

Under the hood the JavaFX compiler generates a normal Java class file. If the generated HelloWorld.class file is decompiled, it will be a normal Java file

public class HelloWorld extends com.sun.javafx.runtime.FXBase implements com.sun.javafx.runtime.FXObject{

JavaFX framework shields the developer by exposing the gui constructs through simple declarative JavaFX script.

Running the Code in Eclipse

Make sure you have plugin installed in eclipse as per JavaFX Installation. Make a JavaFX project using Files->New->Other->JavaFX Project wizard. Note that the project structure is similar to a Java project. The difference is the JavaFX libraries being included in the build path. Make a new JavaFX script file in src folder. Name the file as HelloWorld.fx. Copy the HelloWorld.fx content as in the above example. Run the application as JavaFX application. (Click on Run->run and choose JavaFX application).

More on JavaFX