Sunday, 23 November 2014

Populate af:table programmatically from managead bean using POJO

This post is about a common question
How can we populate an af:table programmatically ?

It means that data in af:table is not populated through model layer (Using ViewObject) using binding layer. lets say I have some values in our managed bean and have to show records in tabular format on page

So what we have to do -
  • First you should know the number and data type of columns in table, suppose i have to populate a table for person details (name, mobile number and salary). to get and set value of columns i have created a java bean class , it has 3 variable for 3 columns

  • // Java Class to set and get value for table column
    public class PersonBean {
    
        public PersonBean(String name, String moNo, Integer salary) {
            this.Name = name;
            this.mobNo = moNo;
            this.salary = salary;
        }
        private String Name;
        private String mobNo;
        private Integer salary;
    
        public void setName(String Name) {
            this.Name = Name;
        }
    
        public String getName() {
            return Name;
        }
    
        public void setMobNo(String mobNo) {
            this.mobNo = mobNo;
        }
    
        public String getMobNo() {
            return mobNo;
        }
    
        public void setSalary(Integer salary) {
            this.salary = salary;
        }
    
        public Integer getSalary() {
            return salary;
        }
    }
    

  • Next step is to create a managed bean for referencing af:table , this managed bean makes use of person java bean class to add data in same format for all table rows. A List data structure is used to pass all values in af:table. See code of managed bean 

  • //ArrayList to poplate data in af:table
        List<PersonBean> personList = new ArrayList();
    
        //To Populate default row in table (Code in Constructor)
    
        public ProgTableBean() {
            personList.add(new PersonBean("Ashish Awasthi", "xxxxxxxxxx", 50000));
        }
    
        public void setPersonList(List<PersonBean> personList) {
            this.personList = personList;
        }
    
        public List<PersonBean> getPersonList() {
            return personList;
        }
    

  • Now just drop an af:table on page and set it's properties like value, column header and text values in columns

  •  As i have to show only 3 columns so deleted extra ones

     Set properties -
     value- from where table collection is populated
     columns values- take the var reference of table and refer variable name in List (here 'row' is table var and second is variable name in person bean class)


     See the XML source of af:table-

    <af:table var="row" rowBandingInterval="1" id="t1" value="#{viewScope.ProgTableBean.personList}"
                              partialTriggers="::b1">
                        <af:column sortable="false" headerText="Name" id="c1" width="150">
                            <af:outputText value="#{row.name}" id="ot1"/>
                        </af:column>
                        <af:column sortable="false" headerText="Mobile Number" id="c2">
                            <af:outputText value="#{row.mobNo}" id="ot2"/>
                        </af:column>
                        <af:column sortable="false" headerText="Salary" id="c3" align="right">
                            <af:outputText value="#{row.salary}" id="ot3"/>
                        </af:column>
                    </af:table>
    

  • Now run this application and see there will be one row in table as code is added in constructor of managed to populate one row


  • I have added a form and button in page to add new records in table , see the form source code

  • <af:panelFormLayout id="pfl1">
                        <f:facet name="footer"/>
                        <af:inputText label="Name :" id="it1" binding="#{viewScope.ProgTableBean.nameBind}"/>
                        <af:inputText label="Mobile Number :" id="it2" binding="#{viewScope.ProgTableBean.mobNumBind}"/>
                        <af:inputText label="Salary :" id="it3" binding="#{viewScope.ProgTableBean.salaryBind}">
                            <af:convertNumber/>
                        </af:inputText>
                        <af:button text="Add Record" id="b1" actionListener="#{viewScope.ProgTableBean.addNewRcord}"/>
                    </af:panelFormLayout> 
     

    Code in managed bean for button action-

        /**Method to add new record in table
         * @param actionEvent
         */
        public void addNewRcord(ActionEvent actionEvent) {
            //Get all values using compoenet binding as mobNumBind
            if (mobNumBind.getValue() != null && nameBind.getValue() != null &&
                salaryBind.getValue() !=
                null) {
                // Add new Record in List
                personList.add(new PersonBean(nameBind.getValue().toString(), mobNumBind.getValue().toString(),
                                              Integer.parseInt(salaryBind.getValue().toString())));
            }
        }
    

  • now run and check application- 

Thanks , Happy Learning :)