31 Aug 2015

Separator facet in PanelGroupLayout

The beauty of ADF is that there is always something to learn. There are plenty of tiny little things in the framework that are worth to know as they could make your life easier. This very short post is for those folks who have overlooked this small but useful feature. I mean the separator facet of the PanelGroupLayout component.

Pretty often ADF developers use PanelGroupLayout while working on the layout of their pages and in order to separate components inside the panel from each other they put some kind of a separator (like spacer) between the components. Something like this:

<af:panelGroupLayout id="pgl1" layout="vertical">
  <af:inputText label="Label 1" id="it1"/>
  <af:spacer width="10" height="10" id="s1"/>
  <af:inputText label="Label 2" id="it2"/>
  <af:spacer width="10" height="10" id="s2"/>
  <af:inputText label="Label 3" id="it3"/>
  <af:spacer width="10" height="10" id="s3"/>
  <af:button text="button 1" id="b1"/>
</af:panelGroupLayout>


There is more elegant way to separate the components by using the separator facet:

<af:panelGroupLayout id="pgl1" layout="vertical">
  <af:inputText label="Label 1" id="it1"/>
  <af:inputText label="Label 2" id="it2"/>
  <af:inputText label="Label 3" id="it3"/>
  <af:button text="button 1" id="b1"/>
  <f:facet name="separator">
    <af:spacer width="10" height="10" id="s1"/>
  </f:facet>
</af:panelGroupLayout>

That's it!