Software Architecture in Java: Design & Development/

...

/

Develop the Mock User Interface

Develop the Mock User Interface

Let's develop a mock user interface for our application.

We'll cover the following...

Let’s see how to produce the user interface shown in Figure 16-2.

JSP page

Let’s first review the JSP fragment that constitutes the body of the page.

Press + to interact
<body onload="loadObjects()">
	<div id="container">
		<div>
			<p><b>Employee Manager:</b></p>
		</div>
		<form method="post" id="employeeForm">
			<table>
				<tbody>
					<tr>
						<td>Choose Employee</td>
						<td>
							<select name="employeeChooser" id="employeeChooser" onchange="setEmployeeValue()">
								<option value="">Select Employee Type</option>
								<option value="permanentEmployee">PermanentEmployee</option>
								<option value="contractorEmployee">ContractorEmployee</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Name:</td>
						<td>
						<input name="employeeid" id="employeeid" type="hidden">
						<input name="employeename" id="employeename" type="text">
						</td>
					</tr>
					<tr>
						<td><div id="employeeFirstValue">Enter Value</div></td>
						<td>
							<input name="employeeFirstProperty" id="employeeFirstProperty" type="text">							
						</td>
					</tr>
					<tr>
						<td><div id="employeeSecondValue">Enter Value</div></td>
						<td>
							<input name="employeeSecondProperty" id="employeeSecondProperty" type="text">							
						</td>
					</tr>
					<tr>
						<td colspan="2"><input type=submit value="Create" id="subButton" onclick="return methodCall()"></td>
					</tr>
				</tbody>
			</table>
		</form>
		<div id="employeeFormResponse"></div>
	</div>
</body>

loadObjects method

First, we will see the JavaScript method that is called when the page ...