Show chart for every row of ViewObject using af:iterator in ADF Faces

Hello All

This post is about another use of af:iterator component, When we show Employees ViewObject data as a chart then all Employees appears in a single chart but if requirement is to show separate chart for each department ;) See how can we do it

Here I am using Departments and Employees table of HR Schema, Prepare model using both tables, Default view link is created between departments and employees view object (using department Id)

Showing HashMap values in af:table using af:iterator

Previously i have posted about populating af:table programmatically using List Data Structure
Populate af:table programmatically from managead bean using POJO

This post covers same topic but this time requirement is different , we have a HashMap in managed bean and requirement is to show it's values on page in a table view
See Managed Bean code-

    //HashMap and it's accessors
    private HashMap<String, String> valMap = new HashMap<String, String>();

    public void setValMap(HashMap valMap) {
        this.valMap = valMap;
    }

    public HashMap getValMap() {
        return valMap;
    }
    // Object array to store key values of HashMap
    public Object[] getKeySet() {
        return getValMap().keySet().toArray();
    }

Added two inputText on page and a button to add new key and value to HashMap,

<af:panelFormLayout id="pfl1">
                    <af:inputText label="Key" id="it1" contentStyle="width:100px;"
                                  binding="#{viewScope.ShowHashMapAsTable.keyTextBind}"/>
                    <af:inputText label="Value" id="it2" contentStyle="width:100px;"
                                  binding="#{viewScope.ShowHashMapAsTable.valueTextBind}"/>
                    <af:button text="Add" id="b1" actionListener="#{viewScope.ShowHashMapAsTable.addValuesToMap}"/>
                </af:panelFormLayout>

Now code on button that get value of both inputText using component binding and add it to HashMap, at run time this form will be used to add new values to HashMap and table

    //Component Binding of inputText to get values
    private RichInputText keyTextBind;
    private RichInputText valueTextBind;

    public void setKeyTextBind(RichInputText keyTextBind) {
        this.keyTextBind = keyTextBind;
    }

    public RichInputText getKeyTextBind() {
        return keyTextBind;
    }

    public void setValueTextBind(RichInputText valueTextBind) {
        this.valueTextBind = valueTextBind;
    }

    public RichInputText getValueTextBind() {
        return valueTextBind;
    }

    /**Add new value to HashMap
     * @param actionEvent
     */
    public void addValuesToMap(ActionEvent actionEvent) {
        if (keyTextBind.getValue() != null && valueTextBind.getValue() != null) {
            valMap.put(keyTextBind.getValue().toString(), valueTextBind.getValue().toString());

        }
    }

Now Bean Part is done , see how to configure af:table to show HashMap values, table is mapped to array of keySet and an iterator is used inside table that derives value using key attribute -

#{cVal[row]}

<af:table var="row" rowBandingInterval="0" id="t1" value="#{viewScope.ShowHashMapAsTable.keySet}"
                              partialTriggers="::b1">
                        <af:iterator id="i1" value="#{viewScope.ShowHashMapAsTable.valMap}" var="cVal">
                            <af:column sortable="false" headerText="Key" id="c2">
                                <af:outputText value="#{row}" id="ot4" inlineStyle="font-weight:bold;color:darkblue;"/>
                            </af:column>
                            <af:column sortable="false" headerText="Value" id="c1">
                                <af:outputText value="#{cVal[row]}" id="ot3"/>
                            </af:column>
                        </af:iterator>
                    </af:table>

Now all done , run and check the application

 Add New Value (1)

  Add New Value (2)

Sample Application- Download (Jdev 12.1.3)
Cheers :) Happy Learning

Working with af:iterator and af:forEach programmatically (Add and delete records using List)

In previous post Working with af:iterator and af:forEach programmatically (Populate values using POJO from Managed Bean) we saw that how can we populate record from a List to af:iterator and af:forEach (ADF Faces Component)

So this post is about adding and deleting of records from List while List is presented using af:iterator.
here i am extending previous post and using same sample application



Added two fields and button on page to add records 

<af:panelFormLayout id="pfl1" rows="1">
                    <af:inputText label="Name" id="it1" binding="#{viewScope.PopulateIteratorBean.nameBind}"/>
                    <af:inputText label="Department" id="it2" binding="#{viewScope.PopulateIteratorBean.deptNameBind}"/>
                    <af:button text="Add" id="b1"
                               actionListener="#{viewScope.PopulateIteratorBean.addNewRecordAction}"/>
                </af:panelFormLayout>

and on this button action simply added both attributes to List and added partial trigger of button to af:iterator to refresh it

    // Component binding to access inputValue from page
    
    private RichInputText nameBind;
    private RichInputText deptNameBind;
    
    public void setNameBind(RichInputText nameBind) {
        this.nameBind = nameBind;
    }

    public RichInputText getNameBind() {
        return nameBind;
    }

    public void setDeptNameBind(RichInputText deptNameBind) {
        this.deptNameBind = deptNameBind;
    }

    public RichInputText getDeptNameBind() {
        return deptNameBind;
    }

    /**Method to add record in List and show on page using af:iterator and af:forEach
     * @param actionEvent
     */
    public void addNewRecordAction(ActionEvent actionEvent) {
        if (nameBind.getValue() != null && deptNameBind.getValue() != null) {
            EmployeeDet obj = new EmployeeDet(nameBind.getValue().toString(), deptNameBind.getValue().toString());
            employeeDetail.add(obj);
            
        }
    }

On page - add a new record (record added in List and appeared in iterator as well)

So it is quite simple to add records but deletion of record is a bit tricky but not difficult at all :)
Let's see this-
For deleting record i have added a delete link inside iterator so that it should appear for each record as you can see in snap (above)
Here question is that how to know that which record should be deleted  ?

So for this i have added a f:attribute tag to link , this attribute contains the value of current item of iterator

f:attribute derives it's value from var of af:iterator/af:forEach, this var represents each item of List
Now on delete button's action - get the current item and remove it from List

    /**Method to delete selected record
     * @param actionEvent
     */
    public void deleteRecordAction(ActionEvent actionEvent) {
        //Get value from f:attribute (current item)
       Object itemVal= actionEvent.getComponent().getAttributes().get("itemVal");
       //Remove selected item from List
       employeeDetail.remove(itemVal);
    }

After deleting records

Sample ADF Application- Download

Working with af:iterator and af:forEach programmatically (Populate values using POJO from Managed Bean)

This is another post about Working programmatically with ADF (populating af:iterator and af:forEach programmatically )

Previously i have posted about populating af:iterator and af:forEach using ADF BC and binding layer to show master-detail relation
Implementing master/detail tree relation using af:Iterator and af:forEach for better UI designs - Oracle ADF

For this post i am populating employee name and it's department name using List datastructure ,to get and set value of attributes

Created a java bean class , it has 2 variable for both attributes

public class EmployeeDet {
    public EmployeeDet(String name, String deptName) {
        this.name = name;
        this.deptName = deptName;
    }
    //Attribute to display EmployeeName and Department Name
    private String name;
    private String deptName;

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setDeptName(String deptName) {
        this.deptName = deptName;
    }

    public String getDeptName() {
        return deptName;
    }
}

Next step is to create a managed bean to populate data in af:iterator and af:forEach , this managed bean makes use of

EmployeeDet 

java bean class to add data in same format for all items of iterator and forEach. A List data structure is used to pass all values to iterator. See code of managed bean 

    //Constructor-populate default records
    public PopulateIteratorBean() {

        EmployeeDet obj = new EmployeeDet("Ashish Awasthi", "Oracle ADF");
        employeeDetail.add(obj);
        obj = new EmployeeDet("Alex Smith", "Java");
        employeeDetail.add(obj);
        obj = new EmployeeDet("James S", "PHP");
        employeeDetail.add(obj);
    }
    //ArrayList to poplate data in af:iterator and af:forEach
    private List<EmployeeDet> employeeDetail = new ArrayList();

    public void setEmployeeDetail(List<EmployeeDet> employeeDetail) {
        this.employeeDetail = employeeDetail;
    }

    public List<EmployeeDet> getEmployeeDetail() {

        return employeeDetail;
    }

Now drop af:iterator on page and set it's properties like value, var etc

using var reference of iterator , set value in output text to show Employee Name and DepartmentName , see XML source of af:iterator

<af:panelGroupLayout id="pgl1" layout="horizontal">
                        <af:iterator id="i1" value="#{viewScope.PopulateIteratorBean.employeeDetail}" var="item">
                            <af:panelBox id="pb2" showDisclosure="false">
                                <f:facet name="toolbar"/>
                                <af:panelGroupLayout id="pgl3" layout="horizontal">
                                    <af:outputText value="#{item.name}" id="ot1"
                                                   inlineStyle="font-weight:bold; font-size:medium; color:#0572ce;;"/>
                                    <af:spacer width="2" height="0" id="s1"/>
                                    <af:outputText value="(#{item.deptName})" id="ot2"
                                                   inlineStyle="font-weight:bold;font-size:small;color:red;"/>
                                </af:panelGroupLayout>
                            </af:panelBox>
                        </af:iterator>
                    </af:panelGroupLayout>  

on running it looks like this-

do same for af:forEach

<af:panelGroupLayout id="pgl2" layout="horizontal">
                        <af:forEach items="#{viewScope.PopulateIteratorBean.employeeDetail}" var="feach">
                            <af:showDetailHeader text="#{feach.deptName}" disclosed="true" id="sdh1">
                                <af:outputText value="#{feach.name}" id="ot3"
                                               inlineStyle="font-weight:bold; font-size:medium; color:#0572ce;;"/>
                            </af:showDetailHeader>
                        </af:forEach>
                    </af:panelGroupLayout>

on running it looks like this-

 Sample ADF Application-Download
Thanks, Happy Learning :)

Pagination in ADF table with Jdeveloper 12.1.2 (ADF 12C) - returned back

Hello All,
Pagination in ADF table was very requested feature after Jdev & ADF 10g.
now in 12C again it is here and quite simple

• Created a fusion web application using Departments table of HR Schema and dropped it on page as ADF table
  
  
  


• Now suppose i want to show pagination after 5 rows so to achieve this follow these steps
• Select table in structure window and go to property inspector change it's scrollPolicy to page ,scrollPolicy is mechanism to scroll data inside table







• Now select table on page and go to binding tab and select IteratorBinding of Departments table and change rangeSize to 5, by default it is 25 (means fetched 25 rows at a time)

• Set autoheightRows to 0 and styleClass to AFStretchWidth and you are done now run your page





• It works good in mozilla ,chrome and IE, but sometimes you can face a problem of finding current row as it may be in second page :-(

Implementing master/detail tree relation using af:Iterator and af:forEach for better UI designs - Oracle ADF

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

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..