Create a new ActionScript 2.0 FLA file, and then save it as XMLConnector.fla. In the Timeline, rename the default layer to scripts, and then add a new layer named components.

Open the Components panel. With the components layer selected, drag a copy of the XMLConnector component to the stage. It doesn’t matter where you position this component, because, like all data components, it becomes invisible at runtime. Select the XMLConnector component, and then use the Property inspector to give it the instance name xmlConn.

Drag a copy of the ComboBox and TextInput components to the stage. Give the ComboBox component the instance name myComboBox, and the TextInput component the instance name myTextInput.

Create a new XML document in the same folder as XMLConnector.fla, and then save the new document as cds.xml (this is the same file used in Chapter 1, so you may copy that one, if you like). The contents of this XML file should read as follows:

<?xml version="1.0" encoding="iso-8859-1"?>
<library>
    <artist name="The Beatles">
        <album name="Abbey Road">
            <track title="Come Together" />
            <track title="Something" />
            <track title="Maxwell's Silver Hammer" />
            <track title="Oh! Darling" />
            <track title="Octopus's Garden" />
            <track title="I Want You (She's So Heavy)" />
            <track title="Here Comes the Sun" />
            <track title="Because" />
            <track title="You Never Give Me Your Money" />
            <track title="Sun King" />
            <track title="Mean Mr. Mustard" />
            <track title="Polythene Pam" />
            <track title="She Came in Through the Bathroom Window" />
            <track title="Golden Slumbers" />
            <track title="Carry That Weight" />
            <track title="The End" />
            <track title="Her Majesty" />
        </album>
    </artist>
</library>

Select xmlConn, and then open the Component Inspector panel (Window→Component Inspector). Select the Parameters tab, and then enter cds.xml as the value of the URL parameter. Set the direction parameter to receive, as shown in Figure 10-1. This associates the XMLConnector component with the cds.xml document.

Figure 10-1. Configuring the XMLConnector component

Select the Component Inspector panel’s Schema tab. Select the existing results schema, and then click the far right arrow button to browse for the cds.xml document (Figure 10-2).

Figure 10-2. Establishing the XML for the results schema

When the XML document is displayed in the Schema tab, notice the results→library→artist→album→track node, as shown in Figure 10-3. This node represents the numerous <track> elements of the XML document, which are going to be displayed by the ComboBox component.

Figure 10-3. Selecting the <track> elements of the XML document

Select the myComboBox instance. In the Component Inspector panel, select the Bindings tab, and then click the button to add a binding. This opens the Add Binding dialog box. Select dataProvider, and then click OK to close the dialog box. In the Bindings tab, double-click the bound to parameter to open the Bound To dialog box.

In the Bound To dialog box, as shown in Figure 10-4, select XMLConnector, <xmlConn> on the left (this is the xmlConn instance) and the deeply nested track node on the right, as noted in Step 7. Click OK to close the dialog box. This action automatically adds the DataBindingClasses component to the library.

At this point, the myComboBox instance is associated with the <track> elements of the XML document, thanks to the XMLConnector component. Now you just need a trigger. Select frame 1 of the scripts layer, and then open the Actions panel. Type the following ActionScript:

xmlConn.trigger();

Select Control→Test Movie to confirm that the ComboBox component displays the names of the tracks from The Beatles’ Abbey Road album (Figure 10-5).

To demonstrate data binding between the ComboBox and TextInput components, close the SWF file, and then continue with a few additional steps. Select the myTextInput instance, and then return to the Component Inspector panel’s Bindings tab. Click the button to open the Add Binding dialog box. You see one choice for text, which refers to the TextInput.text property of the component (the text it displays). Select the text binding, then click OK to close the dialog box.

In the Bindings tab, double-click the bound to parameter to open the Bound To dialog box. As shown in Figure 10-6, select ComboBox, <myComboBox> on the left, and selectedItem on the right, which refers to the ComboBox.selectedItem property of the myComboBox instance.

Turn on the “Use path expression” checkbox, and then enter the expression title, as shown in Figure 10-6. This associates the title property of the currently selected item in the ComboBox—namely, a <track> element’s title attribute—with the TextInput.text property of the myTextInput instance. Click OK to close the dialog box.

Select Control→Test Movie to confirm that the TextInput component updates automatically to display the current value of the ComboBox component.

Create a new ActionScript 3.0 FLA file, and then name it XMLConnectorMimic.fla. Rename the default layer in the Timeline to scripts, and then add a new layer named components.

With the components layer selected, open the Components panel, and then drag a copy of the ComboBox and TextInput components to the stage. Give the ComboBox component the instance name myComboBox, and the TextInput component the instance name myTextInput.

Select frame 1 of the scripts layer, and then open the Actions panel. Enter the following code:

var myXML:XML = new XML();
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("cds.xml"));
xmlLoader.addEventListener(Event.COMPLETE, completeHandler);

