Come utilizzare JavaFX WebView in DesktopApp con i file locali?

Mio webview funziona come un fascino quando lo uso all’interno di eclipse, ma non appena ho pack applicazione in un file jar genera il seguente errore:

This page contains the following errors:
error on line 33 at column 26: StartTag: invalid element name
Below is a rendering of the page up to the first error.

Questo è il codice HTML del File di

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
    <head>
    <style>
        html,body {
            height: 99%;
            width: 99%;
        }
        #map {
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }   
    </style>
    <script src='http://openlayers.org/api/OpenLayers.js'></script>
    </head>
    <body>
        <div id='map'></div>
        <script type="text/javascript">
            var map = new OpenLayers.Map("map",{projection:"EPSG:3857"});
            var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
            var center = toMercator({x:-0.05,y:51.5});
            var osm = new OpenLayers.Layer.OSM();
            map.addLayer(osm);

            map.zoomToMaxExtent();  

            function addPoints(lon,lat,merkm){
                var features = [];

                for(var i = 0; i < lon.length; i++) {
                    var center = toMercator({x:lon[i],y:lat[i]});
                    features[i] = new OpenLayers.Feature.Vector(
                            toMercator(new OpenLayers.Geometry.Point(
                                lon[i],
                                lat[i])), 
                            {
                                infoitems : merkm[i]
                            }, {
                                fillColor : '#008040',
                                fillOpacity : 0.8,                    
                                strokeColor : "#ee9900",
                                strokeOpacity : 1,
                                strokeWidth : 1,
                                pointRadius : 8
                            });
                }

                //create the layer with listeners to create and destroy popups
                var vector = new OpenLayers.Layer.Vector("Points",{
                    eventListeners:{
                        'featureselected':function(evt){
                            var feature = evt.feature;
                            var popup = new OpenLayers.Popup.FramedCloud("popup",
                                OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                                null,
                                "<div style='font-size:.8em'>"+feature.attributes.infoitems+"</div>",
                                null,
                                true
                            );
                            feature.popup = popup;
                            map.addPopup(popup);
                        },
                        'featureunselected':function(evt){
                            var feature = evt.feature;
                            map.removePopup(feature.popup);
                            feature.popup.destroy();
                            feature.popup = null;
                        }
                    }
                });
                vector.addFeatures(features);

                var line = new OpenLayers.Control.DrawFeature(vector,
                        OpenLayers.Handler.Path);


                //create the select feature control
                var selector = new OpenLayers.Control.SelectFeature(vector,{
                    hover:true,
                    autoActivate:true
                }); 
               //map.destroy();
               //map = new OpenLayers.Map("map",{projection:"EPSG:3857"});

              // var osm = new OpenLayers.Layer.OSM();
                map.addLayer(vector);
                map.addControl(selector);
                map.addControl(line);
                map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13);


            }
            function pageOnLoad(){
                alert();
            }
        </script>
    </body>
</html>

Questo è come carico la WebView:

WebView browser = new WebView(); 
        final WebEngine webEngine = browser.getEngine();

        String mapfolder = "mapview";
        File map = new File(new File("."), "/mapview/mapview.html");


        final URL mapUrl = MapTab.class.getResource("mapview.html");

        webEngine.getLoadWorker().stateProperty().addListener(
                new ChangeListener<State>() {
                    public void changed(ObservableValue ov, State oldState, State newState) {
                        if (newState == State.SUCCEEDED) {
                            webEngine.executeScript("addPoints("+arg0+","+arg1+","+arg2+")");
                        }
                    }
                });
        webEngine.javaScriptEnabledProperty().set(true);
        webEngine.load(mapUrl.toExternalForm());
        this.setContent(browser);

So ora dove sia il problema, provato molte differant cose come differant posizioni dei file, script posizioni e così via.

Qualcuno un’idea?

InformationsquelleAutor user1641778 | 2012-09-24

