javafx
WebView 및 WebEngine

비고

페이지로드

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

WebView 는 WebEngine 주변의 UI 셸입니다. 페이지와의 비 UI 상호 작용을위한 거의 모든 컨트롤은 WebEngine 클래스를 통해 수행됩니다.

WebView의 페이지 기록 가져 오기

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

이력은 기본적으로 항목 목록입니다. 각 항목은 방문한 페이지를 나타내며 URL, 제목 및 페이지가 마지막으로 방문한 날짜와 같은 관련 페이지 정보에 대한 액세스를 제공합니다.

이 목록은 getEntries() 메소드를 사용하여 얻을 수 있습니다. WebEngine 이 웹을 탐색 할 때 기록 및 해당 항목 목록이 변경됩니다. 브라우저 동작에 따라 목록이 확장되거나 축소 될 수 있습니다. 이러한 변경 사항은 목록에서 노출되는 ObservableList API에서 수신 할 수 있습니다.

현재 방문한 페이지와 연관된 히스토리 항목의 색인은 currentIndexProperty() 표시됩니다. 현재 색인은 go(int) 메소드를 사용하여 히스토리의 모든 항목을 탐색하는 데 사용될 수 있습니다. maxSizeProperty() 는 히스토리 목록의 크기 인 최대 히스토리 크기를 설정합니다.

다음은 웹 기록 항목 목록 을 얻고 처리하는 방법의 예입니다.

ComboBox (comboBox)는 기록 항목을 저장하는 데 사용됩니다. WebHistory 에서 ListChangeListener 를 사용하면 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();
    }
});

표시된 웹 페이지에서 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())); 

웹 페이지에서 자바 앱과 자바 스크립트 간의 통신

WebView를 사용하여 사용자 정의 웹 페이지를 표시 할 때이 웹 페이지에 Javascript가 포함되어 있으면 Java 프로그램과 웹 페이지의 Javascript 사이에 양방향 통신을 설정해야 할 수 있습니다.

이 예에서는 이러한 통신을 설정하는 방법을 보여줍니다.

웹 페이지는 입력 필드와 버튼을 표시해야합니다. 버튼을 클릭하면 입력 필드의 값이 처리되는 Java 응용 프로그램으로 전송됩니다. 처리 후 결과는 웹 페이지에 결과를 표시하는 Javascript로 전송됩니다.

기본 원칙은 Javascript에서 Java 로의 통신을 위해 객체가 웹 페이지로 설정된 Java로 작성된다는 것입니다. 그리고 다른 방향으로, 객체는 자바 스크립트로 만들어지고 웹 페이지에서 추출됩니다.

다음 코드는 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 객체 (내부 클래스에 의해 정의되고 필드로 생성 됨)가 다음 호출에 의해 웹 페이지에 설정됩니다.

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

javascriptConnector 객체는 다음과 같은 웹 페이지에서 가져옵니다.

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

JavaConnector 의 toLowerCase(String) 메서드가 호출되면 전달 된 값이 변환 된 다음 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 문서에 있습니다.