Hello World Widget Sample

For the purpose of this example we are going to use NetBeans as the IDE. There is no requirement to use the NetBeans editor, and everything shown can be accomplished with command line tools or your editor of choice.

Setting Up Your Environment

You need the following technologies to get started developing WidgetFX

• Java SE Update 10 JRE and JDK (for transparency, shaped windows, and performance)
• JavaFX SDK with NetBeans 6.1
• Latest WidgetFX SDK

Downloading Java SE Update 10

To install the Java SE Update 10, do the following:

1. Go to the Java SE 10 download page: http://download.java.net/jdk6/
2. Download and install the JRE installer for your platform of choice
3. Also, download and install the JDK installer

Make sure to check back frequently and get the latest build.

Getting the latest version of the JavaFX SDK

To install the JavaFX SDK:

1. Go to the JavaFX SDK Website: http://java.sun.com/javafx/downloads/
2. Find the download link for NetBeans IDE 6.1 with JavaFX (recommended)
• Alternatively, there is a download for the JavaFX plug-in if you dig deep enough
• If you follow this path, make sure to update your existing NetBeans install to use Java SE Update 10

Make sure to specify Java SE Update 10 as the JDK for NetBeans when you first start it. For more info on changing the NetBeans JDK, refer to the NetBeans FAQ: http://wiki.netbeans.org/FaqJdkHome

Downloading the WidgetFX SDK

To download the latest version of the WidgetFX SDK.

1. Go the WidgetFX project page: http://code.google.com/p/widgetfx/
2. There should be a link to download the latest SDK on the home page
3. Extract the Zip file in your location of choice

Setting Up the NetBeans Project

To start with, create a new JavaFX project in NetBeans by choosing New Project from the File menu:

Select a JavaFX Script Application as your project type and click Next.

In the second page of the wizard, choose a name for the project ("HelloWorld" might be nice), and select options as shown in the picture:

Click Finish to create your HelloWorld project.

We also need to add in the widgetfx-api.jar and jnlp.jar files to the project for widget development. This can be found as part of the Widget SDK bundle.

Open the Project Properties dialog by selecting 'HelloWorld' Properties from the File menu. Click on the Libraries category and add widgetfx-api.jar and jnlp.jar by clicking the Add JAR/Folder button as shown in the following screenshot:

Coding the HelloWorld Widget

First, add a new empty JavaFX file to the project. It should be named "HelloWorld" and placed in the "tutorial" package.

You should have a simple file with just a package statement and comments. If NetBeans inserted a full class defnition, you can just delete that and continue on.

Creating a new widget is as simple as importing the org.widgetfx package and creating a new Widget instance. Here is an empty widget:

package tutorial;

import org.widgetfx.*;

Widget {
}

This is not very interesting, so let's add in a stage with a rectangle for the background:

...

import javafx.application.*;
import javafx.scene.text.*;

Widget {
    stage: Stage {
        content: Text {
            x: 10
            y: 20
            content: "Hello World"
        }
    }
}

The Widget class extends the JavaFX Application class so you can run it in directly in the Applet Runner to get a quick preview. To see what it looks like so far, right click on the HelloWorld.fx file and choose Run Applet:

The Applet Viewer is convenient, because it allows rapid development and preview cycles, but does not show the end product in a dockable window, and can't simulate advanced functionality like configuration.

Deploying the HelloWorld Widget

To run the HelloWorld widget in the WidgetFX doc, you need to turn on Web Start in the run configuration. To do this, open the Project Properties dialog and go to the WebStart tab. On this tab check Enable Web Start as shown in the following picture:

Next, go to the Run tab and select your main class ("tutorial.HelloWorld") and enable "Run with Java Web Start" by clicking on the last checkbox.

The final step is to Run the Main Project in NetBeans, which will automatically generate a JNLP file for you, start the WidgetFX dock, and deploy the widget in the dock. After this process is complete, you will see the following:

Congratulations on completing your first WidgetFX project!