Question

我的jsf中有一个“ui：define”，如下所示：

<html>
<head>
<link rel="stylesheet" type="text/css" href="../include.css" />
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>Textual Zoom Control (Maps API v3)</title>
<style type="text/css">

html, body { height:100%; width: 100%; }

#map {
 float: left;
 margin: 0 25px 10px 14px;
 width: 64%;
 height: 70%;
 border: 1px solid gray;
}

#desc {
 float: left;
 margin: 0 25px 10px 20px;
 width: 14em;
}

#zoomcontrol {
 position: absolute;
 top:172px; left:71%;
}

@media screen and (max-width: 890px) {

 body, html, #map {
   margin: 0;
 }

 #map {
  width: 100%;
  height: 50%;
 }
 #desc {
  margin: 0 14px;
  width: 93%;
 }
 .include >b {
  float: right;
  margin-top: 17px;
 }
 #zoomcontrol {
  position: absolute;
  top: 70%;
  left: 41%;
 }
}

</style>

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j
s"></script>
<![endif]-->

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&amp;sensor=false">
</script>
<script type="text/javascript">

/* A TextualZoomControl is a GControl that displays
 * textual "Zoom In" and "Zoom Out" buttons.
*/
function TextualZoomControl(map) {

/* Creates a one DIV for each of the buttons and places them in a container
 * DIV which is returned as our control element. We add the control
 * to the map container and return the element for the map class to
 * position properly.
*/

  var g = google.maps;
  var control = document.createElement("div");
  control.id = "zoomcontrol";
  var zoomInDiv = document.createElement("div");
  this.setButtonStyle_(zoomInDiv);
  control.appendChild(zoomInDiv);
  zoomInDiv.appendChild(document.createTextNode("Zoom In"));

  g.event.addDomListener(zoomInDiv, "click", function() {
    map.setZoom(map.getZoom()+1);
   });

   var zoomOutDiv = document.createElement("div");
   this.setButtonStyle_(zoomOutDiv);
   control.appendChild(zoomOutDiv);
   zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));

   g.event.addDomListener(zoomOutDiv, "click", function() {
     map.setZoom(map.getZoom()-1);
    });

   /* Instead of appending it to the map container
    * append it to body of the document
   */
   document.body.appendChild(control);
   return control;
}


// Set the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "white";
  button.style.fontSize = "smaller";
  button.style.border = "1px solid gray";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}


function loadMap() {

  var g = google.maps;
  var opts_map = {
    zoom: 10,
    center: new g.LatLng(53.55486, 9.98989),
    disableDefaultUI: true,
    scrollwheel: false,
    mapTypeControl: true,

   mapTypeControlOptions: {
     style: g.MapTypeControlStyle.DEFAULT
   },
   mapTypeId: g.MapTypeId.ROADMAP      
  };

  var map = new g.Map(document.getElementById("map"), opts_map);

  // Add self created control
  var zoom_control = new TextualZoomControl(map); 
  zoom_control.index = 1;
}
window.onload = loadMap;
</script>
</head>
<body>
<h3>Textual Zoom Control</h3>
<div id="map"></div>
</body>
</html>

我想刷新ui：定义是否已完成某些事件; 我该怎么做这个工作？

Answer 1

您只能ajax-update JSF组件。

将其包装在JSF组件中（前提是您将其放在<h:body>的内部（底部）。

<h:panelGroup id="scripts" layout="block">
    <ui:define name="scripts">
        <h:outputScript>
            #{bean.script1}
            #{bean.script2}
            .
            .
            .
        </h:outputScript>
    </ui:define>
</h:panelGroup>

然后你可以像下面这样引用它：

<f:ajax ... render=":scripts" />

刷新jsf中的<ui：define>

1 个答案: