This article explains how to get started with the JavaFX technology by using the NetBeans IDE for JavaFX.

In this article, you create an application that displays a docked icon. When you hover the icon with a mouse cursor, it starts bouncing. To stop the icon, point the cursor outside the icon. The application is shown in the following figure.

1. Ensure that you have the NetBeans IDE 6.9 Beta for JavaFX 1.3 software already installed on your system. If necessary, you can download the latest version from the Downloads page.
   
   
2. Start the NetBeans IDE.
   
   
3. Create a JavaFX Script Application project.
   
   
   1. Choose File > New Project (Ctrl-Shift-N on Windows).
      
      
   2. In the New Project wizard, select JavaFX in the Categories pane and JavaFX Script Application in the Projects pane. Click Next.
      
      
   3. On the Name and Location page, type FirstJavaFXApp for the Project Name, specify your desired location for the project's files in the Project Location text field, and leave all the other default values unchanged, as shown in Figure 1.
      
      

      Figure 1: New Project Wizard With Project Name and Location Specified

   4. Click Finish.
      
      The FirstJavaFXApp project opens in both the Projects window and the Files window, and the Main.fx file opens in the source editor, as shown in Figure 2.
      
      

      Figure 2: FirstJavaFXApp Project Opened in Projects Window and Main.fx File in the Source Editor

      Notice that JavaFX Script code is included within the Main.fx file by default. This code includes several import statements and object literals such as Stage. These Object literals represent key concepts within the JavaFX application, and are described in the following table.
      
      

      Table 1: Object Literals Created by Default

      Object Literal	Description
      Stage	The top level container window required to display any visible JavaFX objects. The default instance variables title, width and height define the text that appears on the window's top border and its height and width. The scene variable defines an instance of the Scene object literal which sets the area in which you can place the JavaFX objects.
      Scene	Similar to a drawing surface for the graphical content of your application. The scene instance variable has a content variable that is used to hold JavaFX graphical elements and defines the graphical content of your application. The instance variables, width and height, define the width and height of the content area. For more information about the Scene class, see Presenting UI Objects in a Graphical Scene, a lesson in Building GUI Applications With JavaFX.
      Text	Defines the graphical element that displays text in the scene.
      Font	Defines the font used to display the text in the scene.

      ---

      Note: For more information, see Using Objects, a lesson in Learning the JavaFX Script Programming Language.

      ---

4. In the JavaFX App project, create a folder named resources to store graphical images used in your application.
   
   
   1. In the Projects window, right-click the package name and choose New > Other.
      
      

   Figure 3: Adding a Folder to Store Graphical Resources

   2. In the New File dialog box, select Other under Categories and Folder under File Types. Click Next.
      
      
   3. Type resources in the Folder Name field and click Finish.
      
      
   4. Download the mailIcon.png and dock.jpg files and save them in the resources folder.
      
      
5. To work with images in JavaFX applications, you use the Image and ImageView classes. The Image class loads the image from the specified location. The ImageView class displays the image in your application. Create a variable to display the dock.jpg image.
   
   
   1. Copy the following lines in bold and paste them into the editor before the code for the Stage object. Notice that an error flag appears. This error is removed in the next step.

import javafx.scene.text.Font; 


def backGround = ImageView {
    image: Image {url: "{__DIR__}resources/dock.jpg"}
    }

