...

/

Develop the Mock User Interface

Develop the Mock User Interface

Let's develop a mock user interface for our application.

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.

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