Databases
StackOverflow2013
Postsdbo
PODynamic resize of <p:layoutUnit> can it be done?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamic resize of <p:layoutUnit> can it be done?
    primarykey
    data
    text
    <p>I asked this question on the PrimeFaces forum and got no response, so I figured I would try here.</p> <ul> <li>Using PrimeFaces 3.0 - </li> </ul> <p>I have a page that contains [p:layout] with a [p:layoutUnit] that I want to resize dynamically in a backing bean. There are two ways I am using this:</p> <p>1) A [p:commandButton] calls a backing bean that sets the bean property for the size parameter in the p:layoutUnit component. I can do this, but in order to make it work, I have to set ajax="false" and update="@all" (probably don't need the update) in order to force a page redraw. When I do that, the width of the is reset and the panel draws at the desired width.</p> <p>2) I have a [g:map] component with p:ajax event="overlaySelect" I want to resize the panel in a similar way when the overlayEvent is activated. The problem I am having is that I can't seem to make the [p:overlayUnit] resize without a complete page refresh, and I can't seem to get the overlaySelect event to cause the page to refresh (or it does not do so in a manner that will resizze the [p:layoutUnit]. It will resize if I do a page refresh.</p> <p>I have two questions: 1) Is there a way to dynamically resize a [p:layoutUnit] component without having to do a complete page refresh? I can't seem to make it work any other way.</p> <p>2) Is there a way to force the [p:ajax event="overlaySelect"] to force a complete page refresh so I can force the resize like I do in my first scenario?</p> <p>Thanks</p> <p>Here is the page code if anyone is interested:</p> <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;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"&gt; &lt;html&gt; &lt;h:head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;link href="./resources/css/default.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="./resources/js/Raphael.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; .ui-layout-north { z-index:20 !important; overflow:visible !important;; } .ui-layout-north .ui-layout-unit-content { overflow:visible !important; } &lt;/style&gt; &lt;title&gt;Map Polygon Edit&lt;/title&gt; &lt;/h:head&gt; &lt;h:body&gt; &lt;p:layout fullPage="true" onResize="onResizeEvent(event)" &gt; &lt;p:layoutUnit position="north" size="82" resizable="true" &gt; &lt;h:form id="formNorth" prependId="=false" &gt; &lt;p:outputPanel id="panelNorth" &gt; &lt;comp:header id="headerComp" /&gt; &lt;comp:menuBar id="menuBarComp" /&gt; &lt;/p:outputPanel&gt; &lt;/h:form &gt; &lt;/p:layoutUnit&gt; &lt;p:layoutUnit id="layoutWest" position="west" size="#{mappingSessionBean.optionPanelWidth}" resizable="true" collapsible="true" header="Options" &gt; &lt;h:form id="formWest" prependId="=false" &gt; &lt;p:outputPanel id="panelWest" &gt; &lt;h:panelGrid columns="1" style="padding-top: 5px; width: 98%;" rendered="#{mappingSessionBean.displayOptionGridWest}" &gt; &lt;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" /&gt; &lt;h:commandLink value="Edit Polygon" style="margin-left: 5px;" action="#{mappingSessionBean.editPolyAction}" disabled="#{mappingSessionBean.disableEditPolygonLink}" rendered="#{mappingSessionBean.displayEditPolygonLink}" update=":formCenter:messageComp:messagePnl" /&gt; &lt;h:commandLink value="Disable Polygon" style="margin-left: 5px;" action="#{mappingSessionBean.disablePolyAction}" disabled="#{mappingSessionBean.disableDisablePolygonLink}" rendered="#{mappingSessionBean.displayDisablePolygonLink}" update=":formCenter:messageComp:messagePnl" /&gt; &lt;h:commandLink value="Locate Address" style="margin-left: 5px;" action="#{mappingSessionBean.locateAddressAction}" disabled="#{mappingSessionBean.disableLocateAddressLink}" rendered="#{mappingSessionBean.displayLocateAddressLink}" update="@form" /&gt; &lt;p:separator /&gt; &lt;h:outputText value="Locate Address:" style="margin-left: 5px;" rendered="#{mappingSessionBean.displayLocateAddress}" /&gt; &lt;p:inputTextarea value="#{mappingSessionBean.searchAddress}" style="width: 125px;; height: 40px;" autoResize="false" maxHeight="40" rendered="#{mappingSessionBean.displayLocateAddress}" /&gt; &lt;p:commandButton value="Find" action="#{mappingSessionBean.findAddressAction()}" update="@form :formCenter:gmap :formCenter:messageComp:messagePnl" rendered="#{mappingSessionBean.displayLocateAddress}" /&gt; &lt;p:separator rendered="#{mappingSessionBean.displayLocateAddress}" /&gt; &lt;p:commandButton id="btn3" value="Save Polygon" style="width: 135px;" disabled="#{mappingSessionBean.disableSavePolyBtn}" onclick="confirmDialog.show();" update="@form :formCenter:gmap :formCenter:messageComp:messagePnl" /&gt; &lt;p:commandButton id="btn5" value="Refresh Polygons" style="width: 135px;" disabled="#{mappingSessionBean.disablePolyBtns}" action="#{mappingSessionBean.refreshPolygons}" update="@form :formCenter:gmap" /&gt; &lt;p:commandButton id="btn6" value="Test State" style="width: 135px;" action="#{mappingSessionBean.testStatePolygon}" onclick="confirmDialog.show();" update="@form :formCenter:gmap" /&gt; &lt;p:separator /&gt; &lt;/h:panelGrid&gt; &lt;h:panelGrid columns="3" style="width: 145px;" &gt; &lt;h:outputText value="Map Height: " style="margin-left: 5px;" /&gt; &lt;p:commandButton value="+" action="#{mappingSessionBean.polyMapPlus}" update=":formCenter:gmap" /&gt; &lt;p:commandButton value="-" action="#{mappingSessionBean.polyMapMinus}" update=":formCenter:gmap" /&gt; &lt;/h:panelGrid&gt; &lt;h:panelGrid columns="1" style="padding-top: 5px; width: 98%;" &gt; &lt;p:commandButton value="Restore Original" style="width: 135px;" disabled="#{mappingSessionBean.disablePolyBtns}" action="${mappingSessionBean.restoreOriginalPolyView}" update=":formCenter:gmap :formEast:panelEast" /&gt; &lt;/h:panelGrid&gt; &lt;comp:polygonAddPanel id="polygonAddPanelComp" /&gt; &lt;comp:polygonEditPanel id="polygonEditanelComp" /&gt; &lt;/p:outputPanel&gt; &lt;/h:form &gt; &lt;/p:layoutUnit&gt; &lt;p:layoutUnit position="center" resizable="true" &gt; &lt;h:form id="formCenter" prependId="false" &gt; &lt;p:idleMonitor onidle="idleDialog.show();" timeout="#{sessionBean1.timeout}" &gt; &lt;p:ajax event="idle" listener="#{sessionBean1.idleListener}" update="@form" /&gt; &lt;/p:idleMonitor&gt; &lt;comp:message id="messageComp" message="#{sessionBean1.message}" /&gt; &lt;p:outputPanel id="mapAddPolyPanel" &gt; &lt;h:panelGrid id="mapAddPolyPanelGrid" style="width: 90%; height: 35px; margin-top: 10px; display: block; position: relative;" columns="4" &gt; &lt;h:outputText value="Account:" /&gt; &lt;p:selectOneMenu style="width: 250px;" value="#{mappingSessionBean.selectedAccount}" &gt; &lt;f:selectItems value="#{sessionBean1.custAccountList}"/&gt; &lt;p:ajax listener="#{mappingSessionBean.accountSelectAction}" update="polyGrpDD gmap" /&gt; &lt;/p:selectOneMenu&gt; &lt;h:outputText value="Polygon Group:" /&gt; &lt;p:selectOneMenu id="polyGrpDD" style="width: 250px;" value="#{mappingSessionBean.selectedPolyGroup}" &gt; &lt;f:selectItems value="#{mappingSessionBean.polygonGroupList}"/&gt; &lt;p:ajax listener="#{mappingSessionBean.polyGroupSelectAction}" update="@form :formEast:panelEast :formWest:panelWest gmap" /&gt; &lt;/p:selectOneMenu&gt; &lt;/h:panelGrid&gt; &lt;p:outputPanel id="mapPanel" style="top: 0px; width: 98%; left: 10px; position: relative;" rendered="#{mappingSessionBean.displayMapPanel}" &gt; &lt;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" &gt; &lt;p:ajax id="gmapAjax1" event="overlaySelect" listener="#{mappingSessionBean.onMapOverlaySelect}" update="@all :formEast:polyDetailPnl gmap messageComp:messagePnl :formCenter:mapPanel :formWest" /&gt; &lt;p:ajax id="gmapAjax3" event="pointSelect" listener="#{mappingSessionBean.onMapPointSelect}" update="gmap" /&gt; &lt;p:ajax id="gmapAjax2" event="stateChange" listener="#{mappingSessionBean.onMapStateChange}" /&gt; &lt;p:ajax id="gmapAjax4" event="markerDrag" listener="#{mappingSessionBean.onMapMarkerDrag}" update="gmap" /&gt; &lt;/p:gmap&gt; &lt;/p:outputPanel&gt; &lt;/p:outputPanel&gt; &lt;/h:form &gt; &lt;/p:layoutUnit&gt; &lt;p:layoutUnit position="east" size="205" resizable="true" collapsible="true" header="Polygons" &gt; &lt;h:form id="formEast" prependId="=false" &gt; &lt;p:outputPanel id="panelEast" &gt; &lt;h:panelGrid id="grid2" columns="1" style="height: 500px; width: 96%; display: block;" &gt; &lt;h:panelGrid columns="2" &gt; &lt;p:selectBooleanCheckbox value="#{mappingSessionBean.displayAllPolygons}" &gt; &lt;p:ajax listener="#{mappingSessionBean.displayAllPolyAction}" update="@form :formCenter:gmap polyTable" /&gt; &lt;/p:selectBooleanCheckbox&gt; &lt;h:outputText id="txt2" value=" Select all (Checked = visible)" /&gt; &lt;/h:panelGrid&gt; &lt;!-- p:outputPanel id="panel2" style="position: relative; width: 100%; height: 300px; display: block; border-width: 1px; border-style: solid; border-color: #000000; overflow: auto;" --&gt; &lt;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" &gt; &lt;p:column headerText="" style="width: 20px;" &gt; &lt;p:selectBooleanCheckbox value="#{polys.visible}" &gt; &lt;p:ajax listener="#{mappingSessionBean.visibleCheckBoxAjax(polys)}" update="@form :formCenter:gmap" /&gt; &lt;/p:selectBooleanCheckbox&gt; &lt;/p:column&gt; &lt;p:column headerText="Name" &gt; #{polys.name} &lt;/p:column&gt; &lt;p:ajax event="rowSelect" listener="#{mappingSessionBean.selectedPolyListener}" update="@form :formCenter:gmap" /&gt; &lt;/p:dataTable&gt; &lt;!-- /p:outputPanel --&gt; &lt;h:outputText id="rxt3" value="Polygon Details" /&gt; &lt;p:outputPanel id="panel3" style="position: relative; width: 98%; height: 175px; display: block; border-width: 1px; border-style: solid; border-color: #000000; overflow: auto;" &gt; &lt;p:outputPanel id="polyDetailPnl" &gt; &lt;h:panelGrid columns="2" &gt; &lt;h:outputText value="Polygon Id: " /&gt; &lt;h:outputText value="#{mappingSessionBean.selectedPolyData.polygonId}" /&gt; &lt;h:outputText value="Name: " /&gt; &lt;h:outputText value="#{mappingSessionBean.selectedPolyData.name}" /&gt; &lt;h:outputText value="Active Flag: " /&gt; &lt;h:outputText value="#{mappingSessionBean.selectedPolyData.active}" /&gt; &lt;h:outputText value="Color: " /&gt; &lt;h:outputText value="#{mappingSessionBean.selectedPolyData.lineColor}" /&gt; &lt;/h:panelGrid&gt; &lt;h:panelGrid columns="1" &gt; &lt;h:outputText value="Polygon Points: Lat., Lon." /&gt; &lt;h:outputText value="#{mappingSessionBean.selectedPolyPoints}" escape="false" /&gt; &lt;/h:panelGrid&gt; &lt;/p:outputPanel&gt; &lt;/p:outputPanel&gt; &lt;/h:panelGrid&gt; &lt;/p:outputPanel&gt; &lt;/h:form &gt; &lt;/p:layoutUnit&gt; &lt;/p:layout&gt; &lt;p:confirmDialog id="confirmDialog" widgetVar="confirmDialog" header="Confirm Polygon Add / Update / Disable" message="#{mappingSessionBean.polyConfirmMsg}" &gt; &lt;h:form&gt; &lt;p:commandButton value="Yes" style="margin-left: 10px;" actionListener="#{mappingSessionBean.confirmAddPolyContinueAction}" oncomplete="confirmDialog.hide();" update=":formCenter:gmap :formCenter:messageComp:messagePnl" /&gt; &lt;p:commandButton value="No" style="margin-left: 25px;" actionListener="#{mappingSessionBean.confirmAddPolyQuitAction}" oncomplete="confirmDialog.hide();" update="@form :formCenter:gmap" /&gt; &lt;/h:form&gt; &lt;/p:confirmDialog&gt; &lt;/h:body&gt; &lt;/html&gt; &lt;/f:view&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBurferd
    1. USBurferd
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload