example - webview java netbeans
¿Cómo usar JavaFX WebView en DesktopApp con archivos locales? (1)
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 tipos de archivos específicos . y ..
Si el mapa html 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 html del mapa está empaquetado en su jar en /mapview/mapview.html como espero que sea, cárguelo del /mapview/mapview.html con:
webEngine.load(MapTab.class.getResource("/mapview/mapview.html").toExternalForm());
Creo que el error que está obteniendo se debe a que está configurando un doctype xhtml, lo que significa que pasa a través de una comprobación de tipos muy estricta en comparación con un doctype html directo que es más permisivo. Su documento de muestra no es un documento xhtml compatible.
Relajé el documento del documento html, lo refactoré un poco para poder entender que creó una aplicación de carga simple y pude 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();
}
}
Mi vista web funciona como un amuleto cuando lo uso dentro de eclipse, pero tan pronto como empaco la aplicación en un archivo jar arroja el siguiente error:
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 cargo el 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);
Ahora no sé dónde está el problema, intenté muchas cosas diferentes, como diferentes ubicaciones de archivos, ubicaciones de guiones, etc.
¿Alguien una idea?