Incrustar una aplicación JavaFX en una página web HTML

Me gustaría incluir una o más aplicaciones JavaFX en una página web. ¿Cómo haces eso?

Hay varios fragmentos en el sitio web de Oracle, pero no hay un ejemplo completo .

Está el tutorial Implementación en el navegador , el tutorial de Conceptos básicos de empaquetado , etc. Se mencionan las tareas Ant y lo que no.

Entonces, todavía había muchas preguntas después de leerlas. ¿Como necesito Ant? ¿Necesito crear un applet? etc

Todo lo que me gustaría ver es un ejemplo mínimo y completo de “Hola mundo” para ver cómo funciona. Incluso aquí en StackOverflow son solo partes y piezas de respuestas de la misma pregunta, por lo que realmente no ayudan.

Tuve esta pregunta ayer, pero la eliminé y pensé que me probaría. Resultó que solo es fácil cuando conoces las trampas. Entonces, como esto ya fue preguntado aquí, pensé en compartir mi ejemplo mínimo y completo en la respuesta.

Usando los ejemplos de JavaFX, tardó solo unos minutos en crear el código para esta página html:

enter image description here

Cree un proyecto de aplicación JavaFX, por ejemplo, “FxInHtml”.

Crea tu aplicación JavaFX, por ejemplo:

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); } } 

en FxInHtml / src / aplicación

Ahora puede usar la herramienta de empaquetado de javafx para hacer el rest. Puede encontrarlo en la carpeta bin de su instalación JDK. Tenga en cuenta que en Java 7 se llama javafxpackager y en Java 8 se llama javapackager. Supongamos que usamos Java 8 y su entorno de desarrollo compiló los archivos de clase en la carpeta bin.

Abra un shell de comandos y navegue a la carpeta de proyectos FxInHtml.

Crea un paquete usando

 javapackager -createjar -outdir compiled -outfile myapp -appclass application.Main -srcdir bin -v 

Ahora tiene un archivo ejecutable myapp.jar en la carpeta comstackda.

Crea los archivos jnlp y html usando

 javapackager -deploy -outdir deployed -outfile outfile -width 400 -height 400 -name AppName -appclass application.Main -v -srcdir compiled 

Lo importante a tener en cuenta es que “srcdir” nunca es un directorio con clases Java y es diferente según la directiva javapackager. El directorio de salida de una llamada javapackager es el directorio origen de la otra.

Ahora que invocó el comando, tiene una nueva carpeta “desplegada” que contiene todos los archivos que necesita: myapp.jar, outfile.html, https://stackoverflow.com/questions/27958019/embed-a-javafx-application-in-a-html-webpage/outfile.jnlp.

Si abre el archivo outfile.html en un navegador, ya puede ver la aplicación JavaFX incorporada. Lo más probable es que deba cambiar la configuración de seguridad, por ejemplo, permitir que se ejecuten las aplicaciones “file: /”. Pero tenga en cuenta que elimina “file: /” nuevamente después del desarrollo, es un riesgo de seguridad. O bien, podría firmar los archivos jar que de todos modos tendrá que hacer al final. También puedes usar javapacker para la firma.

Eso es todo por el ejemplo mínimo y completo.


Pero echemos un vistazo a los archivos generados. El archivo generado outfile.html es así:

      

Test page for AppName

Webstart: click to launch this app as webstart


Para incrustar varias aplicaciones JavaFX, necesita modificar / duplicar esta parte:

 dtjava.embed( { url : 'https://stackoverflow.com/questions/27958019/embed-a-javafx-application-in-a-html-webpage/outfile.jnlp', placeholder : 'javafx-app-placeholder', width : 200, height : 200 }, { javafx : '8.0+' }, {} ); 

y haga referencia a la aplicación en su html usando el marcador de posición usando esta etiqueta div

 

por ejemplo, si tienes un barchart.jnlp adicional, lo agregas así (eliminé la parte de webstart porque queremos que nuestra aplicación esté integrada):

      

Test page for AppName

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tem
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa ...