Flash

As you might have noticed, the current incarnation of Macromedia Flash, Macromedia Flash MX 2004, has evolved from a simple Web animation package to a full-fledged IDE that allows both developers and designers to work with graphics, animation, video, and sound and spice it up with external sources like databases and Web services.

The more adventurous among us can hook it up to servers like Macromedia Flash Communication Server or the XMLSocket server, Unity 2, adding streaming video and sound, multiuser environments, and Web cam support to their applications. For beginners, the possibilities seem endless and the learning curve is steep. In this article I will guide you through the new data architecture introduced in Macromedia Flash MX 2004 and explain the concepts and ideas that allow you to work with external data. Soon you will be crafting "Rich Internet Applications" too!

A Little History
If we look at the current technologies and frameworks for working with data we can identify the following key technologies:

• The Microsoft world has a technology called ADO (.NET) that gives developers working with ASP, Visual Basic, and C# access to data sources.
• Java has JDO and JDBC for working with external data.
• The open source world (PHP, Perl, Python) define their own frameworks, each targeted toward specific features and constructs of the language.

Until now, Flash didn't have a standard framework to access external data, thus developers coming from different backgrounds were emulating their preferred framework when working with Flash. For a developer coming from an ASP.NET background, there was no Data Reader, so the only way to have the same workflow was to write your own version of the Data Reader. The advantages of creating your own framework might be obvious:

• You can really customize your framework for your specific need.
• You don't have to learn new technologies or new APIs; you simply write your own. <\ul>

  But look at the drawbacks:

  • It's very time consuming.
  • There's a steep learning curve for new developers.
  • You're reinventing the wheel.

  Flash MX 2004 Professional introduces a standardized and easy way to connect to external data sources, manage data, and make the data visual by binding it to User-Interface controls. This new architecture consists of three layers:

  1. Data Connectivity layer: This is the Data Access Layer (DAL) with new components providing a consistent interface for sending and receiving data to and from Web services, databases, and XML files.
  2. Data Management layer: A repository layer, containing a DataSet and DataHolder component. These components give you an interface to perform basic data operations such as editing, sorting, and updating.
  3. Data Binding layer: You can have the most advanced data floating around in your application, but if you do not visualize it, for example showing it in a TextArea component, it isn't of much use. The Data Binding layer, which is represented in the IDE through the "Bindings" tab, contains objects such as Formatters and Encoders (see Image I). Here you share the data between components and visualize them by binding the data to "data-aware" components such as the new Macromedia User Interface Components (see Image II).

Security
Macromedia has tightened the security model in the new Flash Player. This impacts us when we want to work with external data. The rule is pretty simple: you can only access external data if it's loaded from the exact same domain. Table I shows you some examples.

However, there is a simple and elegant solution to this - a feature called "Policy Files," simple XML-based files that have to be uploaded to the server. Table II shows you some examples.

The format of the policy file is very straightforward:

• It contains a single node: "<crossdomain- policy>".
• It has one or more sub nodes named "<allow-access-from>".
• These nodes have one special attribute named "domain" that has the following values:
  • Wildcards ( * )
  • Exact Domain
  • Exact IP address

Here are two examples:

1. Access all areas

   <?xml version="1.0"?>
   <cross-domain-policy>
   <allow-access-from domain="*" />
   </cross-domain-policy>
   

   This is the simplest form of a policy file, stating that anyone is allowed to access data that resides on your server.

2. Specific access for some domains

   <?xml version="1.0"?>
   <cross-domain-policy>
   <allow-access-from
   domain="www.clockwork.nl" />
   <allow-access-from
   domain="*.cnn.com" />
   <allow-access-from
   domain="66.151.149.10" />
   </cross-domain-policy>
   

Here I specified explicit access to only a few domains.

The following actions are affected by the new security restrictions:

• XML.load
• XML.sendAndLoad
• LoadVars.load
• LoadVars.sendAndLoad
• LoadVariables
• LoadVariablesNum
• XMLSocket.connect
• Flash Remoting
• Import of a shared library

Web Services
Software is often seen as an application, something you buy in a store, shrinkwrapped in a box or custom made by a software development company. It is usually distributed on a medium such as a CDROM, or in the case of a Web application accessed through a browser. A Web service is a piece of software that can be used through the Internet. You do not own the software, but instead use the service to solve a specific problem. It's much like going to the hairdresser for a haircut or cleaning service to get your laundry done.

Web services are built on standard Internet protocols:

• HTTP GET/HTTP POST
  • Both use HTTP as their underlying protocol.
  • Both have been used widely since the early days of Web programming.
  • They encode values intro name/value pairs.
• SOAP on HTTP (Simple Object Access Protocol)
  • Uses HTTP as underlying protocol.
  • XML-formatted messages.
  • We can use SOAP on other protocols.

Let's have a look at how you could use Web services in an older version of Flash.

