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 using JSP and JavaScript that interacts with a mock service to manage one-to-many unidirectional relationships. Learn to implement key UI features such as loading data grids, creating and updating person records with multiple phone numbers, and managing dynamic input controls for phone entries.

We'll cover the following...

Now that we have seen how to write the mock service with an in-memory database, let’s write the user interface that will use this mock service. The user interface will have the means to add, edit, delete, and show all records related to the Person, including the phone numbers. A screenshot of the user interface is shown in Figure 6-2.

JSP page

The JSP body is the page that is initially loaded. After that, the JavaScript actions are called. We will start with the JSP fragment and then follow it with the JavaScript functions.

HTML
<body onload="loadObjects()">
	<div id="container">
		<div>
			<p>
				<b>Person Manager:</b>
			</p>
		</div>
		<form method="post" id="personForm">
			<div id="personDiv">
				<div id="nameGroup">
					<label>Name:<input type="text" name="name" id="name"></label>
					<label><input type="hidden" name="personid" id="personid"></label>
				</div>
			</div>
			<div id="phoneBoxGroup">
				<div id="phoneBox_1">
					<label>Phone:<input type="text" name="phone" id="phone" size="10" maxlength="12"><a href="#" onclick="javascript:addMorePhone()">(+)</a></label>
					<label id="removeLink_1"></label>
				</div>
			</div>
			<div id="buttonGroup"><input type=submit value="Create" id="subButton" onclick="return methodCall()"></div>
		</form>
		<div id="personFormResponse"></div>
	</div>
</body>

loadObjects method

First, look at the JavaScript ...