Centered Content using panelGridLayout
- by Duncan Mills
A classic layout conundrum, which I think pretty much every ADF developer may have faced at some time or other, is that of truly centered (centred) layout. Typically this requirement comes up in relation to say displaying a login type screen or similar.
Superficially the problem seems easy, but as my buddy Eduardo explained when discussing this subject a couple of years ago it's actually a little more complex than you might have thought. If fact, even the "solution" provided in that posting is not perfect and suffers from a several issues (not Eduardo's fault, just limitations of panelStretch!)
The top, bottom, end and start facets all need something in them
The percentages you apply to the topHeight, startWidth etc. are calculated as part of the whole width. This means that you have to guestimate the correct percentage based on your typical screen size and the sizing of the centered content. So, at best, you will in fact only get approximate centering, and the more you tune that centering for a particular browser size the more it will fail if the user resizes.
You can't attach styles to the panelStretchLayout facets so to provide things like background color or fixed sizing you need to embed another container that you can apply styles to, typically a panelgroupLayout
For reference here's the code to print a simple 100px x 100px red centered square using the panelStretchLayout solution, approximately tuned to a 1980 x 1080 maximized browser (IDs omitted for brevity):
<af:panelStretchLayout startWidth="45%" endWidth="45%"
topHeight="45%" bottomHeight="45%" >
<f:facet name="center">
<af:panelGroupLayout inlineStyle="height:100px;width:100px;background-color:red;"
layout="vertical"/>
</f:facet>
<f:facet name="top">
<af:spacer height="1" width="1"/>
</f:facet>
<f:facet name="bottom">
<af:spacer height="1" width="1"/>
</f:facet>
<f:facet name="start">
<af:spacer height="1" width="1"/>
</f:facet>
<f:facet name="end">
<af:spacer height="1" width="1"/>
</f:facet>
</af:panelStretchLayout>
And so to panelGridLayout
So here's the good news, panelGridLayout makes this really easy and it works without the caveats above. The key point is that percentages used in the grid definition are evaluated after the fixed sizes are taken into account, so rather than having to guestimate what percentage will "more, or less", center the content you can just say "allocate half of what's left" to the flexible content and you're done.
Here's the same example using panelGridLayout:
<af:panelGridLayout>
<af:gridRow height="50%"/>
<af:gridRow height="100px">
<af:gridCell width="50%" />
<af:gridCell width="100px" halign="stretch" valign="stretch"
inlineStyle="background-color:red;">
<af:spacer width="1" height="1"/>
</af:gridCell>
<af:gridCell width="50%" />
</af:gridRow>
<af:gridRow height="50%"/>
</af:panelGridLayout>
So you can see that the amount of markup is somewhat smaller (as is, I should mention, the generated DOM structure in the browser), mainly because we don't need to introduce artificial components to ensure that facets are actually observed in the final result. But the key thing here is that the centering is no longer approximate and it will work as expected as the user resizes the browser screen. By far this is a more satisfactory solution and although it's only a simple example, it will hopefully open your eyes to the potential of panelGridLayout as your number one, go-to layout container.
Just a reminder though, right now, panelGridLayout is only available in 11.1.2.2 and above.