• You had the ability to use HTTP GET and POST through the getURL command since version 4.
• You could access SOAP Web services by creating an XML interface through a scripting language like PHP, ASP, etc. (the Flash Player didn't support the required SOAP Action header).
• You could use AMF, a proprietary protocol by Macromedia Flash Remoting that was fast because of its binary format.

All of these methods require indepth knowledge of the Flash environment, and sometimes an awk- ward workflow for working with external data. In the following section I show you some examples of how to access XML files and Web services with no scripting.

Examples
Now let's put our knowledge into practice. I will show you two simple examples that will illustrate the concepts and workflow of the new data architecture. (Source code for these examples can be found at www.sys-con.com/mx/sourcec.cfm.)

Hello World: Binding Data to UI Components
Of course we'll start with a simple Hello World program. The common workflow follows:

1. First we have an XML file named "index.xml" that has the following structure: <?xml version="1.0" encoding="UTF-8" ?> -
2. Open a new document in Flash and drag the following components to the stage: -XMLConnector -Button -TextInput
3. Position them on the stage so it looks like Image III. Select the XMLConnector and open up the Component Inspector (if it is not visible, select it [see Image IV]).
4. The XMLConnector contains several properties; use the settings shown in Image V.
5. The key when using an XMLConnector is defining a schema of your XML file. Flash can help you with that, by analyzing an imported XML file (see Image VI).
6. Select the "index.xml" file and Flash automatically shows you a schematic overview of the structure of the XML file (see Image VII).
7. Now in the Bindings panel we can add a binding by clicking on the + symbol.
8. Select the title node and click OK.
9. We want to send the data from the XMLConnector to UI control, so we select "out". operaimage IX image VIII
10. Now you can bind the "title"node to the TextInput field.
11. Notice that Flash gives a warning when you don't give your component an instance name (see Image VIII).
12. The only thing that needs to be done is triggering the XMLConnector. Select the Button and open the Behaviors panel (see Image IX).
13. Choose Trigger Data Source and select your XMLConnector.
14. Test the movie... and you have made your first application, which accesses an external XML file and copies the value of the title node into the TextInput field with no scripting at all! (See Image X).

Custom Formatter and Web Services: Formatting Output from a SOAP Response
In our first example, we learned how to work with the XMLConnector and binding data from our Connector to a User-Interface control. Let's take it a step further! I will show you how to use a Web service in Flash MX 2004 Professional and how to format the response returned by the Web service.

1. We're going to use the "Global Weather"Web service by WebserviceX.NET (www.webservicex.net).
2. Open a new Flash Document and drag a WebService Connector to the stage.
3. Open up the Component Inspector and use the following value for the WSDLURL property: http://www.webservicex. net/globalweather.asmx?WSDL. Flash will automatically find the operaimage tions you can use. Select "GetWeather" from the dropdown shown in Image XI.
4. If you open the Schema tab, you will see a visual representation of the Web service, which parameters it requires, and what is returned (see Image XII).
5. It's time to add the UI controls to our application - drag the following components on stage and lay them out like this
   • a. TextInput named CityName. Set the text value to "Amsterdam".
   • b. TextInput named CountryName. Set the text value to "Netherlands".
   • c. Textarea named Results.
   • d. Button. Set the label value to "Get Weather".
6. The result should look something like Image XIII.
7. Bind the various properties of the Web service to our controls:
   • e. The parameter CityName should be bound to the TextInput named CityName.
   • f. The parameter CountryName should be bound to the TextInput component named CountryName.
   • g. The results should be bound to our Result TextArea.
8. Finally, trigger the WebService- Connector with a click of the button, using the behavior "Trigger Data Source".
9. If we test our movie we get the result shown in Image XIV.
10. Hey! Look what happened….We get an XML-formatted string back. That's not what you want, is it? Fortunately, there is a solution.
11. If you go back to the Bindings panel and select the Result binding, you should see a Formatter option.
12. From the numerous options, you can choose a Custom Formatter to forimage mat the return value from the Web service. A Custom Formatter accepts an Actionscript class.
13. This class extends from mx.data.binding.CustomFormatter and needs to implement two methods: -format -unformat
14. If you go back to step 9, note that the Web service returned an XML-formatted document that when saved as a file has the structure shown in Code I.
15. Code II formats this XML document and returns the values of the nodes in a formatted string.
16. If you save this file as "Weather Formatter.as" in the same directory, all you need to do is use it in the Custom Formatter (see Image XV).
17. Now if you test the movie again, you will see a nice formatted result instead of an XML document (see Image XVI).

Conclusion
Macromedia Flash MX 2004 Professional adds an easy and simple workflow for developers to access external data resources and perform basic data operations on it. For beginners it makes it easy to create simple RIAs with little scripting, while the heavy ActionScripters among us can really customize input/output with the Formatters and Encoders.