User Interface Form Designs

User Interface Form Designs

In this article, I am going to discuss User Interface Form Designs using Servlets. Please read our previous article where we discussed How Servlet Works in Java Application.

User Interface Form Designs

In general, in web applications there are 2 ways to prepare user forms:

  1. Static Form Generation
  2. Dynamic Form Generation

In the case of Static Form Generation, we will prepare user form in the form of an HTML file separately under the application folder at the time of designing the application.

In the case of Dynamic form Generation, we will define user form a servlet. If we require Dynamic form then we have to access the required respective servlet.

Example: Headersapp

web.xml:

<?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" 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>headersapp</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
</welcome-file-list>

<servlet>
<description></description>
<display-name>HeadersServlet</display-name>
<servlet-name>ms</servlet-name>
<servlet-class>HeadersApp.HeadersServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ms</servlet-name>
<url-pattern>/ms</url-pattern>
</servlet-mapping>
</web-app>
HeadersServlet.java
package HeadersApp;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HeadersServlet extends HttpServlet
{
    private static final long serialVersionUID = 1L;
    protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        response.setContentType ("text/html");
        PrintWriter out = response.getWriter ();
        Enumeration < String > e = request.getHeaderNames ();
        out.println ("<html>");
        out.println ("<body><center><br><br>");
        out.println ("<table border ='1' bgcolor='lightblue'>");
        out.println("<tr><td align='center'><h3>Header Names</h3></td><td align='center'><h3>Header Values</h3></td></tr>");
        while (e.hasMoreElements ())
        {
         String header_Name = (String) e.nextElement ();
         String header_Value = request.getHeader (header_Name);
         out.println ("<tr><td>" + header_Name + "</td><td>" + header_Value +"</td></tr>");

        }
        out.println ("</table></center></body></html>");
    }
}

Output:

Static Form Generation using Servlets

Understanding dynamic form pages:

.html files-based form pages are called “static form pages”. The form page that comes as a response of dynamic web resource programs like servlet having dynamic components and content is called as “dynamic form page”.

To generate dynamic form page from servlet program place <form>, <input> tags in pw.println(). To read a huge amount of data from the end-user, it is not recommended to take a single static form page, where the end-user will be forced to read and ignore some unrelated questions.

Understanding dynamic form pages

In the above form page, the end-user is forced to read and ignore marriage life-related questions even though he has not selected that marital status checkbox.

To overcome this problem, ask a common question on the first form page which is a static form page, and generate the second page dynamically based on the content given on the first form page, then end user will not be forced to read and ignore certain questions of form pages.

A set of continuous and related operations performed on the web application by a client (browser window) with the support of multiple requests and responses is called “session”.

Example: Registration Form

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
</head>
<body>
 <font color="red">
  <h2>Registration Form</h2>
 </font>
 <form method="POST" action="./reg">
  <table>
   <tr>
    <td>Student ID</td>
    <td><input type="text" name="sid" /></td>
   </tr>
   <tr>
    <td>Student Name</td>
    <td><input type="text" name="sname" /></td>
   </tr>
   <tr>
    <td>Student Qualification</td>
    <td><input type="checkbox value=" BSC" name="squal" />BSC<br>
     <input type="checkbox value=" MCA" name="squal" />MCA<br> <input
     type="checkbox value=" PHD" name="squal" />PHD<br></td>
   </tr>
   <tr>
    <td>Student Gender</td>
    <td><input type="radio" value="Male" name="sgender" />Male<br>
     <input type="radio" value="Female" name="sgender" />Female<br>
    </td>
   </tr>
   <tr>
    <td>Student Technologies</td>
    <td><select size="5" name="stech" multiple="multiple">
      <option value="C">C</option>
      <option value="C++">C++</option>
      <option value="Java">JAVA</option>
      <option value=".Net">.Net</option>
      <option value="Oracle">Oracle</option>
      <option value="Testing Tools">Testing Tools</option>
    </select></td>
   </tr>
   <tr>
    <td><select name="branch">
      <option value="Bangalore">Bangalore</option>
      <option value="Hyderabad">Hyderabad</option>
      <option value="Mumbai">Mumbai</option>
      <option value="Pune">Pune</option>
    </select></td>
   </tr>
   <tr>
    <td>Student Address</td>
    <td><textarea rows="10" cols="50" name="saddr"></textarea></td>
   </tr>
   <tr>
    <td><input type="submit" value="Registration" /></td>
   </tr>
  </table>
 </form>
</body>
</html>
web.xml
<?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"
 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>RegistrationForm</display-name>
 <welcome-file-list>
  <welcome-file>index.html</welcome-file>
  <welcome-file>index.htm</welcome-file>
  <welcome-file>default.html</welcome-file>
  <welcome-file>default.htm</welcome-file>
 </welcome-file-list>

 <servlet>
  <description></description>
  <display-name>RegistrationServlet</display-name>
  <servlet-name>RegistrationServlet</servlet-name>
  <servlet-class>RegistrationForm.RegistrationServlet</servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>RegistrationServlet</servlet-name>
  <url-pattern>/reg</url-pattern>
 </servlet-mapping>
</web-app>
RegistrationServlet.java
package RegistrationForm;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RegistrationServlet extends HttpServlet
{
    private static final long serialVersionUID = 1L;
    protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        response.setContentType ("text/html");
        PrintWriter out = response.getWriter ();
        String sid = request.getParameter ("sid");
        String sname = request.getParameter ("sname");
        String[] squal = request.getParameterValues ("squal");
        String sgender = request.getParameter ("sgender");
        String[] stech = request.getParameterValues ("stech");
        String branch = request.getParameter ("branch");
        String saddr = request.getParameter ("saddr");
        
        String qual = "";
        for (int i = 0; i < squal.length; i++)
        {
         qual = qual + squal[i] + "<br>";
        }
        
        String tech = "";
        for (int j = 0; j < stech.length; j++)
        {
         tech = tech + stech[j] + "<br>";
        }
        
        out.println ("<html>");
        out.println ("<body>");
        out.println ("<font color='red'>");
        out.println ("<h2>Registration Form</h2>");
        out.println ("</font>");
        out.println ("<table border='1'>");
        out.println ("<tr><td>Student ID</td><td>" + sid + "</td></tr>");
        out.println ("<tr><td>Student Name</td><td>" + sname + "</td></tr>");
        out.println ("<tr><td>Student Qualification</td><td>" + qual + "</td></tr>");
        out.println ("<tr><td>Student Gender</td><td>" + sgender + "</td></tr>");
        out.println ("<tr><td>Student Technologies</td><td>" + tech +"</td></tr>");
        out.println ("<tr><td>Branch</td><td>" + branch + "</td></tr>");
        out.println ("<tr><td>Student Address</td><td>" + saddr + "</td></tr>");
        out.println ("</table></body></html>");
    }
}

Output

User Interface Forms Design in Java Application using Servlet

Fill the Registration Form and press the “Registration” button.

User Interface Forms Design using Servlet

In the next article, I am going to discuss the War file in Java Application with Examples. Here, in this article, I try to explain User Interface Forms Design in Java Application using Servlet. I hope you enjoy this User Interface Forms Design using Servlet article.

Leave a Reply

Your email address will not be published. Required fields are marked *