- 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