Dennis Baldwin

Subscribe to Dennis Baldwin: eMailAlertsEmail Alerts
Get Dennis Baldwin: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: ColdFusion on Ulitzer, XML Magazine

CFDJ: Article

Flash Remoting with Macromedia's DesDev Feed

Flash Remoting with Macromedia's DesDev Feed

I wanted to write an article that would be useful to the developer community. Since Flash is gaining ground as a powerful development tool, this article will focus on using Flash to create a rich UI hooked up to a ColdFusion component.

An effective Web site cannot exist without content, so this article will show you how to pull dynamic content into Flash. Pulling content from across the Web into Flash may be much easier than you expected. We're going to look at utilizing Macromedia's Designer & Developer (DesDev) XML feed. This XML feed will be pulled locally to our server, and then loaded into Flash. To accomplish this we'll be utilizing ColdFusion Components (CFCs), Flash Remoting MX, and Macromedia Flash MX components.

Before starting, please be sure to download the necessary files from www.devmx.com/cfdj/mm_desdev.zip. Once you've downloaded the files, unzip them to a directory named "cfdj" under the "wwwroot" of your Web server.

The ColdFusion Component
Let's take a look at the CFC we'll be building. We're going to create a file named "feeds.cfc" and save it to the "cfdj" folder under our Web server root "wwwroot". You can either create this file from scratch or use the file contained in the download. If you'd like to write the code yourself, then open your HTML editor of choice - Dreamweaver MX, Notepad, or something else. First off you need to know that the XML feed is located at the following URL: www.macromedia.com/desdev/resources/ macromedia_resources.xml. It's a good idea to look at the structure of the XML document before you attempt to load it into Flash and parse it. The document has the structure shown in Listing 1.

Each resource node has a type attribute that specifies what type of content is contained within the node. This type attribute can consist of articles, components, extensions, tips, tutorials, and so on. There are four child nodes that consist of title, author, URL, and product. The product node has a name attribute that displays which software product the content relates to (ColdFusion, Macromedia_Flash, Dreamweaver, Fireworks, etc.). We'll loop through each resource node of the XML document and parse the nodes inside of Flash. Before we tackle this we need to develop our CFC that will pull the feed from Macromedia.com to our local server. The CFC is very simple and can be seen in Listing 2.

First, make sure that the access attribute of CFFUNCTION is set to remote. This will allow Flash Remoting (or any remote ser-vice for that matter) to access the getDesDevFeed method of our component. This method of the CFC calls the XML file from Macromedia's server using CFHTTP. The CFPROCESSINGDIRECTIVE tag is used to trim any whitespace from the XML document. Flash tends to fuss about whitespace within XML documents so we'll also be sure to handle this in our ActionScript code too.

Next we set the mime type of the page using CFHEADER. The mime type is automatically determined by CFHTTP and, in our case, is "text/plain." The XML contents are then returned to the caller (Flash in our case) using the CFRETURN tag.

That's it! It's as simple as that. Now let's take a thorough look into the Flash side of things.

The Flash Movie
Due to security limitations, the XML document cannot be loaded directly into Flash unless the file resides in the same domain. This is why we created our CFC, which pulls the XML file locally using CFHTTP. Now we can access and load the content as if it existed on our own server. This is a very handy technique and can be used to pull other third-party news feeds such as ones from Slashdot, Moreover, and any feed that comes in an XML format. The CFC could actually be developed to incorporate other news feeds and Web services. Take a look at the ActionScript code in Listing 3.

The first two lines of code are extremely important when developing Flash Remoting applications and components. These contain the necessary classes to communicate with ColdFusion and make calls to CFC methods. If Flash complains that these includes don't exist, then the Remoting components are not installed. By default these are included with the CFMX installation. If for some reason you don't have them, you can grab them from Macromedia's Web site: www.macromedia.com/software/flashremoting/ downloads/components.

Also note that the second line of code (#include "NetDebug.as") is unnecessary in a production environment. This is only used for debugging purposes such as tracing properties, methods, and results on the client and server. All of this information is contained within the NetConnection debugger (Window > NetConnection Debugger).

For more information about using and understanding the NetConnection Debugger, see my article, "Get Connected with Flash Debugging" (CFDJ Volume 4, issue 10). Be sure to remove the debug include or comment it out when publishing your file to a production server. This will save about 6KB in file size, which isn't a lot, but every little bit helps.

Now let's get into initializing the application. You'll see that the init code is set to run only once, which is all we'll need to establish the connection with the server. This is just a failsafe practice that is used to prevent any additional connections from being established with the server. Within this code we display a simple "Loading" message within our text field on the stage. We've given the text field an instance name of "body" so that we can make reference to it when sending information to be displayed in the field.

This instance reference is also used by the ScrollBar component, and is set as the target TextField for the component. This tells the ScrollBar which text field to control, and will automatically control the scrolling of any text within the field. To set the target TextField be sure to select the ScrollBar on the stage and view the properties panel (Window > Properties). Figure 1 shows the properties panel for the ScrollBar.

Next we create the "gwURL" variable and set it as the defaultGatewayURL. This is important when we're testing within the IDE so that Flash knows where to establish the Remoting connection. The last part of the initialization code is to create a reference to the service we're calling (cfdj.feeds) and then call the service method we created earlier (getDesDevFeed).

Now that the method has been called, we need a way to handle the result sent from the server. Remember, the getDesDevFeed method pulls the XML document from Macromedia's Web site and then returns it to the caller. In Flash we call this method the default responder, which takes the format of "functionName_result". In our case, the default responder is "getDesDevFeed_Result". The XML contents are passed into the default responder and we run a custom routine to parse the XML and display it in the "body" text field.

We basically create an XML object and make sure to remove any whitespace in the document. This is good practice since Flash will treat whitespace as empty nodes, which can ultimately complicate the parsing process. After the XML is loaded and parsed, we grab the number of resource nodes and enumerate through each node. This allows us to append the title, author, and URL to our text field. We use the "body.htmlText" property to allow the text field to accept HTML contents. Figure 2 shows the XML document passed from CF to Flash in the NetConnection Debugger.

If you haven't dealt with the Flash XML object in the past, it's good to note that XML parsing has increased dramatically in Flash MX. In Flash 5 the XML parser was fairly slow when parsing large XML documents. I would say that on average the Flash MX parser is 5-10 times faster than the Flash 5 version - call it XML parsing on steroids!

You should now be able to test your movie and see the results of your hard work (CTRL-Enter or Control > Test Movie). You should initially see the "Loading content..." message until the XML is parsed and loaded into the text field. You can then use the scroll bar to view the different articles and click the titles which link to the corresponding content on Macromedia's Web site. Figure 3 shows the finished product.

Conclusion
As you can see, it's a fairly simple task to pull dynamic news into Flash using Remoting and CFCs. The power of this approach lies in the fact that this is very extensible and can be used in future components and applications. For instance, if the user wanted to access the feed component and display it in a CF page, this would be just as simple to do.

If you didn't notice, the ScrollBar was re-skinned to match the color scheme of the movie. Try to play around by extending the movie with changing colors, UI, and even a bit of animation. Stay tuned as we'll cover this in the future as well as hook up Flash and CF with Web services.

More Stories By Dennis Baldwin

Dennis Baldwin is a software developer for SensorLogic Inc, an M2M application service provider. He also runs and maintains an online community for Flash and ColdFusion developers at www.devmx.com.

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.