Getting Started with Primefaces and Primeflex

Introduction

Primeflex https://www.primefaces.org/showcase/primeflex/setup.xhtml is the prefered way to do layout in Primefaces v10 https://www.primefaces.org/showcase/getstarted.xhtml

Java EE 8, Microprofile 3 and Primeface 10 Setup

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>
    <groupId>se.magnuskkarlsson</groupId>
    <artifactId>example-primefaces</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.build.outputEncoding>UTF-8</project.build.outputEncoding>
        <failOnMissingWebXml>false</failOnMissingWebXml>
        <bouncycastle.version>1.65</bouncycastle.version>
        <hibernate.version>5.3.14.Final</hibernate.version>
        <hibernate-validator.version>6.0.18.Final</hibernate-validator.version>
        <resteasy.version>3.6.1.SP2</resteasy.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>8.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.eclipse.microprofile</groupId>
            <artifactId>microprofile</artifactId>
            <version>3.0</version>
            <type>pom</type>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>10.0.0</version>
        </dependency>
        <dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>primefaces-extensions</artifactId>
            <version>10.0.0</version>
        </dependency>

        <!-- Test Support -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.hamcrest</groupId>
            <artifactId>hamcrest-core</artifactId>
            <version>2.1</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.mockito</groupId>
            <artifactId>mockito-all</artifactId>
            <version>1.10.19</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.github.javafaker</groupId>
            <artifactId>javafaker</artifactId>
            <version>0.17.2</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <version>1.4.199</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.17</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>${hibernate.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-envers</artifactId>
            <version>${hibernate.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.hibernate.validator</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>${hibernate-validator.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.glassfish</groupId>
            <artifactId>jakarta.el</artifactId>
            <version>3.0.2</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-jaxrs</artifactId>
            <version>${resteasy.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-jaxb-provider</artifactId>
            <version>${resteasy.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.jboss.resteasy</groupId>
            <artifactId>resteasy-json-p-provider</artifactId>
            <version>${resteasy.version}</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <finalName>${project.artifactId}</finalName>
        <pluginManagement>
            <plugins>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.8.1</version>
                    <configuration>
                        <release>11</release>
                        <showDeprecation>true</showDeprecation>
                        <showWarnings>true</showWarnings>
                    </configuration>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>
</project> 

src/main/webapp/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
    version="4.0">

    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

src/main/webapp/WEB-INF/beans.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/beans_2_0.xsd"
    bean-discovery-mode="all" version="2.0">

</beans>

src/main/webapp/WEB-INF/faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_3.xsd"
    version="2.3">

</faces-config>

Primefaces 10 Primeflex

Download Primeflex to project. You only need to minified CSS, but here we download both.

$ mkdir -p src/main/webapp/resources/css/primeflex

$ wget https://raw.githubusercontent.com/primefaces/primeflex/master/primeflex.css -P src/main/webapp/resources/css/primeflex
$ wget https://raw.githubusercontent.com/primefaces/primeflex/master/primeflex.min.css -P src/main/webapp/resources/css/primeflex

Add Primeflex CSS as h:outputStylesheet in h:head

<h:head>
    <h:outputStylesheet name="primeflex.css" library="primeflex" />
</h:head>

Test

src/main/webapp/index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions">

<h:head>
    <h:outputStylesheet name="primeicons/primeicons.css" library="primefaces" />
    <h:outputStylesheet name="primeflex.css" library="primeflex" />
    <title>Hello World</title>
</h:head>
<h:body>

    <div class="card">
        <h:form>
            <p:growl id="messages" />

            <p:menubar>
                <p:submenu label="File" icon="pi pi-fw pi-file">
                    <p:submenu label="New" icon="pi pi-fw pi-plus">
                        <p:menuitem value="Bookmark" icon="pi pi-fw pi-bookmark" />
                        <p:menuitem value="Video" icon="pi pi-fw pi-video" />
                    </p:submenu>
                    <p:menuitem value="Delete" icon="pi pi-fw pi-trash" />
                    <p:divider />
                    <p:menuitem value="Export" icon="pi pi-fw pi-external-link" />
                </p:submenu>

                <p:submenu label="Edit" icon="pi pi-fw pi-pencil">
                    <p:menuitem value="Left" icon="pi pi-fw pi-align-left" />
                    <p:menuitem value="Right" icon="pi pi-fw pi-align-right" />
                    <p:menuitem value="Center" icon="pi pi-fw pi-align-center" />
                    <p:menuitem value="Justify" icon="pi pi-fw pi-align-justify" />
                </p:submenu>

                <p:submenu label="Users" icon="pi pi-fw pi-user">
                    <p:menuitem value="New" icon="pi pi-fw pi-user-plus" />
                    <p:menuitem value="Delete" icon="pi pi-fw pi-user-minus" />
                    <p:submenu label="Search" icon="pi pi-fw pi-users">
                        <p:submenu label="Filter" icon="pi pi-fw pi-filter">
                            <p:menuitem value="Print" icon="pi pi-fw pi-print" />
                        </p:submenu>
                        <p:menuitem value="List" icon="pi pi-fw pi-bars" />
                    </p:submenu>
                </p:submenu>

                <p:submenu label="Events" icon="pi pi-fw pi-calendar">
                    <p:submenu label="Edit" icon="pi pi-fw pi-pencil">
                        <p:menuitem value="Save" icon="pi pi-fw pi-calendar-plus" />
                        <p:menuitem value="Delete" icon="pi pi-fw pi-calendar-minus" />
                    </p:submenu>
                    <p:submenu label="Archieve" icon="pi pi-fw pi-calendar-times">
                        <p:menuitem value="Remove" icon="pi pi-fw pi-calendar-minus" />
                    </p:submenu>
                </p:submenu>

                <p:divider layout="vertical" />

                <p:menuitem value="Quit" icon="pi pi-fw pi-power-off" />

                <f:facet name="options">
                    <div class="ui-input-icon-left p-mr-2">
                        <i class="pi pi-fw pi-search" />
                        <p:inputText placeholder="Search" />
                    </div>
                    <p:button value="Logout" icon="pi pi-fw pi-sign-out" styleClass="ui-button-info" />
                </f:facet>
            </p:menubar>
        </h:form>
    </div>

    <div class="card p-mt-4">
        <h:form>
            <p:growl id="message" showDetail="true" />

            <p:commandButton value="Confirm" action="#{confirmView.confirm}" update="message" styleClass="p-mr-2"
                icon="pi pi-check">
                <p:confirm header="Confirmation" message="Are you sure you want to proceed?"
                    icon="pi pi-exclamation-triangle" />
            </p:commandButton>

            <p:commandButton value="Delete" action="#{confirmView.delete}" update="message"
                styleClass="ui-button-danger" icon="pi pi-times">
                <p:confirm header="Confirmation" message="Do you want to delete this record?" icon="pi pi-info-circle" />
            </p:commandButton>

            <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" responsive="true" width="350">
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no ui-button-flat" />
                <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" />
            </p:confirmDialog>
        </h:form>
    </div>

</h:body>
</html>