Faces UI Development

Back

Loading concept...

Jakarta Faces: Building Web Interfaces Like a Master Chef 🍳

Imagine you’re a chef running a restaurant kitchen. Customers come in, order food, and you need to:

  • Take their order (receive request)
  • Prepare the dish (process data)
  • Serve it beautifully (render response)

Jakarta Faces is like having the ultimate kitchen management system for building web user interfaces!

What is Jakarta Faces?

Think of Jakarta Faces as your magical kitchen assistant that handles everything between when a customer orders and when food arrives at their table.

Simple Example:

<!-- A button in Faces is like a
     "call waiter" bell -->
<h:commandButton value="Order Now"
    action="#{chef.cookFood}"/>

When someone clicks this button:

  • Faces catches the click
  • Runs your Java code
  • Updates the page automatically!

Real Life Comparison:

Restaurant Jakarta Faces
Menu XHTML Page
Waiter FacesContext
Chef Managed Bean
Kitchen Server

The Faces Lifecycle: A Day in the Kitchen

Every time someone interacts with your page, Faces follows 6 steps - like a chef following a recipe!

graph TD
    A["1. RESTORE VIEW&lt;br/&gt;Open the order ticket"] --> B["2. APPLY REQUEST VALUES&lt;br/&gt;Read what customer wrote"]
    B --> C["3. PROCESS VALIDATIONS&lt;br/&gt;Check if order makes sense"]
    C --> D["4. UPDATE MODEL VALUES&lt;br/&gt;Tell the chef the order"]
    D --> E["5. INVOKE APPLICATION&lt;br/&gt;Chef cooks the food"]
    E --> F["6. RENDER RESPONSE&lt;br/&gt;Serve the dish"]

Breaking It Down Simply:

Phase 1: Restore View 🎫

  • “Let me find that customer’s order ticket”
  • Faces rebuilds or finds the page structure

Phase 2: Apply Request Values 📝

  • “What did they write on the order?”
  • Form values are read from the request

Phase 3: Process Validations ✅

  • “Wait, they ordered ‘pizza with ice cream topping’?”
  • Check if inputs are valid

Phase 4: Update Model Values 📦

  • “Okay, tell the chef: one pepperoni pizza”
  • Your Java beans get updated with form data

Phase 5: Invoke Application 🔥

  • “Chef, start cooking!”
  • Your action methods run

Phase 6: Render Response 🍽️

  • “Table 5, your pizza is ready!”
  • HTML is generated and sent to browser

FacesContext: The Head Waiter

FacesContext is like the head waiter who knows EVERYTHING about the current customer and their order.

What Can FacesContext Do?

// Get the head waiter
FacesContext ctx = FacesContext
    .getCurrentInstance();

// "What page is the customer on?"
String viewId = ctx.getViewRoot()
    .getViewId();

// "Add a note to their bill"
ctx.addMessage(null,
    new FacesMessage("Order received!"));

// "Send them to another table"
ctx.getExternalContext()
    .redirect("success.xhtml");

Quick Reference:

Need To… Use This
Get current request getExternalContext()
Show messages addMessage()
Get the page getViewRoot()
Find components getViewRoot().findComponent()

CDI Beans in Faces: The Kitchen Staff

CDI Beans are your kitchen workers. Each has a specific job and knows how long they should stay at work!

Scope = How Long They Stay

graph TD
    R["RequestScoped&lt;br/&gt;One order only"]
    V["ViewScoped&lt;br/&gt;While on same page"]
    S["SessionScoped&lt;br/&gt;Whole visit"]
    A["ApplicationScoped&lt;br/&gt;Forever open"]

Example: A Waiter Bean

@Named("waiter")
@RequestScoped
public class WaiterBean {
    private String order;

    public String takeOrder() {
        // Process the order
        return "kitchen";
    }

    // Getters and setters
}

Use in your page:

<h:inputText value="#{waiter.order}"/>
<h:commandButton value="Submit"
    action="#{waiter.takeOrder}"/>

When to Use Each Scope:

