Time for action – creating a user registration form

Let's start using PrimeFaces components by creating a simple user registration form, steps for the same are as follows:

  1. Create a User.java POJO (Plain Old Java Object): 
    public class User 
{
  private Integer id;
  private String userName;
  private String password;
  private String firstName;
  private String lastName;
  private String email;
  private String phone;        
  //setters & getters  
}
  2. Create a JSF managed bean UserController.java, using the following code: 
    @ManagedBean
@RequestScoped
public class UserController 
{
  private User registrationUser;
 
  public UserController() {
    this.registrationUser = new User();
  }

  public User getRegistrationUser() {
    return registrationUser;
  }
  public void setRegistrationUser(User registrationUser) {
    this.registrationUser = registrationUser;
  }
    
  public String register() 
  {
    System.out.println("Register User :"+ this.registrationUser);
    String msg = "User Registered Successfully";
    FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, msg, msg));
    FacesContext.getCurrentInstance().getExternalContext().getFlash().setKeepMessages(true);
    return "registration.jsf?faces-redirect=true";  
  }

}
  3. Create a registration.xhtml page to build the user registration form using PrimeFaces components as follows: 
    <!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"> 

<h:head>
  <title>Registration</title>
</h:head> 
<body> 
  <h:form id="registrationForm">
    <p:panel header="Registration Form" style="width: 500px;">
<p:messages/>
    <h:panelGrid columns="2">
      <p:outputLabel value="UserName:"/>
      <p:inputText id="userName" value="#{userController.registrationUser.userName}" label="UserName" />      
            
      <p:outputLabel value="Password:"/>
      <p:password id="password" value="#{userController.registrationUser.password}" label="Password"/>
      
      <p:outputLabel value="FirstName:"/>
      <p:inputText id="firstName" value="#{userController.registrationUser.firstName}" label="FirstName"/>
      
      <p:outputLabel value="LastName:"/>
      <p:inputText id="lastName" value="#{userController.registrationUser.lastName}"/>
            
      <p:outputLabel value="Email:"/>
      <p:inputText id="email" value="#{userController.registrationUser.email}"/>

      <p:outputLabel value=""/>
      <p:commandButton action="#{userController.register}" value="Register" update="registrationForm"/>
      
    </h:panelGrid>
    </p:panel>
  </h:form>
</body> 
</html>
  4. Run the application and point your browser to http://localhost:8080/chapter01/registration.jsf. Then you can see the following screenshot, Registration Form:
    Time for action – creating a user registration form

What just happened?

We have created a sample user registration form using PrimeFaces UI components <p:inputText/>, <p:password/>, <p:commandButton/>, and so on. We are looking for input components with rich look and feel because we used PrimeFaces components, which are extensions to the standard JSF UI components with theming support.

上一章目录下一章