Wikia

Planet JFX

Applet Example

Talk2
118pages on
this wiki

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

Requirements Edit

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.

Folder structure Edit

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

HelloApplet.fx Source Code Edit

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!"
        }
    }
}

Compile and build jar file Edit

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.


HTML Page Edit

Now to build a page to view our applet. Open your index.html file and type, or copy, the following line 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>

FXApplet

Result Edit

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.

Advertisement | Your ad here

Around Wikia's network

Random Wiki