JSF 및 .xhtml 파일로 열린 레이어 실행

http://docs.openlayers.org/library/introduction.html에서 jsf 프로젝트를 만들었지 만 다음과 같은 예제가 있지만 xhtml 파일로 실행되지 않으며 HTML 파일로 실행됩니다. jsf 및 .xhtml로 실행하는 방법. 그것은 html로 실행됩니다. 불을 지르고를 사용하여 브라우저에서JSF 및 .xhtml 파일로 열린 레이어 실행

 <?xml version="1.0" encoding="UTF-8"?> 
<!-- 
To change this template, choose Tools | Templates 
and open the template in the editor. 
--> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> 
    <h:head> 
     <script src="http://openlayers.org/api/OpenLayers.js"></script> 

    </h:head> 
    <h:body> 
     <div style="width:100%; height:100%" id="map"></div> 
     <script defer="defer" type="text/javascript"> 
     var map = new OpenLayers.Map('map'); 
     var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); 
     var dm_wms = new OpenLayers.Layer.WMS(
      "Canadian Data", 
      "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap", 
      { 
       layers: "bathymetry,land_fn,park,drain_fn,drainage," + 
         "prov_bound,fedlimit,rail,road,popplace", 
       transparent: "true", 
       format: "image/png" 
      }, 
      {isBaseLayer: false} 
     ); 
     map.addLayers([wms, dm_wms]); 
     map.zoomToMaxExtent(); 
     </script> 
    </h:body> 
</html>

결과 :

<head> 
<body> 
<div style="width: 100%; height: 100%; " id="map" class="olMap"> 
<div id="OpenLayers.Map_2_OpenLayers_ViewPort" style="position: relative; overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; " class="olMapViewport olControlDragPanActive olControlZoomBoxActive olControlPinchZoomActive olControlNavigationActive"> 
<div id="OpenLayers.Map_2_events" style="position: absolute; width: 100%; height: 100%; z-index: 999; "> 
<div id="OpenLayers.Control.PanZoom_5" style="position: absolute; left: 4px; top: 4px; z-index: 1004; " class="olControlPanZoom olControlNoSelect" unselectable="on"> 
<div id="OpenLayers.Control.ArgParser_6" style="position: absolute; z-index: 1004; " class="olControlArgParser olControlNoSelect" unselectable="on"/> 
<div id="OpenLayers.Control.Attribution_7" style="position: absolute; z-index: 1004; " class="olControlAttribution olControlNoSelect" unselectable="on"/> 
</div> 
</div> 
<script defer="defer" type="text/javascript"> 

var map = new OpenLayers.Map('map'); 
     var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", 
      "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); 
     var dm_wms = new OpenLayers.Layer.WMS(
      "Canadian Data", 
      "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap", 
      { 
       layers: "bathymetry,land_fn,park,drain_fn,drainage," + 
         "prov_bound,fedlimit,rail,road,popplace", 
       transparent: "true", 
       format: "image/png" 
      }, 
      {isBaseLayer: false} 
     ); 
     map.addLayers([wms, dm_wms]); 
     map.zoomToMaxExtent(); 
</script> 
</body> 
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/> 
</html>

출처

2012-05-01 kinkajou

JavaScript 코드를 인라인으로 실행하고 있습니다. 즉, 웹 브라우저에서 특정 코드 줄을 발견 할 때 JavaScript 코드가 인 경우 즉시이 실행됩니다. 이 시점에서 <div id="map">은 아직 HTML DOM 트리에 존재하지 않습니다! 브라우저는 즉, 위에서 아래로 HTML/JS 코드를 구문 분석하고 실행합니다.

<div id="map">이 작성되어 HTML DOM 트리에 추가 된 후에 해당 JavaScript 코드 을 실행해야합니다.

이동 에 마크 업에서 <script> 블록 <div id="map"> 후 :

<h:head> <script src="http://openlayers.org/api/OpenLayers.js"></script> </h:head> <body> <div style="width:100%; height:100%" id="map"></div> <script type="text/javascript"> var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); </script> </body>

사용 window.onload 브라우저가 작성을 완료 한 경우에만 코드를 실행하는 방법은 다음과 그것을 달성 할 수 HTML DOM 트리.
<h:head> <script src="http://openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript"> window.onload = function() { var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); }; </script> </h:head>

이 문제
은하지 JSF 또는 XHTML과 관련이 있습니다. 그것은 단지 기본적인 HTML/JS입니다.

출처

2012-05-01 13:12:14 BalusC

당신을 위해 아주 아주 아주 좋은 답변을 주셔서 감사합니다 :) 왜 HTML과 xhtml 코드의 실행 차이가 있습니까? – kinkajou

JSF/Facelets는 웹 서버에서 실행되며 웹 브라우저에서 실행되는 HTML/JS를 생성합니다. HTTP로 연결된 두 개의 물리적으로 완전히 다른 환경입니다. – BalusC

나는 당신이 요청한 변경으로 코드를 테스트했다. html의 같은 코드가 jsf 태그없이 map을 생성하는 동안지도를 생성하지 않는다. 그래도 방화범을 사용하여 변경 사항을 볼 수 있습니다. 스크립트가 성공적으로 실행되었지만지도가 표시되지 않습니까? – kinkajou

나는 같은 문제가하는 int 실행하지만 내 extentiong는 .jspx했다. 나는 이것을 시도해 보길 좋아했다.

<html 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich"> 

<head> 
<script src="http://piturralhpxp:1983/geoserver/openlayers/OpenLayers.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
    //<![CDATA[ 
      var map; 
      etc .... 
      //]]> 
     </script> 
     </head> 
     <f:view>   
     <body onload="init()"> 

     </body> 
</f:view> 
</html>

출처

2012-05-01 10:43:58 IturPablo

@lturPablo는 나를 위해 작동하지 않았다 : ( – kinkajou

@BalusC가 맞습니다. OpenLayers의 버그처럼 보입니다. <! DOCTYPE html > 선언이 추가되면 JSF 페이지가 중단됩니다.

나는 그것을 제거하고, 어쨌든 괜찮 았어. 나는 이것이 최선의 관행이 아니라는 것을 알고 있습니다. 그러나 이것을 수행하는 유일한 방법입니다. 시도 해봐.

출처

2012-05-29 14:35:08 elcocolio

JSF 및 .xhtml 파일로 열린 레이어 실행

답변

관련 문제