Getting Started
| In order to get started we must do a few things first. We must define an XML structure for the object to accept, which will be scalable and grow with a large application. Once we have defined this data structure we must then create a process for requesting it. This section will focus on both of these assignments in order to get us started toward creating the object. The XML ArchitectureBefore we begin, we need to architect an XML structure that will be used to represent an accordion with all its properties. Aside from the XML declaration, which needs to be added to the top of the file, the first element that we will create will be named accordion to represent the actual object or component. If we were to visualize an accordion, we would know that it consists of multiple panels, so we will use panel as the first child node name. To identify which panel is expanded by default when the accordion is rendered, we will add an expanded attribute to the panel element and populate it with a Boolean of true for expanded. Each panel should also include a title and have content that displays when the panel is expanded; therefore, we will create these elements as child nodes of the panel. If multiple panels are necessary to present content, we can easily duplicate the panel and its enclosed children elements so that there are numerous panels, one after the other. There is no limit to the amount of panels that can be added, but the accordion component will render slower as more data is added. Ultimately, however, a difference is not noticeable until your XML file gets very large. Take a look at the sample code in Listing 10.1 to get an idea of how to construct an accordion XML file that will be parsed by our custom component. Listing 10.1. The XML Sample for the Accordion (accordion.xml)
After the structure has been created, we can add data between the XML node elements. This data will be used to display in the corresponding parts of the accordion component. Accepting HTML in any node element will make this component much more flexible and can be very easily achieved by simply adding CDATA tags between the content elements. Here is an example of how easy this is to accomplish: <content><![CDATA[<b>html text goes here</b>]]></content> Adding CDATA tags allows us to use any HTML that we would like to display in any given panel. We could display everything from complex tables, images, and even other components. After you have completed creating all of the components in this book, you can combine them to make additional ways of interacting with data. After we have populated the XML file, we are ready to request it and use its content to render the component. Requesting the XMLIt is now time to set up the request for the XML. We will request the XML that we created in the last section and push it to the parsing method in the component. To make the request, we will first create an HTML file to hold all the code that will create and facilitate communication between the component and Ajax. Keep in mind that aside from building this sample, you will probably not use this component solely as you might have an existing file that you want to incorporate the component into. With the correct files and a few tweaks to the placement of the component, you can easily add one to any page. In the header of the new sample HTML file, add references to the accordion CSS and all the necessary JavaScript files, as in Listing 10.2. Keep in mind that you will have to run the files on a server in order for the XHR to work. Listing 10.2. The HTML Container for the Project (accordion.html)
We are including a number of JavaScript filesone of which is the Utilities object that we created in Chapter 14, "Singleton Pattern"because it will be used to create the accordion's HTML elements that get rendered on the screen. The other JavaScript files, Panel and Accordion, are the objects that we will be focusing on creating throughout the rest of this chapter. In order to get started, you can create these files in the corresponding JavaScript directory. After we have the files included, we need to create an initialize method (see Listing 10.3) in the header and add an Update call with the AjaxUpdater to request the accordion XML file. This object will make the request to the Ajax object based on the HTTP method and the query parameters that you pass. The Ajax object will then make an XHR to the XML file that we are passing and will finally respond to the callback method that you specify. In this case, it is the display method for the accordion, which will parse the XML and render the accordion and its panels. The first parameter is the HTTP method for the request. The second is the requested file, plus any query string that you need to append for posting data, which we will be doing more of in Part V, "Server-Side Interaction", when we begin to interact with server-side languages and databases. The last parameter is the method that you would like to be used as a callback method for the request. Listing 10.3. The XHR Request Code (accordion.html)
As you can see in Listing 10.3, we need to make sure that all the code is available or fully instantiated. We must simply wait until the page loads before we call the initialize method that makes the request. The following shows an example of the body onload method: <body onload="javascript:initialize();"> I have also added a loading div element (see Listing 10.4) to handle the ready state status of the request. This is a good way to present the user with a message regarding the state. Listing 10.4. A div Element to Display Loading Status (accordion.html)
When we have the HTML file ready to go, we can start creating the objects that make up the accordion component. Let's start with the Accordion object itself. |
/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Accordion</title> <link href="css/accordion.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/AjaxUpdater.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/../javascript/utils/HTTP.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/../javascript/utils/Ajax.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/../javascript/components/Panel.js"></script> <script type="text/javascript" src="/books/1/87/1/html/2/../javascript/components/Accordion.js"></script>
EAN: 2147483647
Pages: 129