Applet Example

From Planet JFX

This example will walk through how to setup, code, build, and view a JavaFX applet in your web browser.

[edit] Requirements

Before you begin, you need to download and setup the JavaFX SDK. See Downloads on where to get it and how to setup your environment.

[edit] Folder structure

Once you have the compiler working, create a folder on your hard drive called hello. In that folder, create two text files

HelloApplet.fx
index.html

[edit] HelloApplet.fx Source Code

Let's populate our text files. The source code is below. Type this, or copy it, into the HelloApplet.fx file. We're not going to explain how Application results in an Applet so you're just going to have to deal with the cognitive dissonance on your own.

package hello;

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.paint.Color;
import javafx.scene.effect.DropShadow;


Stage {
    title: "My Applet"
    width: 250
    height: 80
    scene: Scene {
        content: Text {
            x: 10  y: 30
            font: Font { size: 24 }
            fill: Color.BLUE
            effect: DropShadow{ offsetX: 3 offsetY: 3}
            content: "Hello World!"
        }
    }
}

[edit] Compile and build jar file

Open a command prompt and navigate to your hello folder. Once there, execute the following command

> javafxc -d . HelloApplet.fx

This command will compile your javafx file. If it's successful, you shouldn't see any output and be back at the command prompt. Furthermore, a folder named hello will be created in your current folder that contains *.class files. If you have any errors, fix them now before proceeding. If you're good, execute the following command.

> jar cvf HelloApplet.jar hello/HelloApplet*.class

This will create a jar file that contains your applet. Now, let's setup to view it through our browser.

[edit] HTML Page

Now to build a page to view our applet. Open your index.html file and type, or copy, the following code into it.

<html>
    <head>
        <title>Wiki</title>
    </head>
    <body>
        <h1>Wiki</h1>
        <script src="http://dl.javafx.com/dtfx.js"></script>
        <script>
            javafx(
            {
                archive: "HelloApplet.jar",
                draggable: true,
                width: 150,
                height: 100,
                code: "hello.HelloApplet",
                name: "Wiki"
            }
        );
        </script>
    </body>
</html>

[edit] Result

Now, point your browser to your index.html file. You should be greeted with a standard "Hello world!" in the top left portion of the page.