Exploring af:panelGroupLayout – Part 3 – Combination of both Horizontal & Vertical Layouts

In the previous tutorial, we learnt about af:panelGroupLayout control with Vertical layout option.

In this Oracle ADF tutorial, we will explore af:panelGroupLayout control with a combination of both Horizontal & Vertical layout options. We will try to understand af:panelGroupLayout with the help of its HTML equivalent tags. To use it effectively, it is good to understand what happens on the browser side.

As I understand, af:panelGroupLayout is the most widely used component in an Oracle ADF web application. It can be used in different ways and it has numerous parameters to customize the layout according to the user’s choice.

What exactly is af:panelGroupLayout ?

The panelGroupLayout control is a layout element that arranges its children in one of a few simple patterns. Each pair of adjacent children will be separated by an optional separator child. It can lay out children consecutively (wrapping as needed), or in a single horizontal line, or vertically.

When you use the af:panelGroupLayout with a combination of HORIZONTAL layout and VERTICAL layout options, what happens on the browser side?

• layout = “horizontal” in af:panelGroupLayout will create a HTML “table” tag with 1 row “tr” and 1 cell (or column) “td” tag defined inside a “tbody” tag. Each element added to it will become a HTML cell (or column) “td” tag.
• layout = “vertical” in af:pnaelGroupLayout wil create a HTML “div” tag.
• af:outputLabel will create a “span” tag and “label” tag defined. “label” tag contains the value to be displayed.
• In this sample scenario, I’ve chosen a panelGroupLayout with ‘horizontal’ layout as the top-most layer which creates a row “tr” and it contains 2 panelGroupLayout with ‘vertical’ layout which creates 2 cells (or columns) “td” tags.