CODEWITHSUNDEEP
javajavascriptvariablesjavafx-2javafx
satnam
satnam

Reputation: 1425

JavaFX - Update values of variables in WebView through input

Basically I want to move a marker on google maps to a new location, upon input by user.

How I look to achieve it:

  1. I made an html file, that takes care of all the javascript and maps part. Markers are set.

  2. I've embedded that html file in a WebView in JavaFX.

  3. In my JavaFX application there are 2 textfieds, inside which a enters a value and that becomes the new value of the latitude and longitude, hence marker moves.

Where I' stuck

I've 2 variables in html file, lat and lon. They dictate the location of the marker.

Through my JavaFX application actionlistners, how do I update the value of lat and lon?

Here in my code

html file

<!DOCTYPE html>
<html>
  // stuff and stuff
var map;
function initialize() {
    var lat = 30.76;
    var lon = 76.74;
  var myLatlng = new google.maps.LatLng(lat, lon);
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(30.75, 76.78),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });


}

google.maps.event.addDomListener(window, 'load', initialize);

  //stuff and stuff

Here is my JavaFX file

public class GoogleApp extends Application {



private Scene scene;
  MyBrowser myBrowser;
  String lat;
  String lon;


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

  //stuff and stuff

  class MyBrowser extends Pane{

      HBox toolbar;

      WebView webView = new WebView();
      WebEngine webEngine = webView.getEngine();



      public MyBrowser(){

          final URL urlGoogleMaps = getClass().getResource("demo.html");
          webEngine.load(urlGoogleMaps.toExternalForm());

          getChildren().add(webView);

          final TextField latitude = new TextField("latitude");
          final TextField longitude = new TextField("longitude");
          Button update = new Button("Update");
          update.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent arg0) {
                lat = latitude.getText();
                lon = longitude.getText();

                System.out.println(lat + lon);
            }
        });

       getChildren().addAll(latitude, longitude, update);

      }
  }

}

Upvotes: 1

Views: 2474

Answers (1)

Andrey Chaschev
Andrey Chaschev

Reputation: 16516

You could put them to a global scope by assigning to a window object which is globally visible on a web page. I.e.

In JS:

window.lat = 30.76;
window.lon = 76.74;

In Java executeScript will execute the JS code in the scope of a web page and assign a value to a global var:

webEngine.executeScript("window.lat = 31.2;");

You may also place them into object:

JS:

window.coordinates = {lat: 100, lon: 250}

Java:

webEngine.executeScript("window.coordinates.lat = 31.2;");

UPDATE

Working demo: https://gist.github.com/chaschev/7481304.

Upvotes: 2

Related Questions