JSF 2 TextBox

In this article you will learn, how to use the <h:inputText/> tag to render a HTML input box of type=”text” using JSF. First create a new Dynamic Web Project and configure it as Maven Project as explained in following link.

First create a new Dynamic Web Project and configure it as Maven Project. For Reference, Click Here

Note : faces-config.xml is not required in JSF 2.0. Use @ManagedBean annotation to indicate this is a managed bean.

1. JSF 2.0 Dependencies

Add the following dependencies in pom.xml

<dependencies>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-api</artifactId>
        <version>2.0.3</version>
    </dependency>
    <dependency>
        <groupId>com.sun.faces</groupId>
        <artifactId>jsf-impl</artifactId>
        <version>2.0.3</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>
</dependencies>

2. Deployment Descriptor

Write the following code in web.xml to configure JSF

<context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
</context-param>
   
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.jsf</url-pattern>
</servlet-mapping>

3. Managed Bean

Create a simple Managed Bean UserBean.java and write the following code.

package com.kruders.bean;
 
import java.io.Serializable;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean
@SessionScoped
public class UserBean implements Serializable {
    private String name;
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
}

4. View Page

Create a login page login.jsp and write the following code.

<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Page</title>
</head>
<body>
    <f:view>
        <h:form>
        <h:inputText value="#{userBean.name}" />
        <h:commandButton value="Submit" action="success" />
        <</h:form>
    </f:view>
</body>
</html>

h:inputText” is used to display a input box of type=”text”.

Now create success.jsp that display the submitted textbox value using “h:outputText” tag.

<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Success
</head>
<body>
    <f:view>
        Welcome : <h:outputText value="#{userBean.name}" style="color:red;"/>
    </f:view>
</body>
</html>

5. Run Project

When you run the project, following screen will be displayed as shown in Figure 2.1

Figure 2.1 Figure 2.1

Now when you enter the value in text box and click submit button, following screen will be displayed as shown in Figure 2.2

Figure 2.2 Figure 2.2

The folder structure of the example is shown below in Figure 2.3

Figure 2.3 Figure 2.3

You can download the source code of this example here.

No comments yet.

Leave a Reply