स्थानीय फ़ाइलों के साथ DesktopApp में JavaFX WebView का उपयोग कैसे करें?

मेरे वेबव्यू आकर्षण की तरह काम करता है जब मैं ग्रहण के भीतर इसका इस्तेमाल लेकिन जैसे ही मैं एक जार फ़ाइल में आवेदन पैक के रूप में यह निम्न त्रुटि फेंकता है:स्थानीय फ़ाइलों के साथ DesktopApp में JavaFX WebView का उपयोग कैसे करें?

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.

यह 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>

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

मैं अब जहां समस्या, differant फ़ाइल स्थानों जैसे कई differant बातें करने की कोशिश की है न, स्क्रिप्ट स्थान:

यह कैसे मैं WebView लोड है एस और इतने पर।

कोई भी विचार है?

स्रोत

2012-09-24 user1641778

मुझे नहीं लगता कि जब आप जार से कुछ लोड कर रहे हों तो आप GetResource प्रोटोकॉल के साथ संयोजन में फ़ाइल प्रोटोकॉल का उपयोग कर सकते हैं। मुझे यह भी नहीं लगता कि जार प्रोटोकॉल फ़ाइल प्रकार विनिर्देशकों को . और .. समझा जाएगा।

यदि नक्शा एचटीएमएल जार के बाहर स्थानीय फाइल सिस्टम पर है, तो file:// प्रोटोकॉल के साथ फ़ाइल सिस्टम से मानचित्र एचटीएमएल लोड करें।

मानचित्र एचटीएमएल /mapview/mapview.html के तहत अपने जार में पैक किया जाता है, तो के रूप में मैं उम्मीद यह है के साथ जार से बाहर इसे लोड:

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

मुझे लगता है कि क्योंकि आप एक एक्सएचटीएमएल सेट कर रहे हैं त्रुटि मिल रहा है है डक्ट टाइप, जिसका अर्थ है कि यह एक सीधा एचटीएमएल डक्ट टाइप की तुलना में बहुत सख्त प्रकार की जांच के माध्यम से गुजरता है जो अधिक अनुमोदित है। आपका नमूना दस्तावेज़ एक अनुरूपित xhtml दस्तावेज़ नहीं है।

मैंने एचटीएमएल दस्तावेज़ के सिद्धांत को आराम दिया, इसे थोड़ा सा प्रतिक्रिया दी ताकि मैं समझ सकूं कि यह एक साधारण लोडर ऐप बनाया गया है और एक नक्शा लोड करने में सक्षम था।

/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

स्रोत

2012-09-24 23:15:43 jewelsea

धन्यवाद! यह वास्तव में सिर्फ एचटीएमएल-भाग था जिसने ऐप गड़बड़ कर दी, आश्चर्य हुआ कि यह कहां से आया था। डॉन कॉपी/अतीत-त्रुटियां! – user1641778

यह काम करता है ..... – Vishrant

स्थानीय फ़ाइलों के साथ DesktopApp में JavaFX WebView का उपयोग कैसे करें?

उत्तर

संबंधित मुद्दे