jsf

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:
 
 
 
 

 
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

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.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
Back to top button