Read string by click on button from html - JavaFx (webview)

Question

Hello have you any idea how to get string from html (webview) ? I mean I need to get string value (text) after click on buttons or rectangulars or polygons:

Green building is clicked - SVG

STYLE (CSS)

.building {
    fill: #494547;
}

.building:hover{
    fill: #8c8a8b;
    transition:      .6s fill
}

.building:active{
    fill: green;
    transition: .0s
}

text{
    pointer-events: none;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-99 0 600 600" style="enable-background:new -99 0 600 600;" xml:space="preserve">
<rect class="building" id="XMLID_394_" x="159" y="21" width="99" height="80.3"/>
<text id="XMLID_395_" transform="matrix(1 0 0 1 186.8921 65.6667)" class="st1 st2 st3">BN5</text>
<polygon class="building" id="XMLID_396_" points="289.5,20 321.6,20 321.6,57 397.4,57 397.4,21.8 430.8,21.8 430.8,93.8 289.5,93.8 "/>
<text id="XMLID_402_" transform="matrix(1 0 0 1 332.2969 81.5068)" class="st1 st2 st3">PK11</text>
</svg>

And as you see ... I need to get from this polygon text it means that after click on polygon/path/rectangular I will reach the text over some method in java for example via mouseListener after click.

As you see in picture, by clicking on BN5 building I will obtain string BN5.

James_D · Accepted Answer · 2017-03-27 18:03:00Z

Following the section in the WebEngine documentation on "Calling back to Java from Javascript", you can add Javascript handlers to your SVG elements:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-99 0 600 600" style="enable-background:new -99 0 600 600;" xml:space="preserve">
<rect class="building" onclick="javaApp.process('BN5')" id="XMLID_394_" x="159" y="21" width="99" height="80.3"/>
<text id="XMLID_395_" transform="matrix(1 0 0 1 186.8921 65.6667)" class="st1 st2 st3">BN5</text>
<polygon class="building" onclick="javaApp.process('PK11')" id="XMLID_396_" points="289.5,20 321.6,20 321.6,57 397.4,57 397.4,21.8 430.8,21.8 430.8,93.8 289.5,93.8 "/>
<text id="XMLID_402_" transform="matrix(1 0 0 1 332.2969 81.5068)" class="st1 st2 st3">PK11</text>
</svg>

Now when you load the HTML you can do something like this:

class JSCallback {

    public void process(String building) {
        // do something here...
        System.out.println(building);
    }
}

and

WebView webView = ...;
WebEngine engine = webView.getEngine();
engine.documentProperty().addListener((obs, oldDoc, newDoc) -> {
    JSObject window = (JSObject) engine.executeScript("window");
    window.setMember("javaApp", new JSCallback());
});

engine.load(...);

SSCCE:

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

public class WebViewCallbackExample extends Application {

    private final String html = "<!DOCTYPE html>"
                    + "<html>"
                    + "<head>"
                    + "<style>"
                    + ".building {"
                    + "  fill: #494547;"
                    + "}"

                    + ".building:hover{"
                    + "  fill: #8c8a8b;"
                    + "  transition:      .6s fill"
                    + "}"

                    + ".building:active{"
                    + "  fill: green;"
                    + "  transition: .0s"
                    + "}"

                    +"text{"
                    +"  pointer-events: none;"
                    +"}"

                    + "</style>"
                    + "</head>"
                    + "<body>"
                    + "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"-99 0 600 600\" style=\"enable-background:new -99 0 600 600;\" xml:space=\"preserve\">"
                    + "<rect class=\"building\" onclick=\"javaApp.process('BN5')\" id=\"XMLID_394_\" x=\"159\" y=\"21\" width=\"99\" height=\"80.3\"/>"
                    + "<text id=\"XMLID_395_\" transform=\"matrix(1 0 0 1 186.8921 65.6667)\" class=\"st1 st2 st3\">BN5</text>"
                    + "<polygon class=\"building\" onclick=\"javaApp.process('PK11')\" id=\"XMLID_396_\" points=\"289.5,20 321.6,20 321.6,57 397.4,57 397.4,21.8 430.8,21.8 430.8,93.8 289.5,93.8 \"/>"
                    + "<text id=\"XMLID_402_\" transform=\"matrix(1 0 0 1 332.2969 81.5068)\" class=\"st1 st2 st3\">PK11</text>"
                    + "</svg>"
                    + "</body>"
                    + "</html>" ;

    @Override
    public void start(Stage primaryStage) {
        WebView webView = new WebView();
        WebEngine engine = webView.getEngine();
        engine.documentProperty().addListener((obs, oldDoc, newDoc) -> {
            JSObject window = (JSObject) engine.executeScript("window");
            window.setMember("javaApp", new JSCallback());
        });

        engine.loadContent(html);

        Scene scene = new Scene(webView, 600, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static class JSCallback {
        public void process(String building) {
            // do something here...
            System.out.println(building);
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Thank you very much, it is working, you save my day. I have one question I add after click <a href> and also <a xlink:href> hyperlink ... in web broswer it works, but in javafx its not working, I to nothing, page is same... I dont have idea why it is not working code: <a href="google.com"> <rect onclick="javaApp.process('BN5')" class="building" id="XMLID_394_" x="159" y="21" width="99" height="80.3"/> </a>

Collectives™ on Stack Overflow

Read string by click on button from html - JavaFx (webview)

STYLE (CSS)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

STYLE (CSS)

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related