Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

A Complete Guide to JavaFX

In this article well learn how to deal with JavaFX and all its dependencies to develop client based applications

In this document, we will learn about JavaFX. So, before going deep into the technicalities of JavaFX, let’s first know what JavaFX is.

JavaFX is basically a platform using a set of media and graphic packages which allows developers to create, test, design, debug and implement client based applications for variety of platforms.

Key features of JavaFX

Some of the key features of JavaFX are mentioned in the pointers below:


  • Scene builder and FXML: JavaFX allows designers to code and construct the user interface in FXML (XML based declarative mark-up language) as well as can use the JavaFX scene builder. The scene builder helps to interactively design the GUI and produces FXML mark-up which can be imported to an IDE for the developers to include the business logic.
  • Java API’s: JavaFX accesses the Java library which includes interfaces and classes written using Java code.
  • CSS and UI controls: JavaFX comes along with all the built in UI controls required to build an application with all the necessary features. All the components can be customized and with CSS.
  • Web View: Web pages can be embedded within the applications build in JavaFX with the help of a web component which uses a technology known as WebKitHTML.
  • Canvas API: With JavaFX you can draw directly in any area of the JavaFX scene consisting of a single graphical node.
  • Multi-touch support: JavaFX comes along with support for multi-touch operations.
  • Rich text: JavaFX provides rich support of text such as text scripts which are complex and bi-directional texts. It also supports multi-line or multi-style texts.

JavaFX Screen Graph

In this section, we will learn how to work with JavaFX screen graph. The JavaFX screen graph allows you to easily create user interface graphically. It basically uses a tree data structure and maintains all the graphical objects of your application within an internal model. Internally it keeps a track of which object is to be displayed and which sections of the screen need to be redrawn. Basically, it allows you to use the screen graph API and its internal system automatically takes care of the rendering details. In this way, it enables you to minimize the amount of coding required to develop the application.

Structure

The structure of the JavaFX screen graph is mainly classified as:


  • Nodes: Each and every individual item present within the JavaFX screen graph.
  • Root Node: The first element or node of the tree structure. The root node will never have a parent node.
  • Branch Node: Any node that can be categorized into children nodes.
  • Leaf Node: Any node that cannot be categorized into children nodes.

A pictorial representation of the tree structure is given below:

Figure 1.Graphical representation of JavaFX screen graph structure

Understanding the API

The JavaFX screen graph does the coding automatically. It is important to know what exactly happens in the background. Let’s take an example of code to understand the API behind the scene:

We will first create a frame of the application. The code will be as follows:

Listing 1. A Simple Java creating frame of the application

  package fxscenegraphdemoproj;
   
  import javafx.application.Application;
  import javafx.scene.Group;
  import javafx.scene.Scene;
  import javafx.scene.paint.Color;
  import javafx.stage.Stage;
   
  public class MainFx extends Application {
   
     @Override
     public void start(Stage stage) {
         Group root = new Group();
         
  //Create Scene object and set it to the stage
  Scene scene = new Scene(root, 400, 400, Color.BLUE);
         stage.setTitle("First JavaFX Demo");
         stage.setScene(scene);
   
  //Display the stage
         stage.show();  
     } 
     public static void main(String[] args) {
         launch(args);
     }
  } 
  

The above code will result into a empty screen. The screen appears to be blue because the screen colour is filled with blue and since the root node does not consists of any child node the screen has nothing to display.

Let’s go ahead and add a child node. The code for the following is given below:

Adding a Leaf node:

Listing 2. A Sample Java code adding child node

 
  package fxscenegraphdemoproj;
   
  import javafx.application.Application;
  import javafx.scene.Group;
  import javafx.scene.Scene;
  import javafx.scene.paint.Color;
  import javafx.scene.shape.Rectangle;
  import javafx.stage.Stage;
   
  public class MainFxLeafNode extends Application {
   
     @Override
     public void start(Stage stage) {
         Group root = new Group();
         Scene scene = new Scene(root, 400, 400, Color.WHITE);
   
  //Create rectangle to add to the root element
         Rectangle r = new Rectangle(30,30,300,300);
         r.setFill(Color.YELLOW);
         root.getChildren().add(r);
         
  //Setting title
         stage.setTitle("JavaFX Demo Adding child node");
         stage.setScene(scene);
         stage.show();
     }
   
     public static void main(String[] args) {
         launch(args);
     }
  } 
  

After adding a leaf node the screen will appear as shown in the image below:

Figure 2. Graph demo adding leaf

You can also try and add some effects to the graphical objects with very less coding since all the graphical objects are managed internally by the screen graph.

In this example let’s try and add animation to the graphical object. The code to do the same is mentioned below:

This is a sample Java code for adding animation:

