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"  
inlineStyle="width:654px;">
<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}"
end="#{(group.index*4)+3}">
<!-- *4 and +3 depends on the groupsize.-->
<af:panelGroupLayout layout="horizontal" halign="start"
id="pgl2">
<af:panelGroupLayout layout="horizontal"
halign="end" id="pgl5">
<af:image source="/flagservlet?detail=#{team.Teamcode}"
id="i5" shortDesc="#{team.Teamname}"/>
</af:panelGroupLayout>
<af:spacer width="25"/>
<af:panelGroupLayout layout="horizontal"
halign="start" id="pgl4">
<af:commandLink text="#{team.Teamcode}"
shortDesc="#{bindings.GroupDraw.hints.Teamcode.tooltip}"
id="cl1"></af:commandLink>
</af:panelGroupLayout>
<af:spacer height="35"/>
</af:panelGroupLayout>
</af:forEach>
<f:facet name="toolbar">
<af:panelGroupLayout layout="horizontal" halign="center">
<af:commandLink text="#{group.Code}"
shortDesc="#{group.Description}"
action="Detail"
id="cl2">
<af:setActionListener from="#{group.Code}" to="#{pageFlowScope.Groupcode}"/>
</af:commandLink>
</af:panelGroupLayout>
</f:facet>
</af:panelBox>
</af:panelGroupLayout>
</af:forEach>
</af:panelGroupLayout>


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

2 comments:

Shay said...

Just a note that the recommended way is to use af:iterator instead of af:foreach

Anonymous said...

Hi,
Just a question. Are the images stored in database? can you post the source of flagservlet?


Thanks!!
Roger