Stage {
     title: "Application title"
     scene: Scene {

2. Right-click in any white space in the editor and select Fix Imports (Ctrl-Shift-I on Windows) to remove the error flag. You need to select the type of Image by double-clicking the javafx.scene.image.Image line.
   
   

Figure 4: Selecting Image Class When Fixing Imports

3. Similarly, select the type of ImageView by double-clicking the javafx.scene.image.ImageView line.
   
   The following import statements are added to the top of the Main.fx file.

import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

6. Modify the Stage object as shown in the following example so that the window has a title. Modify the Scene object to specify the size of the content area and to replace a text object with the image defined by the backGround variable.
   
   
   1. Type the new title of your application and specify the values of the width and height variables. Remove the code of the Text object and add the backGround variable to the content of the scene. You can copy the lines in bold and paste them into the editor.

Stage {
    title: "First JavaFX Application"
    scene: Scene {
        width: 362
        height: 150
        content: [
            backGround
        ]// content
    } // Scene 
}// Stage

2. Notice that warning flags appear, as you have unused imports now. This warning is removed by selecting the Fix Imports (Ctrl-Shift-I on Windows) command.

7. Declare the icon variable and add it to the scene as shown in the following example. Note the importance of order when adding nodes to the scene. You add the icon node after the backGround node so that the icon is displayed over the background.

import javafx.scene.image.ImageView; 


def icon = ImageView {
    image: Image {url: "{__DIR__}resources/mailIcon.png"}
    }
def backGround = ImageView {
    image: Image {url: "{__DIR__}resources/dock.png"}
    }

Stage {
     title: "First JavaFX Application"
     scene: Scene {
         width: 362
         height: 150
         content: [
             backGround,
             icon
        ]//content
    }//scene
}//Stage

8. Save the code (Ctrl-S on Windows) and turn on the Preview feature by clicking the Enable Preview button on the editor toolbar.
   
   A JavaFX Preview window shows the current state of your application, as shown in the following figure. The Preview feature enables you to view the saved state of the GUI design that you are creating. Whenever you want to preview the GUI of your application, save the code first.
   
   

   Figure 5: Current State of Application in JavaFX Preview Window

By default, a node is displayed at the point (0,0). Now you need to shift the icon so that it looks like a docked icon.

9. Shift the icon node by translating its coordinates along the X and Y axes as shown in the following example.
   

def icon = ImageView {
    image: Image {url: "{__DIR__}resources/mailIcon.png"}
    translateX: 133
    translateY: 30
    }
}

10. Define an animated behavior of the icon to move it up and down. The TranslateTransition class ideally fits this purpose, as it creates a move animation that spans the specified duration.
    
    
    1. Drag the Transitions > Translate Transition element from the Palette to the line just after the backGround variable. When you drag elements from the Palette, the IDE takes care of missing imports for you.
       
       

       Figure 6: Drag Translate Transition Element From Palette to Source Editor

    2. Declare a variable named transition that is an instance of the TranslateTransition class applied to the icon node.
       
       The rate of the icon's move is controlled by the duration and byY variables. Set the repeatCount variable to INDEFINITE, as animation will be started and stopped in response to mouse events.
       
       
    Notice that error flags appear, as some imports now are missing. You remove the errors in the next step.

var transition = TranslateTransition {
        duration: 650ms
        node: icon
        byY:- 25
        repeatCount: Timeline.INDEFINITE
        autoReverse: true
    }   

Stage {
    title: "First JavaFX Application"
    

3. Select the Fix Imports command. For the type of Timeline, select the javafx.animation.Timeline class.
   
   
The following import statement is added to the top of the Main.fx file.

import javafx.animation.Timeline;

11. Modify the code of the icon node to start the animation when the icon is hovered with a mouse cursor and pause the animation when the mouse cursor is taken away from the icon.
    
    
1. Drag the Actions > onMouseEntered element from the Palette to the icon variable initialization to define the onMouseEntered function, which is called when the mouse cursor enters the icon object.
   
   

   Figure 7: Drag onMouseEntered Element From Palette to Source Editor

2. Modify the code of the onMouseEntered function to start the animated transition as shown in the following example.

def icon = ImageView {
    image: Image {url: "{__DIR__}resources/mailIcon.png"}
    translateX: 133
    translateY: 30
    onMouseEntered: function (e: MouseEvent): Void {
           transition.play()
    }
    }

3. Notice that an error flag appears in the transition variable code. Hover the error flag with the mouse cursor to learn that you have a cyclic reference to the icon node. The error appeared after you added the onMouseEntered function that references the transition variable. Hover a warning flag to the left of the icon variable initialization line to view an editor hint to declare an explicit type of the icon variable. Modify your code as shown in the following example.

var icon: ImageView;
    icon = ImageView {
    image: Image {url: "{__DIR__}resources/mailIcon.png"}
    translateX: 133
    translateY: 30
    onMouseEntered: function (e: MouseEvent): Void {
        transition.play()
    }//onMouseEntered
    }

4. Drag the Actions > onMouseExited element from the Palette to the icon variable initialization after the onMouseEntered function to define the onMouseExited function, which is called when the mouse cursor exits the icon object.
   
   Modify the code of the function to pause the animated transition.

var icon: ImageView;
    icon = ImageView {
    image: Image {url: "{__DIR__}resources/mailIcon.png"}
    translateX: 133
    translateY: 30
    onMouseEntered: function (e: MouseEvent): Void {
        transition.play()
    }//onMouseEntered
    onMouseExited: function (e: MouseEvent): Void {
        transition.pause()
    }//onMouseExited
    }
    

12. Save the code and run the project.
    
    
    1. In the Projects window, right-click the FirstJavaFXApp project node and select Run Project.
       
       The IDE compiles the project and prepares the files necessary to run the application using the standard execution model. When the project is compiled successfully, an icon is displayed in the center of the application window.
       
       
    Congratulations! You have just created your first JavaFX application.

Where to Go Next

• Learning the JavaFX Script Programming Language
• Building GUI Applications With JavaFX