Listing 3. Sample Java code for adding animation

  package fxscenegraphdemoproj;
   
  import javafx.animation.FillTransition; 
  import javafx.application.Application; 
  import javafx.scene.Group; 
  import javafx.scene.Scene; 
  import javafx.scene.paint.Color; 
  import javafx.scene.shape.Rectangle; 
  import javafx.stage.Stage; 
  import javafx.animation.Timeline; 
  import javafx.animation.ParallelTransition; 
  import javafx.animation.RotateTransition; 
  import javafx.animation.ScaleTransition; 
  import javafx.animation.TranslateTransition; 
  import javafx.util.Duration; 
   
  public class MainFxAnimation extends Application { 
   
      @Override 
      public void start(Stage stage) { 
          //Create root and add child node
          Group root = new Group(); 
          Scene scene = new Scene(root, 600, 600, Color.WHITE); 
          Rectangle r = new Rectangle(0, 0, 350, 350); 
          r.setFill(Color.PINK); 
          root.getChildren().add(r); 
         
  //Set transition time
          TranslateTransition translate = 
          new TranslateTransition(Duration.millis(850)); 
          translate.setToX(400); 
          translate.setToY(400); 
         
  //Filling transition
          FillTransition fill = new FillTransition(Duration.millis(850)); 
          fill.setToValue(Color.YELLOW); 
         
  //Setting rotation time
          RotateTransition rotate = new RotateTransition(Duration.millis(850)); 
          rotate.setToAngle(350); 
               
  //Scaling transition
          ScaleTransition scale = new ScaleTransition(Duration.millis(850)); 
          scale.setToX(0.2); 
          scale.setToY(0.2); 
               
  //Setting parallel transition
          ParallelTransition transition = new ParallelTransition(r, 
          translate, fill, rotate, scale); 
          transition.setCycleCount(Timeline.INDEFINITE);
          transition.setAutoReverse(true); 
          transition.play(); 
               
  //Set title and display
          stage.setTitle("JavaFX Scene Graph Demo"); 
          stage.setScene(scene); 
          stage.show(); 
      } 
   
      public static void main(String[] args) { 
          launch(args); 
      } 
  } 

How to create your first JavaFX application

In order to create your first JavaFX application let us start with the universal example of ‘Hello World’ application. For this example, we have used NetBeans IDE. Before following the steps please ensure that the NetBeans IDE version that you are using has the support for JavaFX version.

To create your first application follow the steps mentioned below:


  1. Click the File menu and select New Project.
  2. Select JavaFX Application from the JavaFX application category.
  3. Click Next.
  4. Enter the project name as “HelloWorld” (you can also enter a name as per your choice). In this example we will use “HelloWorld”.
  5. Click Finish.

Once you click finish, NetBeans will open and populate a file as HelloWorld.java containing the following code as shown below:

Example code given below:

Listing 4. A Simple Java code showing complete implementation of a JavaFX application

  package fxscenegraphdemoproj;
   
  import javafx.application.Application;
  import javafx.event.ActionEvent;
  import javafx.event.EventHandler;
  import javafx.scene.Scene;
  import javafx.scene.control.Button;
  import javafx.scene.layout.StackPane;
  import javafx.stage.Stage;
   
  public class CompleteJavaFX extends Application {
      
      @Override
      public void start(Stage primaryStage) {
          Button button = new Button();
          button.setText("Say 'Hello to JavaFX'");
          button.setOnAction(new EventHandler<ActionEvent>() {
   
         @Override
         public void handle(ActionEvent event) {
                  System.out.println("Hello JavaFX!");
              }
          });
          
          StackPane rootmain = new StackPane();
          rootmain.getChildren().add(button);
   
          Scene scene = new Scene(rootmain, 400, 350);
   
          primaryStage.setTitle("Hello JavaFX!");
          primaryStage.setScene(scene);
          primaryStage.show();
      }
   public static void main(String[] args) {
          launch(args);
      }
  } 

Some of the important pointers this code consists are as follows:


  1. The main class extends the javafx.application.Application class. The main entry point is the start() method.
  2. The JavaFx screen graph uses stage and scene to prepatre the user interface container. The Stage class is the container on top-level and the Scene class is the container of all the other content.
  3. JavaFX displays the content of the scene in a hierarchy of nodes. Here, the StackPane object is the root node which is resizable.
  4. The StackPane node contains a child node which is basically a button control with an event handler and text. The event handler displays a message when the button is clicked.

How to run the application

Once you complete building the application it is time to run and test your efforts. To do so follow the steps mentioned below:


  1. Go to the Projects window, right click MainFxAnimation node and click Run.
  2. Click on the button.
  3. Check the NetBeans output window whether the text is printed.

Conclusion

So, hopefully now you have a fair idea of what JavaFX is, how it works and to get started by building your first application. This document covers the basic know how’s of JavaFX and tries to help you understand the concept and advantages of JavaFX.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login