The purpose of this lab is to introduce the basics of gathering information from a Form and submitting the data to a server.
Topics Covered
This lab will cover the following topics…
• Html Forms
• Html Form Elements
• Basic JAVA Applets
• Referencing objects on the web page
• Gather information from a user and submitting it to the web server.
Procedure
1. Create a new page using the File/New Page… select a normal page and save it as OrderEntry.htm.
2. Using the Front Page tools, we will build an Order Entry screen that will ultimately look like this:
Insert a form on the new web page.
Right click on the form, choose “Form Properties” and set the following properties.
To align the elements on the form we will create a table 9 rows x 2 columns:
(insert this table within the form, after the buttons).
©2006 SAP Americas. All Rights Reserved. Page 27
Begin building the Order Entry screen by entering the static text descriptions outlined above in the appropriate cells of the table that was just created.
• Order entry Lab Example
• Order Date
• Description
• Quantity
• Ship From
• Horsham (Next to Radio button)
• Exton (Next to Radio button)
Using the FrontPage Insert Menu we will add the following Html elements to the form.
One “Submit” and one “Reset” Push Button should have been created when the form was inserted….
Submit Button (Push Button)
Select (click) and drag the Submit button to the appropriate cell.
Double click the Submit button and configure the Push Button Properties as follows...
Reset Button (Push Button)
The Reset Push Button is not used for this example. Single click it and press the delete key.
©2006 SAP Americas. All Rights Reserved. Page 29
Select Element (Drop-Down Menu)
Insert one Select Element Æ “Insert/Form/Drop-Down Menu”
Double click the Select Element and configure these Drop-Down Menu Properties….
Text Element (One-Line Text Box)
Insert a One-Line Text Box Æ “Insert/Form/ One-Line Text Box”
Double click the Text Element and configure these Text Box Properties...
Radio Element (Radio Button)
Insert (2) two Radio Elements Æ “Insert/Form/ Radio Button”
Double click each Radio Element and configure these Radio Button Properties...
Text Area Element (Scrolling Text Box)
Insert (1) one Text Area Element Æ “Insert/Form/Scrolling Text Box”
Double click the Text Area Element and configure these Scrolling Text Box Properties...
©2006 SAP Americas. All Rights Reserved. Page 31
iCalendar
The calendar control we will build into the page is a Java applet provided with CMS.
To add the iCalendar applet, go to the Normal view and select the cell in the table where you want to put the calendar. Switch to the HTML view and add the
following applet tag into the source code.
<applet NAME="Calendar" code="iCalendar.class"
codebase="/Illuminator/classes/" archive="illum8.zip"
height="192" width="192" align="left">
</applet>
(Note: Java is case sensitive)
Save the OrderEntry.htm file in your training folder, and test.
Sample: HTML Generated
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<form method="POST" name="F1" target="_blank" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.txt"
S-Format="HTML/BR" S-Label-Fields="TRUE" B-Reverse-Chronology="FALSE" S-Builtin-Fields -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="63%" id="AutoNumber1">
<tr>
<td width="100%" colspan="2">Order Entry Lab Example</td>
</tr>
<tr>
<td width="21%">Order Date</td>
<td width="79%"><applet NAME="Calendar" code="iCalendar.class"
codebase="/Illuminator/classes/" archive="illum8.zip" height="192" width="192"
align="left">
</applet>
</td>
</tr>
<tr>
<td width="21%">Description</td>
<td width="79%"><select size="1" name="D1">
<option selected>Product A</option>
<option>Product B</option>
<option>Product C</option>
©2006 SAP Americas. All Rights Reserved. Page 33
<td width="21%">Price</td>
<td width="79%">
<input type="text" name="Quantity" size="20" value="0" tabindex="3"></td>
</tr>
<tr>
<td width="21%">Ship From</td>
<td width="79%">
<input type="radio" value="Horsham" checked name="Ship_from"
tabindex="4">Horsham</td>
</tr>
<tr>
<td width="21%"> </td>
<td width="79%">
<input type="radio" name="Ship_from" value="Exton" tabindex="5">Exton</td>
</tr>
<tr>
<td width="21%"> </td>
<td width="79%"> </td>
</tr>
<tr>
<td width="21%"> </td>
<td width="79%"><textarea rows="2" name="Comments" cols="45"
tabindex="6">Enter Comments Here</textarea></td>
</tr>
<tr>
<td width="21%"> </td>
<td width="79%"><input type="submit" value="Submit" name="B1"></td>
</tr>
©2006 SAP Americas. All Rights Reserved. Page 35