how to populate data in ADF table from Bean using POJO | Populating af:table using ArrayList

Hi,

This post is about populating af:table from a POJO from the bean.

Suppose we have to show information related to books to the user.

So first we have to understand how we populate a table from a List.

1. For this we have to create a dataType for storing the data of the book.
2. For the same, we have created a Class named BookInfo. Here is the code for on the BookInfo class.
   
   

   package edittableonpojo.view.dc;
   
   public class BookInfo {
       private String bookDesc;
       private String bookAuthNm;
       private String bookSrNo;
       
       public BookInfo(String bookSrNo,String bookDesc,String bookAuthNm) {
           super();
           this.bookSrNo = bookSrNo;
           this.bookAuthNm = bookAuthNm;
           this.bookDesc = bookDesc;
       }
   
       public void setBookDesc(String bookdesc) {
           this.bookDesc = bookdesc;
       }
   
       public String getBookDesc() {
           return bookDesc;
       }
   
       public void setBookAuthNm(String bookAuthNm) {
           this.bookAuthNm = bookAuthNm;
       }
   
       public String getBookAuthNm() {
           return bookAuthNm;
       }
   
       public void setBookSrNo(String bookSrNo) {
           this.bookSrNo = bookSrNo;
       }
   
       public String getBookSrNo() {
           return bookSrNo;
       }
       
       public String getKey(){
           return this.getBookSrNo();
       }
       
       public String toString(){
           return bookSrNo+"_"+bookAuthNm+"_"+bookDesc;
       }
   }
   



3. Then we have to create a Bean from which data will be provided to the table. In the constructer of the Bean the code is written to populate the data in the ArrayList. Here is the code of the Bean.
   
   

   package edittableonpojo.view.bean;
   
   import edittableonpojo.view.dc.BookInfo;
   
   import java.util.ArrayList;
   
   public class BookBean {
       private ArrayList<BookInfo> bookDtls = new ArrayList<BookInfo>();
   
   
       public BookBean() {
           bookDtls.add(new BookInfo("1A", "The Alchemist", "Paulo Cohelo"));
           bookDtls.add(new BookInfo("2A", "Game Of Thrones", "George R. R. Martin"));
           bookDtls.add(new BookInfo("3A", "Five Point Someone", "Chetan Bhagat"));
           bookDtls.add(new BookInfo("4A", "Harry Potter", "J.K.Rowling"));
           bookDtls.add(new BookInfo("5A", "Wings of Fire", "A.P.J Abdul Kalam"));
       }
   
       public ArrayList<BookInfo> getBookInfo() {
           return bookDtls;
       }
   }
   



4. Now we have to create a Page where we can show the data of the List. For this, I have created a jspx page and dropped an af:table in which we will show the data and done some styling ;).
5. The table contains three Columns
1. Book SrNo.
2. Author Name.
3. Book Description
6. In the Value attribute of the Table from the Property inspector, select the value of the attribute from the bean-like   

<af:table var="row" rowBandingInterval="0" id="t1" value="#{viewScope.BookBean.bookInfo}"

                                  rowSelection="none"

                                  inlineStyle="line-Height: 15px;">

7. In the Columns drop af:outputText and in the value of the outputText put the value like value="#{row.bookAuthNm}" for showing the Author name , and similarly you have to put values in other rows.
8. Here is the code of the jspx page.
   
   

   <?xml version='1.0' encoding='UTF-8'?>
   <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
             xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
       <jsp:directive.page contentType="text/html;charset=UTF-8"/>
       <f:view>
           <af:document title="untitled1.jspx" id="d1">
               <af:form id="f1">
                   <af:panelBox text="Book Details" id="pb1">
                       <f:facet name="toolbar"/>
                       <af:panelCollection id="pc1" styleClass="AFStretchWidth">
                           <f:facet name="menus"/>
                           <f:facet name="toolbar"/>
                           <f:facet name="statusbar"/>
                           <af:table var="row" rowBandingInterval="0" id="t1" value="#{viewScope.BookBean.bookInfo}"
                                     rowSelection="multiple"
                                     inlineStyle="line-Height: 15px;">
                               <af:column sortable="true" headerText="Book SrNo." id="c1">
                                   <af:outputText value="#{row.bookSrNo}" id="ot1"/>
                               </af:column>
                               <af:column sortable="false" headerText="Author Name" id="c2">
                                   <af:outputText value="#{row.bookAuthNm}" id="ot2"/>
                               </af:column>
                               <af:column sortable="true" headerText="Book Description" id="c3" width="300">
                                   <af:outputText value="#{row.bookDesc}" id="ot3"/>
                               </af:column>
                           </af:table>
                       </af:panelCollection>
                   </af:panelBox>
               </af:form>
           </af:document>
       </f:view>
   </jsp:root>
   



9. The jspx page looks like this.
10. 
11. Now simply run the application.
12. After the screen that comes up is something like this.
    

Here is the sample application : TableOnPOJO.rar