RSS

h:dataTable – Java Server Faces (JSF)

April 12, 2008

JSF

  • Topic : Java Server Faces (JSF)
  • Environment : J2EE 5.0, MyFaces 1.1.5

Java Server Faces(JSF)

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

JSF Articles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<%@ 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

	<!--
	   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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

	/**
	 * 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

	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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

	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

1
2
3
4
5
6
7
8
9
10
11

	<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>

email

Comments

comments

Related posts:

  1. How to use h:selectBooleanCheckBox within h:dataTable?
  2. f:attribute Tag in Java Server Faces (JSF)
  3. Introduction to Java Server Faces (JSF)
  4. Introduction to Java Server Faces(JSF) HTML Tags
  5. Display error messages in JSF [ h:message ] – part 2

About JavaBeat

View all posts by JavaBeat →