Exploring af:panelGroupLayout – Part 1 – Horizontal Layout

In this Oracle ADF tutorial, we will explore af:panelGroupLayout control with Horizontal layout option. 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 HORIZONTAL layout option, what happens on the browser side? 

• layout = “horizontal” in af:panelGroupLayout will create a HTML “table” tag with 1 row “tr” tag and 1 cell (or column) “td” tag defined inside a “tbody” tag.
• Each element or component added to af:panelGroupLayout will become a HTML cell (or column) “td” tag. In case of “vertical” layout, it would be “div” tag. Under this “td” tag, it will create a “table” tag with 1 row “tr” tag and 1 cell (or column) “td” tag defined inside a “tbody” tag.
• af:inputText will create 2 HTML tags, one for “label” tag to display label text and another one for “input” tag to accept user input.
• af:link will create 2 HTML tags “a href” tag and “span” tag like <a href=”…”><span>link text</span></a>
• af:button will create a “div” tag which contains the “a href” and “span” tags

In the next tutorial, we’ll try to explore af:panelGroupLayout when layout=”vertical”.