嵌入在HTML网页JavaFX应用程序 [英] Embed a JavaFX application in a HTML webpage
问题描述
我想在网页上嵌入一个或多个JavaFX应用程序。你是怎么做到的？
I'd like to embed one ore more JavaFX applications on a webpage. How do you do that?
有一些零零碎碎的Oracle网站上，但没有完成的例子。
There are several bits and pieces on the Oracle website, but there's no complete example.
还有的部署在浏览器中的教程中，的包装基础知识教程等还有的提Ant任务，什么不是。
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
所有我想看到的是为了看看它是如何工作的一个最小的，完整的Hello World的例子。即使在这里StackOverflow上只有星星点点对同一问题的答案，所以没有真正的帮助。
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.
的昨天我这个问题，但删除了它，我想我会尝试自己。原来，这只是简单的，当你知道的陷阱。所以，因为这是已经在这里问我想我会分享在回答我的最小和完整的例子。的
的使用JavaFX的样本只花了几分钟就创建code这个html页面：的
推荐答案
创建JavaFX应用程序的项目，如G。 FxInHtml。
Create a JavaFX application project, e. g. "FxInHtml".
创建JavaFX应用程序，如G：
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);
}
}
在FxInHtml / src目录/应用
in FxInHtml/src/application
现在，您可以使用JavaFX的打包工具做休息。你可以在你的JDK安装的bin文件夹中找到它。请注意，在Java 7中，它被称为和的javafxpackager在Java中8，它被称为javapackager。假设我们使用Java 8和开发环境编译的类文件到bin文件夹。
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.
打开命令外壳并导航到项目文件夹FxInHtml。
Open a command shell and navigate to the project folder FxInHtml.
使用创建一个包
javapackager -createjar -outdir compiled -outfile myapp -appclass application.Main -srcdir bin -v
现在你已经在编译的文件夹中的可执行文件myapp.jar
Now you have an executable myapp.jar file in the compiled folder.
使用创建JNLP和HTML文件
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
的要注意的重要一点是，SRCDIR是从来没有与Java类的目录，它的每javapackager指令不同。一javapackager调用的输出目录是其他的源文件目录。的
现在，您使用的命令，你得到了一个新的文件夹部署，它包含了所有你需要的文件：myapp.jar，outfile.html，outfile.jnlp
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.
如果您在浏览器中打开outfile.html，你已经可以看到嵌入的JavaFX应用程序。最可能的是，你必须更改安全设置，如G。允许的文件：/的应用被执行。但是，请记住，您删除文件：/的发展后，再次，它是一个安全隐患。或者你可以签，你就必须在最后做反正jar文件。您可以使用javapacker的签名也是如此。
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.
但是，让我们看看生成的文件。生成的outfile.html看起来是这样的：
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>
为了嵌入各种JavaFX应用程序，你需要修改/复制此部分：
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+'
},
{}
);
和使用占位符使用这个div标签在HTML中引用应用程序
and reference the application in your html using the placeholder using this div tag
<div id='javafx-app-placeholder'></div>
例如，如果你有一个额外的barchart.jnlp，您可以添加像这样（我删除了Webstart的一部分，因为我们希望被嵌入我们的应用程序）：
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屋！
