Create Your Own Custom Ajax-Enabled Accordion Component
- Getting Started
- Creating the Accordion Object
- Panel Functionality and Data Display
This chapter is from the book
This chapter is from the book
This chapter is from the book
Adding massive amounts of data to one web page is not a recommended design approach because it can be completely disorienting to the user, and might cause him to go to another site. There are always exceptions, though, which is the case when using an accordion component to display data. Using an accordion component enables a single web page to display much more content without disorienting the user in the process. An accordion has multiple panels that can expand and collapse to reveal only the data that a user is interested in viewing without overwhelming him with everything at one time.
In this chapter, we will learn how to create a custom Ajax-enabled accordion component. An Ajax-enabled accordion can lend itself to many unique situations. For example, you can connect the component to live XML data from a database via a server-side language, which can send and receive XML or any other format that you prefer. The accordion component can be the graphical user interface for a custom web mail application that displays threads in different panels. The server can push new data to the component when mail has been updated, deleted, or added to the database, and the accordion can parse it to update, delete, or add new panels to the thread. This is a perfect example of providing access to massive amounts of content without scaring away the users of the application. It is also a great way to organize the content so that the application is ultimately more usable and purposeful.
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 Architecture
Before 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)
<?xml version="1.0" encoding="iso-8859-1"?>
<accordion>
<panel expanded="true">
<title></title>
<content></content>
</panel>
<panel>
<title></title>
<content></content>
</panel>
</accordion>
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 XML
It 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)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/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="../javascript/Utilities.js"></script> <script type="text/javascript" src="../javascript/utils/AjaxUpdater.js"></script> <script type="text/javascript" src="../javascript/utils/HTTP.js"></script> <script type="text/javascript" src="../javascript/utils/Ajax.js"></script> <script type="text/javascript" src="../javascript/components/Panel.js"></script> <script type="text/javascript" src="../javascript/components/Accordion.js"></script>
We are including a number of JavaScript files—one 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)
<script type="text/javascript">
function initialize()
{
AjaxUpdater.Update("GET", "services/accordion.xml", Accordion.display);
}
</script>
</head>
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)
<div id="loading"></div> </body> </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.