Wednesday, June 30, 2010

ADF 11g panelgroup: Tournament Layout

This is a short post on layout. With the quarter finals of the world cup 2010 coming up, it is time to show a simple layout example. A layout to show all teams and groups, competing in the world cup.

This layout is achieved by af:panelgrouplayout, af:panelbox, and af:forEach.
I read all the group data from a database table, and use the af:forEach to create a panelbox for each group. After that I use another af:forEach to add a line for every team in a group.

 <af:panelGroupLayout id="pgl1" layout="horizontal"  
<af:forEach var="group" items="#{bindings.ExistingGroups.rangeSet}">
<af:panelGroupLayout layout="vertical" id="pgl3">
<af:panelBox id="pb1"
showHeader="always" showDisclosure="false" >
<af:forEach items="#{bindings.GroupDraw.rangeSet}"
var="team" begin="#{group.index*4}"
<!-- *4 and +3 depends on the groupsize.-->
<af:panelGroupLayout layout="horizontal" halign="start"
<af:panelGroupLayout layout="horizontal"
halign="end" id="pgl5">
<af:image source="/flagservlet?detail=#{team.Teamcode}"
id="i5" shortDesc="#{team.Teamname}"/>
<af:spacer width="25"/>
<af:panelGroupLayout layout="horizontal"
halign="start" id="pgl4">
<af:commandLink text="#{team.Teamcode}"
<af:spacer height="35"/>
<f:facet name="toolbar">
<af:panelGroupLayout layout="horizontal" halign="center">
<af:commandLink text="#{group.Code}"
<af:setActionListener from="#{group.Code}" to="#{pageFlowScope.Groupcode}"/>

That is all to create a layout to show group contents, and to link to the groups, or team details.