Applet Example
From Planet JFX
This example will walk through how to setup, code, build, and view a JavaFX applet in your web browser.
Contents |
[edit] Requirements
Before you begin, you need to download and setup the JavaFX compiler. See How to Download the Latest Compiler Build Instead of Building It 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.
package hello;
import javafx.ui.*;
Applet{
content: Label {
text: "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] Fetch libraries
In order to view your applet, the browser needs to know about javafx classes. The libraries for these are contained in the javafx compiler you downloaded earlier. If you browse to the folder you extracted the compiler to, there should be a dist\lib folder. Copy the following files to a lib folder in your hello folder
- javafxrt.jar
- javafxc.jar
- Scenario.jar
[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>
<body>
<applet code="javafx.ui.Applet" width="400" height="100" archive="./HelloApplet.jar,./lib/javafxrt.jar,./lib/Scenario.jar,./lib/javafxc.jar">
<param name="AppletClass" value="hello.HelloApplet">
</applet>
</body>
</html>
[edit] Result
Now, point your browser to your hello/index.html file. You should be greeted with a standard "Hello world!" in the top left portion of the page.
