Lesson 4: Create the Dojo client

In this lesson you will enable the Web page that you created earlier for Dojo development.

The getMovieList() method of MovieService is exposed as a RPC Adapter service that returns a JSON response. Since JavaScript treats JSON as native objects, the response can be easily consumed by a Dojo client. To create the Dojo client:

In the Enterprise Explorer view, double-click ShowMovies.jsp. ShowMovies.jsp opens in the editor.
Create a page heading:
1. In the Source view of the editor, type the following inside the <body> tag:
```
<div class="heading">Movies Grid</div>
```
Create the button that populates the data grid:
1. From the Dojo Form Widgets drawer of the Palette view (Window > Show View > Palette), drag the Button widget onto the page below the Movies Grid heading.
2. In the Source view of the editor, update the button widget code:
```
<button dojotype="dijit.form.Button"
label="Load Movies" onClick="populateGrid"></button>
```
The <button> declares a button labeled Load Movies that when clicked, calls the JavaScript function populateGrid. The populateGrid function will be created in the following lesson.
Create the data grid to display the movie objects:
1. From the Dojo Widgets (Other) drawer of the Palette, drag the DataGrid widget onto the page after the Button widget.
2. In the Source view of the editor, change the <div> tags to <table> tags and add the autowidth attribute: The resulting code looks like the following:
```
<table dojotype="dojox.grid.DataGrid" id="grid.DataGrid" autoWidth="true"></table>
```
  The dojoType attribute is Dojo notation for declaring a Dojo widget. All Dojo widgets can be declared using this code. The autowidth attribute adjusts the size of the grid to fit to the content of the grid. By default the grid fits to the viewing size of the page.
  
  Tip: This product includes Dojo-specific code-assist function. In a Web page that resides in a project containing the Dojo toolkit, typing dojoType= in the Source view of a Web page and pressing CTRL and space offers a list of available Dojo widgets.
3. Add the following code inside of the <table> tag to define the grid column headers.
```
<thead>
		<tr>
			<th field="title">Name</th>
			<th field="actor">Actor</th>
		</tr>
	</thead>
```
Before you can construct the Dojo client, you need to create the necessary setup code to make the ShowMovies.jsp page aware of the Dojo toolkit.
Add the setup code:
1. In the Source view of ShowMovies.jsp, add the following code inside the <style> tag:
```
@import "dojo/dojox/grid/resources/Grid.css";
@import "dojo/dojox/grid/resources/nihiloGrid.css";
```
  Grid.css and nihiloGrid.css are the stylesheets that are required by the Dojo DataGrid widget.
  
  @import "dojo/dojo/resources/dojo.css"; @import "dojo/dijit/themes/nihilo/nihilo.css"; @import "dojo/dijit/themes/dijit.css"; are automatically added to the page after page generation and are required by the Dojo toolkit widgets. The Dojo toolkit provides many CSS files for the many different widgets.
2. In the Source view of ShowMovies.jsp, add dojo.require("dojo.parser"); inside the <script> tag that contains the dojo.require statements. The resulting code looks like the following:
```
<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dijit.form.Button");
		dojo.require("dojox.grid.DataGrid");
</script>
```
  This loads the JavaScript source files that are required by the Dojo widgets on the web page.
  
  The statement dojo.require("dojo.parser"); indicates that the Dojo JavaScript parser is required. The parser is a fundamental element of Dojo. It is included in almost all Dojo-based pages.

ShowMovies.jsp source looks 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");
</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>
</body>
</html>

Learn more about the Dojo Toolkit

The Dojo Toolkit is a powerful and flexible modular AJAX software development kit. It is broken down in to three major layers:

Dojo Core - All the major functions needed to do AJAX development, plus many features not found in other toolkits.
Dijit - A high quality set of interaction rich widgets and themes for use when developing AJAX applications.
DojoX (Dojo eXtensions) - A module to contain widgets and APIs that are useful for developing AJAX applications, but are not needed in all applications.

For more information about Dojo Toolkit, visit Dojo Toolkit Web site.

Lesson 4: Create the Dojo client

Lesson checkpoint