Lesson 6: Create the details pane

In this lesson, you will create a details pane that displays the properties of a Movie object when it is selected in the Master table.

To create the details pane:

Expose the getMovie(String title) method:
1. In the Page Data view, expand RPC Adapter Services.
2. Right-click MovieService (web2.MovieService) and select Configure. The Expose RPC Adapter Service dialog opens.
3. In the Methods list, select getMovie(String) then click Finish.

Create the details pane code:

In the Source view of ShowMovies.jsp, update the code to look like the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><%@page
	language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<html>
<head>
<style type="text/css">
@import "dojo/dojo/resources/dojo.css";

@import "dojo/dijit/themes/nihilo/nihilo.css";

@import "dojo/dijit/themes/dijit.css";

@import "dojo/dojox/grid/resources/Grid.css";

@import "dojo/dojox/grid/resources/nihiloGrid.css";
</style>
<script type="text/javascript" src="dojo/dojo/dojo.js"
	djConfig="isDebug: false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.TextBox");</script>
<script type="text/javascript">
// Issue an asynchronous request to the server for data
function populateGrid() {
	dojo.xhrGet({
		url: "/web2Project/RPCAdapter/httprpc/MovieService/getMovieList",
		load: fillGrid,
		error: handleError,
		handleAs: 'json'
		});
}
// Process the response to the asynchronous request
function fillGrid(data, ioArgs)
{
	var newData = {
			identifier: "title",
			items: data.result
	};
			
	var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
	var grid = dijit.byId("grid.DataGrid");
	grid.setStore(dataStore);
	dojo.connect(grid, "onCellClick", showDetails);}

function handleError() {
	alert("An error occurred while invoking the service.");
}

function showDetails(e) {
	var grid = dijit.byId("grid.DataGrid");	 
	var title = grid.store.getValue(grid.getItem(e.rowIndex), "title");
	var serviceURL = "/web2Project/RPCAdapter/httprpc/MovieService/getMovie?title=" + title;
	 
	dojo.xhrGet({
		url: serviceURL,
		load: fillDetailsForm,
		error: handleError,
		handleAs: 'json'
	});
}
 
function fillDetailsForm(data, ioArgs) {
	dijit.byId("detailsForm").setValues(data.result);
}	
</script>
<title>ShowMovies</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body class="nihilo">
<div class="heading">Movies Grid</div>
<button dojotype="dijit.form.Button" label="Load Movies"
	onClick="populateGrid"></button>
<table dojotype="dojox.grid.DataGrid" id="grid.DataGrid"
	autoWidth="true">
	<thead>
		<tr>
			<th field="title">Name</th>
			<th field="actor">Actor</th>
		</tr>
	</thead>
</table>

<form dojoType="dijit.form.Form" id="detailsForm">
<table border=2>
	<tbody>
		<tr>
			<td>Name</td>
			<td><input dojoType="dijit.form.TextBox" type="text"
				name="title" size="60"></td>
		</tr>
		<tr>
			<td>Starring</td>
			<td><input dojoType="dijit.form.TextBox" type="text"
				name="actor" size="60"></td>
		</tr>
		<tr>
			<td>Director</td>
			<td><input dojoType="dijit.form.TextBox" type="text"
				name="director" size="60"></td>
		</tr>
		<tr>
			<td>Rating</td>
			<td><input dojoType="dijit.form.TextBox" type="text"
				name="rating" size="60"></td>
		</tr>
	</tbody>
</table>
</form></body>
</html>

Table 1. Summary of changes to ShowMovies.jsp required by Details pane
Change to ShowMovies.jsp	Description
`dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.Form");`	Loads the JavaScript source files required by the Dojo widgets that make up the Details pane.
`dojo.connect(grid, "onCellClick", showDetails);`	Adds the event handler. The call to `dojo.connect` invokes a Dojo API that adds an event handler to specific user interface events. When a cell is clicked in the grid, Dojo calls `showDetails`.
`function showDetails(e) { var grid = dijit.byId("grid.DataGrid"); var title = grid.store.getValue(grid.getItem(e.rowIndex), "title"); var serviceURL = "/web2Project/RPCAdapter/httprpc/MovieService/getMovie?title=" + title; dojo.xhrGet({ url: serviceURL, load: fillDetailsForm, error: handleError, handleAs: 'json' }); }`	Makes the asynchronous call to `getMovie(String title)`. The `showDetails()` function determines the title of the movie selected, by using the data model `getDatum` API. `rowIndex` and `0` represent the cell that contains the title of the movie. `serviceURL` is the URL required to query the `getMovie(String title)` RPC Adapter service. This URL is used to issue an asynchronous request via the `dojo.xhrGet` API. Just as in the Master grid, a handler is specified by the `url:` in the `dojo.xhrGet`. In this case the handler is called `fillDetailsForm`.
`function fillDetailsForm(data, ioArgs) { dijit.byId("detailsForm").setValues(data.result); }`	Fills the details pane. `dijit.form.Form` provides the API `setValues` which will match the values in a JSON string with the value specified in the `name` attribute of the form contents. The values in the form input tags are determined by the call to `setValues(data.result);`.
<form dojoType="dijit.form.Form" id="detailsForm"> <table border=2> <tbody> <tr> <td>Name</td> <td><input dojoType="dijit.form.TextBox" type="text" name="title" size="60"></td> </tr> <tr> <td>Starring</td> <td><input dojoType="dijit.form.TextBox" type="text" name="actor" size="60"></td> </tr> <tr> <td>Director</td> <td><input dojoType="dijit.form.TextBox" type="text" name="director" size="60"></td> </tr> <tr> <td>Rating</td> <td><input dojoType="dijit.form.TextBox" type="text" name="rating" size="60"></td> </tr> </tbody> </table> </form>	Creates the details pane. The details pane is a simple HTML form that has been enhanced by specifying `dijit.form.Form` as the `dojoType` for the `<form>` tag and by specifying `dijit.form.TextBox` as the `dojoType` for the HTML `<input>` tags. The name attribute in the `<input>` tags match the names of the fields in your Movie Java class, therefore matching the names of the fields that are returned as JSON by the RPC Adapter invocation.

The Details pane is created using a dijit.form.Form widget with input fields for each of the fields in your Movie class. In this lesson, you wrote JavaScript that:

Added a listener to the grid that calls a function when a row is clicked.
Made an asynchronous call to getMove(String title), passing the title of the click row.
Set the values in the form to the values returned by the call to getMovie(String title).

To test the Web page:

In the Enterprise Explorer view, right-click MovieService.jsp, then select Run As > Run on Server. The Run On Server window opens.
In the servers list, select WebSphere Application Server v7.0, then click Finish.

ShowMovies.jsp opens in a browser.

When you click Load Movies, the grid is populated with the data without refreshing the Web page. The request for the data and the update of the Grid were made asynchronously.

The grid is updated with data without refreshing the Web page.

When a row in the Movies Grid is selected, the Details pane is updated.

The details pane is updated with data without refreshing the Web page.

Lesson 6: Create the details pane

Lesson checkpoint