PrimeFaces with Jakarta EE 10 made simple

In this article we will discuss how to create and deploy a Jakarta EE 10 application that uses Primefaces as Jakarta Faces implementation. We will build a sample application that will run in microservice-style as WildFly Bootable JAR.

PrimeFaces extends Jakarta Faces by providing a wide range of rich and customizable UI components that are not available in the standard Jakarta Faces implementation. Some of the top picks of PrimeFaces are:

  1. Rich Set of UI Components: PrimeFaces offers a comprehensive set of UI components that you can easily integrate into your JSF applications. These components include data tables, charts, calendars, dialog boxes, file uploaders, and more.
  2. Themes and Skinning: PrimeFaces provides a theming mechanism that allows you to easily change the look and feel of your application.
  3. Ajax Support: PrimeFaces heavily leverages Asynchronous JavaScript and XML (Ajax) to provide smooth and responsive user experiences. It offers built-in Ajax functionality for most components, reducing the need for manual JavaScript coding.

If you are new to Primefaces we recommend checking this introduction article: HelloWorld Primefaces tutorial

On the other hand, if you have got the basics of it, let’s see how to build a modern Jakarta EE 10 application which uses Primefaces.

Primefaces Jakarta EE 10 dependency

Firstly, in order to deploy our Primefaces example in a Jakarta EE 9/10 container you need the following set of dependencies:


With regards to the Primefaces version, we will be using version 12.0.0:


Please notice the <classifier> element which you need to set to jakarta. The <classifier> is an optional element that you can use to specify a specific variant of an artifact when multiple versions of the same artifact are available with different characteristics. In our case, we need the version of Primefaces which uses jakarta packages instead of javax.

On the other hand, if you are are using Gradle, then you can specify the jakarta classifier as follows:

