Jakarta Faces (formerly JavaServer Faces or JSF) is a powerful UI framework for building server-side web applications in Java. In this quick tutorial, we’ll walk through setting up a lightweight JSF application using Apache Maven and WildFly.
Step 1: Generate a Web Project Template
First, generate a standard empty web application using the official Maven Webapp Archetype:
mvn archetype:generate \
-DarchetypeGroupId=org.apache.maven.archetypes \
-DarchetypeArtifactId=maven-archetype-webapp \
-DarchetypeVersion=1.4
Follow the prompts to specify your
groupId,
artifactId, and
version.
Step 2: Configure pom.xml
Next, update your pom.xml file. We need to:
- Specify Java 21 target compatibility.
- Register the Jakarta Faces API dependency (provided scope, as the app server handles the implementation).
- Add the WildFly Maven Plugin to streamline rapid local deployment.
<?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>com.example.jsf</groupId>
<artifactId>webapp</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>webapp Maven Webapp</name>
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>21</maven.compiler.source>
<maven.compiler.target>21</maven.compiler.target>
</properties>
<dependencies>
<!-- Jakarta Faces API -->
<dependency>
<groupId>jakarta.faces</groupId>
<artifactId>jakarta.faces-api</artifactId>
<version>4.0.0</version>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<finalName>webapp</finalName>
<plugins>
<!-- WildFly Plugin for quick development & deployment -->
<plugin>
<groupId>org.wildfly.plugins</groupId>
<artifactId>wildfly-maven-plugin</artifactId>
<version>5.0.0.Final</version>
</plugin>
</plugins>
</build>
</project>
Step 3: Register FacesServlet in web.xml
In your
src/main/webapp/WEB-INF/web.xml directory, configure the
FacesServlet. This servlet acts as the central controller processing all requests routed to JSF views.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_1.xsd"
version="6.1">
<!-- JSF Servlet Configuration -->
<servlet>
<servlet-name>FacesServlet</servlet-name>
<servlet-class>jakarta.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Map JSF to handle .xhtml files -->
<servlet-mapping>
<servlet-name>FacesServlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
Step 4: Create Your First View (index.xhtml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="jakarta.faces.html"
xmlns:f="jakarta.faces.core" xml:lang="en" >
<f:view>
<h:outputLabel value="Hello, world"/>
</f:view>
</html>
Step 5: Run and Test
With the WildFly plugin configured, you can launch and deploy your application directly using Maven:
mvn wildfly:run
Once WildFly starts, open your browser and navigate to:
http://localhost:8080/webapp/index.xhtml
You should see your
"Hello, world!" message rendered by Jakarta Faces!
Posts
