The Largest Repository of ColdFusion Knowledge in The World for More Than 12 Years

ColdFusion on Ulitzer

Subscribe to ColdFusion on Ulitzer: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get ColdFusion on Ulitzer: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


CFDJ Authors: AppDynamics Blog, Michael Kopp, Tad Anderson, Bob Gourley, Jayaram Krishnaswamy

Related Topics: ColdFusion on Ulitzer, XML Magazine

CFDJ: Article

Spectra's XML Flashes

Spectra's XML Flashes

Macromedia and Allaire have merged. This is an ideal marriage. Allaire's server-side technology and Macromedia's client-side strengths are complementary, and the synergies between these two organizations will produce a strong alliance. In this scenario the whole is greater than its sum. I've familiarized myself with both technologies until the learning curve has started to slow. If you're a Spectra developer, this article may enhance your knowledge of the Model View Control Pattern and the new way Spectra stores the Site Layout Model (SLM). If you're a Flash developer this may be a chance to be exposed to the eXtensible Markup Language (XML) object and how some of its methods can be used to deserialize the XML data into Flash's generic object.

Spectra was released in late 1999. Since then it has been recognized as a leader in commerce, content, and customer management (personalization). The other features of Spectra, which have not been widely recognized, but are of equal or greater importance, are:

  • Workflow and process automation
  • Business intelligence
  • Role-based security
  • Syndication
  • XML data storage
Spectra stores data in XML format and manages this data in an object (Type) oriented system. One of these types (objects) is the Page object. This page object is associated with Spectra's SLM and allows, among other things:

In this article I'll explain how to use Spectra to retrieve the SLM from the Content Object Database (CODB), and extract the relevant properties of the page and section objects to deliver XML to a Flash interface. The article is written from the perspective of a developer rather than a creative designer.

Flash was first introduced as a multimedia component on the Internet in 1995. It allows a client-side dynamic multimedia medium that can be used for almost anything. Flash is a multimedia source that's encoded into HTML (similar to an audio or video file). It's a rich vector-based media program that makes animations and layered content that's ideal for Graphical User Interfaces (GUI). As stated on Macromedia's Web site (www.macromedia.com), "Macromedia Flash is the key to designing and delivering low-bandwidth animations, presentations, and Web sites."

Flash 5 allows for an effective client-side interface. This interface has both visual and functional strengths that have, until recently, been generally limited to operating system dependence. Successful GUIs have started to appear using Flash 5 due to its new capabilities (drag/drop, Actionscript, etc.). Because it can dynamically communicate with server-side applications, Flash enables an effective interaction between the users and remote information.

This article also aims to explore Flash's XML object by providing an example of one of its many uses in communicating to a server-side application.

Model View Control (MVC)
MVC is a programming pattern in which the programming processes are separated into three distinct parts:

  1. The model: Maintains the data that describes the state of the program
  2. The control: Provides the conduit by which data enters and is interpreted and directed by the program
  3. The view: Provides one or more views of the data

When we choose to locate a book on a particular subject in a library, the easiest and most direct way is to ask a librarian. The librarian recognizes the request because it's in a language he or she understands. In order to realize the request the librarian needs to determine the location of a book, and consult the catalog system. The librarian would then request the information in a form which he or she understands, and upon receiving it, would write down the reference number on a piece of paper (in the requesting format and language), and pass it back to the person requesting the subject location.

This scenario has a number of processes:

  1. The request for the information.
  2. Recognizing where and how to locate the information.
  3. Consulting, retrieving, and returning the data. Finally, displaying the information in a format consistent with the request. Using the library analogy we can generally associate this scenario with the MVC.
The librarian is the controller, recognizing the request and knowing where, how, and in what format, to direct it. The controller interprets the request, then decides which action to take.

The catalog the librarian consults is the data model, as it stores the data (it could be a microfiche, database, or catalog cards). The model consists of the data-specific logic that enables the modification, processing, forwarding, and/or retrieving of the required data.

Writing down the information on a piece of paper allows the request to be viewed. It's the interface that allows the requester to view the information requested.

Site Layout Model Example
A MVC system can be effectively implemented using SLM and Flash. The SLM consists of a hierarchy of site elements. The top-level element is the site. A Spectra site element consists of pages, sections, and container elements. Pages and sections can exist within other sections. In Spectra 1 and 1.01 the SLM was stored in the sitecomposition table in the CODB. In the 1.5 version the storage is now within the objects table. However, in both versions a page was, and is, both an object in the CODB as well as a physical file (with a CFA_PAGE tag that identifies it). Both are linked through a property in the page's object instance (target). The object dump shown in Table 1 consists of all the properties of the Spectra site element page that we will access.

The data dump in Table 1 is an array element retrieved from the CODB using the <CFA_SITEMODELTRAVERSE> Spectra tag. This tag uses a ROOTELEMENTID parameter (to obtain the site descendants) that we'll provide from the Flash client. The array that's returned will be used to create XML data that Flash will load via its client-side XML object. Figure 1 is a MVC diagram showing the objective of this article.

In order to achieve the goal of this article, Flash will be used to request the SLM. The controller will then interpret the request and call the model. The model will then retrieve the data, modify it, and return it to the controller. The controller in turn passes the formatted data to the view interface. The view interface displays the XML for the Flash interface to retrieve. Flash loads the data into its own generic object, which can then be used to visually display the SLM or manage/edit the SLM.

The Client Request
Flash 5 supports HTTP-based XML data transfer as well as XML-socket real-time continuous connections. Only a small number of methods from the XML object will be discussed in this article. The XML object gives Flash the ability to load, parse, send, build, and manipulate XML document trees.

To begin we must create an instance of an XML object that will send data to the controller page. This XML object may have security information that could be used by the server-side application to determine what information, if any, is returned:

siteModelXML = new XML();
Another XML object needs to be instantiated to receive the data when it's returned.
SiteElementXMLReply = new XML();
SiteElementXMLReply.onLoad = onSiteElementXMLReply;

Once these two XML objects have been created we'll use the sendAndLoad method on the calling XML object. Note: the sendAndLoad method will immediately return, and processing will continue even if the server has not yet responded

For simplicity the URL will have the instructions for the controller page. The current site variable is a Universal Unique Identifier (UUID).

The "Programming with Allaire Spectra Manual" (1999) says, "A UUID is formatted as 'XXXXXXXX-XXXX-XXXX-XXXXXXXXXXXXXXX' where X stands for a hexadecimal digit (0-9 or A-F). UUIDs guarantee uniqueness..."

currentsite = "79267565-2234-4DAF-9F9F08AB04E758A6";

siteModelXML.sendAndLoad("http://127.0.0.1/flash/controller.cfm?Model=SLM&View=XML&ModelKey="+currentsite+"",SiteElementXMLReply);

This data will load asynchronously. When the data does arrive, the function on the receiving XML object onSiteElement XMLReply() will be executed.

Controller
The controller (controller.cfm file) is a simple bit of code, which determines the URL parameters, then calls the required model and view code.

It calls the model custom tag with the UUID parameter of "siteuuid", the rootelement that the spectra tag cfa_sitemodeltraverse requires to retrieve the descendant site model elements.

<cf_SLMModel siteuuid="#url.modelkey#" r_aSiteElements="aElements">
Once the controller receives the returned array from the model, it calls the view customtag with the array parameter of "elements" that's parsed into XML format.
<cf_SLMXMLView Elements="#aElements#">

Model
The model (SLMModel.cfm file) contains the logic of accessing the data and returning it in a format that's used by the view interface (see Listing 2).

This file calls the Spectra custom tag cfa_sitemodeltraverse and processes its result into an array that's then returned back to the calling page (controller.cfm).

This data is very similar to the data returned from the cfa_sitemodeltraverse tag, but it can have the ability to perform future business logic that is not required at this point (i.e., returning security info, caching info, etc.).

View
In this scenario the view interface (SLMXMLView.cfm file) is also a simple piece of code that receives the array produced by the model and then loops over it. It creates the XML from the structure held within the array element, and outputs the XML in the format shown in Listing 1.

The Server's Reply
In the onSiteElementXMLReply function I've created a global array that holds the objects of the site elements that I'll parse from the XML (see Listing 3).

