Thodoris Bais

About Thodoris Bais

Thodoris Bais pursues a diploma at Informatics & Telecommunications Engineering; he was worked as a Junior Java Developer and specializes in Java Core, Android and J2EE and looks forward to being a successfull professional. He is interested in entrepreneurship and 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

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 two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.
Examples Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
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.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

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

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close