Scope Like… Example Use
@RequestScoped A disposable napkin Form processing
@ViewScoped A table cloth Multi-step wizard
@SessionScoped A loyalty card Shopping cart
@ApplicationScoped Restaurant itself App settings

Facelets Templates: The Restaurant Layout

Ever notice how restaurants have a consistent look? Same chairs, same menu design, same uniform? Facelets Templates give your pages a consistent layout!

The Master Template (template.xhtml)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="jakarta.faces.facelets">
<head>
    <title>
        <ui:insert name="title">
            My Restaurant
        </ui:insert>
    </title>
</head>
<body>
    <header>
        <ui:insert name="header">
            Welcome!
        </ui:insert>
    </header>

    <main>
        <ui:insert name="content">
            Default content here
        </ui:insert>
    </main>

    <footer>© 2024 My Kitchen</footer>
</body>
</html>

Using the Template (menu.xhtml)

<ui:composition
    template="/WEB-INF/template.xhtml"
    xmlns:ui="jakarta.faces.facelets">

    <ui:define name="title">
        Our Menu
    </ui:define>

    <ui:define name="content">
        <h1>Today's Specials</h1>
        <p>Delicious options here!</p>
    </ui:define>

</ui:composition>

Result: Every page looks consistent, but each can have unique content!

Facelets Composite Components: Custom Kitchen Tools

What if you need a special tool that doesn’t exist? You BUILD one!

Composite Components let you create reusable pieces - like designing your own kitchen gadget.

Creating a Fancy Input (resources/mycomponents/fancyInput.xhtml)

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:cc="jakarta.faces.composite"
    xmlns:h="jakarta.faces.html">

<cc:interface>
    <cc:attribute name="label"/>
    <cc:attribute name="value"/>
</cc:interface>

<cc:implementation>
    <div class="fancy-input">
        <label>#{cc.attrs.label}</label>
        <h:inputText value="#{cc.attrs.value}"/>
    </div>
</cc:implementation>
</html>

Using Your Custom Tool

<html xmlns:my="jakarta.faces.composite/mycomponents">

<!-- Now use it like a native component! -->
<my:fancyInput label="Your Name"
    value="#{user.name}"/>
<my:fancyInput label="Email"
    value="#{user.email}"/>

Why This Is Amazing:

  • Write once, use everywhere
  • Consistent styling
  • Easy to update later

Standard UI Components: The Kitchen Equipment

Faces comes with ready-to-use components - like a fully equipped kitchen!

Form Components

<!-- Text input (like an order pad) -->
<h:inputText value="#{bean.name}"/>

<!-- Password (hidden writing) -->
<h:inputSecret value="#{bean.password}"/>

<!-- Big text area (special requests) -->
<h:inputTextarea value="#{bean.notes}"
    rows="3"/>

<!-- Checkbox (yes/no choice) -->
<h:selectBooleanCheckbox
    value="#{bean.extraCheese}"/>

Selection Components

<!-- Dropdown menu -->
<h:selectOneMenu value="#{bean.size}">
    <f:selectItem itemValue="S"
        itemLabel="Small"/>
    <f:selectItem itemValue="M"
        itemLabel="Medium"/>
    <f:selectItem itemValue="L"
        itemLabel="Large"/>
</h:selectOneMenu>

<!-- Radio buttons -->
<h:selectOneRadio value="#{bean.crust}">
    <f:selectItem itemValue="thin"
        itemLabel="Thin Crust"/>
    <f:selectItem itemValue="thick"
        itemLabel="Thick Crust"/>
</h:selectOneRadio>

Action Components

<!-- Button (calls the kitchen) -->
<h:commandButton value="Order Now"
    action="#{bean.submit}"/>

<!-- Link that does something -->
<h:commandLink value="Cancel Order"
    action="#{bean.cancel}"/>

Display Components

<!-- Show text -->
<h:outputText value="#{bean.message}"/>

<!-- Show formatted text -->
<h:outputFormat value="Hello, {0}!">
    <f:param value="#{user.name}"/>
</h:outputFormat>

