Thodoris Bais

About Thodoris Bais

Thodoris Bais is currently working as a Junior Java Developer while on parallel, pursuing a diploma at Informatics & Telecommunications Engineering. He specializes in Java Core, Android and J2EE and looks forward to being a professional Software Engineer. He is also a quick learner and curious about new technologies.

PanelGrid Example with JSF 2.0

Good afternoon geeks, have a nice week! 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:

 
 
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

So, that was all for today. Happy Easter to you and your families!

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

Related Whitepaper:

Java Essential Training

Author David Gassner explores Java SE (Standard Edition), the language used to build mobile apps for Android devices, enterprise server applications, and more!

The course demonstrates how to install both Java and the Eclipse IDE and dives into the particulars of programming. The course also explains the fundamentals of Java, from creating simple variables, assigning values, and declaring methods to working with strings, arrays, and subclasses; reading and writing to text files; and implementing object oriented programming concepts. Exercise files are included with the course.

Get it Now!  

Examples Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
All trademarks and registered trademarks appearing on Examples Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books