我想在网页上嵌入一个或多个 JavaFX 应用程序。你是怎么做到的？
Oracle 网站上有一些零碎的东西，但没有完整的示例。
有Deployment in the Browser 教程，Packaging Basics 教程等。提到了 Ant 任务等等。
所以我读了之后还有很多问题。比如我需要蚂蚁吗？我需要创建一个小程序吗？等等
我只想看到一个最小且完整的“Hello World”示例，以了解它是如何工作的。即使在 StackOverflow 上，也只是同一问题的答案的零碎部分，因此并没有真正的帮助。
我昨天提出了这个问题，但删除了它并认为我会尝试自己。事实证明，只有当你知道陷阱时，它才容易。因此，既然这里已经问过这个问题，我想我会在答案中分享我最小且完整的示例。
使用 JavaFX 示例只需几分钟即可为该 html 页面创建代码：
【问题讨论】：
创建一个 JavaFX 应用程序项目，例如。 G。 “FxInHtml”。
创建您的 JavaFX 应用程序，例如。 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);
}
}
在 FxInHtml/src/应用程序中
现在您可以使用 javafx 打包工具来完成其余的工作。您可以在 JDK 安装的 bin 文件夹中找到它。请注意，在 Java 7 中它被称为 javafxpackager，而在 Java 8 中它被称为 javapackager。假设我们使用 Java 8，您的开发环境将类文件编译到 bin 文件夹中。
打开命令外壳并导航到项目文件夹 FxInHtml。
使用创建包
javapackager -createjar -outdir compiled -outfile myapp -appclass application.Main -srcdir bin -v
现在您在编译文件夹中有一个可执行的 myapp.jar 文件。
使用创建 jnlp 和 html 文件
javapackager -deploy -outdir deployed -outfile outfile -width 400 -height 400 -name AppName -appclass application.Main -v -srcdir compiled
需要注意的重要一点是，“srcdir”从来都不是 java 类的任何目录，并且每个 javapackager 指令都不同。一个 javapackager 调用的输出目录是另一个的源目录。
现在您调用了该命令，您得到了一个“已部署”的新文件夹，其中包含您需要的所有文件：myapp.jar、outfile.html、outfile.jnlp。
如果您在浏览器中打开 outfile.html，您已经可以看到嵌入式 JavaFX 应用程序。很可能您必须更改安全设置，例如。 G。允许执行“file:/”应用程序。但请记住，您在开发后再次删除“file：/”，这是一个安全风险。或者您可以签署最终必须执行的 jar 文件。您也可以使用 javapacker 进行签名。
这就是最小而完整的例子。
但是让我们看看生成的文件。生成的 outfile.html 如下所示：
<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>
为了嵌入各种JavaFX应用程序，您需要修改/复制这部分：
dtjava.embed(
{
url : 'outfile.jnlp',
placeholder : 'javafx-app-placeholder',
width : 200,
height : 200
},
{
javafx : '8.0+'
},
{}
);
并使用此 div 标签的占位符在您的 html 中引用应用程序
<div id='javafx-app-placeholder'></div>
例如，如果您有一个额外的 barchart.jnlp，您可以像这样添加它（我删除了 webstart 部分，因为我们希望嵌入我们的应用程序）：
<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>
【讨论】：