- Topic : Java Server Faces (JSF)
- Environment : J2EE 5.0, MyFaces 1.1.5
Java Server Faces(JSF)
also read:
Java Server Faces(JSF) technology is a server-side user interface component framework for Java technology-based web applications.
The main components of JavaServer Faces technology are as follows:
- An API for representing UI components and managing their state; handling events, server-side validation, and data conversion; defining page navigation; supporting internationalization and accessibility; and providing extensibility for all these features
- Two Java Server Pages (JSP) custom tag libraries for expressing UI components within a JSP page and for wiring components to server-side objects
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <html> <body> <f:view> <h:form id="select"> <h:panelGrid columns="1"> <h:column> <h:outputText value="Select a Name : "/> <h:selectOneMenu value="#{selectOneBean.name}"> <f:selectItem itemValue="SteveJobs" value="SteveJobs"/> <f:selectItem itemValue="Sergey Brin" value="Sergey Brin"/> <f:selectItem itemValue="Larry Page" value="Larry Page"/> <f:selectItem itemValue="Dell" value="Dell"/> <f:selectItem itemValue="Mark Anderson" value="Mark Anderson"/> </h:selectOneMenu> </h:column> <h:column> <h:commandButton value="Submit" action="#{selectOneBean.submit}"/> </h:column> </h:panelGrid> </h:form> </f:view> </body> </html>
Introduction to h:dataTable
JSF provides an powerful tag used for formating tables while iterating the data.h:dataTable tag is used for iterating over the collection or array of values. The below example gives you the very basic idea of how to use h:dataTable to display the data from the backing bean. The following files are used in this example:
- dataTable.jsp
- DataTableBean.java
- EmployeeDetails.java
- Address.java
- faces-config.xml
dataTable.jsp
<!-- Source : www.javabeat.net --> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <html> <body> <f:view> <h:form id="select"> <h:dataTable value="#{dataTableBean.arr}" var="loc"> <h:column> <f:facet name="header" > <h:outputText value="Frameworks"/> </f:facet> <h:outputText value="#{loc}"/> </h:column> </h:dataTable> <h:panelGrid> <f:facet name="header"> <h:outputText value="Employee Details"/> </f:facet> <h:dataTable value="#{dataTableBean.list}" var="loc"> <h:column> <f:facet name="header" > <h:outputText value="Employee No"/> </f:facet> <h:outputText value="#{loc.empNo}"/> </h:column> <h:column> <f:facet name="header" > <h:outputText value="Employee Name"/> </f:facet> <h:outputText value="#{loc.empName}"/> </h:column> <h:column> <f:facet name="header" > <h:outputText value="Employee Street"/> </f:facet> <h:outputText value="#{loc.empAddress.street}"/> </h:column> <h:column> <f:facet name="header" > <h:outputText value="Employee City"/> </f:facet> <h:outputText value="#{loc.empAddress.city}"/> </h:column> <h:column> <f:facet name="header" > <h:outputText value="Employee Country"/> </f:facet> <h:outputText value="#{loc.empAddress.country}"/> </h:column> <h:column> <f:facet name="header" > <h:outputText value="Employee PinCode"/> </f:facet> <h:outputText value="#{loc.empAddress.pincode}"/> </h:column> </h:dataTable> </h:panelGrid> </h:form> </f:view> </body> </html>
DataTableBean.java
/** * Source : www.javabeat.net * */ package net.javabeat.myfaces.data; import java.util.ArrayList; import java.util.List; import net.javabeat.myfaces.beans.Address; import net.javabeat.myfaces.beans.EmployeeDetails; public class DataTableBean { private String[] arr; private List<employeeDetails> list; public DataTableBean() { arr = new String[3]; arr [0] = "JSF"; arr [1] = "Struts"; arr [2] = "Spring"; list = new ArrayList<employeeDetails>(); EmployeeDetails emp1 = new EmployeeDetails(); emp1.setEmpNo(1); emp1.setEmpName("Employee : 1"); Address adr1 = new Address(); adr1.setCity("Bangalore"); adr1.setCountry("India"); adr1.setPincode(89745); adr1.setStreet("First Street"); emp1.setEmpAddress(adr1); list.add(emp1); EmployeeDetails emp2 = new EmployeeDetails(); emp2.setEmpNo(1); emp2.setEmpName("Employee : 2"); Address adr2 = new Address(); adr2.setCity("Chennai"); adr2.setCountry("India"); adr2.setPincode(235432); adr2.setStreet("First Street"); emp2.setEmpAddress(adr2); list.add(emp2); } public String[] getArr() { return arr; } public void setArr(String[] arr) { this.arr = arr; } public List<employeeDetails> getList() { return list; } public void setList(List<employeeDetails> list) { this.list = list; } }
Address.java
package net.javabeat.myfaces.beans; public class Address { private String street; private String city; private String country; private Integer pincode; public String getStreet() { return street; } public void setStreet(String street) { this.street = street; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } public String getCountry() { return country; } public void setCountry(String country) { this.country = country; } public Integer getPincode() { return pincode; } public void setPincode(Integer pincode) { this.pincode = pincode; } }
Employee Details.java
package net.javabeat.myfaces.beans; public class EmployeeDetails { private Integer empNo; private String empName; private Address empAddress; public Integer getEmpNo() { return empNo; } public void setEmpNo(Integer empNo) { this.empNo = empNo; } public String getEmpName() { return empName; } public void setEmpName(String empName) { this.empName = empName; } public Address getEmpAddress() { return empAddress; } public void setEmpAddress(Address empAddress) { this.empAddress = empAddress; } }
faces-config.xml
<managed-bean> <managed-bean-name> dataTableBean </managed-bean-name> <managed-bean-class> net.javabeat.myfaces.data.DataTableBean </managed-bean-class> <managed-bean-scope> request </managed-bean-scope> </managed-bean>
Leave a Reply