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.
