Magnus K Karlsson: Getting Started with JSF 2.3 (Java EE 8)

April 5, 2019

Getting Started with JSF 2.3 (Java EE 8)

Introduction

JSF 2.3 comes with Java EE 8.

Maven

Add Java EE 8 dependency and Java 11 (latest Java LTS version).


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    
    <modelVersion>4.0.0</modelVersion>
    <groupId>se.magnuskkarlsson</groupId>
    <artifactId>example-jsf23</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.build.outputEncoding>UTF-8</project.build.outputEncoding>
        <maven.compiler.release>11</maven.compiler.release>
        <failOnMissingWebXml>false</failOnMissingWebXml>
    </properties>
 
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>8.0</version>
            <scope>provided</scope>
        </dependency>
 
        <!-- Test Support -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
 
        <dependency>
            <groupId>org.mockito</groupId>
            <artifactId>mockito-all</artifactId>
            <version>1.10.19</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
    
    <build>
        <finalName>${project.artifactId}</finalName>
    </build>
</project>

Facelet/JSF Page

In JSF you use Facelet, which you are xhtml files. Earlier we used HTML 4.01, but now we use HTML 5.

<h:head> and <h:body> are mandatory to make JSF work.

Lets write a simple Facelet src/main/webapp/welcome.xhtml.


<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
        <title>Welcome JSF 2.3</title>
    </h:head>
    <h:body>
        <h:form>
            <h:outputLabel for="name" value="Who do you want to greet?"/>
            <h:inputText id="name" value="#{personBacking.name}" />
            <h:commandButton value="Submit" action="#{personBacking.submit()}">
                <f:ajax execute="@form" render=":message"/>
            </h:commandButton>
        </h:form>
        <br/>
        <h:outputText id="message" value="#{personBacking.message}"/>  
    </h:body>
</html>

web.xml

web.xml is no longer necessary, but to hide the source code of your xhtml files we explicitly set Facelet servlet to react on xhtml file extension.

src/main/webapp/WEB-INF/web.xml


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee webapp_4_0.xsd"
         version="4.0">
    
    <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>*.xhtml</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>welcome.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

beans.xml

To make CDI work we need to add an empty src/main/webapp/WEB-INF/beans.xml.


<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://xmlns.jcp.org/xml/ns/javaee"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/beans_2_0.xsd"
       bean-discovery-mode="all"
       version="2.0">

</beans>

Backing Bean

In Java EE 8 the JSF Backing Bean or Managed Bean are deprecated, so now we use standard CDI.


package se.magnuskkarlsson.jsf23.boundary;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class PersonBacking {

    private String name;
    private String message;

    // ----------------------- Logic Methods -----------------------
    
    public void submit() {
        message = "Greeting " + name;
    }

    // ----------------------- Helper Methods -----------------------
    
    // ----------------------- Get and Set Methods -----------------------
    
    public String getName() {
        return name;
    }

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

    public String getMessage() {
        return message;
    }

}

Test

Build and deploy to an Java EE 8 container such as JBoss EAP 7.2, then open http://localhost:8080/example-jsf23/welcome.xhtml.