java 在 HTML 网页中嵌入 JavaFX 应用程序

Embed a JavaFX application in a HTML webpage

提问by Roland

I'd like to embed one ore more JavaFX applications on a webpage. How do you do that?

我想在网页上嵌入一个或多个 JavaFX 应用程序。你是怎样做的？

There are several bits and pieces on the Oracle website, but there's no completeexample.

Oracle 网站上有一些零碎的内容，但没有完整的示例。

There's the Deployment in the Browsertutorial, the Packaging Basicstutorial, etc. There's mentioning of Ant tasks and what not.

有浏览器教程中的部署、打包基础教程等。有提到 Ant 任务，什么没有。

So there were still a lot of questions after I read them. Like do I need Ant? Do I need to create an applet? etc

所以在我读完之后仍然有很多问题。比如我需要 Ant 吗？我需要创建一个小程序吗？等等

All I'd like to see is a minimal and complete "Hello World" example in order to see how it works. Even here on StackOverflow are only bits and pieces to answers of the same question, so that don't really help.

我只想看到一个最小且完整的“Hello World”示例，以了解它是如何工作的。即使在 StackOverflow 上，也只是对同一问题的回答的点点滴滴，所以这并没有真正的帮助。

I had this question up yesterday, but deleted it and thought I'd try myself. Turned out that it is only easy when you know the pitfalls. So since this was already asked here I thought I'd share my minimal and complete example in the answer.

我昨天有这个问题，但删除了它并想我自己试试。事实证明，只有当你知道陷阱时，这才容易。因此，由于这里已经问过这个问题，我想我会在答案中分享我的最小和完整示例。

Using the JavaFX samples it took only a few minutes to create the code for this html page:

使用 JavaFX 示例只需几分钟即可为此 html 页面创建代码：

回答by Roland

Create a JavaFX application project, e. g. "FxInHtml".

创建一个 JavaFX 应用程序项目，例如“FxInHtml”。

Create your JavaFX application, e. g.:

创建您的 JavaFX 应用程序，例如：

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

在 FxInHtml/src/应用程序中

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.

现在您可以使用 javafx 打包工具来完成剩下的工作。您可以在 JDK 安装的 bin 文件夹中找到它。请注意，在 Java 7 中它被称为 javafxpackager，在 Java 8 中它被称为 javapackager。假设我们使用 Java 8，并且您的开发环境将类文件编译到 bin 文件夹中。

Open a command shell and navigate to the project folder FxInHtml.

打开命令外壳并导航到项目文件夹 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.

现在您在编译文件夹中有一个可执行的 myapp.jar 文件。

Create the jnlp and html files using

使用创建 jnlp 和 html 文件

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.

需要注意的重要一点是，“srcdir”从来都不是带有 java 类的任何目录，并且每个 javapackager 指令都不同。一个 javapackager 调用的输出目录是另一个的源目录。

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.

现在您调用了该命令，您将获得一个新文件夹“deployed”，其中包含您需要的所有文件：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.

如果您在浏览器中打开 outfile.html，您已经可以看到嵌入的 JavaFX 应用程序。很可能您必须更改安全设置，例如允许执行“file:/”应用程序。但请记住，您在开发后再次删除“file:/”，这是一个安全风险。或者您可以对最终必须执行的 jar 文件进行签名。您也可以使用 javapacker 进行签名。

That's it for the minimal and complete example.

这就是最小和完整的例子。

---

---

But let's look into the generated files. The generated outfile.html looks like this:

但是让我们看看生成的文件。生成的 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>

In order to embed various JavaFX applications, you need to modify/duplicate this part:

为了嵌入各种JavaFX应用程序，您需要修改/复制这部分：

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 标记使用占位符在 html 中引用应用程序

<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):

例如，如果你有一个额外的 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>