Using JavaFX Scene Builder with Java IDEs

Previous

3 Using Scene Builder with IntelliJ IDEA

This chapter gives information on how to download and use the JavaFX 2 plugin that provides the JavaFX integration with the IntelliJ IDEA 12.1.

The JavaFX 2 plugin enables you to create a new JavaFX Application project, start Scene Builder from within the IDE, and run the Scene Builder HelloWorld sample application. It is assumed that you have already installed Scene Builder before continuing with the rest of this chapter. Go to the JavaFX Scene Builder Installation Guide for installation information.

Downloading and Installing IntelliJ IDEA

Use the information from http://www.jetbrains.com/idea/download/ to download and install the latest IntelliJ IDEA 12.1 version that includes the JavaFX 2 plugin.

Creating a New JavaFX Application

The JavaFX 2 plugin for IntelliJ IDEA 12.1 enables you to create a new JavaFX application template.

  1. From the IntelliJ IDEA welcome window, click the Create New Project, as shown in Figure 3-1.

    Figure 3-1 Select Create New Project in the Welcome Window

    Description of Figure 3-1 follows
    Description of "Figure 3-1 Select Create New Project in the Welcome Window"

  2. In the New Project dialog box, select JavaFX Application, specify the project information, as shown in Figure 3-2, and click Finish.

    The node for a new JavaFX application template is added to the Project tab in the main window.

    Figure 3-2 Specify the Project Information for the New JavaFX Application Project

    Description of Figure 3-2 follows
    Description of "Figure 3-2 Specify the Project Information for the New JavaFX Application Project"

  3. Expand the nodes for the project, as shown in Figure 3-3.

    Figure 3-3 Expand the Nodes in the Project Window

    Description of Figure 3-3 follows
    Description of "Figure 3-3 Expand the Nodes in the Project Window"

Starting Scene Builder from IntelliJ IDE

Included in a newly created JavaFX Application template is the sample.fxml, which you can open and edit using Scene Builder.

  1. In the Projects tab, right-click the sample.fxml file and select Open In Scene Builder, as shown in Figure 3-4.

    Figure 3-4 Open JavaFX Scene Builder to sample.fxml File

    Description of Figure 3-4 follows
    Description of "Figure 3-4 Open JavaFX Scene Builder to sample.fxml File"

  2. Specify the path to your Scene Builder installation the first time you try to open Scene Builder from within IntelliJ IDEA.

    Figure 3-5 Select Path to the Scene Builder Installation Folder

    Description of Figure 3-5 follows
    Description of "Figure 3-5 Select Path to the Scene Builder Installation Folder"

  3. Use the JavaFX Scene Builder User Guide document to learn more about the available Scene Builder features and the Getting Started with JavaFX Scene Builder tutorial to create a simple issue tracking application.

Where to Go From Here

Now that you are familiar with the integration between the Scene Builder tool and IntelliJ IDEA, look at JavaFX Scene Builder User Guide to learn more about the available Scene Builder features. Also, use the Getting Started with JavaFX Scene Builder to create a simple issue tracking application.

You can also try running the sample applications provided with the Scene Builder release. These samples are Netbeans projects, so use the information in the following section to learn how to use one of the samples using the IntelliJ IDEA.

Running Scene Builder Samples from IntelliJ IDEA

Use the following steps to run the HelloWorld sample that is included in the JavaFX Scene Builder samples bundle:

  1. Ensure that you have downloaded JavaFX Scene Builder Samples bundle from http://www.oracle.com/technetwork/java/javafx/downloads/index.html and extracted its contents.

  2. From the IntelliJ IDEA main window, click File and choose Import Project.

  3. Navigate to the location where you extracted the JavaFX Scene Builder samples and expand the HelloWorld sample folder. Select the src folder and click OK.

  4. In the Import Project wizard, keep the “Create project from existing sources” option selected and click Next.

  5. Type HelloWorld in the Project Name field and click Next.

  6. Leave the rest of the default choices and values specified in the Import Project wizard and continue to click Next until you see the Finish button. Click Finish.

  7. Choose to open the new project in the current window or open a new window.
    The new HelloWorld project is opened in the Project tab.

  8. In the Project tab, right-click the node for the HelloWorld project's Main class and choose Run Main.main() as shown in Figure 3-6.

    Figure 3-6 Run the Main Class File for HelloWorld Sample Application

    Description of Figure 3-6 follows
    Description of "Figure 3-6 Run the Main Class File for HelloWorld Sample Application"

    The window for the HelloWorld sample application appears on top of the IDEA window.

Previous