Create a Primefaces JSF project with Maven and Wildfly

David Dal Busco
Oct 30 · 6 min read

I’m currently on my way to Fuerteventura to enjoy a week of holidays ☀️ Earlier this year, I found out that writing blog posts was a great way to use wisely my time spent traveling, that’s why I’m repeating the experience.

When I thought about which subject I should write about earlier this morning (I don’t generally have any plan in advance when it comes to writing) I came to the idea that it would be maybe interesting to share my favorite JSF trick (or hack, depends if you see the glass half empty or full). But before doing so, I had to initialize a clean blank project, that’s why I’ve decided to first write this tutorial 😋

But why a JSF project?

But why a JSF project?

Honestly, I don’t know exactly why anyone would be still interested to create a brand new JavaServer Faces API (JSF) project in 2019 or why would anyone even read this article 🤣. Not that I don’t like Java, I still do and I still think it’s a good match for certain types of projects, notably when it goes to the back- and middle-end layers but I would probably not use or advice it personally for the frontend part of any new projects.

That’s why I’m really curious to hear your voice, why are you reading this article? Why are you looking to create a JSF project? Let me know with a comment 😁

Getting started

In this article we are going to follow the following steps:

1. Create a new web project
2. Add a Wildfly development server to our tooling
3. Load and configure JSF
4. Implement Primefaces

Let’s get started 🚀


1. Create a new project

To create a new project, we are going to use and its or as it is described in its related documentation “an archetype which generates a sample Maven webapp project”.

For this purpose we run the following command in a terminal:

mvn archetype:generate -DgroupId=com.jsfdemo.app -DartifactId=jsf-demo -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4 -DinteractiveMode=false

If everything went well, we should be able to change directory and compile the project without any errors:

cd jsf-demo/ && mvn package

2. Add a Wildfly development server to our tooling

, formerly known as JBoss, is an application server authored by JBoss, now developed by . Wildfly could be added to Maven’s project thanks to the plugin wildfly-maven-plugin. Through its usage you could either interact with your local installed server or deploy one on the fly which is the option we are going to use.

To add it to our project, we are going now to edit our pom.xml. We add a new <dependency/> to our list of <dependencies/> and we also add it as another <plugin/>.

<dependency>
<groupId>org.wildfly.plugins</groupId>
<artifactId>wildfly-maven-plugin</artifactId>
<version>2.0.1.Final</version>
<type>maven-plugin</type>
</dependency>

<plugin>
<groupId>org.wildfly.plugins</groupId>
<artifactId>wildfly-maven-plugin</artifactId>
<version>2.0.1.Final</version>
</plugin>

Once the configuration saved, we could build and install our project and run the application to test our setup with our browser respectively should gives us access to its administration console and to a default “Hello World” page.

mvn clean install && mvn wildfly:run
Administration console
“Hello World” page

Note

This Wildfly plugin doesn’t work, out of the box, offline. Even if I fetched everything and already ran my project before taking the plane, I was unable to run it during the flight.

3. Load and configure JSF

There are different implementations of the JavaServer Faces API (JSF). For the purpose of this tutorial we are going to use the one from which we are going to add as a new <dependency/> to our pom.xml.

<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.20</version>
</dependency>

Beside the dependency, we also have to configure our application server to make it able to resolve jsf and xhtml target pages and to make these able to communicate with our beans. This configuration find place and in src/main/webapp/WEB-INF/web.xml:

<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
<display-name>Archetype Created Web Application</display-name>

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>

Our application being configured, we could created our first Java bean, HelloWorldBean.java, in src/main/java. This class will be a simple backed bean which exposes a method to say hello to the world from Fuerteventura 😉

import java.io.Serializable;

import javax.inject.Named;
import javax.faces.view.ViewScoped;

@Named("helloworld")
@ViewScoped
public class HelloWorldBean implements Serializable {

public String getMessage() {
return "Hello World from Fuertefentura";
}

}

Finally, to present this message, we add a new servlet, hello.xhtml, in src/main/webapp , which uses our above bean.

<!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">
<head>
<title>#{helloworld.message}</title>
</head>
<body>
#{helloworld.message}
</body>
</html>

As before, to try out our implementation, we build our project and run the server again.

mvn clean install && mvn wildfly:run

If we access with our browser, we should now see the friendly message as title and content of the page.

“Hello World form Fuerteventura”

4. Implement Primefaces

is an UI toolkit build at the top of JSF. It add multiple components like table, panel, dialog, etc. You might not need it but I do need it for my next blog post, therefore, let’s add it to our project too 😇

We proceed as the pasts steps by adding a new <dependency/> to our pom.xml:

<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>7.0</version>
</dependency>

No special configuration is needed and out of the box we should already be able to use their components. We could for example extend our hello.xhtml with an horizontal panel.

<!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="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">

<h:head>
<title>#{helloworld.message}</title>
</h:head>

<h:body>
<p:panel id="horizontal" header="Horizontal Toggle" toggleable="true" toggleOrientation="horizontal">
<h:panelGrid columns="2" cellpadding="10">
<img src="https://images.unsplash.com/photo-1545289415-50dff9405935?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=250&amp;q=80"/>

<h:outputText value="#{helloworld.message}" />
</h:panelGrid>
</p:panel>

</h:body>
</html>

We could again build and start our application server to try out our implementation.

mvn clean install && mvn wildfly:run

Finally we could check in our browser to check if everything is correctly running.

“Hello World from Fuerteventura” presented in a Primefaces’ panel

Voilà, we did it! We created a Primefaces JSF project with Maven and Widfly and are now able to make some testing 🎉 Moreover, even if I’m not looking forward to going home, I will be able to use this blank new project as a starter kit for my next article 😆

To infinity and beyond 🚀

David

The Startup

Medium's largest active publication, followed by +526K people. Follow to join our community.

David Dal Busco

Written by

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic Zürich Meetup

The Startup

Medium's largest active publication, followed by +526K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade