AJAX Components - Part 3 | Page 3

AJAX Components - Part 3

Closing the Loop

Now that we have a RemoteDataModel that our DataGrid can connect to, we need to actually connect them. To achieve this, we can update the GridFactory fromDeclaration() method so that it also creates an instance of the RemoteDataModel class and specifies the appropriate factory for the RemoteDataModel itemFactory&#8212;in this case, the Customer Factory because our DataGrid is rendering Customer objects.

The setDataSource() method of the DataGrid will do a few things, such as ensure that the supplied datasource actually inherits from the DataModel class, sets the handler field on the remote datasource to the URL of the server side data handler specified on the DataGrid declaration, and subscribes a new method of the SimpleDataGrid called m_render Ready() to the onDataReady event of the datasource.

Due to the asynchronous nature of the data retrieval now, the DataGrid render() method needs to be reconsidered. The render() method will no longer actually do any rendering but instead simply call the read() method on the datasource. The datasource will then asynchronously request the data from the server and notify all subscribers to the onDataReady event—one of those subscribers just so happens to be the m_renderReady event of the DataGrid, and that is where the actual rendering code gets moved to.

The final piece of the puzzle is adding a call to the DataGrid's render() method into the GridFactory such as this:

Now we have a fully operational DataGrid that is requesting data from the server and rendering it in the web browser! The full web page is shown here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns:ea="https://www.enterpriseajax.com">
  <head>
    <title>Component Grid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="simplestyle.css" type="text/css">
    <script language="javascript" type="text/javascript" src="entajax.toolkit.js"></script>
    <script language="javascript" type="text/javascript" src="RemoteDataModel.js"></script>
    <script language="javascript" type="text/javascript" src="SimpleDataGrid.js"></script>
  </head>
  <body>
    <ea:grid id="myGrid" handler="data.xml" cssclass="CustomerGrid">
      <ea:columns>
        <ea:column width="100">
          <ea:header value="Name" cssclass="myHeaderCSS"></ea:header>
          <ea:item value="{$ContactName)}" cssclass="myRowCSS"></ea:item>
        </ea:column>
          <ea:column width="100">
            <ea:header value="Company"></ea:header>
            <ea:item value="{$CompanyName}"></ea:item>
          </ea:column>
      </ea:columns>
    </ea:grid>
  </body>
</html>

What you will likely notice is that in developing the component the way we did, we can also instantiate the component purely from JavaScript as if there is no declaration at all:

Summary

This chapter explained that there is a lot involved in not only developing an AJAX application, but also in having it interact with a user's web browser. Through the course of this chapter, we looked at some of the differences between imperative and declarative approaches to developing AJAX applications and looked at a simple example of making the Google Map component declarative. We also looked at some of the important variations on declarative programming, most notably behavioral. Behavioral AJAX can be a great tool for taking pre-existing HTML markup and adding a little AJAX on top of it to make your application a little more interactive and usable. Using many of the JavaScript techniques, we went through the entire process of developing a declarative DataGrid component from the ground up. In future chapters, we take a closer look at some of the nuances around various aspects of the DataGrid component in the context of a larger application.

Resources

XForms, https://www.w3.org/MarkUp/Forms/XSLT, https://www.w3.org/TR/xslt
JSONT, https://goessner.net/articles/jsont/
Internet Explorer databinding, https://msdn.microsoft.com/workshop/author/databind/data_binding_node_entry.asp
Google Maps, https://www.google.com/apis/maps/

This chapter is excerpted from Enterprise AJAX: Strategies for Building High Performance Web Applications, authored by David Johnson, Alexei White, and Andre Charland, published by Prentice Hall, © Copyright 2007 Prentice Hall. All rights reserved.

Digg This Add to del.icio.us

[previous]

URL:

AJAX Components - Part 3 | Page 3