servlets struts hibernate spring maven java
 

JSF UI Components Example



JSF gives inbuilt components to make website pages. Here, we are making a client registration for with the assistance of JSF components. Follow the accompanying steps to make the structure.

1) Creating a User Registration Form

// index.xhtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml"  
  3. xmlns:h="http://xmlns.jcp.org/jsf/html"  
  4. xmlns:f="http://xmlns.jcp.org/jsf/core">  
  5. <h:head>  
  6. <title>User Registration Form</title>  
  7. </h:head>  
  8. <h:body>  
  9. <h:form id="form">  
  10. <table>  
  11. <tr>  
  12. <td><h:outputLabel for="username">User Name</h:outputLabel></td>  
  13. <td><h:inputText id="name-id" value="#{user.name}"/></td>  
  14. </tr>  
  15. <tr>  
  16. <td><h:outputLabel for="email">Your Email</h:outputLabel></td>  
  17. <td><h:inputText id="email-id" value="#{user.email}"/></td>  
  18. </tr>  
  19. <tr>  
  20. <td><h:outputLabel for="password">Password</h:outputLabel></td>  
  21. <td><h:inputSecret id="password-id" value="#{user.password}"/></td>  
  22. </tr>  
  23.   
  24. <tr>  
  25. <td><h:outputLabel for="gender">Gender</h:outputLabel></td>  
  26. <td><h:selectOneRadio value="#{user.gender}">  
  27. <f:selectItem itemValue="Male" itemLabel="Male" />  
  28. <f:selectItem itemValue="Female" itemLabel="Female" />  
  29. </h:selectOneRadio></td>  
  30. </tr>  
  31. <tr><td><h:outputLabel for="address">Address</h:outputLabel></td>  
  32. <td><h:inputTextarea value="#{user.address}" cols="50" rows="5"/></td></tr>  
  33. </table>  
  34. <h:commandButton value="Submit" action="response.xhtml"></h:commandButton>  
  35. </h:form>  
  36. </h:body>  
  37. </html>  

2) Creating a Managed Bean

// User.java

  1. import javax.faces.bean.ManagedBean;  
  2. import javax.faces.bean.RequestScoped;  
  3. @ManagedBean  
  4. @RequestScoped  
  5. public class User{  
  6. String name;  
  7. String email;  
  8. String password;  
  9. String gender;  
  10. String address;  
  11. public String getName() {  
  12. return name;  
  13. }  
  14. public void setName(String name) {  
  15. this.name = name;  
  16. }  
  17. public String getEmail() {  
  18. return email;  
  19. }  
  20.   
  21. public void setEmail(String email) {  
  22. this.email = email;  
  23. }  
  24. public String getPassword() {  
  25. return password;  
  26. }  
  27. public void setPassword(String password) {  
  28. this.password = password;  
  29. }  
  30. public String getGender() {  
  31. return gender;  
  32. }  
  33. public void setGender(String gender) {  
  34. this.gender = gender;  
  35. }  
  36. public String getAddress() {  
  37. return address;  
  38. }  
  39. public void setAddress(String address) {  
  40. this.address = address;  
  41. }      
  42. }  

3) Creating an Output Page

// response.xhtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml"  
  3. xmlns:h="http://xmlns.jcp.org/jsf/html"  
  4. xmlns:f="http://xmlns.jcp.org/jsf/core">  
  5. <h:head>  
  6. <title>User Details</title>  
  7. </h:head>  
  8. <h:body>  
  9. <h2><h:outputText value="Hello #{user.name}"/></h2>  
  10. <h4><h:outputText value="You have Registered with us Successfully, Your Details are The Following."/></h4>  
  11. <table>  
  12. <tr>  
  13. <td><b>Email: </b></td>  
  14. <td><h:outputText value="#{user.email}"/><br/></td>  
  15. </tr>  
  16. <tr>  
  17. <td><b>Password:</b></td>  
  18. <td><h:outputText value="#{user.password}"/><br/></td>  
  19. </tr>  
  20. <tr>  
  21. <td><b>Gender:</b></td>  
  22. <td><h:outputText value="#{user.gender}"/><br/></td>  
  23. </tr>  
  24. <tr>  
  25. <td><b>Address: </b></td>  
  26. <td><h:outputText value="#{user.address}"/></td>  
  27. </tr>  
  28. </table>  
  29. </h:body>  
  30. </html>  







© Javacodegeeks © 2019 - 2019
All Right Reserved and you agree to have read and accepted our term and condition.

Python 3