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
)
|
[View full width]
<!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 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
)
<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.
|
