Come utilizzare JavaFX WebView in DesktopApp con i file locali?

mio WebView funziona come fascino quando lo uso all'interno di Eclipse, ma non appena imballo l'applicazione in un file jar getta il seguente errore:Come utilizzare JavaFX WebView in DesktopApp con i file locali?

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 file HTML

<?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 mi 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);

I dont ora dove il problema è, ha provato molte cose differant come le posizioni dei file differant, ubicazione dello script s e così via.

Qualcuno un'idea?

fonte

2012-09-24 user1641778

non credo che è possibile utilizzare il protocollo di file in combinazione con il protocollo getResource quando si sta caricando qualcosa di fuori di un vaso. Inoltre, non penso che il protocollo jar comprenderà gli identificatori del tipo di file come . e ...

Se il map html si trova sul file system locale all'esterno del jar, caricare la mappa html dal file system con il protocollo file://.

Se la mappa html è confezionato in barattolo sotto /mapview/mapview.html come mi aspetto che sia, carico fuori dal vaso con:

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

Penso che l'errore che si sta ottenendo è perché si sta impostando un xhtml doctype, che significa che passa attraverso un controllo di tipo molto rigoroso rispetto a un doctype etero semplice che è più permissivo. Il tuo documento di esempio non è un documento xhtml conforme.

Mi sono rilassato il doctype del documento html, l'ho rifattorizzato un po 'così ho potuto capire che ha creato una semplice applicazione loader e che è stato 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(); 
    } 
}

Sample program output

fonte

2012-09-24 23:15:43 jewelsea

Grazie! Era davvero solo la parte html che ha reso il problema tecnico App, chiedendosi da dove provenisse. Maledetta copia/errori passati! – user1641778

questo funziona ..... – Vishrant

Come utilizzare JavaFX WebView in DesktopApp con i file locali?

risposta

Problemi correlati