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

In the previous section, we saw how to develop the mock service with an in-memory database. Now, we’ll look at the user interface, which will consume this mock service, as shown in Figure 3-2. We will be using JSP for the user interface and jQuery with AJAX to connect to the mock service.

JSP page

Let’s start by looking at the body of the JSP page, which mentions the JavaScript methods that were called. We will describe the flow with the JavaScript calls.

Press + to interact
<body onload="loadObjects()">
	<div id="container">
		<div>
			<p>
				<b>Book Manager:</b>
			</p>
		</div>
		<form method="post" id="bookForm">
			<table>
				<tbody>
					<tr>
						<td>Name:</td>
						<td><input name="bookId" id="bookId" type="hidden"> <input
							name="bookname" id="bookname" type="text"></td>
					</tr>
					<tr>
						<td class="tdLabel"><label for="ad002_dob" class="label">City:</label></td>
						<td><input type="text" name="city" value="" id="city" /></td>
					</tr>
					<tr>
						<td colspan="2"><input type=submit value="Create"
							id="subButton" onclick="return methodCall()"></td>
					</tr>
				</tbody>
			</table>
		</form>
		<div id="bookFormResponse"></div>
	</div>
</body>

...