Tag: JSF

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: