Structuring the Data
| In order to construct our tree view component, we must first have a way of defining the data. The data we will be defining will be requested by our Ajax engine, so we will create an XML structure to define it. The tree view component will render the XML exactly as we define it. This means that if we have a node named Inbox with a node value of 'New Mail', the tree view component will create a folder named Inbox and it will contain a text item equal to the node value that we defined. Therefore, all we need to do is define nodes and node values and leave the rest up to the component. The nodes will be represented as folders, and the node values will be represented as content in the form in which they are definedwhether they are HTML or simple text is up to us. The most important part is that the component will recursively create subfolders within the tree from any childNodes that are defined in order to render subcategories, which will ultimately create our tree view structure. The following code represents a sample XML structure for our tree view component. The sample in Listing 11.1 represents an email tree view structure, which will be a variation of what we use in our final sample. Listing 11.1. The XML Structure That Defines Our Tree View (tree.xml)
As you can see, this sample XML is very self-explanatory because there are only four nodes with node names of Mail, Inbox, Outbox, and Sent. Each of these items will be represented in the tree as a folder with the Mail folder as the parent folder, and the Inbox, Outbox, and Sent folders as subfolders in the tree. Each of the items has an attribute named action, which will specify the action that occurs when a user clicks the folder name. Within each node is an HTML node value that must be embedded in CDATA in order to properly parse. This HTML will be rendered as the contents of each folder. In this case, we are using hyperlinks as the contents of the folders, and these hyperlinks will represent the mail within each of these folders. Take a look at the Inbox's node value, which includes multiple hyperlinks that are separated into different lines by break tags. We will see how simple it is to represent multiple pieces of mail in a folder in Part V, "Server-Side Interaction," when we populate these folders with database data using PHP and return it as XML to our component. Now that we have a sample XML structure and before we create the actual tree component, we need to create a file to display the data. We will use an HTML file (see Listing 11.2) to load all the associated files, request the XML, and display the tree component. The first thing we must do is import a CSS file called TRee.css (which we will create at the end of this chapter), all of the associated JavaScript files for the Ajax engine, and the two objects that will be used to create our tree view component. Now that we have the styles and JavaScript imported and once the page has completed loading, we can call an initialize method. This method will make a request through the AjaxUpdater object to get the XML file we just finished creating and send it to a method called display in the TReeManager object. Listing 11.2. Displaying the Data (index.html)
After we have created a file to display the tree view component, we should probably create the objects that render it. We will start with the treeManager object. |
EAN: 2147483647
Pages: 129