Instead of populating the data in af:table through model layer (using ViewObject) using buinding layer, in this article we will introduce how to show the data which is in the managed bean to show on UI in tabular format.
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.
Person.java
| public class Person{
public Person (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, 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.
ProgTableBean.java
| //ArrayList to poplate data in af:table
List<Person> personList = new ArrayList();
//To Populate default row in table (Code in Constructor)
public ProgTableBean() {
personList.add(new Person("Mr.Bean", "138xxxxxxx", 100));
}
public void setPersonList(List<Person> personList) {
this.personList = personList;
}
public List<Person> getPersonList() {
return personList;
}
|
Then, set the value property for the table and columns:
.jsff
| <af:table var="row" rowBandingInterval="1" id="t1" value="#{viewScope.ProgTableBean.personList}">
<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>
|
Then run the application, we will get a row which contains 3 columns (Name, Mobile Number and Salary).
REF:
http://www.awasthiashish.com/2014/11/populate-aftable-programmatically-from.html