<!-- Data table (menu list) -->
<h:dataTable value="#{menu.items}" var="item">
    <h:column>#{item.name}</h:column>
    <h:column>#{item.price}</h:column>
</h:dataTable>

HTML5 Friendly Markup: Speaking Modern

Old Faces used weird attribute names. HTML5 Friendly Markup lets you write normal HTML with Faces powers!

The Old Way vs New Way

<!-- OLD: Confusing attributes -->
<h:inputText id="email"
    value="#{user.email}"/>

<!-- NEW: HTML5 Passthrough -->
<input type="email"
    jsf:id="email"
    jsf:value="#{user.email}"
    placeholder="you@example.com"
    required="true"/>

Enable HTML5 Mode

Add this namespace to your page:

<html xmlns:jsf="jakarta.faces"
      xmlns:pt="jakarta.faces.passthrough">

Cool HTML5 Features You Can Use

<!-- Email with validation -->
<input type="email"
    jsf:value="#{user.email}"
    pt:placeholder="Enter email"
    pt:required="true"/>

<!-- Number input with range -->
<input type="number"
    jsf:value="#{order.quantity}"
    pt:min="1" pt:max="10"/>

<!-- Date picker -->
<input type="date"
    jsf:value="#{booking.date}"/>

<!-- Color picker -->
<input type="color"
    jsf:value="#{settings.theme}"/>

The Magic: Your forms look modern, work on mobile, and still connect to your Java beans!

Putting It All Together 🎯

Here’s a complete example - an order form:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="jakarta.faces.html"
    xmlns:f="jakarta.faces.core"
    xmlns:jsf="jakarta.faces">

<h:form>
    <h:panelGrid columns="2">

        <h:outputLabel value="Name:"/>
        <h:inputText value="#{order.name}"
            required="true"/>

        <h:outputLabel value="Size:"/>
        <h:selectOneMenu value="#{order.size}">
            <f:selectItem itemValue="S"
                itemLabel="Small"/>
            <f:selectItem itemValue="M"
                itemLabel="Medium"/>
            <f:selectItem itemValue="L"
                itemLabel="Large"/>
        </h:selectOneMenu>

        <h:outputLabel value="Extra Cheese:"/>
        <h:selectBooleanCheckbox
            value="#{order.extraCheese}"/>

    </h:panelGrid>

    <h:commandButton value="Place Order"
        action="#{order.submit}"
        styleClass="btn-primary"/>

    <h:messages globalOnly="true"/>
</h:form>
</html>

Your Journey Map 🗺️

graph TD
    A["Start Here!"] --> B["Understand Lifecycle"]
    B --> C["Use FacesContext"]
    C --> D["Create CDI Beans"]
    D --> E["Build Templates"]
    E --> F["Make Components"]
    F --> G["Add HTML5 Magic"]
    G --> H[You're a Faces Chef! 🎉]

Quick Memory Tricks 🧠

Concept Remember As
Faces Lifecycle 6 steps: Restore → Apply → Validate → Update → Invoke → Render
FacesContext “Head waiter knows all”
@RequestScoped Lives for one request
@ViewScoped Lives while on page
@SessionScoped Lives for whole visit
Templates Master layout + child pages
Composite Components Your custom tools
HTML5 Passthrough jsf: and pt: namespaces

You Did It! 🎉

You now understand Jakarta Faces:

  • ✅ It’s a kitchen system for web UIs
  • ✅ Every request follows 6 lifecycle phases
  • ✅ FacesContext is your information hub
  • ✅ CDI Beans are your workers with different shifts
  • ✅ Templates keep everything consistent
  • ✅ Composite components are reusable custom tools
  • ✅ Standard components are ready-to-use
  • ✅ HTML5 mode makes modern forms easy

Go build something amazing! 🚀

Loading story...

Story - Premium Content

Please sign in to view this story and start learning.

Upgrade to Premium to unlock full access to all stories.

Sign In to Access Get Premium Access Close

Stay Tuned!

Story is coming soon.

Story Preview

Story - Premium Content

Please sign in to view this concept and start learning.

Upgrade to Premium to unlock full access to all content.

Sign In to Access Get Premium Access Close