Forms and PrimeFaces in JSF Framework

This project will demonstrate how to use Forms and PrimeFaces in JSF Framework

  • LearnJSFFrameworkWithRealApps
    • src/main/java
      • com.demo
        • AccountManagedBean.java
      • com.entities
        • Account.java
    • src
      • main
        • webapp
          • WEB-INF
            • web.xml
          • index.xhtml
          • result.xhtml
    • pom.xml
package com.demo;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import com.entities.Account;

@SessionScoped
@ManagedBean(name = "accountManagedBean")
public class AccountManagedBean {

    private Account account;

    public Account getAccount() {
        return account;
    }

    public void setAccount(Account account) {
        this.account = account;
    }

    public AccountManagedBean() {
        this.account = new Account();
        this.account.setGender("m");
        this.account.setStatus(true);
        this.account.setLanguages(new String[] { "lang1", "lang3" });
    }

    public String save() {
        return "result";
    }

}
package com.entities;

import java.util.Date;

public class Account {

    private String username;
    private String password;
    private String description;
    private String gender;
    private String[] languages;
    private String role;
    private boolean status;
    private Date birthday;
    private String detail;
    private String sign;

    public String getSign() {
        return sign;
    }

    public void setSign(String sign) {
        this.sign = sign;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public String getDetail() {
        return detail;
    }

    public void setDetail(String detail) {
        this.detail = detail;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String[] getLanguages() {
        return languages;
    }

    public void setLanguages(String[] languages) {
        this.languages = languages;
    }

    public String getRole() {
        return role;
    }

    public void setRole(String role) {
        this.role = role;
    }

    public boolean isStatus() {
        return status;
    }

    public void setStatus(boolean status) {
        this.status = status;
    }

}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Register Page</title>
</h:head>
<h:body>

    <h3>Account Info</h3>
    <h:form>
        <table cellpadding="2" cellspacing="2">
            <tr>
                <td>Username</td>
                <td>
                    <h:inputText value="#{accountManagedBean.account.username}"></h:inputText>
                </td>
            </tr>
            <tr>
                <td>Password</td>
                <td>
                    <h:inputSecret value="#{accountManagedBean.account.password}"></h:inputSecret>
                </td>
            </tr>
            <tr>
                <td valign="top">Description</td>
                <td>
                    <h:inputTextarea cols="20" rows="5" value="#{accountManagedBean.account.description}"></h:inputTextarea>
                </td>
            </tr>
            <tr>
                <td valign="top">Gender</td>
                <td>
                    <h:selectOneRadio value="#{accountManagedBean.account.gender}">
                        <f:selectItem itemLabel="Male" itemValue="m"></f:selectItem>
                        <f:selectItem itemLabel="Female" itemValue="f"></f:selectItem>
                    </h:selectOneRadio>
                </td>
            </tr>
            <tr>
                <td>Status</td>
                <td>
                    <h:selectBooleanCheckbox value="#{accountManagedBean.account.status}"></h:selectBooleanCheckbox>
                </td>
            </tr>
            <tr>
                <td valign="top">Languages</td>
                <td>
                    <h:selectManyCheckbox value="#{accountManagedBean.account.languages}" layout="pageDirection">
                        <f:selectItem itemLabel="Language 1" itemValue="lang1"></f:selectItem>
                        <f:selectItem itemLabel="Language 2" itemValue="lang2"></f:selectItem>
                        <f:selectItem itemLabel="Language 3" itemValue="lang3"></f:selectItem>
                        <f:selectItem itemLabel="Language 4" itemValue="lang4"></f:selectItem>
                        <f:selectItem itemLabel="Language 5" itemValue="lang5"></f:selectItem>
                    </h:selectManyCheckbox>
                </td>
            </tr>
            <tr>
                <td valign="top">Role</td>
                <td>
                    <h:selectOneMenu value="#{accountManagedBean.account.role}">
                        <f:selectItem itemLabel="Role 1" itemValue="r1"></f:selectItem>
                        <f:selectItem itemLabel="Role 2" itemValue="r2"></f:selectItem>
                        <f:selectItem itemLabel="Role 3" itemValue="r3"></f:selectItem>
                        <f:selectItem itemLabel="Role 4" itemValue="r4"></f:selectItem>
                        <f:selectItem itemLabel="Role 5" itemValue="r5"></f:selectItem>
                    </h:selectOneMenu>
                </td>
            </tr>
            <tr>
                <td valign="top">Birthday</td>
                <td>
                    <p:calendar pattern="MM/dd/yyyy" value="#{accountManagedBean.account.birthday}"></p:calendar>
                </td>
            </tr>
            <tr>
                <td valign="top">Detail</td>
                <td>
                    <p:editor width="400" value="#{accountManagedBean.account.detail}"></p:editor>
                </td>
            </tr>
            <tr>
                <td valign="top">Signature</td>
                <td>
                    <p:signature style="width:400px;height:200px" widgetVar="sig" value="#{accountManagedBean.account.sign}" required="true" guideline="true"/>
                </td>
            </tr>
            <tr>
                <td valign="top">&nbsp;</td>
                <td>
                    <h:commandButton value="Save" action="#{accountManagedBean.save()}"></h:commandButton>
                </td>
            </tr>
        </table>
    </h:form>

</h:body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Result Page</title>
</h:head>
<h:body>

    <h3>Account Info</h3>
    <h:form>
        <table cellpadding="2" cellspacing="2" border="1">
            <tr>
                <td>Username</td>
                <td>#{accountManagedBean.account.username}</td>
            </tr>
            <tr>
                <td>Password</td>
                <td>#{accountManagedBean.account.password}</td>
            </tr>
            <tr>
                <td>Description</td>
                <td>#{accountManagedBean.account.description}</td>
            </tr>
            <tr>
                <td>Gender</td>
                <td>#{accountManagedBean.account.gender}</td>
            </tr>
            <tr>
                <td>Status</td>
                <td>#{accountManagedBean.account.status}</td>
            </tr>
            <tr>
                <td>Languages</td>
                <td>
                    <ui:repeat var="language" value="#{accountManagedBean.account.languages}">
                        #{language}
                        <br></br>
                    </ui:repeat>
                </td>
            </tr>
            <tr>
                <td>Role</td>
                <td>#{accountManagedBean.account.role}</td>
            </tr>
            <tr>
                <td>Birthday</td>
                <td>
                    <h:outputText value="#{accountManagedBean.account.birthday}">
                        <f:convertDateTime pattern="MM/dd/yyyy"></f:convertDateTime>
                    </h:outputText>
                </td>
            </tr>
            <tr>
                <td>Detail</td>
                <td>
                    <h:outputText value="#{accountManagedBean.account.detail}" escape="false"></h:outputText>
                </td>
            </tr>
            <tr>
                <td>Signature</td>
                <td>
                    <p:outputPanel id="output">
                        <p:signature style="width:400px;height:200px;" value="#{accountManagedBean.account.sign}" readonly="true" rendered="#{not empty accountManagedBean.account.sign}" backgroundColor="#eaeaea" color="#03a9f4"/>
                    </p:outputPanel>
                </td>
            </tr>
        </table>
    </h:form>

</h:body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    id="WebApp_ID" version="2.5">
    <display-name>LearnJSFFrameworkWithRealApps</display-name>
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
    <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>/faces/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.faces</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
</web-app>
<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/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.demo</groupId>
    <artifactId>LearnJSFFrameworkWithRealApps</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>LearnJSFFrameworkWithRealApps Maven Webapp</name>
    <url>http://maven.apache.org</url>

    <dependencies>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.2.8</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.2.17</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.1</version>
        </dependency>
        <dependency>
            <groupId>com.sun.el</groupId>
            <artifactId>el-ri</artifactId>
            <version>1.0</version>
        </dependency>
        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>6.0</version>
        </dependency>
    </dependencies>

    <build>
        <finalName>LearnJSFFrameworkWithRealApps</finalName>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>2.3.1</version>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Screenshots