function completeHandler(evt:Event):void {
    myXML = XML(evt.target.data);
    var len:int = myXML..track.length();
    for (var i:int = 0; i < len; i++) {
        myComboBox.addItem({label:myXML..track[i].@title});
    }
    myComboBox.addEventListener(Event.CHANGE, changeHandler);
}

function changeHandler(evt:Event):void {
    myTextInput.text = myComboBox.selectedLabel;
}

In the first four lines, the variable myXML is declared and set to an instance of the XML class. Another variable, xmlLoader, is set to a URLLoader instance and used to request the cds.xml document. Finally, the Event.COMPLETE event, which indicates that the XML document has loaded, is associated with a custom completeHandler() function.

The completeHandler() function parses the XML document, and routes its contents to the myXML instance. Using ECMAScript for XML (E4X) syntax, the remainder of this function uses a for loop to repeatedly invoke ComboBox.addItem() on the myComboBox instance in order to supply it with labels. Finally, the Event.CHANGE event constant is associated with a custom changeHandler() function, which updates the TextInput.text property of the myTextInput instance.

Select Control→Test Movie to confirm that the ComboBox component correctly displays track information that the TextInput component updates automatically to display the current value of the ComboBox component. Compare the ActionScript 2.0 and 3.0 SWF files for this exercise, and you’ll see that the ActionScript 3.0 SWF file weighs less than half of its companion’s file size.

Create a new ActionScript 2.0 FLA file, and then name it WebServiceComponent.fla. In the Timeline, rename the default layer to scripts, and create a new layer named component.

With the component layer selected, open the Components panel, and then drag a copy of the WebServiceConnector component to the stage. Use the Property inspector to give the component the instance name wsConn.

Open the Web Services panel (Window→Other Panels→Web Services). Unfortunately, this panel is active only in ActionScript 2.0 documents, but it provides a handy way to check what methods are available from any number of Web services, in addition to what parameters those methods expect. Click the Define Web services button (a blue globe) to open the Define Web Services dialog box. In this dialog box, click the button to add a new Web service URL. Enter http://www.w3schools.com/webservices/tempconvert.asmx?WSDL, and then click the OK button to close the dialog box. This action updates the Web Services panel (Figure 10-7) to show the name of a particular Web service provided by http://w3schools.com, TempConvert, which features two methods. Open the params node beneath FahrenheitToCelsius() to see that a single string parameter is expected: a value in Fahrenheit, to be converted to Celsius.

With the WebServiceConnector component selected, open the Component Inspector panel, and then set the WSDLURL parameter to http://www.w3schools.com/webservices/tempconvert.asmx?WSDL, the operation parameter to FahrenheitToCelsius, and the other two parameters to true (Figure 10-8). This action prepares the wsConn instance to use the FahrenheitToCelsius() method of the TempConvertWeb service.

Select frame 1 of the scripts layer, and then open the Actions panel. Type the following ActionScript:

wsConn.addEventListener("result", resultHandler);
wsConn.params = ["451"];
wsConn.trigger();

function resultHandler(evt:Object):Void {
    trace(evt.target.results);
};

This associates the WebServiceConnector.result event with a custom resultHandler() function that traces the value returned by the Web service. The WebServiceConnector.params property of the wsConn instance is set to an Array instance (the square brackets, [], are a shorthand for the expression new Array()). In honor of Ray Bradbury’s novel Fahrenheit 451, the string "451" is provided as the sole value of the params array. Some methods receive numerous parameters, would be added in a comma-delimited list. Finally, the WebServiceConnector.trigger() method nudges the wsConn instance into action.

Select Control→Test Movie to confirm that the value 232.777777777778 (the Celsius value for 451 degrees Fahrenheit) appears in the Output panel. In the menu bar of the SWF file, select View→Bandwidth Profiler to see that the file weighs 40KB.

Create a new ActionScript 3.0 FLA file, and then name it WebServiceExtension.fla. Rename the default layer in the Timeline to scripts.

Open the Components panel and note that a new folder, named wellconsidered, is now available. Open this new folder, and then drag a copy of the Operation, OperationEvent, and WebService components to the library. These provide a virtual be.wellconsidered.services package for three classes corresponding to the three components in the library. These classes will be referenced in the ActionScript in Step 3.

Select frame 1 of the scripts layer, and then open the Actions panel. Type the following code:

import be.wellconsidered.services.WebService;
import be.wellconsidered.services.Operation;
import be.wellconsidered.services.events.OperationEvent;

