Grouping Semantically Related Components
The af:group component aggregates or groups together children components that are related semantically. The af:group component does not provide any layout for its children. Used on its own, the af:group component does not render anything; only the children components inside af:group render at run time.
You can use any number of af:group components to group related components together. For example, you might want to group some of the input fields in a form layout created by af:panelFormLayout, as shown in the example in the slide that groups two sets of children components inside af:panelFormLayout.
When the af:group component is used as a child in a parent component that does provide special rendering for af:group children, then visible separators, such as bars or dotted lines, display around the children of each af:group. For example, af:panelFormLayout and af:toolbar support special rendering for af:group children. The example in the slide shows how at run time the af:panelFormLayout component renders dotted separator lines before and after the first and second af:group of children components. Children inside af:group are never split across a column on a form.
The af:group component is especially useful when you need to group components under a facet, because a facet may have only one child.