I need an easy way to show some database data of an existing application. The architecture and technic of the application is quite old and unconfortable, so I decided to setup a new project with a modern framework.
I need overview of data in a table, maybe with CSV or PDF file export. A chart to show the number of incoming data per time etc.
I want to use a framwork that provides components for this requirements, so I do not have to code much for things like paging, file export etc.
I one of my prior projects we used Java Server Faces, and so I came up to give PrimeFaces a try. They have a good ShowCase to show their components.
Unfortunatly it was a little bit more complex to setup the project than I thought at the beginning. No rocket science, but I took me some time for the initial setup, therefore I decided to extract this to a PrimeFaces Template Application to easily reuse it next time and uploaded it to GitHub.
Setup project
Created a new Maven project in Eclipse.
Added Eclipse Gitignore defaults from GitHub and target folder (created by Maven) to .gitignore file.
Added beans.xml, web.xml and index.xhtml files to project:
CDI
For CDI we need the beans.xml file. Nothing special, it just has to be there:
PrimeFaces Configuration
Minimum setup in web.xml, except of the explicit use of the Omega theme:
Faces Servlet
javax.faces.webapp.FacesServlet
1
primefaces.THEME
omega
Faces Servlet
*.xhtml
index.xhtml
Dependencies
I want to use Tomcat and not a EE application server like Payara. Therefore I have to add JSF. And I want to use the current version, which is 2.3, so I have to add CDI (JBoss Weld) also.
Since this JSF version, the JSF managed bean facility @ManagedBean is DEPRECATED in in favour of CDI and CDI has become a REQUIRED dependency for JSF 2.3.
Of course PrimeFaces has to be added as dependency, currently in version 8.0 and PrimeFaces Themes.
4.0.0
deringo
primefacestemplate
1.0-SNAPSHOT
war
PrimeFacesTemplate
15
15
false
UTF-8
UTF-8
prime-repo
PrimeFaces Maven Repository
http://repository.primefaces.org
default
org.apache.tomcat
tomcat
9.0.41
pom
provided
javax
javaee-api
8.0
provided
javax.enterprise
cdi-api
2.0
provided
org.jboss.weld.servlet
weld-servlet
2.4.4.Final
javax.faces
javax.faces-api
2.3
provided
org.glassfish
javax.faces
2.3.0
org.omnifaces
omnifaces
3.2
org.primefaces
primefaces
8.0
org.primefaces.themes
all-themes
1.0.10
org.webjars.npm
primeflex
2.0.0
PrimefacesTemplate
org.apache.maven.plugins
maven-war-plugin
3.2.2
false
PrimefacesTemplate
PrimefacesTemplate
FlexGrid / PrimeFlex
Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops. Flex Grid CSS is not included in PrimeFaces as it is provided by PrimeFlex, a shared grid library between PrimeFaces, PrimeNG and PrimeReact projects.
Add dependency for Webjar, so we do not need to download and copy the files in our project:
org.webjars.npm
primeflex
2.0.0
Import PrimeFlex in index.xhtml:
For the usage of PrimeFlex please have a look into the documentation.
PrimeIcons
The usage of PrimeIcons is well documented.
Just import the stylesheet and use them, example: