Client Debugging

There are a number of tools that can make AJAX programming more effective. We
will look at Firebug and the built-in debugger that is a part of ColdFusion.

Firebug

One of the best tools available for AJAX development is Firebug. This tool is a plugin
for Firefox with many abilities. The one we will look at specifically here is the
ability to drill down into the DOM structure of a browser page. We are going to look
at how this tool works. First, we will have a look at the previous example and take
the radio button for our divide selection. Here is a screenshot of the page in which
we run firebug. Refer to http://www.getfirebug.com/ for the features of
this plug-in.

We see the Inspect menu item at the top. If we click on it, then we will be able
to click on the radio button besides the Divide text. This in turn will give us the
following in our console view.

If we then go to the right pane of firebug and click on the DOM item, we will get the
structure details of the object. There are several types of objects that are explained
in detail in ColdFusion and this gets loaded with AJAX pages. These can be entered
by clicking on the Console tab present in the left panel. Then as you can see, you
have an entry line at the bottom where you can enter any DOM object name or
any JavaScript function, and it will allow us to see what is available with that item.
If you’re going to dive deeper into AJAX, these are the tools to make the journey
much simpler. If you don’t have a library loaded that supports it, you can still use
the common DOM element shortcut. This means that for the radio button above
with the id calcDivide, we could use the full DOM of document.getElementById
(calcDivide) or we can use the shortcut version $(‘calcDivide’), and press Enter.

Now, we do n’t see the item within the context of the HTML page. We just see the
item we have requested. If we were calling an existing JavaScript structure or a
simple value, we would see that too. With a similar item, we can click on it, and
then have a look at the DOM model for that particular item as we did earlier. The
additional items that the ColdFusion AJAX includes are listed here. We would just
enter them in the prompt line as we did for the radio button ID.

• ColdFusion.Layout.getBorderLayout (name)


• ColdFusion.Grid.getGridObject (name)


• ColdFusion.Layout.getTabLayout (name)


• ColdFusion.Tree.getTreeObject (name)


• ColdFusion.Window.getWindowObject (name)

To get more information about these topics, you can look at the ColdFusion
documents that consist of EXT and YUI library files. The name of course is the same
as you assigned while creating the item. Also, we need to remember that JavaScript
is case sensitive.

Built-In Debugging

This is a very useful feature. All you have to do is to change the URL in the address
bar to get this working. Now, if you are running ColdFusion on a live site, this
feature should be shut off in the ColdFusion Administrator. Here is the URL with
and without debugging. The only difference is we have added an extra variable to
the URL. Just add it to the last variable after the question mark in the URL.

http://localhost/cfb/code/chapter_10/bind_7.cfm
http://localhost/cfb/code/chapter_10/bind_7.cfm?cfdebug

Here is the screenshot of the debugging window.

We can see that there are a number of features to this debugging window. We can
Collapse the window to get it out of the way. It can also be dragged around the
screen to move it out of the way, if collapsing is not enough. It is dragged by holding
the mouse button down over the dark grey area where the title is. We can toggle to
obtain information on the type of debugging. This will also toggle the information
that is already present. When we have more information, it will create a scroll bar so
as to move through the log. The pause and clear buttons are great features.

Logging Features

Not only is deb ugging built in, but the system is designed to allow us to send
logging to the window so that it becomes easier. Let’s open our Firebug console and
log the element we were looking at earlier. There are a number of logging features,
and it is a better way for managing our build or debugging interaction with
the logger.

Here, we observe that we do not get as many details as we used to get in the DOM
panel of the Firebug console. Remember that the $() shortcut is a part of Firebug.
Normally, you either need to have that in another AJAX library, or you have to use
the old method that we mentioned earlier. Here are the types of log functions that
are included with the debugger.

• ColdFusion.Log.dump


• ColdFusion.Log.debug


• ColdFusion.Log.error


• ColdFusion.Log.info

The ColdFusion .Log.dump has a special function whereas the remaining three
only change the tag that is before the log item. One thing that can be done is to
design custom tags and CFCs, so that they have a ‘test’ mode that can be run.
This would allow them to interact with the debugging tools and make a more
sustainable product. This would mean there would be more quality assurance for
all our software.

Customization

When it comes to coding, there are many things that can be done. This is a two-fold
scenario. The primary way to customize is more on design than on coding. If we are
inclined, we can actually go as far as replacing all the code of core AJAX functions.
Generally, before going that far, it might be a better idea to look at individual
libraries and see if there is something present already that can help us achieve
our goals.

We are going to look at another tag in ColdFusion 8 known as <CFAjaxImport/>.
Most of the look-and-feel of the AJAX tags is controlled by CSS files. Using this
tag, we can substitute custom styles for these tags. This will be coded as in the
given example. The cssSrc attribute specifies the URL, relative to the web root of
the directory that contains the CSS files used by ColdFusion AJAX features, with
the exception of the rich text editor. This directory must have the same directory
structure, and contain the same CSS files, and image files required by the CSS files,
as the web_root/CFIDE/scripts/ajax/resources directory.

	<cfAjaxImport cssSrc=”/mySite/myCSS/”>

We can also change the scriptSrc attribute. Similar to CSS styles, you need to
include structure of the same scripts as found in the /cfide/scripts/ directory.
This is where hackers can extend the core power that ships in ColdFusion. If you use
this attribute, you will not be able to use it more than once in a request.

Another important thing about this tag is the ability to declare the AJAX tags that
need modification. As developers, we often forget, as we think about code, the
challenge of designing a site to the owner’s satisfaction. We are often negligent in this
aspect. The following table shows the tags that can be put in the tag attribute list to
set what is modified by the cfAjaxImport tag.

Comments

comments