The correct way to do "custom layout" with ADF Faces

Question

Hi all,
I need the capability to do custom layout of ADF Faces page (other than the default layout we got after we drag data controls). For example I need layout like below :
Order Number : xxxx ............................................................Gross : 999,999
Order Date : xx/xx/xxxx ........................................................Discount : 999,999
Customer : code - name.........................................................Tax : 999,999
Salesman : code - name.........................................................Netto : 999,999
(the dotted line represents spaces)
Currently I do it with </afh:rowLayout> plus.. many..many </h:panelGrid>, so I am looking a better way. what is that ?
Below is sample of my code :
<afh:rowLayout>
<h:panelGrid columns="1" width="100" style="font-size:80.0%;">
<f:verbatim>
Order Number.
</f:verbatim>
</h:panelGrid>
<h:panelGrid columns="1" width="10">
<f:verbatim>
</f:verbatim>
</h:panelGrid>
<h:panelGrid columns="1" width="400">
<af:outputText value="#{bindings.SphView1Spno.inputValue}"
inlineStyle="font-size:80.0%;"/>
</h:panelGrid>
<h:panelGrid columns="1" width="10"/>
<h:panelGrid columns="1" width="60" style="font-size:80.0%;">
<f:verbatim>
Gross
</f:verbatim>
</h:panelGrid>
<h:panelGrid columns="1">
<f:verbatim>
</f:verbatim>
</h:panelGrid>
<h:panelGrid columns="1" width="100" style="text-align:right;">
<af:outputText value="#{bindings.SphView1Gross.inputValue}"
inlineStyle="font-size:80.0%; text-align:right;">
<f:convertNumber groupingUsed="false"
pattern="#{bindings.SphView1Gross.format}"/>
</af:outputText>
</h:panelGrid>
<h:panelGrid columns="1" width="100"
style="padding:1.0%; text-align:left;">
<af:outputText value="#{bindings.Valuta.inputValue}"
inlineStyle="font-size:80.0%;"/>
</h:panelGrid>
</afh:rowLayout>
<afh:rowLayout>
<h:panelGrid columns="1" width="100" style="font-size:80.0%;">
<f:verbatim>
SP Date
</f:verbatim>
</h:panelGrid>
<h:panelGrid columns="1" width="10">
<f:verbatim>
</f:verbatim>
</h:panelGrid>
<h:panelGrid columns="1" width="400">
<af:outputText value="#{bindings.SphView1Spdate.inputValue}"
inlineStyle="font-size:80.0%;">
<f:convertDateTime pattern="#{bindings.SphView1Spdate.format}"/>
</af:outputText>
</h:panelGrid>
<h:panelGrid columns="1" width="10"/>
<h:panelGrid columns="1" width="60" style="font-size:80.0%;">
<f:verbatim>
Discount
</f:verbatim>
</h:panelGrid>
<h:panelGrid columns="1">
<f:verbatim>
</f:verbatim>
</h:panelGrid>
<h:panelGrid columns="1" width="100" style="text-align:right;">
<af:outputText value="#{bindings.SphView1DiscBp.inputValue}"
inlineStyle="font-size:80.0%;">
<f:convertNumber groupingUsed="false"
pattern="#{bindings.SphView1DiscBp.format}"/>
</af:outputText>
</h:panelGrid>
<h:panelGrid columns="1" width="100"
style="padding:1.0%; text-align:left;">
<af:outputText value="#{bindings.Valuta.inputValue}"
inlineStyle="font-size:80.0%;"/>
</h:panelGrid>
</afh:rowLayout>
Thank you very much,
xtanto

Answer 1

Unfotunately nesting layouts or creating custom layouts is the best approach at this time. You may want to take a look at the folloing library to replace of your verbatim tags.
http://jsftutorials.net/htmLib/