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

Develop the Mock User Interface

Explore how to develop a mock user interface that interacts with database entities using JavaScript methods. Understand page loading, data processing, and CRUD operations, preparing you to implement UI components effectively in a concrete table inheritance model.

We'll cover the following...

Let’s learn how to produce the user interface shown in Figure 15-2.

JSP page

Let’s review the JSP fragment, which constitutes the body of the page.

HTML
<body onload="loadObjects()">
	<div id="container">
		<div>
			<p><b>Estate Manager:</b></p>
		</div>
		<form method="post" id="estateForm">
			<table>
				<tbody>
					<tr>
						<td>Choose Estate</td>
						<td>
							<select name="estateChooser" id="estateChooser" onchange="setEstateValue()">
								<option value="">Select Estate Type</option>
								<option value="building">Building</option>
								<option value="land">Land</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Name:</td>
						<td>
						<input name="estateid" id="estateid" type="hidden">
						<input name="estatename" id="estatename" type="text">
						</td>
					</tr>
					<tr>
						<td><div id="estateType">Area</div></td>
						<td>
							<input name="estateProperty" id="estateProperty" 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="estateFormResponse"></div>
	</div>
</body>

loadObjects method

First, we will see the loadObjects JavaScript method, which is called ...