How to retrieve components from HTML webview in JavaFX

Question

Currently I have a WebView displaying a simple index.html, this WebView is created in FXMLDocument.fxml and controlled in FXMLDocumentController.java.
If I have a button inside the index.html how can I retrieve it or access it to make it do something using java? Is there a sort of action handler to do such things?

FXMLDocuement.fxml :

    <?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="510.0" prefWidth="794.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication1.FXMLDocumentController">
    <children>
        <Button fx:id="button" layoutY="471.0" onAction="#handleButtonAction" text="Click Me!" />
        <Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
      <WebView id="WebView1" fx:id="WebView1" layoutY="5.0" prefHeight="444.0" prefWidth="882.0" />
      <Label id="lbl1" fx:id="lbl1" layoutX="88.0" layoutY="475.0" prefHeight="17.0" prefWidth="99.0" text="Label" />
    </children>
</AnchorPane>

FXMLDocumentController.java :

package javafxapplication1;

import java.io.File;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.web.WebView;

public class FXMLDocumentController implements Initializable {

    @FXML
    private Label label;

    @FXML
    private WebView WebView1;

    @FXML
    private Label lbl1;

    @FXML
    private void handleButtonAction(ActionEvent event) throws MalformedURLException {
        System.out.println("You clicked me!");
        label.setText("Hello World!");
        lbl1.setText("Bonjour");

        WebView1.getEngine().load(new File("C:/Users/hadhe/Desktop/boots/index.html").toURI().toURL().toString());
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    

}

The class containing the main : JavaFXApplication1.java:

package javafxapplication1;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class JavaFXApplication1 extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

score 2 · Answer 1 · answered Feb 09 '16 at 15:49

The HTML document is in the WebEngine's document property, but it's loaded in the background, so you must wait for it to load:

WebView1.getEngine().documentProperty().addListener((o, old, doc) -> listenToButton(doc));
WebView1.getEngine().load(new File("C:/Users/hadhe/Desktop/boots/index.html").toURI().toURL().toString());

The document object is a regular XML document, so if the button has an id attribute, you can easily retrieve it:

private void listenToButton(Document doc) {
    if (doc == null) {
        return;
    }

    String id = "app-action-button";
    Element button = doc.getElementById(id);

    // ...
}

If the button doesn't have an id, you can search for it using XPath:

private void listenToButton(Document doc) {
    if (doc == null) {
        return;
    }

    XPath xpath = XPathFactory.newInstance().newXPath();
    Element button = (Element)
        xpath.evaluate("//input[type='button']", doc,
            XPathConstants.NODE);

    // ...
}

Finally, you can add a DOM event listener to the button, as described in the WebEngine documentation:

((EventTarget) button).addEventListener("click", e -> doSomeAction(), false);

score -3 · Answer 2 · answered Feb 09 '16 at 08:35

-3

Did you have a look at the relevant documentation?

https://docs.oracle.com/javase/8/javafx/embedded-browser-tutorial/js-javafx.htm

answered Feb 09 '16 at 08:35

mipa

10,369
2
16
35

1

This should be a comment, not an answer. – VGR Feb 09 '16 at 15:33

How to retrieve components from HTML webview in JavaFX

2 Answers2

Linked