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

Posted

技术标签:

【中文标题】在 HTML 网页中嵌入 JavaFX 应用程序【英文标题】:Embed a JavaFX application in a HTML webpage 【发布时间】:2015-03-13 12:38:25 【问题描述】:

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

Oracle 网站上有一些零碎的东西,但没有完整的示例。

有Deployment in the Browser 教程,Packaging Basics 教程等。提到了 Ant 任务等等。

所以我读了之后还有很多问题。比如我需要蚂蚁吗?我需要创建一个小程序吗?等等

我只想看到一个最小且完整的“Hello World”示例,以了解它是如何工作的。即使在 *** 上,也只是同一问题的答案的零碎部分,因此并没有真正的帮助。

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

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

【问题讨论】:

【参考方案1】:

创建一个 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>

【讨论】:

您的最终用户使用它有什么经验?例如,当我尝试网站上的一些示例时,我会收到下载提示,我需要双击并接受才能运行它。我真正想要的是用户打开一个网站并获得应用程序,跨平台并且没有问题。这可能吗? 请创建一个新问题,也许有人会正确回答。就我个人而言,我再也不会在 html 中嵌入一些东西了,因为 Oracle 将放弃对它的支持。网络浏览器开发人员已经这样做了。

以上是关于在 HTML 网页中嵌入 JavaFX 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

javaFX tableView中嵌入

在 JFXPanel 中嵌入 JavaFX 阶段(Swing 嵌入)

JxBrowser概述与简单应用

JxBrowser概述与简单应用

是否可以在 JavaFX 应用程序中嵌入 Swing 组件?

如何在 JavaFx 2.2 中嵌入 .ttf 字体?