1 / 20

COIT20259 — Week 8

Jakarta Faces:
Building Web Interfaces

How enterprise Java applications communicate with the people who use them — through screens, buttons, and forms powered by Jakarta Faces.

Enterprise Computing · Press → to begin · Press T for contents

2 / 20

This WeekLearning Objectives

By the end of this week you will be able to:

Appraise Jakarta Faces as the presentation layer of an enterprise application
Interpret the JF architecture and its key components
Review and apply web interface specifications for JF pages
Develop working Jakarta Faces web applications

The Big Idea

Jakarta Faces lets Java developers build interactive web pages using familiar programming concepts — no deep knowledge of HTML or JavaScript is required to get started.

3 / 20

Section 1

What Is Jakarta Faces?

Before we look at code, let's understand why Jakarta Faces exists and what problem it solves for developers building web applications.

4 / 20

Section 1.1The Problem: Connecting Logic to the Screen

Every application has two worlds that need to talk to each other:

The Back End

Where your business logic lives — Java classes, databases, calculations, rules. Users never see this.

Example

A method that calculates a bank account balance.

The Front End

What the user actually sees — buttons, text fields, tables, forms. This is the presentation layer.

Example

A web page that displays that bank balance to the customer.

The Challenge

Bridging these two worlds cleanly — so changes in the back end automatically update what the user sees — is tricky. Jakarta Faces solves this.

5 / 20

Section 1.2Jakarta Faces in Plain English

Definition

Jakarta Faces (JF) — formerly known as JavaServer Faces (JSF) — is a standard Java framework for building user interfaces for web applications. It is part of the Jakarta EE specification.

Think of it as a set of ready-made building blocks for web pages:

Instead of writing raw HTML forms from scratch, you use JF components (like a LEGO kit)
JF automatically connects those components to your Java code
When a user fills out a form, JF takes the data and passes it to the right Java method
When Java produces a result, JF puts it on screen for the user

Real-World Analogy

Think of a restaurant. The kitchen is your Java back-end logic. The menu and waiter are Jakarta Faces — they take your order (user input) to the kitchen and bring back your food (data/result).

6 / 20

Section 1.3Where Jakarta Faces Fits in the Big Picture

Figure 1.3: Jakarta Faces sits between the user's browser and the business logic — it is the presentation layer.

Jakarta Faces handles everything from receiving user clicks to rendering the response page. It shields your business logic from having to know anything about HTML.

7 / 20

Section 2

JF Architecture & Components

Jakarta Faces is made of a handful of key pieces. Understanding each piece's role makes the whole framework much easier to work with.

8 / 20

Section 2.1The MVC Pattern — The Foundation

Jakarta Faces is built on a design pattern called MVC — Model, View, Controller.

Layer	What It Is	In Jakarta Faces	Real-World Analogy
Model	Your data	Java objects / EJBs / database	The ingredients in the kitchen
View	What the user sees	Facelets pages (.xhtml files)	The menu and the plate of food
Controller	Handles requests & decisions	FacesServlet + Managed Beans	The waiter who takes orders

Why MVC Matters

Separating these three concerns means you can change the look of your web page without touching the business logic — and vice versa. Your team can work in parallel.

9 / 20

Section 2.2The FacesServlet — Traffic Controller

What It Is

The FacesServlet is the single entry point for all Jakarta Faces requests. Every time a user clicks a button or loads a JF page, this servlet receives the request first.

It acts like an air traffic controller at an airport:

Every flight (HTTP request) must go through it
It directs each flight to the right gate (the right page or action)
It manages the sequence of events that must happen

In web.xml

You register FacesServlet to handle *.xhtml requests — and it takes care of the rest automatically.

10 / 20

Section 2.3Facelets — The View Layer

Facelets are the templating system for Jakarta Faces. They are .xhtml files that define what the user sees.

What makes Facelets special?

They look like HTML — so designers can open them in a browser
They use special JF tags (prefixed h: or f:) for components
They support templates — write your header/footer once, reuse everywhere
They bind directly to Java objects using Expression Language

Analogy

Facelets are like a Word mail-merge template — the page has placeholders (#{customer.name}) that JF fills with real data at runtime.

<!-- A simple Facelet page -->
<html xmlns:h="jakarta.faces.html"
      xmlns:f="jakarta.faces.core">
<h:head>
  <title>My Page</title>
</h:head>
<h:body>
  <h:outputText
    value="#{customer.name}"/>
  <h:commandButton
    value="Save"
    action="#{bean.save}"/>
</h:body>
</html>

11 / 20

Section 2.4Managed Beans — The Glue

Definition

A Managed Bean is a Java class that acts as the bridge between your Facelet page (View) and your business logic (Model). Jakarta EE manages its creation and lifecycle automatically.

A Managed Bean typically:

Holds data entered by the user (properties)
Contains action methods called when buttons are clicked
Returns navigation outcomes (which page to go to next)
Is annotated with @Named and a scope annotation

@Named
@RequestScoped
public class HelloBean {

  private String name;

  public String getName() {
    return name;
  }

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

  public String greet() {
    return "success";
  }
}

12 / 20

Section 2.5Bean Scopes — How Long Does Data Live?

Every Managed Bean has a scope — it determines how long the bean (and its data) stays alive.

Scope	Annotation	Lives for…	Best For
Request	`@RequestScoped`	One single page request	Simple form submissions
View	`@ViewScoped`	While user is on the same page	Pages with AJAX interactions
Session	`@SessionScoped`	The user's entire browser session	Login info, shopping cart
Application	`@ApplicationScoped`	While the app is running	Shared reference data (countries list)

Common Mistake

Using @SessionScoped when @RequestScoped would do — this causes data from one user to linger and potentially interfere with future requests.

13 / 20

Knowledge CheckSection 2 — Architecture & Components

Q1: A user logs in. Their username should remain available across multiple pages during their browsing session. Which scope should the Managed Bean use?

Request scope dies after each HTTP request, so the username would be lost. Application scope is shared across all users — a privacy problem. Session scope is correct here: data persists for this user's browser session only.

Q2: In the MVC pattern used by Jakarta Faces, what role do Facelets play?

Facelets are .xhtml template files that define the user interface (View). The Controller role belongs to FacesServlet and Managed Beans; the Model is your Java data objects and database.

14 / 20

Section 3

Web Interface Specifications

How does Jakarta Faces process each request step-by-step? And how do you connect UI components to your Java data? This section covers the JF request lifecycle and Expression Language.

15 / 20

Section 3.1The Jakarta Faces Request Lifecycle

Every user interaction (e.g. clicking "Submit") triggers a fixed sequence of 6 phases. JF handles most of this automatically.

1

Restore View

→

2

Apply Request Values

→

3

Process Validations

→

4

Update Model Values

→

5

Invoke Application

→

6

Render Response

Phase	What happens (plain English)
1. Restore View	JF finds or recreates the page structure (the component tree)
2. Apply Request Values	The data the user submitted is captured from the HTTP request
3. Process Validations	Input is checked — is the email valid? Is the number in range?
4. Update Model	Validated data is written into the Managed Bean's properties
5. Invoke Application	Your action method (e.g., `save()`) is called
6. Render Response	The result page is generated and sent to the browser

16 / 20

Section 3.2Expression Language — Connecting UI to Data

Expression Language (EL)

EL is the syntax used inside Facelets to reference Java objects and methods. It uses the format #{beanName.property}.

What you can do with EL

Display data: #{customer.fullName}
Bind inputs: value="#{bean.email}"
Call methods: action="#{bean.submit}"
Conditionals: rendered="#{user.loggedIn}"
Loops: iterate over a list of items

Key Point

EL is evaluated at runtime — the server substitutes real values before sending HTML to the browser. The browser never sees #{}.

<!-- Reading a property -->
<h:outputText
  value="#{helloBean.name}"/>

<!-- Binding an input field -->
<h:inputText
  value="#{helloBean.name}"/>

<!-- Calling an action -->
<h:commandButton
  value="Say Hello"
  action="#{helloBean.greet}"/>

<!-- Conditional rendering -->
<h:panelGroup
  rendered="#{not empty helloBean.name}">
  Hello, <h:outputText
    value="#{helloBean.name}"/>!
</h:panelGroup>

17 / 20

Section 3.3Navigation — Controlling Page Flow

After a user action, Jakarta Faces needs to know which page to show next. This is handled through navigation outcomes.

How it works

Your action method returns a String outcome (e.g., "success", "error")
JF maps that string to the next page
Modern JF uses implicit navigation — return the filename of the next page (without extension)

Example

return "dashboard";
→ JF navigates to dashboard.xhtml

Redirect vs Forward

Append ?faces-redirect=true to the outcome to redirect the browser (updates the URL bar). Without it, JF does a server-side forward (URL stays the same).

// In your Managed Bean
public String login() {
  if (authService.check(
        user, pass)) {
    return
      "dashboard?faces-redirect=true";
  } else {
    // Add error message
    FacesContext.getCurrentInstance()
      .addMessage(null,
        new FacesMessage(
          "Invalid credentials"));
    return null; // Stay on page
  }
}

18 / 20

Section 4

Developing JF Web Applications

Let's put it all together — the typical project structure, a complete minimal example, and the key files you need to know.

19 / 20

Section 4.1A Complete Jakarta Faces Application

Project structure (Maven)

src/
  main/
    java/
      com/example/
        HelloBean.java    ← Managed Bean
    webapp/
      WEB-INF/
        web.xml           ← Registers FacesServlet
        beans.xml         ← Enables CDI
      index.xhtml         ← Facelet page
      result.xhtml        ← Result page
pom.xml                   ← Jakarta EE 10 dep

The three files you must have

web.xml — maps *.xhtml to FacesServlet
beans.xml — tells the server to enable CDI (dependency injection)
At least one .xhtml — your first page

<!-- web.xml (key part) -->
<servlet>
  <servlet-name>Faces</servlet-name>
  <servlet-class>
    jakarta.faces.webapp.FacesServlet
  </servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>Faces</servlet-name>
  <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

<!-- index.xhtml -->
<h:form>
  <h:inputText
    value="#{helloBean.name}"/>
  <h:commandButton
    value="Greet"
    action="#{helloBean.greet}"/>
</h:form>

20 / 20

Knowledge Check — FinalPutting It All Together

Q1: A user submits a registration form. JF validates the email format, rejects it, and shows an error message — without calling your register() method. Which lifecycle phase stopped the process?

When validation fails in Phase 3, JF skips Phases 4 and 5 entirely and jumps straight to Phase 6 (Render Response) to redisplay the form with error messages. Your business logic is never touched.

Q2: Which of the following best describes the role of Expression Language (EL) in Jakarta Faces?

Expression Language (EL) uses #{} syntax to bind Facelet UI components to Managed Bean properties (for reading/writing data) and action methods (for responding to user actions). It is evaluated server-side before the page is sent to the browser.

Jakarta Faces:Building Web Interfaces

This WeekLearning Objectives

What Is Jakarta Faces?

Section 1.1The Problem: Connecting Logic to the Screen

Section 1.2Jakarta Faces in Plain English

Section 1.3Where Jakarta Faces Fits in the Big Picture

JF Architecture & Components

Section 2.1The MVC Pattern — The Foundation

Section 2.2The FacesServlet — Traffic Controller

Section 2.3Facelets — The View Layer

What makes Facelets special?

Section 2.4Managed Beans — The Glue

Section 2.5Bean Scopes — How Long Does Data Live?

Knowledge CheckSection 2 — Architecture & Components

Web Interface Specifications

Section 3.1The Jakarta Faces Request Lifecycle

Section 3.2Expression Language — Connecting UI to Data

What you can do with EL

Section 3.3Navigation — Controlling Page Flow

How it works

Developing JF Web Applications

Section 4.1A Complete Jakarta Faces Application

Project structure (Maven)

The three files you must have

Knowledge Check — FinalPutting It All Together

Table of Contents

Jakarta Faces:
Building Web Interfaces