Getting Started with JavaFX Composer

Written by Irina Filippova

Welcome to JavaFX Composer in the NetBeans IDE!

This tutorial provides a quick introduction to building JavaFX applications in the JavaFX Composer visual editor.

JavaFX Composer is a visual layout tool that lets you quickly build JavaFX GUI applications. JavaFX Composer is similar to the Swing GUI Builder for Java SE applications.

This document is a starting point to learning the visual editing capabilities provided by JavaFX Composer. It describes a very simple example of a JavaFX application for you to get started. Once you finish it, you will have a general knowledge of how to create and run applications in JavaFX Composer. The document includes three main sections: Creating Your First Application, Adding Effects, and Adding Action to Your Application. Upon completion of each section, you will get a working JavaFX application. You can also download the complete sample application project that you should obtain upon tutorial completion.

Contents

• Installing JavaFX Composer
• Creating a Project
• Creating Your First Application
• Adding Effects to Your Application
  • Working with Shapes: Adding a Circle
  • Working with Colors: Adding a Color to the Shape
  • Working with Effects: Applying the Inner Shadow Effect
  • Working with Fonts: Applying Fonts
• Adding Action to Your Application
• Running the Application
• More Exercises
• Next Steps

To complete this tutorial, you need the following software and resources.

Software or Resource	Version Required
NetBeans IDE	JavaFX download option
Java Development Kit (JDK)	JDK 6 Update 13 or later

Note: JavaFX 1.3 requires JDK 6, and the minimum version is JDK 6 Update 13. With earlier JDK versions, JavaFX support does not work. See System Requirements for JavaFX Technology for more information about the required software versions.

Installing JavaFX Composer

You can install JavaFX Composer in the following ways:

• From the JavaFX distribution of NetBeans IDE 6.9. Download the NetBeans IDE JavaFX installer for your operating system and follow the wizard's instructions.
• From the NetBeans IDE Update Center as a plugin. If you use another distribution of the NetBeans IDE and want to add JavaFX support, in the IDE, choose Tools > Plugins. Go to the Available Plugins tab and select the JavaFX Composer checkbox.

Along with JavaFX Composer, the following software components are installed automatically:

• JavaFX 1.3 SDK
• JavaFX Script language support for the NetBeans IDE (JavaFX editor)
• JavaFX sample applications for the NetBeans IDE

Creating a Project

To create a project to work with JavaFX Composer:

1. In the IDE, choose File > New Project (Ctrl-Shift-N).
2. In the New Project wizard, choose the JavaFX category and select JavaFX Desktop Business Application as project type.
   

   Note: With JavaFX Composer, you can use two types of projects: JavaFX Desktop Business Application and JavaFX Mobile Business, which differ by the target device type. The JavaFX Script Application project type is used with the JavaFX Script plugin.

   
   
3. In the Name and Location page of the wizard, do the following:
   • In the Project Name field, type HelloWorldApp.
   • Specify the project location.
   • Leave the Set as Main Project and Create Design File checkboxes selected.
     
4. Click Finish.

The project is created and opened in the IDE. You should see the following components:

• The Projects window, which contains a tree view of the project, including source files, libraries that your code depends on, and so on.
  Note that the IDE created the Main.fx file and placed it to the helloworldapp package. This file will contain the code for your application.
• The States Editor window, where you work with states and state variables. An application changes behavior or appearance when transiting from one state to another.
• The Design Area, on which you add and reorder the components of your JavaFX application. The white area represents a scene, which is a visible part of your application.
• The Navigator window, which you use to quickly select and navigate between application components, resources, templates and so on.
• The Palette window contains the JavaFX Scripting language components that you drag and drop onto the Design area.
• The JavaFX Composer Properties window which lets you edit and configure the properties of all JavaFX components.

Creating Your First Application

In this step, we will create the simplest "Hello World" application in JavaFX Scripting language using JavaFX Composer.

1. In the Palette window, expand the JavaFX Controls section and add the Label component to the scene.
   
2. Select the Label element on the scene. In the Properties window, type "Hello JavaFX!" in the Text field.
   
3. Save changes. Choose Run Main Project or press F6 to run your application.
   By using the Run command, you can quickly review the impact of your changes, without building the project after each cycle of change.
   
   

   Note: The application opens in a separate window, whose size depends on the settings selected from the drop-down list on the Editor toolbar. It is possible to select from the predefined viewport sizes for various devices. If the icon is selected, the scene size will be synchronized with the selected viewport size. For the purpose of this simple tutorial, you can use the default viewport size, which is Dialog 480 x 320 pixels.

