Centered, Fixed Size Layout with ADF Faces

ADF Faces layout components are pretty powerful. They are able to stretch themselves and their children components to neatly accommodate UI components to fill the height and width of the browser content area, also called the viewport.

That’s all cool and dandy, but what if you don’t want things to stretch? More precisely, you want your UI to be of a fixed size? Something like this very blog, or the 960 Grid System where the contents are displayed inside a 960px container that is centralized in the browser’s viewport no matter what’s the browser window size or the display resolution?

If you work with ADF Faces you’d think that this kind of layout is not possible just by looking at the ADF Faces Component Demo or WebCenter Spaces Workspaces (that are all ADF based), right? I mean, everything stretches and expands and accommodates inside the browser’s viewport, and if you resize the browser you can see the components adjusting themselves to the new viewport size. Moreover, everything seems to be left or start-aligned. So how can I achieve a centered, fixed size layout?

Well, let’s start by writing down what I need:

I need the background of my page to stretch to fill the whole viewport. Then I need to make my main area to be centered, but it also needs to scroll, so I can stack things vertically.

Cool. So this is my requirement. I guess that you already noticed some clues on how I’m building the UI. Let’s see how you can translate this to ADF Faces tags:

“Wait, that’s it?” Yup. Three tags (I know, it’s actually four, but stay with me). Let’s take a look at it again:

1. The panelStretchLayout is the base layout component. This will be true for 99.999% of your layouts. It makes sure that the browser’s viewport will be fully utilized.
2. A nested panelGroupLayout with layout=”scroll” so the vertical scrollbar will be shown whenever the contents of the page overflow the browser’s viewport. In this case, it will show as the browser’s native scrollbar on the right side as it is being stretched by the parent panelStretchLayout. It also has halign=”center” so anything within it will be centralized.
3. Another panelGroupLayout with layout=”vertical”. This is the fixed size container; notice that some inlineStyle properties are being set, lie, “width:960px”. This will guarantee that this container won’t exceed 960px. The other properties are for visualization purposes only. Of course, you shouldn’t be setting inlineStyle properties. Just create a CSS file with a custom class or, better, create a skin for your application, but this will work for the sample.

This is all that’s needed. OK, now, notice that there’s one more nested panelgroupLayout with layout=”vertical” and inlineStyle=”height:1024.0px” . This is to simulate some overflow content so the scrollbar shows up in the browser:

Here’s how the HTML for this structure was generated by ADF Faces. I recommend the Firebug Plugin if you want to get down to this level of detail:

I’ve got to admit that it’s not visually compelling right now, so let’s jazz it up with some background and CSS to see how it looks:

Much better now. I’ve added a Header Area that actually stretches beyond the fixed size area that contains the Top Area and the Content Area.

One thing that you need to be aware is that now you are on a fixed size “world”. Don’t expect things to stretch or adjust to each other within the fixed size container, but that’s ok, because you’ve chosen to work with a fixed size layout and you can arbitrarily set the components size. You should avoid using percentages too, because then it’s up to the browser to decide what 90% of “what” should be rendered. If you need to stretch horizontally than use the AFStretchWidth selector in the component’s styleClass.

Last but not least, I’ve done some of the hard work for you and put everything on an ADF Faces template so you can study the sample or even reuse it. You can download the sample here.

If you have any suggestions on UI layouts that would be interested to see on ADF Faces feel free to post them in the comments area.