我目前在水平SplitPane中有两个WebView（比如leftWebView和rightWebView），它嵌入在Anchor Pane中。每个WebView都有一个JavaScript（创建一个不同颜色的矩形）。现在我想做的是点击一个矩形，我想改变其他WebView。提出这个问题的一个简单方法是如何通过rightWebView中的更改来调用leftWebView。
我的应用程序的UI看起来像这样：Sample Application
以下是FXML，Controller和Java文件
angular.module('blocmetrics').controller('mainCtrl', ['$scope', 'apiFactory', '$http',
function($scope, apiFactory, $http) {
$http.defaults.headers.common['Authorization'] = 'Token ' + document.cookie;
$scope.goToDomain = function(domainId) {
document.location = '#domains/' + domainId;
};
debugger;
// API call for users apps
var domain = $http.get(apiFactory + '/apps').
success(function(data, status, headers, config) {
$scope.domains = data;
}).
error(function(data, status, headers, config) {
console.log('Error');
});
}
]);
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);
}
除了javascript中的更改外，LeftWebView和RightWebView类相似
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) {
}
}
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
*/
}
}
我能够通过Javascript回调类Bridge（Bridge.clickLeft（））中的一个方法，但我不知道如何去访问其他WebView并更新它。
答案 0 :(得分：0)
我通过其他问题Changing the text of a label from a different class in JavaFX和Changing JavaFX label using Javascript callback method
找到了一个简单的解决方案FXML文件包含两个Web视图和一个标签（标签只是为了显示JavaFX控件）
<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="webviewlabel.FXMLDocumentController">
<children>
<WebView fx:id="wvSample" layoutX="184.0" layoutY="16.0" prefHeight="200.0" prefWidth="175.0" />
<WebView fx:id="wvAffected" layoutY="39.0" prefHeight="177.0" prefWidth="154.0" />
<Label fx:id="lblSample" text="Label" />
</children>
</AnchorPane>
控制器类包含
public class FXMLDocumentController implements Initializable {
@FXML
private Label lblSample;
@FXML
private WebView wvSample;
private WebEngine webSample ;
@FXML
private WebView wvAffected;
private WebEngine webAffected ;
@FXML
private void handleButtonAction(ActionEvent event) {
System.out.println("You clicked me!");
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// wvSample = new WebView();
initiateWebSample();
initiateWebAffected();
}
public void initiateWebSample() {
webSample = wvSample.getEngine();
webSample.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) webSample.executeScript("window");
win.setMember("javaObj", new Connector(FXMLDocumentController.this));
System.out.println("FXMLDocumentController.initiateWebSample(): Called");
}
}
}
);
webSample.loadContent(
"<div style='width: 50; height: 50; background: yellow;' onclick='javaObj.Connecting();' />"
);
}
public void initiateWebAffected() {
webAffected = wvAffected.getEngine();
webAffected.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) webAffected.executeScript("window");
win.setMember("javaObj", new Connector(FXMLDocumentController.this));
System.out.println("FXMLDocumentController.initiateWebAffected(): Called");
}
}
}
);
String strJScript = "<div style='width: 50; height: 50; background: blue;' onclick='javaObj.Connecting();' />" ;
webAffected.loadContent(strJScript);
}
public void setLabelText(String text)
{
System.out.println("FXMLDocumentController.setLabelText(): Called");
lblSample.setText(text);
}
public void changeWebViewAffected(String pstrColor) {
String strJScript = "<div style='width: 50; height: 50; background: "+pstrColor+";' onclick='javaObj.Connecting();' />" ;
webAffected.loadContent(strJScript);
}
}
连接类包含调用方法
public class Connector {
private final FXMLDocumentController controller ;
public Connector(FXMLDocumentController controller) {
this.controller = controller ;
}
public void Connecting() {
try {
System.out.println("Connector.Connecting(): Called");
controller.setLabelText("Bye World");
controller.changeWebViewAffected("green");
} catch (Exception ex) {
Logger.getLogger(Connector.class.getName()).log(Level.SEVERE, null, ex);
}
}
}