Search⌘ K
AI Features
Home
Courses
Software Architecture in Java: Design & Development

Develop the Mock User Interface

Explore how to develop a mock user interface that integrates JSP pages and JavaScript methods for loading, creating, updating, viewing, and deleting records in a class table inheritance structure. Understand the interaction between UI, services, and data management in Java Spring applications.

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.

HTML
<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 ...