Getting Started

Before we create any of the JavaScript objects, which will become our data grid component, we will need to create an XML file to hold our data and an HTML file to display the component. This section is a brief description of how to create the files we need in order to get started. The XML for this chapter is actually the same structure we created in Chapter 3, "The Response." This chapter will take the XML and render it into a custom data grid component that we will create step by step in the next section. The only difference is that we will modify the actions to become alerts in order to show an example of how the actions work. Here is an example of the new action in the action attribute:

<items action="alert('Grace Hopper');" icon="img/mail.gif"> </items>

After we have an XML structure defined, we must create an HTML page to display the data. We will create an index page that contains the corresponding JavaScript files that we will need in order to make an XHR and display the data in the data grid. The index will wait for the body of the document to load, and then fire an update call on the AjaxUpdater to load the corresponding XML data. We will also specify the DataGrid's display method as the callback because this is the method that will handle rendering after we create the object. Take a look at Listing 13.1 to get an idea of how the HTML needs to be structured.

Listing 13.1. The Container for Displaying the Component (`index.html`)

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</title> <link href="css/datagrid.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/Utilities.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/utils/NumberUtil.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/utils/StringUtil.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/model/AjaxUpdater.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/model/HTTP.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/model/Ajax.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/view/DataRow.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/view/DataColumn.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/javascript/controller/DataGrid.js"></script> <script type="text/javascript"> function initialize() {     AjaxUpdater.Update("GET", "services/email.xml", DataGrid.display); } </script> </head> <body onload="javascript:initialize();"> <div ></div> </body> </html>

There is nothing complicated about this HTML fileit's really just a matter of importing all the correct JavaScript files and making the XHR when the page has completed loading. One last item to add is the loading div, which will display a message regarding the status of the XHR. Now that we have the data and the display page created, let's dive into the code of the data grid component.

Listing 13.1. The Container for Displaying the Component (index.html)

Listing 13.1. The Container for Displaying the Component (`index.html`)