Adding Effects to the Application

In the previous step, you created the simplest "Hello World" application. Now, let's make it more attractive by adding several effects. We will insert the text into a colored circle and modify the font.

Working with Shapes: Adding a Circle

1. From the Palette, find a Circle component in the Shapes section and drop it onto the scene.
   Note that in the Navigator window, the Circle component instance is now added under the Scene node. Click the element name in the Navigator to have it selected on the scene and edit its properties.
   
   
2. In the Properties window for the Circle element, enter 90 in the Radius field to set the circle radius to 90 pixels.
3. Set the circle's opacity to 0.7, because we need the circle to be more transparent.
   

   Note: For the purpose of this tutorial, we modify only the circle's radius size and opacity. However, in the Properties window, you can modify more variables, as specified in the JavaFX API. To open the JavaFX Javadoc from the IDE and see what variables you can set, choose Help > Javadoc References > More Javadoc from the IDE's menu. The JavaFX API documentation is included into the NetBeans IDE distribution.

   
   

Working with Colors: Adding a Color to the Shape

In JavaFX Composer, colors are handled as resources. In other words, at first you need to create a "color" resource, modify its properties as needed, and then apply it to a component. In this exercise, we are going to fill the circle with a color.

1. Drag the Color effect from the Resources section of the Palette window and drop it on any place in the scene.
   The Choose Color window opens.
   
2. Select the color you need from the Choose Color window. For example, let's select some blue color and click OK.
   

   Note: The color appeared as a resource in the Navigator window. If you want to make further modifications to this color, select it in the Navigator window and modify its properties in the Properties window. You can also delete a resource from the Navigator window.

3. Now we apply the color to the circle. In the Navigator window, select the circle component instance under the Scene node.
4. In the Properties window for the circle, choose color from the Fill drop-down list. The circle in the Design area becomes colored.
   If you want to use another color in your application, add another Color instance from the Resources section and repeat the above steps.
   

Working with Effects: Applying the Inner Shadow Effect

The JavaFX language specification supports a rich set of effects, which enhance the graphical representation of JavaFX applications. In this step, we will add the Inner Shadow effect to the circle to make it look more as a sphere. Note that you can also obtain a similar result by using other effects.

1. From the Palette window, drag the Inner Shadow effect from the Effects section and drop it inside the circle on the Design area.
   In this case, you will be able to instantly see how the effect modifies the circle's appearance in its preview on the Design area. Also note that the InnerShadowEffect effect instance has been added as a resource in the Navigator window.
2. In the Properties window for the Inner Shadow effect, modify the JavaFX variables as shown in the figure below. You can experiment with your own values, but in this case your result will be different from our example.
   
   Specifically, we modified the following properties:
   
   • Identifier - the name of the resource used to identify it in the Navigator window. In our case, this is a default name, innerShadowEffect.
   • Blur type - an algorithm used to blur the shadow. In our case, we chose Gaussian, as it results in a very smooth shadow.
   • Choke - the choke of the shadow. The value should be in the range from 0 to 1, and we set it to 0.16.
   • Color - the shadow's color. You can choose one the two default colors: black or white or use a custom color. To add a custom color for the Inner Shadow effect, click the "plus" icon next to the Color text box. How to work with colors is described above, in Working with Colors.
   • Offset X and Offset Y - the offset of the shadow in the X and Y directions (in pixels), respectively.
   • Width - the horizontal size of the shadow blur kernel.
   • Height - the vertical size of the shadow blur kernel.
   • Radius - the radius of the shadow blur kernel.
3. Now, let's add the effect to the circle. In the Navigator window, select the Circle component instance.
4. In the Properties window for the Circle, click the Style icon to expand the Style category. From the Effects drop-down list, choose innerShadowEffect.
   
   The effect is now applied to the circle. You should see something similar to the picture below.
   

Note: On the top panel above the States editor, you will see a warning that this effect is supported only for the Desktop profile. For now, you may disregard it, as we do not have a goal to make the application work identically on different devices. You just need to be aware that some JavaFX Scripting language constructs are not supported by the Common profile (i.e. both on desktop and mobile), which means that on mobile devices, such constructs will be rendered differently than on desktops.

Working with Fonts: Applying Fonts

In this step, let's slightly modify the font that we are using for the label "Hello JavaFX!". JavaFX Composer handles fonts as resources, which means that at first, you need to add it as a resource, customize it, and then apply it to an element. In our case, we will show an example of a simple font transformation.

1. From the Palette window, drag the Font component from the Resources section and drop it on any place in the Design area.
   Note that the font component instance was added under Resources in the Navigator window.
