我在 PrimeFaces 论坛上问了这个问题,但没有得到回应,所以我想我会在这里尝试。
- 使用 PrimeFaces 3.0 -
我有一个包含 [p:layout] 和 [p:layoutUnit] 的页面,我想在支持 bean 中动态调整其大小。我有两种使用方法:
1) [p:commandButton] 调用一个支持 bean,它为 p:layoutUnit 组件中的 size 参数设置 bean 属性。我可以这样做,但为了使其工作,我必须设置 ajax="false" 和 update="@all" (可能不需要更新)以强制页面重绘。当我这样做时,将重置 的宽度,并且面板以所需的宽度绘制。
2)我有一个带有 p:ajax event="overlaySelect" 的 [g:map] 组件我想在激活 overlayEvent 时以类似的方式调整面板的大小。我遇到的问题是,如果没有完整的页面刷新,我似乎无法调整 [p:overlayUnit] 的大小,而且我似乎无法让 overlaySelect 事件导致页面刷新(或者它不这样做所以以一种会调整 [p:layoutUnit] 的方式。如果我刷新页面,它将调整大小。
我有两个问题:1)有没有办法动态调整 [p:layoutUnit] 组件的大小而无需进行完整的页面刷新?我似乎无法让它以任何其他方式工作。
2) 有没有办法强制 [p:ajax event="overlaySelect"] 强制完成页面刷新,以便我可以像在第一个场景中那样强制调整大小?
谢谢
如果有人感兴趣,这是页面代码:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view id="mapPolygonView" contentType="text/html" beforePhase="#{mappingSessionBean.beforePhase}"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:comp="http://java.sun.com/jsf/composite/ezcomp"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<html>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<script src="./resources/js/Raphael.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style type="text/css">
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
</style>
<title>Map Polygon Edit</title>
</h:head>
<h:body>
<p:layout fullPage="true" onResize="onResizeEvent(event)" >
<p:layoutUnit position="north" size="82" resizable="true" >
<h:form id="formNorth" prependId="=false" >
<p:outputPanel id="panelNorth" >
<comp:header id="headerComp" />
<comp:menuBar id="menuBarComp" />
</p:outputPanel>
</h:form >
</p:layoutUnit>
<p:layoutUnit id="layoutWest" position="west" size="#{mappingSessionBean.optionPanelWidth}" resizable="true" collapsible="true" header="Options" >
<h:form id="formWest" prependId="=false" >
<p:outputPanel id="panelWest" >
<h:panelGrid columns="1" style="padding-top: 5px; width: 98%;" rendered="#{mappingSessionBean.displayOptionGridWest}" >
<h:commandLink value="Add Polygon" style="margin-left: 5px;" action="#{mappingSessionBean.addNewPolyAction}" disabled="#{mappingSessionBean.disableAddPolygonLink}" rendered="#{mappingSessionBean.displayAddPolygonLink}" update="@form :formCenter:mapPanel :formCenter:polygonAddPanelComp:polygonAddPanel" />
<h:commandLink value="Edit Polygon" style="margin-left: 5px;" action="#{mappingSessionBean.editPolyAction}" disabled="#{mappingSessionBean.disableEditPolygonLink}" rendered="#{mappingSessionBean.displayEditPolygonLink}" update=":formCenter:messageComp:messagePnl" />
<h:commandLink value="Disable Polygon" style="margin-left: 5px;" action="#{mappingSessionBean.disablePolyAction}" disabled="#{mappingSessionBean.disableDisablePolygonLink}" rendered="#{mappingSessionBean.displayDisablePolygonLink}" update=":formCenter:messageComp:messagePnl" />
<h:commandLink value="Locate Address" style="margin-left: 5px;" action="#{mappingSessionBean.locateAddressAction}" disabled="#{mappingSessionBean.disableLocateAddressLink}" rendered="#{mappingSessionBean.displayLocateAddressLink}" update="@form" />
<p:separator />
<h:outputText value="Locate Address:" style="margin-left: 5px;" rendered="#{mappingSessionBean.displayLocateAddress}" />
<p:inputTextarea value="#{mappingSessionBean.searchAddress}" style="width: 125px;; height: 40px;" autoResize="false" maxHeight="40" rendered="#{mappingSessionBean.displayLocateAddress}" />
<p:commandButton value="Find" action="#{mappingSessionBean.findAddressAction()}" update="@form :formCenter:gmap :formCenter:messageComp:messagePnl" rendered="#{mappingSessionBean.displayLocateAddress}" />
<p:separator rendered="#{mappingSessionBean.displayLocateAddress}" />
<p:commandButton id="btn3" value="Save Polygon" style="width: 135px;" disabled="#{mappingSessionBean.disableSavePolyBtn}" onclick="confirmDialog.show();" update="@form :formCenter:gmap :formCenter:messageComp:messagePnl" />
<p:commandButton id="btn5" value="Refresh Polygons" style="width: 135px;" disabled="#{mappingSessionBean.disablePolyBtns}" action="#{mappingSessionBean.refreshPolygons}" update="@form :formCenter:gmap" />
<p:commandButton id="btn6" value="Test State" style="width: 135px;" action="#{mappingSessionBean.testStatePolygon}" onclick="confirmDialog.show();" update="@form :formCenter:gmap" />
<p:separator />
</h:panelGrid>
<h:panelGrid columns="3" style="width: 145px;" >
<h:outputText value="Map Height: " style="margin-left: 5px;" />
<p:commandButton value="+" action="#{mappingSessionBean.polyMapPlus}" update=":formCenter:gmap" />
<p:commandButton value="-" action="#{mappingSessionBean.polyMapMinus}" update=":formCenter:gmap" />
</h:panelGrid>
<h:panelGrid columns="1" style="padding-top: 5px; width: 98%;" >
<p:commandButton value="Restore Original" style="width: 135px;" disabled="#{mappingSessionBean.disablePolyBtns}" action="${mappingSessionBean.restoreOriginalPolyView}" update=":formCenter:gmap :formEast:panelEast" />
</h:panelGrid>
<comp:polygonAddPanel id="polygonAddPanelComp" />
<comp:polygonEditPanel id="polygonEditanelComp" />
</p:outputPanel>
</h:form >
</p:layoutUnit>
<p:layoutUnit position="center" resizable="true" >
<h:form id="formCenter" prependId="false" >
<p:idleMonitor onidle="idleDialog.show();" timeout="#{sessionBean1.timeout}" >
<p:ajax event="idle" listener="#{sessionBean1.idleListener}" update="@form" />
</p:idleMonitor>
<comp:message id="messageComp" message="#{sessionBean1.message}" />
<p:outputPanel id="mapAddPolyPanel" >
<h:panelGrid id="mapAddPolyPanelGrid" style="width: 90%; height: 35px; margin-top: 10px; display: block; position: relative;" columns="4" >
<h:outputText value="Account:" />
<p:selectOneMenu style="width: 250px;" value="#{mappingSessionBean.selectedAccount}" >
<f:selectItems value="#{sessionBean1.custAccountList}"/>
<p:ajax listener="#{mappingSessionBean.accountSelectAction}" update="polyGrpDD gmap" />
</p:selectOneMenu>
<h:outputText value="Polygon Group:" />
<p:selectOneMenu id="polyGrpDD" style="width: 250px;" value="#{mappingSessionBean.selectedPolyGroup}" >
<f:selectItems value="#{mappingSessionBean.polygonGroupList}"/>
<p:ajax listener="#{mappingSessionBean.polyGroupSelectAction}" update="@form :formEast:panelEast :formWest:panelWest gmap" />
</p:selectOneMenu>
</h:panelGrid>
<p:outputPanel id="mapPanel" style="top: 0px; width: 98%; left: 10px; position: relative;" rendered="#{mappingSessionBean.displayMapPanel}" >
<p:gmap id="gmap" center="#{mappingSessionBean.mapCenter}" zoom="#{mappingSessionBean.mapZoom}" type="HYBRID"
style="#{mappingSessionBean.polygonGmapStyle}" fitBounds="#{mappingSessionBean.fitBoundsFlag}"
model="#{mappingSessionBean.mapModel}" disableDoubleClickZoom="true"
widgetVar="map" >
<p:ajax id="gmapAjax1" event="overlaySelect" listener="#{mappingSessionBean.onMapOverlaySelect}" update="@all :formEast:polyDetailPnl gmap messageComp:messagePnl :formCenter:mapPanel :formWest" />
<p:ajax id="gmapAjax3" event="pointSelect" listener="#{mappingSessionBean.onMapPointSelect}" update="gmap" />
<p:ajax id="gmapAjax2" event="stateChange" listener="#{mappingSessionBean.onMapStateChange}" />
<p:ajax id="gmapAjax4" event="markerDrag" listener="#{mappingSessionBean.onMapMarkerDrag}" update="gmap" />
</p:gmap>
</p:outputPanel>
</p:outputPanel>
</h:form >
</p:layoutUnit>
<p:layoutUnit position="east" size="205" resizable="true" collapsible="true" header="Polygons" >
<h:form id="formEast" prependId="=false" >
<p:outputPanel id="panelEast" >
<h:panelGrid id="grid2" columns="1" style="height: 500px; width: 96%; display: block;" >
<h:panelGrid columns="2" >
<p:selectBooleanCheckbox value="#{mappingSessionBean.displayAllPolygons}" >
<p:ajax listener="#{mappingSessionBean.displayAllPolyAction}" update="@form :formCenter:gmap polyTable" />
</p:selectBooleanCheckbox>
<h:outputText id="txt2" value=" Select all (Checked = visible)" />
</h:panelGrid>
<!-- p:outputPanel id="panel2" style="position: relative; width: 100%; height: 300px; display: block; border-width: 1px; border-style: solid; border-color: #000000; overflow: auto;" -->
<p:dataTable id="polyTable" var="polys" style="width: 98%;" value="#{mappingSessionBean.polyDataList}" rowKey="#{polys.name}"
paginator="true" paginatorPosition="bottom" rows="10"
selection="#{mappingSessionBean.selectedPolyData}" selectionMode="single" >
<p:column headerText="" style="width: 20px;" >
<p:selectBooleanCheckbox value="#{polys.visible}" >
<p:ajax listener="#{mappingSessionBean.visibleCheckBoxAjax(polys)}" update="@form :formCenter:gmap" />
</p:selectBooleanCheckbox>
</p:column>
<p:column headerText="Name" >
#{polys.name}
</p:column>
<p:ajax event="rowSelect" listener="#{mappingSessionBean.selectedPolyListener}" update="@form :formCenter:gmap" />
</p:dataTable>
<!-- /p:outputPanel -->
<h:outputText id="rxt3" value="Polygon Details" />
<p:outputPanel id="panel3" style="position: relative; width: 98%; height: 175px; display: block; border-width: 1px; border-style: solid; border-color: #000000; overflow: auto;" >
<p:outputPanel id="polyDetailPnl" >
<h:panelGrid columns="2" >
<h:outputText value="Polygon Id: " />
<h:outputText value="#{mappingSessionBean.selectedPolyData.polygonId}" />
<h:outputText value="Name: " />
<h:outputText value="#{mappingSessionBean.selectedPolyData.name}" />
<h:outputText value="Active Flag: " />
<h:outputText value="#{mappingSessionBean.selectedPolyData.active}" />
<h:outputText value="Color: " />
<h:outputText value="#{mappingSessionBean.selectedPolyData.lineColor}" />
</h:panelGrid>
<h:panelGrid columns="1" >
<h:outputText value="Polygon Points: Lat., Lon." />
<h:outputText value="#{mappingSessionBean.selectedPolyPoints}" escape="false" />
</h:panelGrid>
</p:outputPanel>
</p:outputPanel>
</h:panelGrid>
</p:outputPanel>
</h:form >
</p:layoutUnit>
</p:layout>
<p:confirmDialog id="confirmDialog" widgetVar="confirmDialog" header="Confirm Polygon Add / Update / Disable" message="#{mappingSessionBean.polyConfirmMsg}" >
<h:form>
<p:commandButton value="Yes" style="margin-left: 10px;" actionListener="#{mappingSessionBean.confirmAddPolyContinueAction}" oncomplete="confirmDialog.hide();" update=":formCenter:gmap :formCenter:messageComp:messagePnl" />
<p:commandButton value="No" style="margin-left: 25px;" actionListener="#{mappingSessionBean.confirmAddPolyQuitAction}" oncomplete="confirmDialog.hide();" update="@form :formCenter:gmap" />
</h:form>
</p:confirmDialog>
</h:body>
</html>
</f:view>