PrimeFaces フォーラムでこの質問をしましたが、応答がなかったので、ここで試してみることにしました。
- PrimeFaces 3.0 の使用 -
バッキング Bean で動的にサイズ変更したい [p:layoutUnit] を含む [p:layout] を含むページがあります。私がこれを使用している2つの方法があります:
1) [p:commandButton] は、p:layoutUnit コンポーネントのサイズ パラメータの Bean プロパティを設定するバッキング Bean を呼び出します。私はこれを行うことができますが、それを機能させるには、ページを強制的に再描画するために ajax="false" および update="@all" (おそらく更新は必要ありません) を設定する必要があります。これを行うと、幅がリセットされ、パネルが目的の幅で描画されます。
2) p:ajax event="overlaySelect" を持つ [g:map] コンポーネントがあります。overlayEvent がアクティブになったときに、同様の方法でパネルのサイズを変更したいと考えています。私が抱えている問題は、ページを完全に更新しないと [p:overlayUnit] のサイズを変更できないように見えることと、ページを更新するための overlaySelect イベントを取得できないように見えることです (または、更新されません)。 [p:layoutUnit] のサイズを変更する方法で、ページを更新するとサイズが変更されます。
2 つの質問があります。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>