Layout Tips - Stretching components to fit browser window

ADF Faces is packaged with rich set of layout managers which makes layout problems trivial. If you really want to have a feel of ADF Faces Layout components, please go through this ADF Faces Demo. If you come from Java Swing world, you can see lots of familiar faces here as well. I really like the ADF Faces stretchable layouts with which you can easily build hassle free, browser friendly web applications. Recently, I noticed an interesting post from Matt Cooper on exploring the richness of PanelStretchLayout - Stretchable Tiled Layout . This idea is very useful when you need to stretch multiple child components based on the browser size.

A Case Study

At this time, let me share some basic tips on lay outing components on a web page built using ADF Faces by taking a simple example.

Consider a use case where you need to build a web page as shown below.

Apparently, screen is split in two parts - left hand side contains basic search functionality and right hand side contain a tabbed pane. UI requirement here is that inside the right pane all the components are supposed to occupy maximum available size on the screen(i.e. components are supposed to be stretchable). ADF Faces lay outing mechanism got a PanelSplitters component to divide a region into two parts with a repositionable divider.

PanelSplitters are used to divide a region into two parts with a repositionable divider. The two parts are identified as the "first" facet and the "second" facet. If the contained component supports it, the contents of a section will stretch to fill up all available space in that section. The panel splitter can be adjusted with the mouse, by pressing a collapse button, or by use of the arrow keys when the splitter is selected. A panel splitter can split horizontally or vertically based on the orientation attribute.

So af:panelSplitter can be used to split the screen in the above mentioned case as well.

Tabbed panel on right hand side can be realized using af:panelTabbed

This component uses <af:showdetailitem> to organize content into each tab body panel. The <af:showdetailitem> will allow stretching if:
* It contains a single child
* It has stretchChildren="first" specified
* The child has no width, height, margin, border, and padding
* The child must be capable of being stretched

At this stage, the jspx may look like as shown below;

How to stretch child components?

Now the task left is to identify the layout for the container which is smart enough to stretch it children as well. Fortunately ADF Faces do support af:panelStretchLayout that fits well with our requirement.

The panelStretchLayout component stretches the child in the center facet to fill all of available space. The available space may be constrained by the presence of other children in the top/bottom/start/end facets. When these children are present, they occupy space defined by the topHeight/bottomHeight and startWidth/endWidth attributes.

So far, so good. Now’s the time to sweat your brain. <af:panelStretchLayout>  comes with only 3 facets. As per the above UI design requirement, it is required to have 4 graphs to be displayed in equal size, occupying the available area on the parent container. No worries, <af:panelStretchLayout>  is smart enough to stretch it child 'layout containers' as well and there is a provision to specify heights in percentage for each facets ( topHeight / bottomHeight). So let us go ahead and add a child panelStretchLayout to keep the additional elements. Now the web page may have the below shown structure.

How to stretch a table?

Before winding up this session, let us have a quick look at stretchable table as well. Consider the second tab of the above UI where the requirement is to stretch table to fill the entire available area.

Obviously table (Here table is added inside panel header) needs to be wrapped inside a af:panelStretchLayout. Interestingly af:table got one special attribute - columnStretching - for stretching one of its column to spread over the available space of its immediate parent container. And ideal column for stretching could be one with maximum length, say for example 'description' column.

Further Reading
Chapter 8 Organizing Content on Web Pages from Web User Interface Developer's Guide will help you to understand ADF Faces layout components better.
Learn More ...

If  you are curious to learn the internals of the ADF Business Components and ADF Binding Layer,  the following book is for you - Oracle ADF Real World Developer’s Guide.
More details about this book can be found in this post- http://jobinesh.blogspot.in/2012/07/pre-order-your-copy-of-oracle-adf-real.html