git clone https://github.com/openliberty/guide-jakarta-faces.git
cd guide-jakarta-faces
Contents
Tags
Building a dynamic web application with integrated user interface and backend logic
25 minutes
New
Prerequisites:
Table of contents
Learn how to build a dynamic web application using Jakarta Faces, Jakarta Contexts and Dependency Injection, and Jakarta Expression Language.
What you’ll learn
You’ll learn how to build a dynamic web application using Jakarta Faces for the user interface (UI), Jakarta Contexts and Dependency Injection (CDI) for managing backend logic, and Jakarta Expression Language (EL) for data binding.
Jakarta Faces is a framework for building component-based web applications that simplifies UI development by managing reusable components, handling user interactions, and binding data to backend logic. It provides built-in lifecycle management, event handling, and server-side validation, reducing the need for manual request processing. Jakarta Faces also includes tag libraries that allows developers define UI components using markup and connect them to backend objects without writing repetitive setup code.
To further streamline development, Jakarta Faces works with CDI to manage backend components. CDI allows beans to be automatically created and injected where needed, making it easier to manage application logic. Jakarta Expression Language enables data binding between the UI and backend, allowing UI components to dynamically display data and trigger backend actions.
The application you will build in this guide is a dynamic web application that displays system load data on demand. Using Jakarta Faces for the UI, you’ll create a table to show the system CPU load and heap memory usage. You’ll also learn how to use CDI to provide the system load data from a managed bean, and to use Jakarta Expression Language to bind this data to the UI components.
Getting started
The fastest way to work through this guide is to clone the Git repository and use the projects that are provided inside:
The start directory contains the starting project that you will build upon.
The finish directory contains the finished project that you will build.
Before you begin, make sure you have all the necessary prerequisites.
Try what you’ll build
The finish directory in the root of this guide contains the finished application. Give it a try before you proceed.
To try out the application, first go to the finish directory and run Maven with the liberty:run goal to build the application and deploy it to Open Liberty:
cd finish
mvn liberty:runAfter you see the following message, your Liberty instance is ready.
The defaultServer server is ready to run a smarter planet.Check out the web application at the http://localhost:9080/index.xhtml URL. Click the 
refresh button, located next to the table title, to update and display the latest system load data in the table.
After you are finished checking out the application, stop the Liberty instance by pressing CTRL+C in the command-line session where you ran Liberty. Alternatively, you can run the liberty:stop goal from the finish directory in another shell session:
mvn liberty:stop
Creating a static Jakarta Faces page
Start by creating a page that displays an empty table by using Jakarta Faces to extend standard HTML. The table will display the system load data and serves as the starting point for your application.
Navigate to the start directory to begin.
When you run Open Liberty in dev mode, dev mode listens for file changes and automatically recompiles and deploys your updates whenever you save a new change. Run the following goal to start Open Liberty in dev mode:
mvn liberty:devAfter you see the following message, your Liberty instance is ready in dev mode:
**************************************************************
* Liberty is running in dev mode.Dev mode holds your command-line session to listen for file changes. Open another command-line session to continue, or open the project in your editor.
Create the index.xhtml file.
src/main/webapp/index.xhtml
index.xhtml
footer.xhtml
In the index.xhtml file, the xmlns attributes define the XML namespaces for various Jakarta Faces tag libraries. These namespaces allow the page to use Jakarta Faces tags for templating, creating UI components, and enabling core functionality, such as form submissions and data binding. For more information on the various tag libraries and their roles in Jakarta Faces, refer to the Jakarta Faces Tag Libraries and the VDL Documentation Generator documentation.
The index.xhtml file combines standard HTML elements with Jakarta Faces components, providing both static layout and dynamic functionality. Standard HTML elements, like div and section, structure the page’s layout. Jakarta Faces tags offer additional features beyond standard HTML, such as managing UI components, including resources, and binding data. For example, the h:outputStylesheet tag loads a CSS file for styling, and the ui:include tag incorporates reusable components, such as the provided footer.xhtml file, to streamline maintenance and reuse across multiple pages. The h:dataTable tag is used to display a table.
At this point, the page defines a table that has no data entries. We’ll add dynamic content in the following steps.
Configuring the Faces Servlet
Before you can access the Jakarta Faces page, you need to configure a Faces servlet in your application. This servlet handles all requests for .xhtml pages and processes them using Jakarta Faces.
Create the web.xml file.
src/main/webapp/WEB-INF/web.xml
web.xml
1<?xml version="1.0" encoding="UTF-8"?>
2<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4 xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"
5 version="6.0">
6
7 <context-param>
8 <!-- tag::project-stage[] -->
9 <param-name>jakarta.faces.PROJECT_STAGE</param-name>
10 <!-- end::project-stage[] -->
11 <!-- tag::project-stage-dev[] -->
12 <param-value>Development</param-value>
13 <!-- end::project-stage-dev[] -->
14 </context-param>
15
16 <!-- Faces Servlet Configuration -->
17 <!-- tag::servlet[] -->
18 <servlet>
19 <servlet-name>Faces Servlet</servlet-name>
20 <servlet-class>jakarta.faces.webapp.FacesServlet</servlet-class>
21 <!-- tag::load-on-startup[] -->
22 <load-on-startup>1</load-on-startup>
23 <!-- end::load-on-startup[] -->
24 </servlet>
25 <!-- end::servlet[] -->
26
27 <!-- Servlet Mapping -->
28 <!-- tag::servlet-mapping[] -->
29 <servlet-mapping>
30 <servlet-name>Faces Servlet</servlet-name>
31 <url-pattern>*.xhtml</url-pattern>
32 </servlet-mapping>
33 <!-- end::servlet-mapping[] -->
34
35</web-app>The servlet element defines the Faces servlet that is responsible for processing requests for Jakarta Faces pages. The load-on-startup element with a value of 1 specifies that the servlet is loaded and initialized first when the application starts.
The servlet-mapping element specifies which URL patterns are routed to the Faces servlet. In this case, all URLs ending with .xhtml are mapped to be processed by Jakarta Faces. This ensures that any request for an .xhtml page is handled by the Faces servlet, which manages the lifecycle of Jakarta Faces components, processes the page, and renders the output.
By configuring both the servlet and the servlet mapping, you’re ensuring that Jakarta Faces pages are properly processed and delivered in response to user requests.
The jakarta.faces.PROJECT_STAGE context parameter determines the current stage of the application in its development lifecycle. Because it is currently set to Development, you will see additional debugging information, including developer-friendly warning messages such as WARNING: Apache MyFaces Core is running in DEVELOPMENT mode. For more information about valid values and how to set the PROJECT_STAGE parameter, see the official Jakarta Faces ProjectStage documentation.
In your dev mode console, type r and press the enter/return key to restart the Liberty instance so that Liberty reads the configuration changes. When you see the following message, your Liberty instance is ready in dev mode:
**************************************************************
* Liberty is running in dev mode.Check out the web application that you created at the http://localhost:9080/index.xhtml URL.
You should see the static page with the system loads table displaying only the headers and no data.
Implementing backend logic with dependency injection
To provide system load data to your web application, you’ll create a CDI-managed bean that retrieves information about the system CPU load and memory usage. This bean is accessible from the Jakarta Faces page and supplies the data that is displayed.
Create the SystemLoadBean class.
src/main/java/io/openliberty/guides/bean/SystemLoadBean.java
SystemLoadBean.java
Annotate the SystemLoadBean class with a @Named annotation to make it accessible in the Jakarta Faces pages under the systemLoadBean name. Because the SystemLoadBean bean is a CDI-managed bean, a scope is necessary. Annotating it with the @ApplicationScoped annotation indicates that it is initialized once and is shared between all requests while the application runs. To learn more about CDI, see the Injecting dependencies into microservices guide.
The @PostConstruct annotation ensures the init() method runs after the SystemLoadBean is initialized and dependencies are injected. The init() method sets up any required resources for the bean’s lifecyccle.
The fetchSystemLoad() method retrieves the current system load and memory usage, then updates the list of system load data.
The getSystemLoads() method is a getter method for accessing the list of system load data from the Jakarta Faces page.
Binding data to the UI with expression language
Now that you have implemented the backend logic with CDI, you’ll update the Jakarta Faces page to display the dynamic system load data. You’ll do this by using Jakarta Expression Language to bind the UI components to the backend data.
Replace the index.xhtml file.
src/main/webapp/index.xhtml
index.xhtml
SystemLoadBean.java
styles.css
The index.xhtml uses an h:commandButton tag to create the refresh button. When the button is clicked, the #{systemLoadBean.fetchSystemLoad} action invokes the fetchSystemLoad() method using Jakarta Expression Language. This expression references the systemLoadBean managed bean, triggering the method to update the system load data. The f:ajax tag ensures that the systemLoadForm component is re-rendered without requiring a full page reload.
The systemLoadsTable is populated using the h:dataTable tag, which iterates over the list of system load data provided by the systemLoadBean. The #{systemLoadBean.systemLoads} expression calls the getSystemLoads() method from the managed bean, binding the data to the UI components. If the systemLoadBean isn’t created yet, it is automatically initialized at this point. For each entry, the time, cpuLoad, and memoryUsage fields are displayed by using the h:outputText tag. The f:convertNumber tag formats cpuLoad to seven decimal places and memoryUsage to two decimal places.
To format the table, set the styleClass, headerClass, and rowClasses attributes in the h:dataTable tag. The style elements are defined in the src/main/webapp/resources/css/styles.css file.
Running the application
server.xml
1<server description="Sample Liberty server">
2
3 <featureManager>
4 <platform>jakartaee-10.0</platform>
5 <!-- tag::faces[] -->
6 <feature>faces</feature>
7 <!-- end::faces[] -->
8 <!-- tag::expressionLanguage[] -->
9 <feature>expressionLanguage</feature>
10 <!-- end::expressionLanguage[] -->
11 <!-- tag::cdi[] -->
12 <feature>cdi</feature>
13 <!-- end::cdi[] -->
14 </featureManager>
15
16 <variable name="http.port" defaultValue="9080"/>
17 <variable name="https.port" defaultValue="9443"/>
18
19 <httpEndpoint id="defaultHttpEndpoint" host="*"
20 httpPort="${http.port}"
21 httpsPort="${https.port}" />
22
23 <webApplication location="guide-jakarta-faces.war" contextRoot="/"/>
24
25</server>The required faces, expressionLanguage, and cdi features are enabled for you in the Liberty server.xml configuration file.
Because you started the Open Liberty in dev mode at the beginning of the guide, all the changes were automatically picked up.
Navigate to the http://localhost:9080/index.xhtml URL to view your web application. Click on the refresh button to trigger an update on the system loads table.
Testing the application
While you can manually verify the web application by visiting http://localhost:9080/index.xhtml, automated tests are a much better approach because they are more reliable and trigger a failure if a breaking change is introduced. You can write unit tests for your CDI bean to ensure that the basic operations you implemented function correctly.
Create the SystemLoadBeanTest class.
src/test/java/io/openliberty/guides/bean/SystemLoadBeanTest.java
SystemLoadBeanTest.java
The setUp() method is annotated with the @BeforeEach annotation, indicating that it is run before each test case to ensure a clean state for each test execution. In this case, it creates a new instance of SystemLoadBean and manually calls the init() method to initialize the list of system load data before each test.
The testInitMethod() test case verifies that after initializing SystemLoadBean, the list of system load data is not null and contains at least one entry.
The testFetchSystemLoad() test case verifies that after calling the fetchSystemLoad() method, the size of the list of system load data increases by one.
The testDataIntegrity() test case verifies that each SystemLoadData entry in the list of system load data contains valid values for time, cpuLoad, and memoryUsage.
Running the tests
Because you started Open Liberty in dev mode, you can run the tests by pressing the enter/return key from the command-line session where you started dev mode.
You see the following output:
-------------------------------------------------------
T E S T S
-------------------------------------------------------
Running io.openliberty.guides.bean.SystemLoadBeanTest
Tests run: 3, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.037 s -- in io.openliberty.guides.bean.SystemLoadBeanTest
Results:
Tests run: 3, Failures: 0, Errors: 0, Skipped: 0When you are done checking out the service, exit dev mode by pressing CTRL+C in the command-line session where you ran Liberty.
Great work! You’re done!
You just built a dynamic web application on Open Liberty by using Jakarta Faces for the user interface, CDI for managing beans, and Jakarta Expression Language for binding and handling data.
Guide Attribution
Building a dynamic web application with integrated user interface and backend logic by Open Liberty is licensed under CC BY-ND 4.0
Copied to clipboard
Prerequisites:
Nice work! Where to next?
What did you think of this guide?
Thank you for your feedback!
What could make this guide better?
Raise an issue to share feedback
Create a pull request to contribute to this guide
Need help?
Ask a question on Stack Overflow
