I currently have two WebViews(say leftWebView and rightWebView) inside a horizontal SplitPane which is embedded inside the Anchor Pane. Each WebView has a JavaScript (creating a rectangle with different colors). Now what I want to do is that on clicking one rectangle, I would like to change the other WebView. A simple way to ask this question is how do I invoke the leftWebView by a change in rightWebView.
The UI of my application would look something like this : Sample Application
Following are the FXML, Controller and Java Files
public class Demo2 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);
}public class FXMLDocumentController implements Initializable {
@FXML
private LeftWebView wvLeftWebView ;
@FXML
private RightWebView wvRightWebView ;
@FXML
public void myCustomAction(ActionEvent event) {
System.out.println("mCustomAction(): Caught an event ");
}
@Override
public void initialize(URL url, ResourceBundle rb) {
}
}The LeftWebView and RightWebView class are similar, except the changes in the javascript
public class LeftWebView extends Region{
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
public LeftWebView(){
// final URL urlHello = getClass().getResource("TimeGraph.html");
// webEngine.load(urlHello.toExternalForm());
webEngine.getLoadWorker().stateProperty().addListener(
new ChangeListener<Worker.State>() {
public void changed(ObservableValue<? extends Worker.State> p, Worker.State oldState, Worker.State newState) {
if (newState == Worker.State.SUCCEEDED) {
JSObject win = (JSObject) webEngine.executeScript("window");
win.setMember("javaObj", new Bridge());
System.out.println("LeftWebView(): Constructor");
}
}
}
);
webEngine.loadContent(
"<div style='width: 100; height: 100; background: green;' " +
"onclick='javaObj.clickLeft();' />"
);
getChildren().add(webView);
}
@Override
protected void layoutChildren(){
double w = getWidth();
double h = getHeight();
layoutInArea(webView, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER);
// layoutInArea(toolbar, 0, h-toolbarHeight, w, toolbarHeight, 0, HPos.CENTER, VPos.CENTER);
}
}public class Bridge {
public void clickRight() {
System.out.println("Bridge.clickRight() called");
}
public void clickLeft() throws IOException {
System.out.println("Bridge.clickLeft() called");
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.getLoadWorker().stateProperty().addListener(
new ChangeListener<Worker.State>() {
public void changed(ObservableValue<? extends Worker.State> p, Worker.State oldState, Worker.State newState) {
if (newState == Worker.State.SUCCEEDED) {
JSObject win = (JSObject) webEngine.executeScript("window");
win.setMember("javaObj", new Bridge());
System.out.println("Bridge.clickLeft(): property Changed of LeftWebView");
}
}
}
);
webEngine.loadContent(
"<div style='width: 200; height: 200; background: blue;' " +
"onclick='javaObj.test2();' />"
);
/*
FXMLLoader fxmlLoader = new FXMLLoader();
Pane p = fxmlLoader.load(getClass().getResource("FXMLDocument.fxml").openStream());
FXMLDocumentController fooController = (FXMLDocumentController) fxmlLoader.getController();
*/
/*
URL location = getClass().getResource("MyController.fxml");
FXMLLoader fxmlLoader = new FXMLLoader();
fxmlLoader.setLocation(location);
Parent root = (Parent) fxmlLoader.load(location.openStream());
// How to get the handler for a specific element of my FXML
*/
}
}<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import demo2.RightWebView?>
<?import demo2.LeftWebView?>
<?import demo2.FXMLDocumentController?>
<AnchorPane fx:controller="demo2.FXMLDocumentController" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
<SplitPane dividerPositions="0.4765886287625418" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
prefHeight="400.0" prefWidth="600.0" >
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<LeftWebView id="webLeft" fx:id="wvLeftWebView" prefHeight="-1.0" prefWidth="-1.0" onAction="#myCustomAction" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<RightWebView id="webRight" fx:id="wvRightWebView" prefHeight="-1.0" prefWidth="-1.0" />
</children>
</AnchorPane>
</items>
</SplitPane>
</AnchorPane>I am able to callback one of the methods in class Bridge (Bridge.clickLeft()) through Javascript but I am not sure how to go about and access the other WebView and update it.
