¿Cómo usar JavaFX WebView en DesktopApp con archivos locales?

Mi vista web funciona como encanto cuando lo uso dentro de Eclipse pero tan pronto como I paquete de la aplicación en un archivo JAR que arroja el siguiente error:¿Cómo usar JavaFX WebView en DesktopApp con archivos locales?

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.

Este es el archivo 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>

Así es como me carga la vista Web:

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

yo no ahora el origen del problema, intentó muchas cosas differant como ubicaciones de archivos differant, ubicación del script s y así sucesivamente.

¿Alguien una idea?

Fuente

2012-09-24 user1641778

No creo que pueda usar el protocolo de archivo en combinación con el protocolo getResource cuando está cargando algo de un contenedor. Tampoco creo que el protocolo jar comprenda los especificadores de tipo de archivo como . y ...

Si el html del mapa está en el sistema de archivos local fuera del contenedor, cargue el mapa html fuera del sistema de archivos con el protocolo file://.

Si el mapa html se envasa en su frasco bajo /mapview/mapview.html como espero que sea, la carga fuera del frasco con:

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

Creo que el error que está recibiendo es porque está configurando una XHTML doctype, lo que significa que pasa a través de una comprobación de tipos muy estricta en comparación con un doctype recto html que es más permisivo. Su documento de muestra no es un documento xhtml compatible.

Relajé el doctype del documento html, lo refactoré un poco para que pudiera entender que creó una aplicación de carga simple y que fue capaz de cargar un mapa.

/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

Fuente

2012-09-24 23:15:43 jewelsea

Gracias! Realmente fue solo la parte html que hizo que la aplicación fallara, se preguntó de dónde venía. ¡Maldita copia/errores pasados! – user1641778

esto funciona ..... – Vishrant

¿Cómo usar JavaFX WebView en DesktopApp con archivos locales?

Respuesta

Cuestiones relacionadas