Skip to main content

Java EE 6 For Beginners – JSF 2.1 Tutorial Create Facelets

introduction

Hello everyone! Today I will show you how to create “Facelets” using JSF technology. Facelets, is like html pages or JSP pages, they are the “V” of MVC pattern. They are designed for web developers or web designers because it has lots of tags similar to HTML tags. In this tutorial, we will create a form to ask users to type their name, then output the greeting message.

prepare

This tutorial need two tools: Eclipse Juno and Weblogic Server 12c.

The source code is available in Github: click here to check out.

write code

Our project is based on the previous JSF project, if you haven’t done it, look at this article.

The final project structure is like this:

1

 

the com.zxuqian.jsf.facelets.GreetMe is a session scoped managed bean, it simple defines a variable “name“, the source code is:

package com.zxuqian.jsf.facelets;

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

@ManagedBean
@SessionScoped
public class GreetMe {

	private String name;

	public GreetMe() {

	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

}

The greeting.xhtml source code 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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Greeting</title>
</h:head>
<body>
	<h:graphicImage library="images" name="ec_featured.jpg"></h:graphicImage>
	<h2>Hello! Please input your name!</h2>
	<h:form>
		<p>
			<h:outputLabel for="userName" value="Type your name: " />
			<h:inputText id="userName" value="#{greetMe.name}"></h:inputText>
		</p>
		<p>
			<h:commandButton action="result" value="submit" />
		</p>
	</h:form>
</body>
</html>

The <h:graphicImage library=”images” name=”ec_featured.jpg”> tag reference an image from resource libaray images, named ec_featured.jpg, you can look up source code, there’s a resouces folder under WebContent, and the images library is in the resources folder. You needn’t specify ‘resources‘ in the library attribute, it is default.

The <h:form> tag will generate a normal html form when the facelets are being displayed. The action and method attribute is generated by JSF, you don’t need to care about, the method default is “post“. You can check the source code of generated html file in web browser.

The <h:commandButton action=”result” value=”submit” />, generates a HTML submit button, the action attribute is used to specify navigation rules, it can be another facelets, a method of managed bean. In this case, the action attribute is linked to result.xhtml, you needn’t to specify the “faces” prefix and “.xhtml” suffix, JSF will automatically generates them. The <h:commandButton> must be wrapped in <h:form> tag, otherwise, there’ll be error occurs.

Let’s see the resulting page:

<?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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello</title>
</h:head>
<body>
<h2>
	Hello, <h:outputText value="#{greetMe.name}" />! Nice to meet you!
</h2>
<h:form>
	<h:commandButton action="index" value="back" />
</h:form>
</body>
</html>
it is simply displayed the name that uses typed and contained a <h:commandButton> to forward to 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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
</h:head>
<body>
	<h2>
		<h:outputText value="#{greeting.greeting}" />
	</h2>
	<hr />
	<h:outputLink value="faces/greeting.xhtml">Faces Example</h:outputLink>
</body>
</html>
In the index.xhtml, I added <h:outputLink value="faces/greeting.xhtml">Faces Example</h:outputLink>, this will generated a normal html <a></a> tag, the value attribute is used to define "href" of <a>. This tag can be not wrapped in <h:form> tag, so it has its conveniences. You have to add "faces" prefix and ".xhtml" suffix.

run example

To run this example in Eclipse, right click the project, select Run -> Run on server, select Weblogic Server 12c.

OK, that’s it! Thank you!