Java FX application onload event


Question

I am implementing an application in java swing java fx with Google maps API.

My problem is this, I need when the map is loaded runs a javascript.

I've be reading of the method: webEngine.getLoadWorker().StateProperty().AddListener but does not work in my code. I wonder if anyone has any idea how to do this.

I leave my code: SwingHtmlDemo.Java:

public class SwingHtmlDemo {

    public static void main(String[] args) {

        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                ApplicationFrame mainFrame = new ApplicationFrame();
                mainFrame.setVisible(true);

            }
        });

    }

}

/* Main window used to display some HTML content. */

class ApplicationFrame extends JFrame {

    JFXPanel javafxPanel;
    WebView webComponent;
    JPanel mainPanel;

    JTextField urlField;
    JButton goButton;

    public ApplicationFrame() {

        javafxPanel = new JFXPanel();

        initSwingComponents();

        loadJavaFXScene();

    }

    /**
     * Instantiate the Swing compoents to be used
     */
    private void initSwingComponents() {
        mainPanel = new JPanel();
        mainPanel.setLayout(new BorderLayout());
        mainPanel.add(javafxPanel, BorderLayout.CENTER);

        JPanel urlPanel = new JPanel(new FlowLayout());
        urlField = new JTextField();
        urlField.setColumns(50);
        urlPanel.add(urlField);
        goButton = new JButton("Go");
        urlField.setText("Rio branco 1421 montevideo");
        /**
         * Handling the loading of new URL, when the user enters the URL and
         * clicks on Go button.
         */

        goButton.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                Platform.runLater(new Runnable() {
                    @Override
                    public void run() {
                        String url = urlField.getText();
                        if (url != null && url.length() > 0) {
                            webComponent.getEngine().executeScript("document.goToLocation(\"" + urlField.getText() + "\")");
                        }
                    }
                });

            }
        });

        urlPanel.add(goButton);
        mainPanel.add(urlPanel, BorderLayout.NORTH);

        this.add(mainPanel);
        this.setDefaultCloseOperation(JFrame.HIDE_ON_CLOSE);
        this.setSize(700, 600);

    }

    /**
     * Instantiate the JavaFX Components in the JavaFX Application Thread.
     */
    private void loadJavaFXScene() {
        Platform.runLater(new Runnable() {
            @Override
            public void run() {

                BorderPane borderPane = new BorderPane();
                webComponent = new WebView();

                webComponent.getEngine().load(getClass().getResource("googlemap.html").toString());
                borderPane.setCenter(webComponent);
                Scene scene = new Scene(borderPane, 450, 450);
                javafxPanel.setScene(scene);

            }
        });

    }

}

googlemap.html:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100%; background-color: #666970; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDRtQjq-q-w0Yr6BZ6y1nRGzAUM93udakg&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(37.39822, -121.9643936);
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      navigationControl: false,
      streetViewControl: false,
      backgroundColor: "#666970"
    };

    document.geocoder = new google.maps.Geocoder();
    document.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

    document.zoomIn = function zoomIn() {
        var zoomLevel = document.map.getZoom();
        if (zoomLevel <= 20) document.map.setZoom(zoomLevel + 1);
    }

    document.zoomOut = function zoomOut() {
        var zoomLevel = document.map.getZoom();
        if (zoomLevel > 0) document.map.setZoom(zoomLevel - 1);
    }

    document.setMapTypeRoad = function setMapTypeRoad() {
        document.map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
    }
    document.setMapTypeSatellite = function setMapTypeSatellite() {
        document.map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
    }
    document.setMapTypeHybrid = function setMapTypeHybrid() {
        document.map.setMapTypeId(google.maps.MapTypeId.HYBRID);
    }
    document.setMapTypeTerrain = function setMapTypeTerrain() {
        document.map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    }

    document.goToLocation = function goToLocation(searchString) {
         var address = searchString;
    document.geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        document.map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: document.map,
            position: results[0].geometry.location
        });
        if (results[0].geometry.viewport) 
          document.map.fitBounds(results[0].geometry.viewport);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
    }
  }

</script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
1
2
11/19/2013 4:06:11 PM

Accepted Answer

Consider adding FirebugLite to debug your app:

<script src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

If I understand correctly the question, you need to run this inside the 'document loaded' event listener:

webComponent.getEngine().load(getClass().getResource("googlemap.html").toString());

webComponent.getEngine().stateProperty().addListener(new ChangeListener<Worker.State>() {
    @Override
    public void changed(ObservableValue<? extends Worker.State> ov, Worker.State t, Worker.State t1) {
        if (t1 == Worker.State.SUCCEEDED) {
            // this will be run as soon as WebView is initialized.
            webComponent.getEngine().executeScript("document.goToLocation(\"" + urlField.getText() + "\")");               
        }
    }
});

UPDATE

The message means there is no such function, so you need to copy JS from your original HTML file into googlemap.html:

document.goToLocation = function goToLocation(searchString) {
    document.geocoder.geocode( {'address': searchString}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        document.map.setCenter(results[0].geometry.location);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
}

UPDATE 2

Worked for me after this (need to do this for all functions):


document.goToLocation = function  goToLocation(searchString) {

You might consider adding FirebugLite to debug your JS app:

<script src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
3
11/19/2013 5:22:03 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon