Enterprise Client Community

when a popup is displayed, wo want to gray out the background of the page, see attached screen shot layer.jpg.

in a first attempt, we tried to implement this via layered panes, modifying the wp_workpagecontainer.jsp as attached. This has the issues described below - you can either solve them, or take this as a feature request and implement e.g. a new flag in ModalPopup named something like ("make-it-behave-as-in-our-screenshot"), or do both.

problem1: inserting the layered pane between row-g_23 and pane-g_24 mixes up the height calculation. While pane-g_24 seems to be resized correctly, the pane resulting from rowinclude-g_28 always gets the height of the "previous" parent height! So initially its height is nearly 0. Just sizing the PageBrowser window some pixels with the mouse brings it to an acceptable size, though it still follows the parent sizing one resize step behind.

problem2: our gray pane is a second layer pane-g_22_gray which has a semi transparent color and has a rendered property which is changed accordingly (...we have subclassed WorkPage and have a method getHasPopup() ...). When this flag is switched on, the layer appears, but again only after the window has been slightly resized. What does not work is to make this layer invisible again, by setting its rendered property to false. While it falls out of LAYEREDPANEElement, it is not taken out of the swing components, so continues to hang around. It is no more part of the resizing business, so when PageBrowser is made bigger, the shade stays around in the size when it was taken out of rendering.

problem3: there is probably some issues when the "rendered" flag is changed in the middle of a jsf roundtrip; this flag is queried rather often during the jsf life cycle phases, and it did not work when the flag would become true only in a later phase. What is the exact specification on when the rendered flag can be switched from false-to-true or true-to-false.

regards
Manfred

Hmmm..., what I would do is the following:

Code:

 <layeredpane>
 <pane>
    ...your normal content...
 </pane>
 <pane>
    <row rendered="....">
       <pane background="..." width="100%" height="100%"/>
    </row>
 </pane>
 </layeredpane>

So keeping the layer-structure fix and just showing some content within the "shading layer", dependent on rendered flag there. So: keep the layer structure fix and use components within the layer.

About "rendered". Despite of what may be possible I would clearly address any changes to the rendered flag in the invoke-phase only.

Björn

Sorry, but this did not really help.
It even introduces more problems: apparently the direct childpanes of layeredpane do not conform to their own width/height attribute, but always take the height of their parent.
So even if t:row is not rendered, the surroundinf pane is always there preventing mouse and keyboard access to controls (which is desired behavior when a popup is open, but not at all when there is no popup).

The other problems regarding resize etc. are not solved, either.
regards
Manfred

Yes, the proposal, was not perfect...: you do not "come through" the top pane with clicks etc.

About sizing: the layered pane sizes its content following way:

If it has an own width/height definition => OK, it these ones are relevant.
Otherwise it takes the biggest combination width/height of its contained child-panes.

All the panes contained in the layered pane exactly follow the sizing of the layered pane.

Björn

...we are just checking things with LAYEREDPANE, there is a problem with removing/adding subpanes at runtime.

Björn

...bug is fixed. Fix available with next update or on request.
Björn