javafx
WebViewとWebEngine

備考

ページの読み込み

WebView wv = new WebView();
WebEngine we = wv.getEngine();
we.load("https://stackoverflow.com");

WebViewはWebEngine周りのUIシェルWebEngine 。 UIとの非対話のためのほぼすべてのコントロールは、 WebEngineクラスを介して行われます。

WebViewのページ履歴を取得する

WebHistory history = webView.getEngine().getHistory();

履歴は基本的にエントリのリストです。各エントリは訪問されたページを表し、URL、タイトル、およびページが最後に訪問された日付などの関連ページ情報へのアクセスを提供する。

リストは、 getEntries()メソッドを使用して取得できます。 WebEngineがWeb上をナビゲートすると、履歴とエントリの対応するリストが変わります。リストはブラウザの動作に応じて拡大または縮小することがあります。これらの変更は、リストが公開するObservableList APIによって聴くことができます。

現在訪問しているページに関連付けられている履歴エントリのインデックスは、 currentIndexProperty()によって表されます。現在のインデックスは、 go(int)メソッドを使用して履歴内の任意のエントリにナビゲートするために使用できます。 maxSizeProperty()は、ヒストリリストのサイズである最大ヒストリサイズを設定します

以下は、 Web履歴項目のリストを取得して処理する方法の例です。

ComboBox （comboBox）は、履歴アイテムを格納するために使用されます。使用してListChangeListener上WebHistory ComboBox現在に更新されますWebHistory 。 ComboBoxは、選択したページにリダイレクトするEventHandlerあります。

final WebHistory history = webEngine.getHistory();

comboBox.setItems(history.getEntries());
comboBox.setPrefWidth(60);
comboBox.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent ev) {
        int offset =
                comboBox.getSelectionModel().getSelectedIndex()
                - history.getCurrentIndex();
        history.go(offset);
    }
});

history.currentIndexProperty().addListener(new ChangeListener<Number>() {

    @Override
    public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
        // update currently selected combobox item
        comboBox.getSelectionModel().select(newValue.intValue());
    }
});

// set converter for value shown in the combobox:
//   display the urls
comboBox.setConverter(new StringConverter<WebHistory.Entry>() {

    @Override
    public String toString(WebHistory.Entry object) {
        return object == null ? null : object.getUrl();
    }

    @Override
    public WebHistory.Entry fromString(String string) {
        throw new UnsupportedOperationException();
    }
});

表示されたWebページからJavascriptアラートをJavaアプリケーションログに送信します。

private final Logger logger = Logger.getLogger(getClass().getCanonicalName());

WebView webView = new WebView();
webEngine = webView.getEngine();

webEngine.setOnAlert(event -> logger.warning(() -> "JS alert: " + event.getData())); 

ウェブページ内のJavaアプリケーションとJavascript間の通信

WebViewを使用して独自のカスタムWebページを表示し、このWebページにJavascriptが含まれている場合、JavaプログラムとWebページのJavascriptとの間で双方向の通信を確立する必要があります。

この例では、このような通信を設定する方法を示します。

Webページには、入力フィールドとボタンが表示されます。ボタンをクリックすると、入力フィールドの値がJavaアプリケーションに送られ、処理されます。処理後、結果はJavascriptに送られ、結果はWebページに表示されます。

基本的な原則は、JavascriptからJavaへの通信のために、Webページに設定されたJavaでオブジェクトが作成されることです。もう一方の方向では、オブジェクトがJavaScriptで作成され、Webページから抽出されます。

次のコードはJavaの部分を示しています。

package com.sothawo.test;

import javafx.application.Application;
import javafx.concurrent.Worker;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;

import java.io.File;
import java.net.URL;

/**
 * @author P.J. Meisch ([email protected]).
 */
public class WebViewApplication extends Application {

    /** for communication to the Javascript engine. */
    private JSObject javascriptConnector;

    /** for communication from the Javascript engine. */
    private JavaConnector javaConnector = new JavaConnector();;

    @Override
    public void start(Stage primaryStage) throws Exception {
        URL url = new File("./js-sample.html").toURI().toURL();

        WebView webView = new WebView();
        final WebEngine webEngine = webView.getEngine();

        // set up the listener
        webEngine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {
            if (Worker.State.SUCCEEDED == newValue) {
                // set an interface object named 'javaConnector' in the web engine's page
                JSObject window = (JSObject) webEngine.executeScript("window");
                window.setMember("javaConnector", javaConnector);

                // get the Javascript connector object. 
                javascriptConnector = (JSObject) webEngine.executeScript("getJsConnector()");
            }
        });

        Scene scene = new Scene(webView, 300, 150);
        primaryStage.setScene(scene);
        primaryStage.show();

        // now load the page
        webEngine.load(url.toString());
    }

    public class JavaConnector {
        /**
         * called when the JS side wants a String to be converted.
         *
         * @param value
         *         the String to convert
         */
        public void toLowerCase(String value) {
            if (null != value) {
                javascriptConnector.call("showResult", value.toLowerCase());
            }
        }
    }
}

ページがロードされると、 JavaConnectorオブジェクト（内部クラスによって定義され、フィールドとして作成されます）が次の呼び出しによってWebページに設定されます。

JSObject window = (JSObject) webEngine.executeScript("window");
window.setMember("javaConnector", javaConnector);

javascriptConnectorオブジェクトは、次のWebページから取得されます。

javascriptConnector = (JSObject) webEngine.executeScript("getJsConnector()");

場合toLowerCase(String)からメソッドJavaConnector呼び出され、値に渡された変換された後を介して送り返されるjavascriptConnectorオブジェクト。

そして、これはhtmlとjavascriptのコードです：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Sample</title>
    </head>
    <body>
        <main>
    
            <div><input id="input" type="text"></div>
            <button onclick="sendToJava();">to lower case</button>
            <div id="result"></div>
    
        </main>
    
        <script type="text/javascript">
            function sendToJava () {
                var s = document.getElementById('input').value;
                javaConnector.toLowerCase(s);
            };
    
            var jsConnector = {
                showResult: function (result) {
                    document.getElementById('result').innerHTML = result;
                }
            };
    
            function getJsConnector() {
                return jsConnector;
            };
        </script>
    </body>
</html>

sendToJava関数は、Javaコードによって設定されたJavaConnectorのメソッドを呼び出します。

function sendToJava () {
    var s = document.getElementById('input').value;
    javaConnector.toLowerCase(s);
};

javascriptConnectorを取得するためにJavaコードによって呼び出される関数は、 jsConnectorオブジェクトを返します。

var jsConnector = {
    showResult: function (result) {
        document.getElementById('result').innerHTML = result;
    }
};
    
function getJsConnector() {
    return jsConnector;
};

JavaとJavascriptの間の呼び出しの引数型は、文字列に限定されません。可能な型と変換の詳細は、 JSObject APIのドキュメントを参照してください 。