dependencies {

Coding the Jakarta EE application

Our sample application will be a Primefaces datatable that shows a set of Data from the Database in tabular format. The original tutorial for this demo is in this article: PrimeFaces Datatable in a nutshell

The first change we will need to apply is moving the javax packages to jakarta. For example, here is the ItemView Class which delivers a View from a List of Item objects:

package com.sample.bean;
import java.util.List;
import jakarta.annotation.PostConstruct;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Inject;
import jakarta.inject.Named;

import org.primefaces.event.RowEditEvent;

import com.sample.model.Item;
import com.sample.service.ItemService;

public class ItemView implements Serializable {

    private List<Item> items;

    private ItemService service;

    public void init() {
        items = service.getItems();

    public List<Item> getItems() {
        return items;

    public void setService(ItemService service) {
        this.service = service;
    public void onRowEdit(RowEditEvent<Item> event) {
        FacesMessage msg = new FacesMessage("Product Edited", String.valueOf(event.getObject().getName()));
        FacesContext.getCurrentInstance().addMessage(null, msg);

    public void onRowCancel(RowEditEvent<Item> event) {
        FacesMessage msg = new FacesMessage("Edit Cancelled", String.valueOf(event.getObject().getName()));
        FacesContext.getCurrentInstance().addMessage(null, msg);

    public void onAddNew() {

        Item item = service.generateRandomItem();  

        FacesMessage msg = new FacesMessage("Item Product added", String.valueOf(item.getId()));
        FacesContext.getCurrentInstance().addMessage(null, msg);

Next, if you are using an older Primefaces application, you should be aware that the @ManagedBean annotation as it is not available anymore in the context of a Jakarta EE application. You need to use CDI annotations such as @Named to reference your Beans.

Then, define your Service Class to access your Database. We will also be using JavaFaker library to generate new random Item objects:

public class ItemService {
	List<Item> items;

	private EntityManager em;

	public void init() {
		Query query = em.createQuery("SELECT i FROM Item i");
		items = query.getResultList();

	public List<Item> getItems() {
		return items;

	public void setItems(List<Item> items) {
		this.items = items;

	public Item generateRandomItem() {
		Faker faker = new Faker();

		Item item = new Item();
		item.setPrice((Double.valueOf(faker.commerce().price(10, 1000))));
		return item;

	public void update(Item item) {
		Integer id = item.getId();
		Item itemdb = em.find(Item.class, id);


	public void save(Item item) {		


For the sake of completeness, here is the Item Class which is our Entity object that maps an equivalent Database table:

public class Item {

	Integer id;
	String name;
	String category;
	Double price;

      // getters/setters omitted for brevity


Coding the View

Next, we will add a simple index.html which contains a dataTable component within a form and a button to add some random Item objects:

    <h:form id="form">
        <p:growl id="msgs" showDetail="true"/>

        <p:dataTable id="items" widgetVar="items" var="item" value="#{dtBasicView.items}"
            <f:facet name="header">
                Jakarta EE 10 demo with Primefaces

            <p:ajax event="rowEdit" listener="#{dtBasicView.onRowEdit}" update=":form:msgs"/>
            <p:ajax event="rowEditCancel" listener="#{dtBasicView.onRowCancel}" update=":form:msgs"/>

            <p:column headerText="Name">
                    <f:facet name="output"><h:outputText value="#{}"/></f:facet>
                    <f:facet name="input"><p:inputText value="#{}" style="width:100%"

            <p:column headerText="Code">
                    <f:facet name="output"><h:outputText value="#{item.category}"/></f:facet>
                    <f:facet name="input"><p:inputText id="modelInput" value="#{item.category}"

            <p:column headerText="Price">
                    <f:facet name="output"><h:outputText value="#{item.price}"/></f:facet>
                    <f:facet name="input"><p:inputText value="#{item.price}" style="width:100%"

            <p:column style="width:6rem">

        <div class="grid mt-3">
            <div class="col-12">
                <p:commandButton value="Add new row" process="@this" update=":form:msgs"
                                 action="#{dtBasicView.onAddNew()}" oncomplete="PF('items').addRow();"/>


Note how binding of events work in order to update the datatable dynamically:

  • When you Edit a Row of the Table, the dtBasicView.onRowEdit method will be triggered.
  • When you Cancel Editing a Row of the Table the dtBasicView.onRowCancel method will be triggered.
  • Finally, when you Add a Row, the listener is dtBasicView.onAddNew. After, when this listener completes, the oncomplete method is invoked to update the dataTable,

Building the Bootable JAR

Next, to build a Bootable JAR file, we need to add the set of layers our Web application needs in the wildfly-jar-maven-plugin. For our example, we will need the the jsf, jpa and h2-default-datasource layers:


Then, we can build the application with:

mvn clean install wildfly-jar:run

WildFly will start, registering our application under the root Web context:

19:47:59,923 INFO  [org.primefaces.webapp.PostConstructApplicationEventListener] (ServerService Thread Pool -- 32) Running on PrimeFaces 12.0.0
19:47:59,931 INFO  [org.wildfly.extension.undertow] (ServerService Thread Pool -- 32) WFLYUT0021: Registered web context: '/' for server 'default-server'
19:47:59,934 INFO  [] (Controller Boot Thread) WFLYSRV0010: Deployed "jakartaee-demo.war" (runtime-name : "ROOT.war")
19:47:59,964 INFO  [] (Controller Boot Thread) WFLYSRV0212: Resuming server
19:47:59,967 INFO  [] (Controller Boot Thread) WFLYSRV0025: WildFly Full 28.0.0.Final (WildFly Core 20.0.1.Final) started in 4948ms - Started 332 of 404 services (131 services are lazy, passive or on-demand) - Server configuration file in use: standalone.xml

You can reach it under the default address http://localhost:8080

primefaces jakarta ee tutorial jsf

Our application contains some default Item objects in the import.sql script. You can add new Items in the dataTable by clicking on the “Add Random” button or you can Edit the existing ones by clicking on the last column icon.


In this article we discussed how to integrate PrimeFaces with a Jakarta EE 10 application. Overall, PrimeFaces simplifies and enhances the development of JSF-based applications by providing a feature-rich set of UI components, Ajax support, theming, and mobile compatibility. Its active community and ongoing development make it a reliable choice for building modern and responsive web applications with JSF.

Source code for this article:

Found the article helpful? if so please follow us on Socials