Use Flash as an XML proxy

By Phillip Perkins

Microsoft provides an ActiveX tool, the XMLHTTP component, for sending data to Web servers within a client HTML page. Or, if you don't want to use Microsoft technology, you can create a Java proxy to handle this exchange of information. Another tool you might want to consider is Flash.

Flash can send XML data to Web servers through the XML object. This object contains two methods for sending XML data to the server: send() and sendAndLoad(). The first method sends the XML contents in the current XML object to the Web server. The second method sends the current contents to the server and loads the result XML to an XML object.

The only thing left is to interact with the data in the current HTML page. You can use fscommand() to call JavaScript (or VBScript) functions within the HTML page from Flash. If you know how to use this functionality, you can create an XML proxy for your XML data.

Since I'm focusing on the proxy functionality of the Flash movie, I'm not going to explain how the XML functionality works on the Web page. Instead, I'll create a method to enter individual records into a phonebook database by creating a few <INPUT...> elements and binding them to an XML data island.

When the user pushes the Flash New button, Flash directs the page to load XML with blank data into the current XML data island. Then the New button becomes a Save button. When the user presses the Save button, Flash directs the page to load the XML data to a Flash variable that Flash uses to populate an XML object. The XML object's contents are sent to the Web server for processing. The server's response XML is loaded into the same XML object. This XML is populated to the Web page's XML data island. This information is bound to the <INPUT...> elements so the new information is reflected in these elements.

The HTML to support this functionality is pretty simple. Click here.

Next, we'll provide some event to execute creating a new record and saving a record. This is where Flash comes in. The Flash movie contains only one button to handle these two events.

1. Create a Flash movie and add a button from the Components list to the stage.
2. In the Properties panel, name the button instance btnNew.
3. Set the Click Handler to btnNew_onclick.
4. Add a text field to the stage.
5. Set the text field type to Dynamic Text, set the Var field type to xmlText, and set the Instance Name to txtXML.
6. Position the text field off the visible part of the stage. Also, reposition the button to the top-left corner of the visible part of the stage and resize the stage to fit the button.
7. Enter the Actions panel in Expert mode and enter the following ActionScript code. Click here.

Let's examine what this code does. First, it creates an XML object for containing the XML data and sets the onLoad event handler. When the user clicks the btnNew button, the btnNew_onclick() event handler is fired. If the label is New, Flash calls the fsc_newRecord() JavaScript function. This function (which I'll show later) creates a new, blank record. If the label is Save, Flash directs JavaScript to save the XML to the textXML Flash variable. The event_txtXML_check() function helps create a lag so that the XML data can be stored to the Flash variable before proceeding. This function checks the xmlText variable to see if the data changed. If not, it calls itself again. If two seconds pass while it's checking, it changes the button label back to New and exits. If the data change, the new XML is loaded into the m_XML object, the data is sent to the xml_proxy.asp page for processing, and the return XML is loaded into the m_XML object. The button label is changed to New.

After the XML data is loaded into the m_XML object upon return, the m_XML_onload event handler is fired, which calls JavaScript to load the new XML to the XML data island.

Here's the JavaScript to handle the interaction between the HTML page and Flash. Click here.

The VBScript must be on this page if you're running Flash as an ActiveX component in Internet Explorer. When the fsc_newRecord() function is called, it loads the xmlData data island with the XML located in the xmlBlank data island. When the fsc_setXML() function is called, JavaScript uses the SetVariable() method of the Flash movie object to set the xmlText Flash variable. The fsc_putXML() function is called when the new XML is loaded from the Web server response. This function loads the xmlData data island with the returned XML.

To see this project's full source code, copy and paste the following URL into your browser: http://www.geocities.com/phil_perkins_1/Flash/xml_proxy.zip. To run it, you'll need IIS running your ASP page, Microsoft XML 2.6+ on your machine, Internet Explorer as your browser, and, of course, the Flash plug-in.