< Previous | Next >

 

 

Lesson 4: Create the Dojo client

 

+

Search Tips   |   Advanced Search

 

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:

  1. 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 Enterprise Explorer view, double-click ShowMovies.jsp. ShowMovies.jsp opens in the editor.

    2. In the Source view of ShowMovies.jsp, add the following code inside the <head> tag:

      <style type="text/css"> @import "dojo/dojox/grid/_grid/Grid.css"; </style>

      This includes the CSS files required by the Dojo toolkit widgets. The Dojo toolkit provides many CSS files; however, for this tutorial, you will include only the Grid CSS file.

    3. In the Source view of ShowMovies.jsp, add the following code inside the <head> tag:

      <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad:true"></script>

      This includes the main Dojo JavaScript file, dojo.js. It also configures some Dojo-specific parameters.

    4. In the Source view of ShowMovies.jsp, add the following code inside the <head> tag: 

      <script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dojox.grid.Grid");
    dojo.require("dojox.grid._data.model");
</script>

      This includes all of the Dojo packages, that are required by the 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.

    Tip: You can drag the

    Grid component from the

    dojo - Other drawer in the Palette view onto the page to generate code similar to the code that you manually added to ShowMovie.jsp.

  2. Create the data grid to display the movie objects:

    1. In the Source view of ShowMovies.jsp, add the following code inside the <body> tag:

      <div class="heading">Movies Grid</div>
      <input type="button" value="Load Movies" onclick="populateGrid();" />
      <div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>

      The first <div> declares a heading with the label Movies Grid. The second <div> declares a button labeled Load Movies that when clicked, calls the JavaScript function populateGrid. The populateGrid function will be created in the following lesson. The last <div> declares the Grid. The dojoType attribute is Dojo notation for declaring a Dojo widget. All Dojo widgets can be declared using this code.

      The model attribute indicates that the data model that is bound to this grid component is declared in a JavaScript object called model. The structure attribute indicates that the layout of the grid is declared in a JavaScript object called layout. Both of these objects will be created in the following lesson.

      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.

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:

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

 

Lesson checkpoint

You have now created the Web page code for the Dojo client.

You learned the following:

< Previous | Next >