JSF — Complete JavaServer Faces API Reference Guide

DodaTech Updated Jun 6, 2026 6 min read

Learning Path

    flowchart LR
    A["Jsf Overview"] --> B["Core Concepts"]
    B --> C["Intermediate Topics"]
    C --> D["Advanced Topics"]
    D --> E["Practical Applications"]
    A --> F["You Are Here"]
    style F fill:#f90,color:#fff

JavaServer Faces (JSF) is a Java specification for building component-based user interfaces for web applications — where the UI is defined as a tree of components on the server and rendered as HTML in the browser.

What You’ll Learn

By the end of this tutorial, you’ll create Facelets XHTML pages with JSF components, manage server-side state with managed beans, validate and convert user input, configure navigation rules, add AJAX for partial page updates, and integrate PrimeFaces for rich UI components.

Why JSF Matters

JSF is the standard Java EE web framework — used by large enterprises, government systems, and banking applications where reliability and standards compliance matter more than trendy frameworks. Its component-based model (where UI components manage their own state) contrasts with action-based frameworks like Spring MVC. DodaTech’s enterprise administration consoles use JSF for complex, stateful forms and data tables.

Security note: Understanding Reference helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.

Prerequisites: Strong Java skills. Understanding of HTML and basic web application concepts. Familiarity with Spring is helpful.

Facelets Page

Facelets is JSF’s default view technology — XHTML templates with JSF component tags:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
<h:head>
  <title>User Registration</title>
</h:head>
<h:body>
  <h:form>
    <p:outputLabel for="name" value="Name:"/>
    <p:inputText id="name" value="#{userBean.name}" required="true"/>
    <p:message for="name"/>

    <p:outputLabel for="email" value="Email:"/>
    <p:inputText id="email" value="#{userBean.email}"
                 validator="#{userBean.validateEmail}"/>

    <p:commandButton value="Register" action="#{userBean.register}"
                     update="result" oncomplete="PF('dialog').show()"/>
  </h:form>
</h:body>
</html>

Line-by-line explanation:

xmlns:h="http://xmlns.jcp.org/jsf/html" — HTML component library (form, input, output)
xmlns:f="http://xmlns.jcp.org/jsf/core" — core tags (validator, converter, AJAX)
xmlns:p="http://primefaces.org/ui" — PrimeFaces rich component library
h:form — rendered as an HTML <form>. All input components must be inside a form
value="#{userBean.name}" — EL (Expression Language) binding. The input reads from and writes to userBean.name
validator="#{userBean.validateEmail}" — calls a Java method to validate the input
action="#{userBean.register}" — the method called when the button is clicked. Returns a navigation outcome string

Managed Bean

The server-side Java class that backs the UI:

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class UserBean {
    private String name;
    private String email;

    // Custom validator
    public void validateEmail(FacesContext context,
                              UIComponent comp, Object value) {
        String email = (String) value;
        if (!email.contains("@")) {
            throw new ValidatorException(
                new FacesMessage("Invalid email"));
        }
    }

    // Action method — returns navigation outcome
    public String register() {
        // Save to database
        return "success?faces-redirect=true";
    }
}

Key annotations:

@ManagedBean — declares this class as a JSF managed bean (available in EL as #{userBean})
@ViewScoped — bean lives as long as the current view (survives AJAX requests). Other scopes: @RequestScoped (one HTTP request), @SessionScoped (entire session), @ApplicationScoped (shared across all users)

Key Component Libraries

Library	Prefix	Purpose
`jsf/html`	`h:`	Basic HTML components (form, input, output, select)
`jsf/core`	`f:`	Core tags (validator, converter, AJAX, facet)
`primefaces`	`p:`	Rich components (dataTable, dialog, chart, tree)

Common Mistakes

1. Forgetting to nest input fields inside `h:form`

All input components must be inside a <h:form>. Without it, form submissions don’t work — the server receives no data.

2. Using the wrong bean scope

Using @RequestScoped for a multi-step form causes all values to be lost after each request. Use @ViewScoped or @SessionScoped for stateful workflows.

3. Not handling validation errors gracefully

JSF validation errors return the user to the same page — but if you don’t show <p:message> for each field, users don’t see the errors.

4. Mixing JSF and direct HTML form submissions

Once you use JSF components, don’t mix with raw HTML <form> tags. JSF manages its own form state. Direct HTML forms bypass JSF processing.

5. Overusing `@SessionScoped`

Session-scoped beans live until the user logs out or the session expires. Heavy session beans consume server memory. Use @ViewScoped when possible.

Practice Questions

1. What is the difference between `@RequestScoped`, `@ViewScoped`, and `@SessionScoped`?

Answer: RequestScoped lasts one HTTP request. ViewScoped lasts as long as the user stays on the same page (survives AJAX). SessionScoped lasts the entire user session.

2. How does EL expression `#{userBean.name}` work?

Answer: The expression evaluates to userBean.getName() for reading and userBean.setName(value) for writing on form submission.

3. What is the purpose of `h:form` in JSF?

Answer: h:form renders an HTML form and manages JSF’s view state (a hidden field with the component tree state). All input components must be inside a form.

4. How do you add AJAX to a JSF component?

Answer: Use <f:ajax execute="@form" render="resultPanel"/> inside a component, or PrimeFaces components that have built-in AJAX support.

Challenge

Build a JSF + PrimeFaces CRUD application for managing products. Include a data table with sorting/filtering, a form dialog for add/edit, input validation, and confirmation dialogs for delete.

FAQ

What is JSF?

JavaServer Faces is a Java specification for building component-based web UIs where the view is defined as a tree of server-side components rendered as HTML.

What is the difference between JSF and Spring MVC?

JSF is component-based (UI components manage their state). Spring MVC is action-based (controllers handle requests, update model, return view). JSF is better for complex forms; Spring MVC is more flexible.

What is Facelets?

Facelets is JSF’s default view technology using XHTML files with JSF component tags. It replaced JSP as the preferred view technology.

What is PrimeFaces?

PrimeFaces is a popular open-source component library for JSF with rich components (data tables, charts, dialogs, trees, etc.).

How does JSF handle form submissions?

JSF saves the component tree state between requests (as a hidden field or on the server). On form submit, it restores the tree, processes validations, updates model values, and invokes action methods.

Is JSF still relevant?

JSF is less popular for new projects but remains widely used in enterprise and government systems. Jakarta Faces (formerly JSF) continues to evolve under the Eclipse Foundation.

Try It Yourself

# 1. Create a Maven JSF project
# Add dependencies for JSF API, implementation (Mojarra), and PrimeFaces

# 2. Create a Facelets template
cat > src/main/webapp/hello.xhtml << 'EOF'
<!DOCTYPE html>
<html xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head><title>Hello JSF</title></h:head>
<h:body>
  <h:form>
    <h:outputLabel for="name" value="Name:"/>
    <h:inputText id="name" value="#{helloBean.name}"/>
    <h:commandButton value="Say Hello" action="#{helloBean.sayHello()}"/>
    <h:outputText value="#{helloBean.message}" rendered="#{helloBean.message != null}"/>
  </h:form>
</h:body>
</html>
EOF

# 3. Create the bean
# (see the UserBean example above, adapt for hello.xhtml)

# 4. Deploy to Tomcat or WildFly
# mvn clean package (deploy the WAR to your servlet container)

What’s Next

Explore more Java enterprise frameworks:

Topic	Description
https://tutorials.dodatech.com/java/tapestry/reference/	Apache Tapestry component framework
https://tutorials.dodatech.com/java/cxf/reference/	Apache CXF web services