spring examples: Form Wizard

Time needed to complete ~25 minutes
Prerequisite File Upload & Saving

1.Introduction

After uploading files and write them to the file system in the previous 2 articles, now it's time to add some style to the form to look like wizard.

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.7

3- Tomcat 7.0.55

4- Eclipse Luna 4.4

5- Spring Core 3.2.9
6- jquery 1.11.1
7- FormToWizard plugin

3.Project Structure

Picture 3.1: Project structure

4. Plugin and css

- FormToWizard -Home page link- is plugin that will transform form to wizard the javascript file
for plugin is in project path /fileUpload3/src/main/webapp/js/formToWizard.js it uses style/form2wizard.css

- Add formTowizard.js and form2wizard.css to carAdForm.jsp Listing 4.1.

Listing 4.1: CarAdForm.jsp

   
  <%@ page language="java" contentType="text/html; charset=UTF-8"  
      pageEncoding="UTF-8"%>  
 <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>  
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>  
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
   
 <style>  
 .err {  
      color: red;  
      font-weight: bold;  
 }  
 </style>  
 <link rel="stylesheet" type="text/css" href="<c:url value="/style/form2wizard.css"/>">  
   
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script type="text/javascript" src="<c:url value="/js/formToWizard.js"/>"></script>  
 <script type="text/javascript">  
     $(document).ready(function(){  
       $("#UploadForm").formToWizard({ submitButton: 'saveButton' })  
     });  
   </script>  
 </head>  
 <body>  
      <div id="main">  
   
           <div id="content">  
   
                <form:form id="UploadForm" method="post" commandName="car" action="/fu3/carAd/save"  
                     enctype="multipart/form-data">  
                     <form:errors path="*" cssClass="err" />  
                     <fieldset>  
                          <legend>Car Data</legend>  
                          <table>  
                               <tr>  
                                    <td>Manufacturer</td>  
                                    <td><form:input path="manufacturer" id="manufacturer"/></td>  
                                    <td><form:errors path="manufacturer" cssClass="err" /></td>  
                               </tr>  
   
                               <tr>  
                                    <td>Model</td>  
                                    <td><form:input path="model" id="model"/></td>  
                                    <td><form:errors path="model" cssClass="err" />     </td>  
                               </tr>  
   
                               <tr>  
                                    <td>Note</td>  
                                    <td><form:textarea path="note" id="note" rows="5" cols="19" /></td>  
                                    <td><form:errors path="note" cssClass="err" /></td>  
                               </tr>  
                          </table>  
                          <br />  
                     </fieldset>  
                     <fieldset>  
                          <legend>Car Files</legend>  
                          <table id="fileTable">  
                               <tr>  
                                    <td><input name="photos[0]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[1]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[2]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                          </table>  
                     </fieldset>  
                     <p>  
                          <input type="submit" id="saveButton" value="Submit" />  
                     </p>  
                </form:form>  
   
           </div>  
   
      </div>  
   
 </body>  
 </html>

7. Deploying to tomcat

Note: don't forget to change username and password for tomcat server in pom.xml file

- Start tomcat.

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
click Apply and Run buttons.

- In browser type http://localhost:8080/fu3/carAd/show to see step 1 of the form wizard, picture 7.1.

Picture 7.1: Step 1 of carAdForm

- There is a validation, clicking Next button without filling data in step 1 will show error message,
fill data and click next to display the 2nd step, picture 7.2

Picture 7.2: Step 2 of carAdForm

-Choose file(s) and submit form. This will display success page, Picture 7.3.

Picture 7.3: success page

8. Eclipse Project

Download project source code

spring examples

Sunday, September 28, 2014

Form Wizard