Skip to content

form1App

Jump to bottom
Katherine ChengLi edited this page Apr 6, 2015 · 1 revision

A simple form application

  1. Creating a new web application * Navigate to your tomcat8.0/webapps/ directory. * Create a new application folder and name it "simpleform". * Create a js folder and create a config.js as shown CONFIG_JS * Navigate to tomcat8.0\conf and add the application name (Example: Tomcat 8.0\conf\context.xml)as described in Context_XML * Test connectivity between your application and SQL server by entering http://localhost:8080/quickforms/ in your browser.Wait for few seconds It should display "Connection Succeeded!" as shown below IMAGE FOR Connection Succeeded! * Create a index.html in your application folder.(Example: tomcat8.0\webapps\simpleform\index.html)
    • Add following contents
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<html class = "ui-mobile-rendering">
<head>
// Add Head content here
</head>
<body>	
// Add Body Content here
</body>
</html>

  * Inside < head > tag add the following content to load quickforms js and css files

<meta name="viewport" content="width=device-width, initial-scale=1">	
<link rel="stylesheet" href="/quickforms/css/quickforms/quickforms.css" />
<script src = "/quickforms/js/require.min.js" ></script>

  * Inside < Body > tag add following < div > tags as mentioned below:

<div data-role="page" id="form">
  <div data-role="header" data-theme="d">
    <div class="ui-btn-left" id="headerLeft"></div>
    <h1 id="header">Simple Form Application</h1>
  </div><!-- /header -->
     <div data-role="content">
       <form id ="mainForm" method="POST" action="putFact">
          <!--INPUT FORM ELEMENTS HERE-->
       </form><!--/form-->
     </div><!--/content-->
  <div data-role="footer" data-theme="d">
	   <h4>Footer</h4>
  </div><!--/footer--> 
</div><!--/page-->

  * Now when you test your application on the browser (Enter: http://localhost:8080/simpleform/) you will see a blank window.
  * Lets put in quickforms into use to begin displaying basic application contents.
    * Add the following < SCRIPT > just below < body > tag

     <script type="text/javascript">
	 require(['/quickforms/js/quickforms.js'],function(){
			quickforms.registerReadyFunction(function()
			{
				// Do quickforms module loading here
		
				require([],// Add this module to the list
		 		function(){// Give formId & ADD FACT TABEL NAME!
					});
			});
		});
	</script> 

  * Now try reloading http://localhost:8080/simpleform/ on browser. You should able to see a window as shown below:

tut_headerfooter img * Adding form elements inside < form id ="mainForm" method="POST" action="putFact" > tag * We will step by step add basic form elements

   <form id ="mainForm" method="POST" action="putFact">
     <label for="FirstName" class ="ui-input-text">First Name</label>
     <input type="text" id ="FirstName" name ="FirstName" />

     <label for="LastName" class ="ui-input-text">Last Name</label>
     <input id ="LastName" name ="LastName" type ="text"/>
     <!--Date Picker-->
     <label for="ReservationDate" class ="ui-input-text">Reservation Date</label>
     <input name="ReservationDate" id="ReservationDate" type="text" class="date" onClick="GetDate(this)">

     <label for="Gender" class ="ui-input-text">Gender</label>
      <select id ="Gender" name ="Gender" data-native-menu="false">
            <option value ="1">-- Not Selected --</option>
            <option value="0">Male</option>
	    <option value="1">Female</option>       
     </select>  
     <!-- Without date picker-->
     <label for="BirthDate" class ="ui-input-text">Date of Birth</label>
     <input name="BirthDate" id="BirthDate" type="text" class="BirthDate">   
   
     <label for="City" class ="ui-input-text" >City</label>
         <select id ="City" name ="City">
	    <option value="-1">-- Not Selected--</option>
	    <option value="0">Ottawa</option>
	    <option value="1">Toronto</option>
	    <option value="2">Kingston</option>
	    <option value="3">Hamilton</option>
	    <option value="4">Guelph</option>
         </select>
      
     <label for="Agreement">Yes, I accept terms and conditions</label>
     <input type="checkbox" name="Agreement" id="Agreement" value="1">
   </form><!--/form-->
  • Try testing your app (Enter: http://localhost:8080/simpleform/) and you should be able to get a basic form on your browser window as shown below. Try out picking a date in Reservation Date but nothing will work which is fine as we have not loaded our quickforms modules yet. WithoutFullQF3
  • Now we load our quickform modules and provide our formID for quickform reference.We already have the following content inside our < script > tag right under < Body > tag.
   <script type="text/javascript">
	 require(['/quickforms/js/quickforms.js'],function(){
			quickforms.registerReadyFunction(function()
			{
				// Do quickforms module loading here
				
				require([],// Add module here
		 		function(){// Give formID & ADD FACT TABEL NAME!
					});
			});
			
		});
	</script>

* Start by loading modules inside [.md](.md) of inner require([.md](.md)

      <script type="text/javascript">
	 require(['/quickforms/js/quickforms.js'],function(){
			quickforms.registerReadyFunction(function()
			{
				// Do quickforms module loading here
				
				require(['dom/form/checkbox','dom/form/select','dom/form/date','dom/form/text'],// Add this module to the list
		 		function(){//Give formID and  ADD FACT TABEL NAME!
				
					});
			});
			
		});
	</script>

* Now lets give formID for reference inside innermost function(). This formid should be same as given inside < form id ="mainForm" method="POST" action="putFact" >

       <script type="text/javascript">
	 require(['/quickforms/js/quickforms.js'],function(){
			quickforms.registerReadyFunction(function()
			{
				// Do quickforms module loading here
				
				require(['dom/form/checkbox','dom/form/select','dom/form/date','dom/form/text'],// Add this module to the list
		 		function(){// Give formId & ADD FACT TABEL NAME!
				quickforms.parseForm( //formId*, app, fact*, callback
							{formId:'mainForm',
							fact:''});
					});
			});
			
		});
	</script>
Clone this wiki locally