Imagine a situation when you build a form and you want to place above a given field a separator, text, or even a panel spanning among multiple fields. For example, you may want something like this:

Desired UI

#!xml

<p:panel header="Group of emails">
  <field-email/>
  <field-email-alternate/>
</panel>

<p:panel header="Group of VOIPs">
  <field-skype/>
  <field-gtalk/>
</panel>

The first option is to use a custom layout. The second option is @UiBefore and @UiAfter. Both annotations allow you to expose its internal properties type, value, and title.

Applying before and after

Example annotation

#!java

@Email
@UiOrder(1)
@UiBefore(type = "panel", title = "Group of emails")
public String getEmail() { return email; }

@Email
@UiOrder(2)
@UiAfter(type = "panel")
public String getEmailAlternate() { return emailAlternate; }

@UiOrder(3)
@UiBefore(type = "panel", title = "Group of VOIPs")
public String getSkype() { return skype; }
@UiOrder(4)
@UiAfter(type = "panel")
public String getGtalk() { return gtalk; }

This exposes to the context virtual fields between the physical fields of type Insert that can be mapped in the AF mapping profile (*.config.xml)

Mapping profile

#!xml

<mapping>
  <type>Insert</type>
  <default tag="emptyTag.xhtml" />
  <condition expression='${not empty before and before.type.equals("panel")}' tag="beforeTag.xhtml"/>
  <condition expression='${not empty  after and  after.type.equals("panel")}' tag="afterTag.xhtml" />
</mapping>

Consider these sample templates

Sample beforeTag.xhtml

#!xml

<p:panel header="$before.value.title$">

Sample afterTag.xhtml

#!xml

</p:panel>

which produces exactly what we wanted at first place.

Wiki

AspectFaces / 7.3.Field-Wrapping

Applying before and after