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

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.

Press + to interact
<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 ...