Home » Enterprise Java » jsf » PanelGrid Example with JSF 2.0

About Thodoris Bais

Thodoris Bais
Thodoris is an Oracle Certified Associate Java Programmer and currently works as a Junior Software Developer, for Intrasoft International S.A. He holds a diploma at Informatics & Telecommunications Engineering and is interested in continuous development.

PanelGrid Example with JSF 2.0

Today we ‘re gonna talk about table formatting in JSF.

Remember yourself on your very first steps to Web Development, how easy was it to manipulate a table with raw HTML? You had to follow a strict writing with a bunch of specific HTML tags, in order to get what you wanted to.

JSF is here to make our lives easier, in table manipulation, too, so let’s take a look at a comparative initial example, between HTML and JSF:

Want to be a JSF Ninja?

Subscribe to our newsletter and download the JSF 2.0 Programming Cookbook right now!

In order to get you prepared for your JSF development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

HTML

<table>
	<tbody>
		<tr>
			<td>Please enter a number:</td>		
			<td>
				<h:inputText id="number" value="#{sample_bean.number}" 
					size="20" required="true"
					label="Number" >
					<f:convertNumber />
				</h:inputText>
			</td>
			<td><h:message for="number" style="color:red" /></td>
		</tr>
	</tbody>
</table>

Piece of cake, but still a waste of time. That’s the corresponding format of the above table in JSF:

<h:panelGrid columns="3">
	Please enter a number: 
 
	<h:inputText id="number" value="#{sample_bean.number}" 
		size="20" required="true"
		label="Number" >
		<f:convertNumber />
	</h:inputText>
 
	<h:message for="number" style="color:red" />
</h:panelGrid>

Ok, pretty easier with JSF, but what’s the functionality of <f:convertNumber /> ?

Generally, the fore-mentioned tag creates a number formatting converter and associates it with the nearest parent UIComponent; for more information, please refer here.

The final goal of this tutorial, is to transfer the number inserted from the user, to another page, after validating that it actually was a number (and not a string, for example). So, we ‘re here using the <f:convertNumber />
for validation purpose.

The Example

Here is a demonstration JSF app, using panelGrid for the elements’ proper layout.

 

1. The Managed Bean

package com.javacodegeeks.jsf.panelgrid;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="sample_bean")
@SessionScoped
public class SampleBean implements Serializable{

	int number;

	public int getNumber() {
		return number;
	}

	public void setNumber(int number) {
		this.number = number;
	}
}

 

2. The JSF Pages

index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:c="http://java.sun.com/jsp/jstl/core" >
 
    <h:head>
    	<title>JSF PanelGrid</title>
    </h:head>
    
    <h:body>
    	<h1>JSF 2.2 PanelGrid Example</h1>
    	
    	<h:form>
    		<h:panelGrid columns="3">
    			Please enter a number:
    			<h:inputText id="number"
    						 value="#{sample_bean.number}"
    						 size="15" required="true"
    						 label="Number" >
    						<f:convertNumber />
    			</h:inputText>
    			<h:message for="number" style="color:red" />
    		</h:panelGrid>
    		<h:commandButton value="Submit" action="result"/>
    	</h:form>
    </h:body>
</html>

result.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    
    <h:head>
    	<title>JSF PanelGrid</title>
    </h:head>
    
    <h:body>
     	<h1>JSF 2.2 PanelGrid Example</h1>
			Number : <h:outputText value="#{sample_bean.number}" />
  </h:body>
</html>

3. The Demo

Let’s first insert a string, just to see our app’s exception handling; we ‘ll then insert a number (75 in our case), to conform with the success path.

img

img2

img3

This was an example of PanelGrid in JSF 2.0. You can also download the source code for this example: PanelGridJSF

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

 

Want to take your Java skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • Advanced Java Guide
  • Java Design Patterns
  • JMeter Tutorial
  • Java 8 Features Tutorial
  • JUnit Tutorial
  • JSF Programming Cookbook
  • Java Concurrency Essentials