var ws:WebService = new WebService("http://www.w3schools.com/¬
     webservices/tempconvert.asmx?WSDL");

var op:Operation = new Operation(ws);
op.FahrenheitToCelsius("451");

op.addEventListener(OperationEvent.COMPLETE, completeHandler);
function completeHandler(evt:OperationEvent):void {
    trace(evt.data);
}

op.addEventListener(OperationEvent.FAILED, failedHandler);
function failedHandler(evt:OperationEvent):void {
    trace(evt.data);
}

After the required classes are imported, a ws variable is declared and set to an instance of the custom WebService class, which is fed the URL of the TempConvert Web service as a parameter. An op variable is set to an instance of the custom Operation class, which is associated with the ws instance. The remote FahrenheitToCelsius() method is invoked on the op instance, and passed in the string "451" parameter.

Finally, two events are associated with respective custom functions: the OperationEvent.COMPLETE event is triggered when the Operation instance receives data from the Web service, in which case the value 232.777777777778 is sent to the Output panel; if the Web service is unavailable, or some other error occurs, then the OperationEvent.FAILED event may be handled to gracefully deal with the situation.

Select Control→Text Movie to verify that the Web service communication succeeds. In the file menu of the SWF file, select View→Bandwidth Profiler to see that the file weighs a mere 6KB.

Download the ASTRA component set from http://developer.yahoo.com/flash/astra-flash/. When the download completes, unpack the ZIP archive, and then double-click the Astra.mxp file to open it in the Adobe Extension Manager. Follow the steps described for installing Pieter Michels’ WebService component extension earlier in this chapter (see the Recreating a WebServiceConnector Scenario in ActionScript 3.0). Shut down the Flash authoring tool, and then launch it again so that the extension is activated at startup.

Create a new ActionScript 3.0 FLA file, and then open the Components panel. Drag a copy of the TabBar component from the Yahoo! folder to the stage. Use the Property inspector to give this component the instance name myTabBar.

Select the myTabBar instance. In the Component Inspector panel, double-click to configure the dataProvider parameter. In the Values dialog box that opens, click the button to add a new entry. In the new entry, change the label field to Home, and the data field to home. Add a second new entry. In the second new entry, change the label field to About Us, and the data field to about us. Create a third new entry. In the third new entry, change the label field to Contact Us, and the data field to contact us. Set the autoSizeTabsToTextWidth parameter to true to ensure that the labels expand to fit their content.

In the Timeline, select frame 1, and then open the Actions panel. Enter the following code:

import com.yahoo.astra.fl.events.TabBarEvent;

myTabBar.addEventListener(TabBarEvent.ITEM_CLICK, clickHandler);

function clickHandler(evt:TabBarEvent):void {
    trace(evt.item.data);
}

Here, an import directive makes the TabBarEvent class available to this frame script. The myTabBar component instance is referenced by instance name and associated with a custom clickHandler() function to handle the TabBarEvent.ITEM_CLICK event. Inside the clickHandler() function, a trace() function references the data property of the currently selected tab, and sends its value to the Output panel. In actual practice, you might use the expression evt.item.data inside a call to gotoAndPlay(), to send the timeline to a frame label associated with the selected tab.

Select Control→Test Movie to verify that tab selection sends corresponding values to the Output panel.

Create a user account on the Jumpeye Components website. Navigate to the Accordion Panel V3 webpage (http://www.JumpeyeComponents.com/Flash-Components/User-Interface/Accordion-Panel-V3-40/). Click the Add to Shopping Cart button.

On the Shopping Cart page, enter this coupon code into the field titled “Enter your discount coupon number here”:

Click the Check button. This action refreshes the web page to indicate a full discount. Click the Check Out button. Verify your customer information, and then click the Post Your Order button. When the web page refreshes, click the hyperlink that says, “Go to download page.” Download the component.

When the download is complete, unpack the ZIP archive, and then double-click the AccordionPanelV3AS3.mxp file to open it in the Adobe Extension Manager. Follow the steps described for installing Pieter Michels’ WebService component extension earlier in this chapter (see the Recreating a WebServiceConnector Scenario in ActionScript 3.0). Shut down the Flash authoring tool, and then launch it again so that the extension is activated at startup.

Open the accordion_panel.fla file included with the download. Note that a copy of the component already exists on the stage, and has the instance name accordionPanel.

In the Parameters panel, note that the xmlPath parameter already shows the value acc_panel.xml. This parameter points to an XML document included with the other sample files from the ZIP archive. Open the XML document to see its contents:

<?xml version="1.0" encoding="UTF-8"?>
<component name="Accordion Panel v3">
<data childStyle="style1">
<item title="Jumpeye"    contentPath="images/img1.jpg"/>
<item title="Working"    contentPath="images/img2.jpg"/>
<item title="Drawing"    contentPath="images/img3.jpg"/>
<item title="On meeting" contentPath="images/img4.jpg"/>
<item title="Having fun" contentPath="images/img5.jpg"/>
</data>
</component>

These XML nodes give you a straightforward way to let the component know what content to display.

Select Control→Test Movie to verify that clicking on headings displays the corresponding pane.

Delete one of the <item> nodes in the XML document, and then save the file. In the Flash authoring tool, select Control→Test Movie again to verify that the corresponding pane is no longer present.