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:
- Create a
User.javaPOJO (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 } - 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"; } } - Create a
registration.xhtmlpage 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> - Run the application and point your browser to
http://localhost:8080/chapter01/registration.jsf. Then you can see the following screenshot, 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.
