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

Develop the Mock User Interface

Explore how to develop a mock user interface consuming a REST mock service using JSP and jQuery AJAX. Understand JavaScript methods to create, update, view, and delete data entries, and how these link to the in-memory database in a one-to-one uni-directional relationship.

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.

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

loadObjects method

First, note the ...