In ADF Faces tree and tree table is used for hierarchical representation of master/detail form of data,
in this tutorial i will show you that how can we design better UI's using master detail data.
af:iterator and af:ForEach both are used to iterate data as af:table for custom UI component-
here i am taking example of default HR Schema of Oracle database , Departments and Employees table to show master-detail relation
in this tutorial i will show you that how can we design better UI's using master detail data.
af:iterator and af:ForEach both are used to iterate data as af:table for custom UI component-
here i am taking example of default HR Schema of Oracle database , Departments and Employees table to show master-detail relation
Using af:iterator-
- Create a Fusion Web Application and prepare model for master detail relationship between departments and employees table, and in your page drop af:showDetailHeader from component palette
- Go to page binding, add tree binding for Departments (Master) and Employees (Detail)
- Surround showDetailHeader with an af:iterator, and set value and var for iterator (master)
- Now change text of showDetailHeader to show department name on it, taking reference from iterator's var
- master part is done, for detail part drop two output text (for employee's first name and last name) inside showDetailHeader surrounding with an iterator (for detail part)
- set the value and var for detail iterator taking reference from master iterator
- Now to show detail values in output text , set the value in both output text, taking reference from detail iterator
- See the source of page for more clarification-
<af:iterator id="i3" value="#{bindings.Departments1.collectionModel}" var="departments"> <af:showDetailHeader text="#{departments.DepartmentName}" disclosed="true" id="sdh1" inlineStyle="width:350px;"> <f:facet name="context"/> <f:facet name="menuBar"/> <f:facet name="toolbar"/> <f:facet name="legend"/> <f:facet name="info"/> <af:panelGroupLayout id="pgl2" layout="vertical"> <af:iterator id="i2" var="emp" value="#{departments.Employees}"> <af:separator id="s3"/> <af:panelFormLayout id="pfl1" rows="1"> <af:outputText value="#{emp.FirstName}" id="ot2" inlineStyle="font-weight:bold;color:darkblue;"/> <af:outputText value="#{emp.LastName}" id="ot3" inlineStyle="font-weight:bold;color:red;"/> </af:panelFormLayout> <af:spacer width="10" height="10" id="s1"/> </af:iterator> </af:panelGroupLayout> </af:showDetailHeader> </af:iterator>
- Now Run your page to see UI of this master-detail relationship-
Using af:ForEach-
- Drop a panel accordion on page, by default it has one af:showDetailItem , surround it with af:ForEach and set items and var for ForEach
- change text of showDetailItem to show department name on it, taking reference from ForEach's var
- Now drop Employees detail table from data control inside showDetailItem and set its value , taking reference from ForEach
- For more clarification see source of page-
<af:panelAccordion id="pa1" styleClass="AFStretchWidth" visible="true"> <af:forEach items="#{bindings.Departments1.children}" var="dept"> <af:showDetailItem text="#{dept.DepartmentName}" id="sdi1" inflexibleHeight="200"> <af:table value="#{dept.children}" var="row" rows="#{bindings.Employees3.rangeSize}" emptyText="#{bindings.Employees3.viewable ? 'No data to display.' : 'Access Denied.'}" fetchSize="#{bindings.Employees3.rangeSize}" rowBandingInterval="0" filterModel="#{bindings.Employees3Query.queryDescriptor}" queryListener="#{bindings.Employees3Query.processQuery}" filterVisible="true" varStatus="vs" selectedRowKeys="#{bindings.Employees3.collectionModel.selectedRow}" selectionListener="#{bindings.Employees3.collectionModel.makeCurrent}" rowSelection="single" id="t1" styleClass="AFStretchWidth"> <af:column sortProperty="#{bindings.Employees3.hints.EmployeeId.name}" filterable="true" sortable="false" headerText="#{bindings.Employees3.hints.EmployeeId.label}" id="c1"> <af:outputText value="#{row.EmployeeId}" shortDesc="#{bindings.Employees3.hints.EmployeeId.tooltip}" id="ot4"> <af:convertNumber groupingUsed="false" pattern="#{bindings.Employees3.hints.EmployeeId.format}"/> </af:outputText> </af:column> <af:column sortProperty="#{bindings.Employees3.hints.FirstName.name}" filterable="true" sortable="false" headerText="#{bindings.Employees3.hints.FirstName.label}" id="c2"> <af:outputText value="#{row.FirstName}" shortDesc="#{bindings.Employees3.hints.FirstName.tooltip}" id="ot5"/> </af:column> <af:column sortProperty="#{bindings.Employees3.hints.LastName.name}" filterable="true" sortable="false" headerText="#{bindings.Employees3.hints.LastName.label}" id="c3"> <af:outputText value="#{row.LastName}" shortDesc="#{bindings.Employees3.hints.LastName.tooltip}" id="ot6"/> </af:column> <af:column sortProperty="#{bindings.Employees3.hints.Email.name}" filterable="true" sortable="false" headerText="#{bindings.Employees3.hints.Email.label}" id="c4"> <af:outputText value="#{row.Email}" shortDesc="#{bindings.Employees3.hints.Email.tooltip}" id="ot7"/> </af:column> </af:table> </af:showDetailItem> </af:forEach> </af:panelAccordion>
- Now run your page to see its UI-
Download Sample workspace here- Download
Happy Jdeveloping..
