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 for managing customer data using Java, JSP, and JavaScript. Understand methods for loading data, creating, updating, editing, viewing, and deleting records within a one-to-one bi-directional relationship. This lesson helps you build interactive UI components that consume mock services for intuitive server-side data handling.

We'll cover the following...

Let’s turn from developing the mock service with an in-memory database to developing the user interface, which will ingest this mock service, as shown in Figure 4-2. The user interface will have ways to add, edit, delete, and show all records related to the Customer, including the Cart amount field.

JSP page

The JSP body is the starting page that gets loaded, and subsequently, the JavaScript methods are called. We will define the flow with the JavaScript calls.

HTML
<body onload="loadObjects()">
	<div id="container">
		<div>
			<p>
				<b>Customer Manager:</b>
			</p>
		</div>
		<form method="post" id="customerForm">
			<table>
				<tbody>
					<tr>
						<td>Name:</td>
						<td><input name="customerid" id="customerid" type="hidden"> <input
							name="customername" id="customername" type="text"></td>
					</tr>
					<tr>
						<td class="tdLabel"><label>Amount:</label></td>
						<td><input type="text" name="amount" value="" id="amount" /></td>
					</tr>
					<tr>
						<td colspan="2"><input type=submit value="Create"
							id="subButton" onclick="return methodCall()"></td>
					</tr>
				</tbody>
			</table>
		</form>
		<div id="customerFormResponse"></div>
	</div>
</body>

loadObjects method

First, let’s look at the JavaScript loadObjects method which is called when the page is loaded with the onload event.

Javascript (babel-node)
function loadObjects(){
	$.ajax({
		url : "/onetoonebidirectional/mock/findAll",
		type: "GET",
		data : {},
		dataType: "json",
		success: function(data, textStatus, jqXHR)
		{
			processResponseData(data);
		},
		error: function (jqXHR, textStatus, errorThrown)
		{
			document.getElementById("customername").value="";
			alert("Error Status Load Objects:"+textStatus);
		}
	});
	return false;
}

processResponseData service

The processResponseData JavaScript method that is called when the above service call is successful is revealed in the following code. The table is occupied with the contents of the in-memory database. The generateTableData JavaScript method is shown, which generates the table structure.

Javascript (babel-node)
function processResponseData(responsedata){
	var dyanamicTableRow="<table border=1>"+
	"<tr>" +
	"<td>Customername</td>"+"<td>Amount</td>"+
	"<td>Actions</td>"+
	"</tr>";
	var dataRow="";
	$.each(responsedata, function(itemno, itemvalue){
		dataRow=dataRow+generateTableData(itemvalue);
	});
	dyanamicTableRow=dyanamicTableRow+dataRow+"</table>";
	document.getElementById("customerFormResponse").innerHTML=dyanamicTableRow;
}
function generateTableData(itemvalue){
	var dataRow="<tr>" +
	"<td>" +itemvalue.name+"</td>"+
	"<td>"+itemvalue.amount+"</td>"+
	"<td>" +
	"<a href=# onclick=deleteObject("+itemvalue.id+")>Delete</a>"+
	"|<a href=# onclick=editObject("+itemvalue.id+")>Edit</a>"+
	"</td>"+
	"</tr>";
	return dataRow;
}

methodCall method

We have seen the page loading mechanism. If you see the JSP fragment, you will realize that the JavaScript method, methodCall, is being called. This works for both the create and update functionalities.

Javascript (babel-node)
function methodCall(){
	var buttonValue = document.getElementById("subButton").value;
	if(buttonValue=="Create"){
		create();
	}else if(buttonValue=="Update"){
		update();
	}
	return false;
}

create method

First, we will see the create JavaScript method that takes the input from the text boxes name and amount and passes the input as a CustomerDto without an identifier.

Javascript (babel-node)
function create(){
	var name = $("#customername").val();
	var amount=$("#amount").val();
	var formData={"name":name,"amount":amount};
	$.ajax({
		url : "/onetoonebidirectional/mock/create",
		type: "POST",
		data : JSON.stringify(formData),
		beforeSend: function(xhr) {
			xhr.setRequestHeader("Accept", "application/json");
			xhr.setRequestHeader("Content-Type", "application/json");
		},
		success: function(data, textStatus, jqXHR)
		{
			document.getElementById("customername").value="";
			document.getElementById("amount").value="";
			document.getElementById("subButton").value="Create";
			loadObjects();
		},
		error: function (jqXHR, textStatus, errorThrown)
		{
			document.getElementById("customername").value="";
			alert("Error Status Create:"+textStatus);
		}
	});
	return false;
}

update method

Next, we will look at the updated JavaScript method that updates a CustomerDto, including an identifier, name, and amount.

Javascript (babel-node)
function update(){
	var name = $("#customername").val();
	var id = +$("#customerid").val();
	var amount = +$("#amount").val();
	var formData={"id":id,"name":name,"amount":amount};
	$.ajax({
		url : "/onetoonebidirectional/mock/edit",
		type: "POST",
		data : JSON.stringify(formData),
		beforeSend: function(xhr) {
			xhr.setRequestHeader("Accept", "application/json");
			xhr.setRequestHeader("Content-Type", "application/json");
		},
		success: function(data, textStatus, jqXHR)
		{
			document.getElementById("customername").value="";
			document.getElementById("amount").value="";
			document.getElementById("subButton").value="Create";
			loadObjects();
		},
		error: function (jqXHR, textStatus, errorThrown)
		{
			document.getElementById("customername").value="";
			document.getElementById("amount").value="";
			alert("Error Status Update:"+textStatus);
		}
	});
	return false;
}

editObject and viewObject methods

We will also look at the JavaScript methods editObject and viewObject that show a record to be edited.

Javascript (babel-node)
function editObject(customerid){
	editurl="/onetoonebidirectional/mock/findById/"+customerid;
	var customerForm={id:customerid};
	$.ajax({
		url : editurl,
		type: "GET",
		data : customerForm,
		dataType: "json",
		success: function(data, textStatus, jqXHR)
		{
			viewObject(data);
			document.getElementById("subButton").value="Update";
		},
		error: function (jqXHR, textStatus, errorThrown)
		{
			alert("Error Status Find Object:"+textStatus);
		}
	});
}
function viewObject(data){
	document.getElementById("customername").value=data.name;
	document.getElementById("amount").value=data.amount;
	document.getElementById("customerid").value=data.id;
}

deleteObject method

Finally, we will look at the delete operation where the customer identifier is passed as an input and the related Customer information is removed and refreshed.

Javascript (babel-node)
function deleteObject(customerid){
	var customerForm={id:customerid};
	delurl="/onetoonebidirectional/mock/remove/"+customerid;
	$.ajax({
		url : delurl,
		type: "POST",
		data : customerForm,
		dataType: "json",
		success: function(data, textStatus, jqXHR)
		{
			loadObjects();
		},
		error: function (jqXHR, textStatus, errorThrown)
		{
			alert("Error Status Delete:"+textStatus);
		}
	});
}

In the next lesson, let’s learn how to create the resource tier.