Skip to main content

Java EE 6 For Beginners – JSF 2.1 Tutorial Components Part 1

Introduction

Hello everybody! How are you doing? Ah.. I watched Chinese Idol today, the first time American Idol came to China. They have the same stage set, french windows near sea, four judges.. and all are the same. Talked some unrelated topic, 😀 Let’s start out today’s tutorial, using JSF components to create web pages. In this example, a registration form contains most uses components, which are simple, a managed bean receive user inputs, and a resulting page shows what the user types.

Source Code

Source codes are available in Github: helloworld_jsf

Final Result

The final result looks like these:

Form

Form

 

Result:

Result

Writing Code

Our final project looks like this(newly added files marked in red rectangles.):

project

 

Let’s take a look at UserInformationBean

package com.zxuqian.jsf.components;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class UserInformationBean {

	//inputText
	private String username;
	//inputSecret
	private String password;
	//inputTextArea
	private String description;
	//selectOneRadio
	private String gender;
	//selectManyCheckbox
	private List hobbies;
	//h:selectOneMenu
	private String country;

	public UserInformationBean() {
		hobbies = new ArrayList<>();
	}

	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public String getGender() {
		return gender;
	}
	public void setGender(String gender) {
		this.gender = gender;
	}
	public List getHobbies() {
		return hobbies;
	}
	public void setHobbies(List hobbies) {
		this.hobbies = hobbies;
	}
	public String getCountry() {
		return country;
	}
	public void setCountry(String country) {
		this.country = country;
	}

}

username, password, description, gender, country are type of String, They represent single value of registration form, like inputText, inputSecret, selectOneMenu. Variable hobbies is a list which initialized in constructor and represent multi-value components, like selectManyCheckBox.

Let’s see how to use them in facelets:

<?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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>User Register</title>
</h:head>
<body>
	<h:form>
		<p>
			<h:outputLabel value="Username: " for="username" />
			<h:inputText value="#{userInformationBean.username}" id="username" />
		</p>
		<p>
			<h:outputLabel value="Password: " for="password" />
			<h:inputSecret value="#{userInformationBean.password}" id="password" />
		</p>
		<p>
			<h:outputLabel value="Gender: " for="gender" />
			<h:selectOneRadio value="#{userInformationBean.gender}" id="gender">
				<f:selectItem itemLabel="Male" itemValue="Male" />
				<f:selectItem itemLabel="Female" itemValue="Female" />
			</h:selectOneRadio>
		</p>
		<p>
			<h:outputLabel value="Hobbies: " for="hobbies" />
			<h:selectManyCheckbox  value="#{userInformationBean.hobbies}" id="hobbies">
				<f:selectItem itemLabel="Music" itemValue="Music" />
				<f:selectItem itemLabel="Computer" itemValue="Computer" />
				<f:selectItem itemLabel="Food" itemValue="Food" />
				<f:selectItem itemLabel="Sport" itemValue="Sport" />
			</h:selectManyCheckbox>
		</p>
		<p>
			<h:outputLabel value="Country: " for="country" />
			<h:selectOneMenu  value="#{userInformationBean.country}" id="country">
				<f:selectItem itemLabel="U.S." itemValue="U.S." />
				<f:selectItem itemLabel="China" itemValue="China" />
				<f:selectItem itemLabel="Canada" itemValue="Canada" />
				<f:selectItem itemLabel="Austrilia" itemValue="Austrilia" />
			</h:selectOneMenu>
		</p>
		<p>
			<h:outputLabel value="Description " for="description" />
			<h:inputTextarea cols="30" rows="10" value="#{userInformationBean.description}" id="description" />
		</p>
		<p>
			<h:commandButton action="register_success" value="Register" />
		</p>
	</h:form>
</body>
</html>
The corresponding html tag and JSF components used in this tutorial are:

<h:outputLabel> ———————- <label>

<h:inputText> ———————- <input type=”text”>

<h:inputSecret> ———————- <input type=”password”>

<h:selectOneRadio> ———————- <input type=”radio”>

<h:selectManyCheckbox> ———————- <input type=”checkbox”>

<h:selectOneMenu> ———————- <select>

 <h:inputTextarea> ———————- <textarea>

There’s no special things in JSF components, they are all normal html tags and have similar names, we will talk about their attributes in later tutorials.

In this xhtml page, I added a namespace xmlns:f=”http://java.sun.com/jsf/core”, the core jsf tags. Then I use <f:item> to define items in tags, <h:selectOneMenu> etc. Because their corresponding html tags have child element in it. itemLabel attribute is the display name, and itemValue is the real value that pass to the managed bean.

There’re a lot of attributes that used in html tag can also be used in jsf components, for example, the <h:inputTextarea> has cols and rows value.

The source cod of register_success.xhtml is:

<?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:c="http://java.sun.com/jsp/jstl/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>User Information</title>
</h:head>
<body>
<h1>Your Register Information</h1>
<hr />
<p>
Your username: #{userInformationBean.username}
</p>
<p>
Your password: #{userInformationBean.password}
</p>
<p>
Your gender: #{userInformationBean.gender}
</p>
<p>
Your hobbies: 
<c:forEach items="#{userInformationBean.hobbies}" varStatus="status" var="hobby">
	<c:if test="#{status.first != true}">,</c:if>
	#{hobby}
</c:forEach>
</p>
<p>
Your country: #{userInformationBean.country}
</p>
<p>
Your description: #{userInformationBean.description}
</p>
</body>
</html>
Simply use EL to display the user input. And for the list hobbies, I use JSTL tag (assuming you are familiar with, but doesn't matter, I will show you another way to iterate list, array in later tutorials) to iterate the list.

Conclusion

OK! That’s it! We learned jsf components today, and this is part one. The next tutorial I will show you a little more about JSF components. See you tomorrow!

  • Oliver

    Very useful guide, Thank you! I’m looking forward your new tutorials.