ADF Layouts Revisted


Designing UI pages in ADF can be somewhat cumbersome if you don’t understand what really goes on behind the scenes when using the layout specific tags such as af:panelGroupLayout. OOTB JDeveloper comes with many different types of layout based tags. If you have read my previous post on layout management, you will notice that some of these tags are meant for specific layout design type patterns: Stretch (application Look-n-Feel -LnF-, i.e. JDeveloper UI), or Flow (generic web site LnF). Moreover, using the layout tags in an illegal combination usually creates a design that renders the UI in a undesirable behavior. For example, stretchable items (i.e. tables) not stretching, or scrollable (flow) content not scrolling. To better understand how to create better layouts we must first understand what the layout components will actually turn into HTML wise on the browsers end. This knowledge will help not only in choosing the correct combination of layout tags, but will also enable you to use the power of CSS styles to “control” how the elements look and behave.

Main Article

The first layout tag that I am going to discuss is one of the most used tag, the af:panelGroupLayout.

Tag name: af:panelGroupLayout
Component type: oracle.adf.RichPanelGroupLayout

The af: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.  Rules of thumb on usage:

  • Never place a scrolling af:panelGroupLayout inside of another scrolling af:panelGroupLayout since users do not like nested scroll bars
  • Never specify percentage heights in any component’s inlineStyle attribute
  • Never use the position style in any component’s inlineStyle attribute. Unless you are using fixed pixel heights on them, you would never place a af:panelSplitter or af:panelStretchLayout inside of any af:panelGroupLayout regardless of what you have set its layout attribute to

If you believe that you need to break one of these rules, this is an indication that your page structure is not following the page structure guidelines and you will likely have troubles getting your application to render consistently across various web browsers and computing platforms. You may also alternatively place a facetRef, iterator, or switcher inside of the af:panelGroupLayout and their resolved children will be treated as if they were direct children of the af:panelGroupLayout. If you don’t want this behavior, you may wrap the children you want to be grouped in a group component.

Geometry Management:

  • This component CAN be stretched by a parent layout component that stretches its children, e.g., af:panelStretchLayout if: layout=scroll or layout=vertical
  • This component CANNOT be stretched by a parent layout component that stretches its children if: layout=default or layout=horizontal

Now that we understand what the ADF side of things are. When you use the af:panelGroupLayout what happens on the browser side? Based on the layout type selected, this will mean different things. In general, here are the browser HTML equivalents to the different layout styles:

  • layout= default will turn into a HTML SPAN
  • layout = vertical will turn into a HTML DIV
  • layout= scroll will also turn into a HTML DIV – with an added style setting to induce the vertical scrollbar to appear – overflow: auto; width: 100%; height: 100%;
  • layout= horizontal will turn into a HTML table – with 1 HTML row TD defined. Each element added will become a HTML cell TD

To give an example of using the af:panelGroupLayout in combinations of other af:panelGroupLayouts that uses different layout settings, here is an image that shows a simple use case. Note: the colored borders are there to show each of the component elements.

The ADF components that were used are as follows:


This, in turn produces these HTML tags:

In this example, the top panelGroupLayout (bordered in green) has been set to layout=horizontal, which sets the tag in the browser to be an HTML TABLE. In this table body, you see 1 table row (TR) defined. Each subsequent item added to the row, becomes a table cell (TD). The 2 items that have been added are panelGroupLayout’s that have the layout set to vertical, which in turn creates a HTML DIV. Knowing this you can add standard CSS style elements to these ADF layout tags to create visual behavior such as padding and margin. This is just a example on how to use the appropriate ADF layout tags to create conventional visual designs. In addition, once you have mastered what the ADF to HTML tag equivalents are, you will be able to convert your HTML mockups into the ADF world. In my next post I will cover more of the layout tags.

Add Your Comment