One Reply
  1. 6

    Non credo che è possibile utilizzare il File di protocollo in combinazione con il getResource protocollo quando si carica qualcosa al di fuori di un vaso. Anche io non credo che il vaso di protocollo capire il tipo di file identificatori come . e ...

    Se la mappa html è sul file system locale al di fuori del vaso, caricare la mappa html disattivato il file di sistema con il file:// protocollo.

    Se la mappa html è confezionato nel vostro barattolo sotto /mapview/mapview.html come previsto, il carico fuori dal vaso:

    webEngine.load(MapTab.class.getResource("/mapview/mapview.html").toExternalForm());
    

    Penso che l’errore che si sta ottenendo è perché è un doctype xhtml, il che significa che passa attraverso il controllo di tipo strict rispetto ad una retta doctype html che è più permissiva. Il documento del campione non è compatibile documento xhtml.

    Mi sono rilassata il doctype del documento html, refactoring un po ‘ in modo che io possa capire creato una semplice app loader e in grado di caricare una mappa.

    /mapview/mapview.html

    <!doctype html>  
    <html lang="en">  
      <head>
      <style>
        html,body {
          height: 99%;
          width: 99%;
        }
        #map {
          width: 100%;
          height: 100%;
          border: 1px solid black;
        }   
      </style>
      <script language="javascript" src="http://openlayers.org/api/OpenLayers.js"></script>   
      <script language="javascript" type="text/javascript">
        function doload() {
          var map = new OpenLayers.Map("map",{projection:"EPSG:3857"});
          var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
          var center = toMercator({x:-0.05,y:51.5});
          var osm = new OpenLayers.Layer.OSM();
          map.addLayer(osm);
    
          map.zoomToMaxExtent();  
        }  
        function addPoints(lon,lat,merkm){
          var features = [];
    
          for(var i = 0; i < lon.length; i++) {
              var center = toMercator({x:lon[i],y:lat[i]});
              features[i] = new OpenLayers.Feature.Vector(
                      toMercator(new OpenLayers.Geometry.Point(
                          lon[i],
                          lat[i])), 
                      {
                          infoitems : merkm[i]
                      }, {
                          fillColor : '#008040',
                          fillOpacity : 0.8,                    
                          strokeColor : "#ee9900",
                          strokeOpacity : 1,
                          strokeWidth : 1,
                          pointRadius : 8
                      });
          }
    
          //create the layer with listeners to create and destroy popups
          var vector = new OpenLayers.Layer.Vector("Points",{
              eventListeners:{
                  'featureselected':function(evt){
                      var feature = evt.feature;
                      var popup = new OpenLayers.Popup.FramedCloud("popup",
                          OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                          null,
                          "<div style='font-size:.8em'>"+feature.attributes.infoitems+"</div>",
                          null,
                          true
                      );
                      feature.popup = popup;
                      map.addPopup(popup);
                  },
                  'featureunselected':function(evt){
                      var feature = evt.feature;
                      map.removePopup(feature.popup);
                      feature.popup.destroy();
                      feature.popup = null;
                  }
              }
          });
          vector.addFeatures(features);
    
          var line = new OpenLayers.Control.DrawFeature(vector,
                  OpenLayers.Handler.Path);
    
          //create the select feature control
          var selector = new OpenLayers.Control.SelectFeature(vector,{
              hover:true,
              autoActivate:true
          }); 
         //map.destroy();
         //map = new OpenLayers.Map("map",{projection:"EPSG:3857"});
    
        // var osm = new OpenLayers.Layer.OSM();
          map.addLayer(vector);
          map.addControl(selector);
          map.addControl(line);
          map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13);
        }
        function pageOnLoad(){
          alert();
        }
      </script>    
      </head>
      <body onload="doload()">
        <div id="map"></div>
      </body>
    </html>
    

    /javafxsamples/MapViewer.java

    package javafxsamples;
    
    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.web.WebView;
    import javafx.stage.Stage;
    
    public class MapViewer extends Application {
      public static void main(String[] args) { launch(args); }
      @Override public void start(Stage stage) {
        WebView webview = new WebView();
        webview.getEngine().load(
          MapViewer.class.getResource("/mapview/mapview.html").toExternalForm()            
        );
        stage.setScene(new Scene(webview));
        stage.show();
      }
    }
    

    Come utilizzare JavaFX WebView in DesktopApp con i file locali?

    Grazie! È stato davvero solo l’html parte che ha realizzato l’Applicazione glitch, si chiese dove era venuto. Accidenti copia/passato-di errori!
    questo funziona…..

    InformationsquelleAutor jewelsea

Lascia un commento