2. In the Properties window for the font, enter Arial into the Name field and 22 in the Size field.
   
3. Now let's apply the font to our "Hello JavaFX!" label. In the Navigator window, select label under the Scene node. In the Properties window, choose font from the Font drop-down list to apply it to the label.
   The font of the label text has changed.
4. Drag the label onto the circle.
5. Save your changes and run the application (F6).
   Your application should look similar to the one below.
   

Adding Action to Your Application

In this part of the tutorial, we are going to change the behavior of the application. To do this, we will add a button that will rotate the text. In JavaFX Composer, such kinds of transitions or changes are handled through states. A state is a set of particular properties that exist during a given time. An application can have several states. When the application is running and the states are being switched, these changes in properties look like animation or actions. For more information about working with states see Application States in JavaFX Composer.

1. From the Palette window, drag and drop the Button component onto the Design area somewhere outside of the circle. Set the value of its Text property to Rotate.
   
2. In the Properties window for the button, click the Generate icon next to the Action field and choose Go to Next state.
   The editor switches to the Source view to the generated function for the button
   
3. In the Source view, change the generated function from from currentState.next(); to currentState.nextWrapped();
   You enabled an action for the Rotate button, which is to move to the next state each time the button is pressed.
   
   
4. Let's create a new state called Start, which will be used as a start state for our application. It is a best practice to set a separate state as a start state so that the master state is never used on its own. The Start state inherits all the values of the default master state. For more information about the master and created states, see the Master State and Created States section of the Application States in JavaFX Composer tutorial.
   
   
   1. In the States Editor, click the icon to add a new state.
   2. In the State name field, type Start.
      Note that the only option that is selected is Inherited from master state. This means that the new state inherits all the properties from the default Master state.
      
   3. Leave the Set as start state checkbox selected.
      
      
5. Create a new state called Rotate. In this state, the label text "Hello JavaFX!" will be rotated by 180 degrees.
   To create this state, click the icon . In the Add state dialog box, type in the state name Rotate and choose Duplicate from Start.
   
   
6. Modify the rotation value for the label in the Rotate state.
   Ensure that the Rotate state is selected in the States Editor window. Select the label in the Navigator, and in the Properties window for the label, set its Rotate value to 180.
   
   
7. Save changes to your project.

Running the Application

Now, when you are ready to run your application, let's explore the Run options for JavaFX applications.

From the NetBeans IDE, JavaFX applications can run in the following modes. These modes are specified on the Run tab of the Project Properties window (right-click the project, choose Properties > Run):

• Standard execution. The IDE runs the application from the class files in the project's dist folder. This option is enabled by default.
• Web Start execution. The IDE compiles your application and launches it through Java Web Start. You can find the artifacts required for Java Web Start (such as the .jar, .html, and .jnlp files) in the dist folder of your project.
• Run in browser. The IDE generates the necessary files, including the html file, and runs the application as an applet in the default web browser.
• Run in mobile emulator. The IDE executes the application using the built-in mobile emulator tool. This option is currently available on the Microsoft Windows platform only. To run applications in the mobile emulator, you must use the JavaFX Mobile Business Application type of projects.
• Run in TV emulator. The IDE runs the application in the built-in TV emulator for you to preview it on this device type.

In this tutorial, we run our project as an applet in the browser.

1. Save changes to your code.
2. Right-click the HelloWorldApp project, choose Properties and open the Run tab.
3. On the Run tab, select Run in Browser.
   

   To quickly change between Run options, you can save several configurations of your project. On the Run tab, click New near the Configuration drop-down list to add a configuration.

4. Switch to the Application tab and adjust the applet's weight and height in the Applet specific properties section, because the default dimensions are 200 x 200 pixels. For our application, set the dimensions to 500 x 500 pixels. Click OK.
5. Choose Run Project on the toolbar (the icon ).
   
   Congratulations! Your application works and is launched as an applet in the browser.
   

More Exercises

Play with JavaFX Composer sample projects that are packaged with the NetBeans IDE.

To open a sample, choose New Project > Samples > JavaFX. The JavaFX Composer samples are marked with deep blue icons.

Next Steps

You have been introduced to a general workflow for JavaFX Composer.

To learn more on how to work with JavaFX Composer, study other JavaFX Composer tutorials listed on the Java and JavaFX GUI Application Learning Trail.

To find more information about the JavaFX Scripting language and JavaFX Composer, check out the following resources:

• JavaFX Composer wiki
• JavaFX: the JavaFX technology official portal
• Planet JFX