SLMElementArray = new Array();
Also created is a new XML object that will copy the XML element loaded by the sendAndLoad method.
var sitecopy = new XML();
sitecopy = this;
  • Node: XML simply marks up the data with tags. The data that are marked up are referred to as nodes. So XML transforms a set of data to a set of nodes. In this example <SLMELEMENT is the node. It has an opening and closing tag.
  • Attribute: In this scenario an attribute is a name-value pair associated with the node (i.e., PARENTCOMPOSITIONID="" etc.).

Within the XML object there is a firstChild property that we are able to access. This property evaluates the specified XML object and references the first child in the parent node's children list.

var sitecopychildren = sitecopy.firstChild;
Next we call the childNodes method which returns an array containing references to the child nodes of the specified node:
var asitecopychildren = sitecopy.childNodes;

Then we loop through this array until we find the SLMELEMENT node:

var asitecopychildrenLength = asitecopychildren.length;

for (var countr = 0; countr<=asitecopychildrenLength; countr++)
{
if (sitecopychildren.nodeName == "SLMELEMENT")
{

Once it's found, we call a function that adds the node and its attributes to the SLMElementArray array:

addElementToArray(sitecopychildren);
In the function addElementToArray, a new object is created and the attributes of the node passed into the function are used to populate the object's properties. var elementObject = new Object();
elementObject.PARENTCOMPOSITIONID = element.attributes.PARENTCOMPOSITIONID;
elementObject.DEPTH = element.attributes.DEPTH;
elementObject.ELEMENTPOSITIONINDEX = element.attributes.ELEMENTPOSITIONINDEX;
elementObject.COMPOSITIONTYPE = element.attributes.COMPOSITIONTYPE;
elementObject.ELEMENTNAME = element.attributes.ELEMENTNAME;
elementObject.COMPOSITIONID = element.attributes.COMPOSITIONID;
elementObject.TARGET = element.attributes.TARGET;

Once the object is populated, the push method of the array object is used to add the object element to the end of an array:

SLMElementArray.push(elementObject);
trace(SLMElementArray.length+"="+ element.attributes.ELEMENTNAME);
Note: The use of the trace function is for debugging purposes and can be commented out. Once it's added to the array we then proceed to the next node within this loop:
}
sitecopychildren.removeNode();
sitecopychildren = sitecopy.firstChild;
}

This process receives and parses an XML object into a Flash array where processing and displaying of the information can be performed.

Once deserialized, the processing and displaying of the XML by Flash is limited only by your imagination.

The aim of this article has been to expose you to the MVC pattern, Spectra's new way of storing the SLM and some of Flash's XML object features.

The MVC pattern is shown in Figure 2.

A request is issued to a controller that interprets it and controls the flow of information determined by predefined business logic. The controller then calls the data model which modifies, processes, forwards, and/or returns the data. The view interface then displays the data.

In the example given, a ColdFusion page is the controller, the model uses Spectra, and the view interface is in Flash. The received data could be any XML formatted data from the CODB or any other data model.

There's a growing need for content delivery and management systems such as Spectra. Once you have fully experienced the raw power of Spectra, your perception of approaching Web-based application development will be altered forever. The experience you gain from using and understanding the Spectra perspective may enhance and even clarify the knowledge you've already attained in this ever-changing environment.

As Flash continues to "push the envelope" on how multimedia can be used on the Web, Spectra will in turn allow the exploration of intelligent options for transmitting, receiving, processing, storing, and displaying media. As of now its rich vector-based media provides unlimited programming options in the process of delivering Web-based multimedia.

Using Spectra/ColdFusion and Flash together in a client/server marriage allows developers to attain a better understanding of both technologies. Together they'll be an extremely powerful and potentially incontestable tool in the field of Web development. The sky's the limit once the two technologies begin to merge and evolve into something hopefully even more powerful.

More Stories By Matt Tatam

Matt Tatam, born and raised near Darwin, Australia, has been
developing in ColdFusion since early 1997 (CF 2.0), and is an Allaire
certified instructor. He is currently working as an instructor with
Highlander UK (www.highlander.co.uk) and as an R&D consultant in a
number of Internet technologies.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.