在 HTML 网页中嵌入 JavaFX 应用程序 [英] Embed a JavaFX application in a HTML webpage
问题描述
我想在网页上嵌入一个或多个 JavaFX 应用程序.你是怎么做到的?
Oracle 网站上有一些零碎的内容，但没有完整的示例.
有在浏览器中部署教程，Packaging Basics 教程等.这里提到了 Ant 任务，什么也没有.
所以我看完之后还是有很多问题.比如我需要 Ant 吗?我需要创建一个小程序吗?等
我只想看到一个最小且完整的Hello World"示例，以了解它是如何工作的.即使在 StackOverflow 上也只是对同一问题的回答的点点滴滴，所以这并没有真正的帮助.
我昨天提出了这个问题，但删除了它并想我自己试试.事实证明，只有当你知道陷阱时，这才容易.因此，既然这里已经问过了，我想我会在答案中分享我的最小和完整示例.
使用 JavaFX 示例只需几分钟即可创建此 html 页面的代码:
创建 JavaFX 应用程序项目，例如.G.FxInHtml".
创建您的 JavaFX 应用程序，例如.:
打包应用程序；导入 javafx.application.Application;导入 javafx.scene.Group;导入 javafx.scene.Scene;导入 javafx.scene.control.Label;导入 javafx.stage.Stage;公共类 Main 扩展应用程序 {@覆盖公共无效开始(阶段primaryStage){尝试 {组根 = new Group();Label label = new Label( "Hello World!");root.getChildren().add(label);场景场景 = 新场景(root,200,200);primaryStage.setScene(场景)；primaryStage.show();} 捕获(异常 e){e.printStackTrace();}}公共静态无效主(字符串 [] args){发射(参数)；}}在 FxInHtml/src/application
现在您可以使用 javafx 打包工具来完成剩下的工作.您可以在 JDK 安装的 bin 文件夹中找到它.请注意，在 Java 7 中它被称为 javafxpackager，在 Java 8 中它被称为 javapackager.假设我们使用 Java 8，并且您的开发环境将类文件编译到 bin 文件夹中.
打开命令外壳并导航到项目文件夹 FxInHtml.
使用
创建一个包javapackager -createjar -outdir 编译 -outfile myapp -appclass application.Main -srcdir bin -v现在您在编译文件夹中有一个可执行的 myapp.jar 文件.
使用
创建 jnlp 和 html 文件javapackager -deploy -outdir 部署 -outfile outfile -width 400 -height 400 -name AppName -appclass application.Main -v -srcdir 编译需要注意的重要一点是，srcdir"从来都不是带有 java 类的任何目录，并且每个 javapackager 指令都不同.一个 javapackager 调用的输出目录是另一个的源目录.
现在您调用了该命令，您将获得一个新文件夹deployed"，其中包含您需要的所有文件:myapp.jar、outfile.html、outfile.jnlp.
如果您在浏览器中打开 outfile.html，您已经可以看到嵌入的 JavaFX 应用程序.很可能您必须更改安全设置，例如.G.允许执行文件:/"应用程序.但请记住，您在开发后再次删除file:/"，这是一个安全风险.或者您可以对最终必须执行的 jar 文件进行签名.您也可以使用 javapacker 进行签名.
这就是最小且完整的示例.
<小时>但是让我们看看生成的文件.生成的 outfile.html 如下所示:
<SCRIPT src="http://java.com/js/dtjava.js"></SCRIPT><脚本>功能启动应用程序(jnlpfile){dtjava.launch({网址:'outfile.jnlp'},{javafx:'8.0+'},{});返回假；}<脚本>函数 javafxEmbed() {dtjava.embed({url : 'outfile.jnlp',占位符:'javafx-app-placeholder'，宽度 : 200,高度:200},{javafx:'8.0+'},{});}<!-- 加载页面后将 FX 应用程序嵌入到网页中 -->dtjava.addOnloadCallback(javafxEmbed);</head><body><h2><b>AppName</b></h2>的测试页面<b>Webstart:</b><a href='outfile.jnlp' onclick="return launchApplication('outfile.jnlp');">单击以作为 webstart 启动此应用程序</a><br><hr><br><!-- 小程序将插入此处--><div id='javafx-app-placeholder'></div></body></html>为了嵌入各种JavaFX应用，需要修改/复制这部分:
dtjava.embed({url : 'outfile.jnlp',占位符:'javafx-app-placeholder'，宽度 : 200,高度:200},{javafx:'8.0+'},{});并使用此 div 标记使用占位符在 html 中引用应用程序
例如，如果你有一个额外的 barchart.jnlp，你可以像这样添加它(我删除了 webstart 部分，因为我们希望我们的应用程序被嵌入):
<SCRIPT src="http://java.com/js/dtjava.js"></SCRIPT><脚本>函数 javafxEmbed() {dtjava.embed({url : 'outfile.jnlp',占位符:'javafx-app-placeholder'，宽度 : 200,高度:200},{javafx:'8.0+'},{});dtjava.embed({网址:'barchart.jnlp'，占位符:'条形图占位符'，宽度 : 400,高度:400},{javafx:'8.0+'},{});}<!-- 加载页面后将 FX 应用程序嵌入到网页中 -->dtjava.addOnloadCallback(javafxEmbed);</head><body><h2><b>AppName</b></h2>的测试页面<!-- 小程序将插入此处--><div id='javafx-app-placeholder'></div>Lorem ipsum dolor sat 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 exeritation ullamco Laboris nisi ut aliquip ex ea commodo consequa ...</body></html>I'd like to embed one ore more JavaFX applications on a webpage. How do you do that?
There are several bits and pieces on the Oracle website, but there's no complete example.
There's the Deployment in the Browser tutorial, the Packaging Basics tutorial, etc. There's mentioning of Ant tasks and what not.
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
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.
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:
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>
这篇关于在 HTML 网页中嵌入 JavaFX 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
