With the release of PrimeFaces 7.0 in March 2019, PrimeTek team introduced over 500 improvements featuring new components, new modern free themes, font icons, better performance various enhancements on accessibility and security. The new modern free themes were the first thing I noticed while browsing through the PrimeFaces component showcase page especially the Nova-Light theme. Besides the premium themes (e.g. Barcelona, Poseidon, Omega …) you’ll now get nice-looking themes for free.
To not only show you how this new theme looks like but to demonstrate how easy & fast you can create applications with JSF and PrimeFaces components, I created a small demo application. The application contains a form for entering data, a feature-rich data table, a chart and some general UI elements like a header and a footer and was made within 2 hours (some troubleshooting with the components included). I won’t go into a technical explanation of the source code in this blog post and will rather focus on demonstrating the productivity with JSF and the PrimeFaces components (the source code is available on GitHub).
The following technologies were used: Java 8, Java EE 8, OmniFaces 3.2, PrimeFaces 7.0 running on Payara 5.191.
For those of you who can wait, give it the first try at https://jsf-demo.riecks.io/index.xhtml.
A good place to start is the PrimeFaces showcase page where you get an overview of all available components with sample code snippets to show you how the component looks like and how to use it. You’ll both get the required XHTML code alongside the backing bean for the component demo.
For my demo application, I decided to structure the content like the following: header, content, footer. JSF provides a simple way to insert commonly used markup templates and therefore I created a
footer.xhtml file and include it on every page. The header contains a menu bar to navigate through the application and was made with the Menubar component of PrimeFaces. I could pick the showcase Menubar, adjust the menu items and was ready. For the footer, I decided to just show some text on every page.
The main page contains three PrimeFaces Panels to structure the content a little bit. Common charts like BarChart, LineChart, PieChart, etc. are also part of the component library of PrimeFaces. At the latest when integrating charts while using SPA frameworks, you would now need to evaluate a new library, include it to your project, learn its specific API, see how it integrates and create an interface to provide the data. With JSF you just have to expose the chart’s data model object with a backing bean, prepare the data basis with custom Java code (e.g. fetch data from a database via JPA) and you are done:
CRUD (Create, Read, Update, Delete) operations are also quite easy to achieve with this component as you don’t have to design and implement any e.g. REST-based interfaces. You can find a blog post about a CRUD table with JSF, PrimeFaces, and JPA here.
Just visualizing data without creating it, is boring. With JSF, no problem!
The Input components from PrimeFaces cover nearly every use case. To show you a selection of them, I decided to use a dropdown input with searching capability, an input with masking (e.g. tax id, card numbers), a slider, a toggle switch, and a date picker. Some of the input fields are backend by server-side data and some are static.
For validating the input you can make use of Bean Validation (
@Size …) within your backing bean and get validation out of the box. Compared to a SPA application, where you have to double-check the data (at the input/before sending and at the interface) this to this is really pleasant.
If you’ve not yet tried JSF, I would recommend it. With some basic HTML + CSS knowledge, you can easily create a simple application in minutes. PrimeFaces also gives you a wide variety of ready-to-use components and you can focus on business logic. Writing just Java code (except some HTML) for your whole application is also a nice advantage as you don’t need to maintain the frontend written in a different language. The integration with other Java EE standards (e.g. CDI, EJB, Security …) is also really nice and makes e.g. authorization and authentication easier. Once you are familiar with the concepts of JSF (read this book for an excellent JSF intro & deep-dive), you’ll be way more productive and can rely on only one tech-stack.
Most of the time I would prefer JSF for a company internal application (no fancy animations/graphics/pixel-perfect UIs required) and at least consider the technology for an application with external users (if the available components meet your requirements).
For more information, just browse through my other blog posts about JSF. You can also subscribe to my #NEWSLETTER, where I also write about JSF:
- #WHATIS? JavaServer Faces: An introduction to JSF 2.3
- #HOWTO: Bootstrap a JSF 2.3 Maven project in seconds
- #HOWTO: Simple CRUD table with JSF 2.3 and PrimeFaces
- #HOWTO: Simple form-based authentication for JSF 2.3 with Java EE 8 security API
Have fun using JSF with PrimeFaces,