Step 1 Create required model classes
First of lets create a "User" model classes that we are going to use in this demonstration. Right click on "java" folder then go to New->Class. I will provide package as src.main.java (You can use preferred package name you like) and class name as "User". Lets add following content in to that model class.
import java.util.HashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class User implements Serializable {
private static final long serialVersionUID = 1L;
private String firstName;
private String lastName;
private String gender;
private String role;
private boolean adminUser;
private String email;
private String contactNumber;
private String userName;
private String password;
private static Map<String, String> genderMap = new HashMap<String, String>();
private static Map<String, String> userRoleMap = new HashMap<String, String>();
static {
genderMap.put( "Male","M");
genderMap.put( "Feale","F");
userRoleMap.put( "Admin","ADM");
userRoleMap.put( "Regular","NML");
}
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public boolean isAdminUser() {
return adminUser;
}
public void setAdminUser(boolean adminUser) {
this.adminUser = adminUser;
}
public Map<String, String> getGenderMap() {
return genderMap;
}
public void setGenderMap(Map<String, String> genderMap) {
this.genderMap = genderMap;
}
public Map<String, String> getUserRoleMap() {
return userRoleMap;
}
public void setUserRoleMap(Map<String, String> userRoleMap) {
this.userRoleMap = userRoleMap;
}
public String getRole() {
return role;
}
public void setRole(String role) {
this.role = role;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getContactNumber() {
return contactNumber;
}
public void setContactNumber(String contactNumber) {
this.contactNumber = contactNumber;
}
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;
}
}
Step 2 Create User controller class
Now lets create Controller class which handles the requests related to the user activities in this project. Right click onsrc.main.java package then go to add -> class. The set class name as Controller and click add button on interface section. Then type serializable and select Serializable interface and click Ok. Then add following content in to Controller.
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="mainController")
@SessionScoped
public class Controller implements Serializable{
private static final long serialVersionUID = 1L;
}
Then lets add following method in to controller. This will load newUser.XHTML in webapp folder. Next step lets add this XHTML file in to webapp folder.
public String getUser()
{
return "newUser";
}
Then lets add newUser.XHTML file in to webapp folder with following content. Right click on webapp folder and go to New -> File type name as newUser.xhtml then click Ok.
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>JSF Form Validation Tutorial</title>
</h:head>
<h:body>
Please fill user details
<br />
<h:form>
<table style="width: 100%">
<tr>
<td><h:outputLabel>First Name</h:outputLabel></td>
<td><h:inputText value="#{user.firstName}"></h:inputText> </td>
</tr>
<tr>
<td><h:outputLabel>Last Name</h:outputLabel></td>
<td><h:inputText value="#{user.lastName}"></h:inputText> </td>
</tr>
<tr>
<td><h:outputLabel>Gender</h:outputLabel></td>
<td>
<h:selectOneRadio value="#{user.gender}">
<f:selectItems value="#{user.genderMap}"></f:selectItems>
</h:selectOneRadio>
</td>
</tr>
<tr>
<td><h:outputLabel>User role</h:outputLabel></td>
<td>
<h:selectOneMenu value="#{user.role}">
<f:selectItems value="#{user.userRoleMap}" var="c"
itemLabel="#{c.code}" itemDescription="#{c.name}"></f:selectItems>
</h:selectOneMenu>
</td>
</tr>
<tr>
<td><h:outputLabel>Contact Number</h:outputLabel></td>
<td><h:inputText value="#{user.contactNumber}"></h:inputText> </td>
</tr>
<tr>
<td><h:outputLabel>Email</h:outputLabel></td>
<td><h:inputText value="#{user.email}"></h:inputText> </td>
</tr>
<tr>
<td><h:outputLabel>User Name</h:outputLabel></td>
<td><h:inputText value="#{user.userName}"></h:inputText> </td>
</tr>
<tr>
<td><h:outputLabel>Password</h:outputLabel></td>
<td><h:inputSecret ></h:inputSecret> </td>
</tr>
<tr>
<td><h:outputLabel>Reenter Password</h:outputLabel></td>
<td><h:inputSecret value="#{user.password}"></h:inputSecret> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td>
<h:commandButton value="Submit" action="#{mainController.saveUser()}"></h:commandButton>
</td>
</tr>
</table>
</h:form>
<br />
</h:body>
</html>
Lets add following two controller methods to load the newUser xhtml file and then handle the saveUser call in form sumbit action on newUser interface.
public String getUser()
{
return "newUser";
}
public String saveUser()
{
return "user";
}
Lets add new link in to default.xhtml file in webapp folder. Here value attribute will contain the word which see on link and the outcome attribute will be redirecting URL on click event on link.
<h:link value="#{mainController.getUser()}" outcome="#{mainController.getUser()}"></h:link>
This will provide link to new user xhtml file.
Next lets add user.xhtml file in to webapp folder. This will responsible to load user entered details to the client in new page. Right click on webapp folder and go to New -> File type name as user.xhtml then click Ok. Then add following content in to that file.
<?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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>JSF Form Validation Tutorial</title>
</h:head>
<h:body>
User Details
<br />
<h:form>
<table style="width: 100%">
<tr>
<td><h:outputLabel>First Name</h:outputLabel></td>
<td><h:outputLabel value="#{user.firstName}"></h:outputLabel></td>
</tr>
<tr>
<td><h:outputLabel>Last Name</h:outputLabel></td>
<td><h:outputLabel value="#{user.lastName}"></h:outputLabel></td>
</tr>
<tr>
<td><h:outputLabel>Gender</h:outputLabel></td>
<td><h:outputLabel value="#{user.gender}"></h:outputLabel></td>
</tr>
<tr>
<td><h:outputLabel>User role</h:outputLabel></td>
<td><h:outputLabel value="#{user.role}"></h:outputLabel></td>
</tr>
<tr>
<td><h:outputLabel>Contact Number</h:outputLabel></td>
<td><h:outputLabel value="#{user.contactNumber}"></h:outputLabel>
</td>
</tr>
<tr>
<td><h:outputLabel>Email</h:outputLabel></td>
<td><h:outputLabel value="#{user.email}"></h:outputLabel></td>
</tr>
<tr>
<td><h:outputLabel>User Name</h:outputLabel></td>
<td><h:outputLabel value="#{user.userName}"></h:outputLabel></td>
</tr>
<tr>
<td><h:outputLabel>Reenter Password</h:outputLabel></td>
<td><h:outputLabel value="#{user.password}"></h:outputLabel></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</h:form>
<br />
</h:body>
</html>
Final project structure will be similar to below image.
To the run the project right click on project and go to Run As -> Run on Server then select the installed Tomcat 7 and click finished.
Then click on newUser link and fill the User details form.
Then click on Submit button and you will see similar to below image.
We have completed our form handling tutorial using JSF. You can access the project on following URL Repository https://github.com/NirmalBalasooriya/JSFFormHandling. In future post I will provide more advance features in form handling using JSF.
No comments:
Post a Comment