Làm thế nào để sử dụng JavaFX WebView trong DesktopApp với các tệp cục bộ?

webview tôi làm việc như sự quyến rũ khi tôi sử dụng nó trong nhật thực nhưng ngay sau khi tôi đóng gói ứng dụng thành một file jar nó ném các lỗi sau:Làm thế nào để sử dụng JavaFX WebView trong DesktopApp với các tệp cục bộ?

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.

Đây là HTML-File

<?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>

Đây là cách tôi tải 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);

Tôi không gặp vấn đề ở đâu, đã thử nhiều thứ khác biệt như vị trí tệp khác, vị trí tập lệnh s và như vậy.

Bất kỳ ai có ý tưởng?

Nguồn

2012-09-24 user1641778

Tôi không nghĩ rằng bạn có thể sử dụng giao thức Tệp kết hợp với giao thức getResource khi bạn đang tải thứ gì đó từ một cái lọ. Tôi cũng không nghĩ rằng giao thức jar sẽ hiểu các định dạng kiểu tệp như . và ...

Nếu html bản đồ nằm trong hệ thống tệp cục bộ bên ngoài bình, hãy tải bản đồ html ra khỏi hệ thống tệp bằng giao thức file://.

Nếu html bản đồ được đóng gói trong lọ của bạn dưới /mapview/mapview.html như tôi mong đợi nó là, load nó ra khỏi jar với:

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

Tôi nghĩ rằng lỗi bạn đang nhận được là bởi vì bạn đang thiết lập một xhtml DOCTYPE, có nghĩa là nó đi qua kiểm tra loại rất nghiêm ngặt so với một doctype html thẳng mà là dễ dãi hơn. Tài liệu mẫu của bạn không phải là tài liệu xhtml tuân thủ.

Tôi nới lỏng tài liệu của tài liệu html, đã cấu trúc lại một chút để tôi có thể hiểu nó đã tạo ra một ứng dụng tải đơn giản và có thể tải lên bản đồ.

/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

Nguồn

2012-09-24 23:15:43 jewelsea

Cảm ơn bạn! Nó thực sự chỉ là phần html làm cho ứng dụng bị trục trặc, tự hỏi nó đến từ đâu. Damn copy/past-errors! – user1641778

hoạt động này ..... – Vishrant

Làm thế nào để sử dụng JavaFX WebView trong DesktopApp với các tệp cục bộ?

Trả lời

Các vấn đề liên quan