Create a JavaFX application project, e. g. "FxInHtml".
Create your JavaFX application, e. g.:
package application;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
try {
Group root = new Group();
Label label = new Label( "Hello World!");
root.getChildren().add( label);
Scene scene = new Scene(root,200,200);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
in FxInHtml/src/application
Now you can use the javafx packager tool to do the rest. You can find it in the bin folder of your JDK installation. Note that in Java 7 it's called javafxpackager and in Java 8 it's called javapackager. Let's assume we use Java 8 and your development environment compiled the class files into the bin folder.
Open a command shell and navigate to the project folder FxInHtml.
Create a package using
javapackager -createjar -outdir compiled -outfile myapp -appclass application.Main -srcdir bin -v
Now you have an executable myapp.jar file in the compiled folder.
Create the jnlp and html files using
javapackager -deploy -outdir deployed -outfile outfile -width 400 -height 400 -name AppName -appclass application.Main -v -srcdir compiled
The important thing to note is that "srcdir" is never any dir with java classes and it's different per javapackager directive. The output directory of the one javapackager call is the source dir of the other.
Now that you invoked the command, you got a new folder "deployed" which contains all the files you need: myapp.jar, outfile.html, outfile.jnlp.
If you open the outfile.html in a browser, you can already see the embedded JavaFX application. Most probably you'll have to change the security settings, e. g. allow "file:/" applications to be executed. But bear in mind that you remove "file:/" again after development, it is a security risk. Or you could sign the jar files which you'll have to do in the end anyway. You can use javapacker for the signing as well.
That's it for the minimal and complete example.
But let's look into the generated files. The generated outfile.html looks like this:
<html><head>
<SCRIPT src="http://java.com/js/dtjava.js"></SCRIPT>
<script>
function launchApplication(jnlpfile) {
dtjava.launch( {
url : 'outfile.jnlp'
},
{
javafx : '8.0+'
},
{}
);
return false;
}
</script>
<script>
function javafxEmbed() {
dtjava.embed(
{
url : 'outfile.jnlp',
placeholder : 'javafx-app-placeholder',
width : 200,
height : 200
},
{
javafx : '8.0+'
},
{}
);
}
<!-- Embed FX application into web page once page is loaded -->
dtjava.addOnloadCallback(javafxEmbed);
</script>
</head><body>
<h2>Test page for <b>AppName</b></h2>
<b>Webstart:</b> <a href='outfile.jnlp' onclick="return launchApplication('outfile.jnlp');">click to launch this app as webstart</a><br><hr><br>
<!-- Applet will be inserted here -->
<div id='javafx-app-placeholder'></div>
</body></html>
In order to embed various JavaFX applications, you need to modify/duplicate this part:
dtjava.embed(
{
url : 'outfile.jnlp',
placeholder : 'javafx-app-placeholder',
width : 200,
height : 200
},
{
javafx : '8.0+'
},
{}
);
and reference the application in your html using the placeholder using this div tag
<div id='javafx-app-placeholder'></div>
eg if you have an additional barchart.jnlp, you add it like this (I removed the webstart part since we want our app to be embedded):
<html><head>
<SCRIPT src="http://java.com/js/dtjava.js"></SCRIPT>
<script>
function javafxEmbed() {
dtjava.embed(
{
url : 'outfile.jnlp',
placeholder : 'javafx-app-placeholder',
width : 200,
height : 200
},
{
javafx : '8.0+'
},
{}
);
dtjava.embed(
{
url : 'barchart.jnlp',
placeholder : 'barchart-placeholder',
width : 400,
height : 400
},
{
javafx : '8.0+'
},
{}
);
}
<!-- Embed FX application into web page once page is loaded -->
dtjava.addOnloadCallback(javafxEmbed);
</script>
</head><body>
<h2>Test page for <b>AppName</b></h2>
<!-- Applet will be inserted here -->
<div id='javafx-app-placeholder'></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tem
<div id='barchart-placeholder'></div>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa ...
</body></html>
