java—在html网页中嵌入javafx应用程序

我想在网页上嵌入一个或多个javafx应用程序。你是怎么做到的？
甲骨文的网站上有一些零碎的东西，但没有完整的例子。
在浏览器教程、打包基础教程中都有部署，还有提到ant任务之类的。
所以我看了之后还有很多问题。我需要蚂蚁吗？我需要创建小程序吗？等
我只想看到一个最小的完整的“helloworld”示例，看看它是如何工作的。即使在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);
    }
}

在fxintml/src/application中
现在您可以使用javafx打包工具来完成剩下的工作。您可以在jdk安装的bin文件夹中找到它。注意，在Java7中称为javafxpackager，在Java8中称为javapackager。假设我们使用java8，并且您的开发环境将类文件编译到bin文件夹中。
打开命令shell并导航到项目文件夹fxintml。
使用创建包

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类的dir，而且每个javapackager指令都是不同的。一个javapackager调用的输出目录是另一个的源目录。
现在您调用了这个命令，您得到了一个新的文件夹“deployed”，其中包含您需要的所有文件：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>

java—在html网页中嵌入javafx应用程序

1条答案

相关问题

热门标签

最新问答