Hadh February 2016

How to retrieve components from HTML webview in JavaFX

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(ActionEven        

Answers


mipa February 2016

Did you have a look at the relevant documentation?

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


VGR February 2016

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);

Post Status

Asked in February 2016
Viewed 1,260 times
Voted 8
Answered 2 times

Search




Leave an answer