web-dev-qa-db-ja.com

JavaFXアプリケーションをHTMLWebページに埋め込みます

Webページにもう1つ以上のJavaFXアプリケーションを埋め込みたいのですが。どうやってそれをしますか？

OracleのWebサイトにはいくつかの断片がありますが、completeの例はありません。

ブラウザでの展開 チュートリアル、 パッケージングの基本 チュートリアルなどがあります。Antタスクとそうでないものについての言及があります。

ですから、読んだ後もまだまだたくさんの質問がありました。 Antが必要ですか？アプレットを作成する必要がありますか？等

私が見たいのは、それがどのように機能するかを確認するための最小限の完全な「HelloWorld」の例です。ここStackOverflowでさえ、同じ質問の答えのほんの一部にすぎないので、実際には役に立ちません。

昨日この質問がありましたが、削除して自分で試してみようと思いました。落とし穴を知っている場合にのみ簡単であることが判明しました。それで、これはすでにここで尋ねられたので、私は答えの中で私の最小限で完全な例を共有したいと思いました。

JavaFXサンプルを使用すると、このhtmlページのコードを作成するのに数分しかかかりませんでした：

enter image description here

javahtmljavafxapplet
8
Roland

JavaFXアプリケーションプロジェクトを作成します。 g。 「FxInHtml」。

JavaFXアプリケーションを作成します。例：

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/application内

これで、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ディレクティブごとに異なることです。1つのjavapackager呼び出しの出力ディレクトリは、のソースディレクトリです。他。

コマンドを呼び出したので、必要なすべてのファイル（myapp.jar、outfile.html、outfile.jnlp）を含む新しいフォルダー「deployed」を取得しました。

ブラウザで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>
14
Roland