Flash comes with various components. To provide Rich Internet Applications to developers, Adobe provided developers with greatly advanced tools for video and advanced data components. The Data Connection Kit contains three components—Connector, Dataset, and Resolver. The Connector component is used to connect to and retrieve data from a remote data source, the Dataset component is used to manage the data in Flash, and the Resolver sends the updated data back to the original data source, all with a minimum of programming skills on the part of the designer.
In addition, there is included support for XML and Web Services (WSDL). In fact, any visual component in Flash can be bound to data. Data Binding is a concept where the property of one component can be bound to the property of another component: if the property of the one component changes, so will the property of the other component or components. Flash comes with several Data components such as the DataHolder, the WebServicesConnector, and the XMLConnector. In fact, you can point your browser to www.adobe.com, and then go to the Flash Exchange to download even more components.
The power of a component is its ability to change. Components can be modified directly in the Component Inspector panel, or they can be modified dynamically, as the Flash movie runs. The Component Inspector panel has three areas to modify a component—Parameters, Bindings, and Schema. These three tabs allow you to attach components to data files, change or modify the text on a button, or create drop-down menus and lists. Since components are rooted in ActionScript code, Flash comes with a set of components for ActionScript 2.0 and another one for ActionScript 3.0, and you cannot mix components in the same Flash document.
The DataHolder component (ActionScript 2.0) holds various types of data and lets you generate events based on how the data changes. The main function of the DataHolder component is to hold data and act as a conduit between other components utilizing data binding. You can assign any type of data to a DataHolder property, either by creating a binding between the data and another property, or by using your own ActionScript code. Whenever the value of that data changes, the DataHolder component generates an event with a name equal to the property name. Any bindings associated with that property are executed. You could have a DataHolder that keeps the current system time and has several display fields bound to that information. One of the fields is simply a display of the time in hours, minutes, and seconds, and another field might be a calculated field that displays good morning, afternoon, or evening, depending on the data sent from the DataHolder field. When you create a DataHolder, it comes with one bindable property named data; you can add more properties to create a group of data information fields, which can transmit their data to other components.
Open the Components panel.
Click the Data (2.0) plus (+) sign to expand the list.
Drag the DataHolder component onto the Stage, and then select the component.
Give the DataHolder component a unique name in the Property Inspector.
Click the User Interface plus (+) sign to expand the list.
Drag a DataGrid component onto the Stage, and then select the component.
Give the DataGrid component a unique name in the Property Inspector.
Select the DataHolder component.
Open the Component Inspector panel, and then click the Schema tab.
Click the Add Component Property (+) button located at the top of the Schema tab.
Enter a unique name in the Field Name field.
Select Array from the Data Type popup menu.
Click the Bindings tab in the Component Inspector panel, and then add a binding between the property of the DataHolder component and the data provider property of the DataGrid component.
Click OK.
Select Frame 1 on the Timeline, and then enter the script as shown in the illustration.
Click the Control menu, and then click Test Movie.
See Also
See Chapter 18, “Adding and Modifying Data Components” on page 431 for more information on using Schema and Binding options.
Communication is an important part of our daily life. Think of a society where everyone spoke a different language. While most people that live in a country have a single language to communicate with, the Internet is still struggling with standardizing many of its communication features. However, as communication protocols and message formats become more and more consistent, it is becoming possible to describe the exchanges between two or more computer systems in a structured way. WSDL (Web Services Descriptive Language) addresses this need by defining an underlying XML grammar (a standard communication system) for describing network services as collections of communication standards capable of exchanging messages.
A Flash WSDL compliant document defines Web services to be a collection of network endpoints. This translates into a better system of transferring data between two endpoints, or ports; components therefore are more reliably bound, and can move easier between systems.
The protocol and data format specifications for a particular endpoint become a reusable binding. An endpoint, or port is defined by associating a network address with a reusable binding, and collections of ports define a Web service. Think of the endpoints as the connection between two computers: Two computers connected together by a communications cable. When one computer speaks to the other, Web Services ensures that they are speaking the same language.
Flash WSDL compliant documents use the following elements to define a Web service:
• Types. A container for data type definitions using some type system (such as XSD).
• Message. An abstract, typed definition of the data being communicated.
• Operation. An abstract description of an action supported by the service.
• Port Type. An abstract set of operations supported by one or more endpoints.
• Binding. A concrete protocol and data format specification for a particular port type.
• Port. A single endpoint defined as a combination of a binding and a network address.
• Service. A collection of related endpoints.
While all of this may seem a bit overwhelming, it translates into an easier way to move data between two points. Eventually, transferring information on the Internet will be as easy as talking over the fence to your next-door neighbor. For more information on Web Services, point your browser to http://www.w3c.org, and type in “Web Services” into the search field.
The good news about Web Services is that Adobe Flash takes care of all the hard stuff with the WebServicesConnector component which is detailed in the next section: Using the WebServiceConnector Component.
Extensible Markup Language (XML) is a simple, but very flexible, text information system. Originally designed to meet the challenges of large-scale electronic publishing, XML also plays an important role in the exchange of a wide variety of data on the Web and elsewhere; including Flash documents.
The main difference between XML and HTML is that XML was designed to carry data. XML is not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to describe data and to focus on what data is, and HTML was designed to display data and to focus on how data looks. In other words, HTML is about displaying information, while XML is about describing information. It was created to structure, store and to send information.
The following is an example of XML:
<memo>
<to>Holly</to>
<from>Andy</from>
</description>Reminder</description>
<body>Keep up the great work!</body>
</memo>
The note has a header and a message body. It also contains a sender and receiver. Understand that the XML document doesn’t do anything. It’s simply information wrapped in programmer-defined XML tags. To make all this work, someone must write a piece of software to send, receive or display the information, and that’s where Flash’s XMLConnector component comes into play. XML is simply a cross-platform, software and hardware independent tool for transmitting information.
XML is a tool for transmitting information in a way that all systems can understand. Again, it’s all about communication. When computers were born (followed closely by the birth of the Internet), everyone spoke a different language, and the moving of information was a difficult venture. With the inception of XML and WSDL, all of those communication problems are quickly becoming a thing of the past, and Flash is at the forefront of implementing these new technologies.
The WebServiceConnector component enables you to access remote methods offered by a server using the industry-standard SOAP (Simple Object Access Protocol) protocol. This gives a Web service the ability to accept parameters and return a result back to the generating script. By using the Flash Professional authoring tool and the WebService-Connector component, you can access and bind data between a remote Web service and your Flash application. To save programming time, a single instance of WebServiceConnector component can be used to make multiple calls to the same operation. All you would have to do is to use a different instance of the WebServiceConnector for each different operation you wanted to call. You can use the WebServiceConnector to connect to a Web service, and make the properties of the Web service available for binding to properties of Flash UI components within your application. Think of a Web Service as a database of information, which can be downloaded—using the WebServiceConnector—and then displayed inside a Flash movie. For example, the Virginia Department of Parks and Recreation has a Web service (large database) that contains information in the WSDL format that you can download and display within a Flash document. Since the connection to the service is live, every time the Park Service changes information such as the opening and closing times for the park, the Web Service would send that information to your Flash document (called listening) and automatically update the page.
Click the Window menu, point to Other Panels, and then click Web Services.
Click the Define Web Services button.
Click the Add (+) button to add the path for a Web service WSDL file.
Add a call to a method of the Web service by selecting the method, Control-clicking (Mac) or right-clicking (Win), and then selecting Add Method Call from the context menu.
Click OK.
This will create a WebService-Connector component instance in your application.
Click the Parameters tab in the Component Inspector panel to edit these properties as needed. For example, you can provide additional formatting or validation settings.
Use the Bindings tab in the Component Inspector panel to bind the Web service parameters and the results that are now defined in your schema to UI Components within your application, such as a DataGrid.
Click OK.
Add a trigger to initiate the data binding operation by attaching the trigger to a button.
You can add an ActionScript on the WebServiceConnector component or create a binding between a Web service parameter and a UI control. Set its Kind property to AutoTrigger.
The XMLConnector component (ActionScript 2.0) is designed to read or write XML documents using standard HTTP protocol, get operations or post operations. It acts as the connector between other Flash components and external XML data sources. For example, you could use a DataGrid component to format and display information received from a remote site containing an XML document. Since XML (Extensible Markup Language) is a hardware independent language, it’s easy to work with, and it can be modified to fit a specific purpose. The XMLConnector communicates with components in a Flash application using data binding features, or ActionScript code. It has properties, methods, and events but no runtime visual appearance. In fact, all of Flash’s connector components have no visual presence; they are simply the gateway for passing information from one source to another. The XMLConnector component implements a set of methods, properties, and events that define a simple way to send parameters to, and receive results from an external data source.
Open the Components panel.
Click the Data (2.0) plus (+) sign to expand the list.
Drag the XMLConnector component onto the Stage, and then select the component.
Give the XMLConnector component a unique name in the Property Inspector.
Open the Component Inspector panel, and then click the Parameters tab.
Enter the full path name to the external XML file.
Click the Schema tab, and then specify a schema for the XML document.
The schema tab lets you create fields to format the XML data.
Use the Bindings tab to bind the data elements from the XML document to properties of the visual components in your application.
For example, you can connect to an XML document that provides weather data, and bind the Location and Temperature data elements to Label components in your application, so that the name and temperature of a specified city appears in the application at runtime.
Click OK.
Add a trigger to initiate the data binding operation by attaching the trigger behavior to a button, and then add your own ActionScript.
You can also create a binding between an XML parameter and setting a UI component’s Kind property to AutoTrigger.
Click the Control menu, and then click Test Movie.
The Component Inspector panel represents the focus of control for most of Flash’s components. After you add an instance of a component to a Flash document, you can use the Component Inspector panel to set and view information for the instance. You can drag a component from the Components panel to the Stage, and then give the component a unique instance name, using the Property Inspector.
Once a component and instance name are established, you can use the Component Inspector panel to set and modify parameters for that particular instance. Parameters represent the instance’s appearance and behavior. Parameters that appear in the Component Inspector panel are known as authoring parameters. Authoring parameters represent common things such as the label attached to a Button component, or items displayed when using the MenuBar component. There are other parameters that can be set using ActionScript. In addition, authoring parameters can also be set with ActionScript. If you set a parameter using ActionScript, it will override any value set while authoring. Each Flash component has its own unique set of parameters.
The Component Inspector panel has two additional tabs: Bindings and Schema. The Bindings tab defines a link between two endpoints, a source (external data file, movie clip, graphic) and a destination component (DataGrid, Loader, Label). It listens for changes to the source endpoint and copies the changed data to the destination endpoint each time the source changes. The Schema tab lets you view the schema for the selected component. Schema is basically a list of the component’s binding properties, their data types, their internal structure, and other special attributes, depending on the selected component. This is the information that the Bindings tab needs in order to handle your data correctly. You can drag the DataGrid component onto the Stage, and then use the XMLConnector to pull in data from an external Web site. You can click the Schema tab, define the binding component (DataGrid), and then use the Bindings tab to link the DataGrid component to the external XML file.
Once connected, the XMLConnector would listen for changes to the external XML file, and then pass that information on to the DataGrid component. Since the DataGrid displays visible information in a Flash document, the result would be information that performs live updates to the Flash screen.
After adding an instance of a component to a Flash document, you can name the instance in the Property Inspector, and then specify the parameters for the instance using the fields on the Parameters tab in the Component Inspector panel.
Each component has parameters that you can set to change its appearance and behavior. A parameter is a property or method that appears in the Property Inspector and Component Inspector panel. The most commonly used properties and methods appear as authoring parameters; others can be set using ActionScript. Think of authoring parameters as the most common parameters.
Additions parameters include the ability to change an instance’s font, color, and size. Additional parameters are added by selecting the instance on the Stage and typing the script into the Actions panel. Adding parameters directly to the component instance will only impact the selected instance. If you add the script to Frame 1 in the Timeline, you can create global changes to instance parameters.
To modify the parameters of a component, you must first create an instance of the component. For example, if you want to modify a TextInput field, you would first open the Components panel, and then drag a TextInput component onto the Stage. Next, you would give the component a unique instance name by selecting the component and then entering the name in the Property Inspector. Finally, you would open the Component Inspector panel, click the Parameters tab, and then make the changes. Understand that each component will have its own unique parameters, and changing parameters in the Component Inspector panel only changes the selected instance.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the TextInput component onto the Stage, and then select the component.
Open the Component Inspector panel, and then click the Parameters tab.
Select from the following TextInput parameters:
• editable. When you click the value field and select true, the field can be edited. If you select false, the field can be selected but not edited.
• password. When you click the value field and select true, text entered into the field appears as dots. If you select false, text typed into the field appears as typed.
• text. Click the value field, and then enter the text that will appear in the field when the Flash document opens.
• maxChars. Click the value field, and then enter a numerical value indicating the max characters allowed in the TextInput field.
• restrict. Click the value field, and then enter any characters that cannot be entered into the TextInput field.
• enabled. When you click the value field and select true, the field can be edited. If you select false, the field appears grayed out, and is not selectable or editable.
• visible. When you click the value field and then select true, the field can be viewed. If you select false, the field is invisible.
• minHeight (2.0). Click the value field, and then enter a minimum height for the TextInput box.
• minWidth (2.0). Click the value field, and then enter a minimum width for the TextInput box.
Click the Control Menu, and then click Test Movie.
Data binding is a simple way of connecting Flash components to each other. Components can be viewed as containers that transfer information (images, text, numbers, video, graphics) from one to the other. In the Component Inspector panel, the Bindings tab controls the two containers, so that when property X of component A changes, it will copy the new value to property Y of component B. You can do data binding within the Component Inspector panel using the Bindings tab. The Bindings tab lets you add, view, and remove bindings for the selected component. Although data binding works with any component, its main purpose is to connect Component panel UI components to external data sources such as Web Services and XML documents. These external data sources are available as components with properties, which you can bind to other component properties. The Component Inspector panel is the main tool that is used within Flash for data binding. It contains a Schema tab for defining the schema for a component and a Bindings tab for creating bindings between component properties. The following example demonstrates how to create basic data binding by connecting one UI component to another.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the NumericStepper component onto the Stage, and then select the component.
Give the NumericStepper a unique instance name in the Property Inspector.
Drag a second NumericStepper onto the Stage, and then give it a unique instance name.
Select the first NumericStepper component.
See Also
See Chapter 18 on “Adding and Modifying Data Components” on page 431 for more information on XML and Web Services.
Open the Component Inspector panel, and then click the Bindings tab.
Click the Add Binding (+) button to add a binding.
In the Add Binding dialog box, select Value.
Click OK.
Move to the Name/Value section, located at the bottom of the Bindings tab.
Click the Bound To item under Name, and then click the Magnifying Glass icon.
In the Bound To dialog box, select the NumbericStepper component B.
Click OK.
Click the Control menu, and then click Test Movie.
When you click the up and down buttons on the first NumericStepper, the value changes automatically in the second NumericStepper.
Once you create a binding between two components or between a component, such as a DataGrid, and an external file, you can control the binding through the binding options. For example, you may not want the exchange of data either way, or you may wish to control what type of data is entered or received. The Binding options, located on the Bindings tab, give you several author-controllable options.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the NumericStepper component onto the Stage, and then select the component.
Give the NumericStepper a unique instance name in the Property Inspector.
Drag a TextInput component onto the Stage, and then give it a unique instance name.
Select the NumericStepper component.
Open the Component Inspector panel, and then click the Bindings tab.
Click the Add Binding (+) button to add a binding.
In the Add Binding dialog box, select Value.
Click OK.
Move to the Name/Value section, located at the bottom of the Bindings tab.
Click the Bound To item under Name, and then click the Magnifying Glass icon.
In the Bound To dialog box, select the TextInput component.
Click OK.
Click the Control menu, and then click Test Movie.
If you click the up and down arrows on the NumericStepper, the value in the TextInput field changes. If you enter a value into the TextInput field and press Return or Tab, the value in the NumericStepper changes.
Close the Flash movie, and then select the NumericStepper.
Select Value at the top of the Component Inspector panel, click the Direction option, and then change the value from in/out to out.
Click the Control menu, and then click Test Movie.
If you click the up and down arrows on the NumericStepper, the value in the TextInput field changes. If you enter a value into the TextInput field and press Return or Tab, the value in the NumericStepper no longer changes.
The Schema tab in the Component Inspector panel lets you view the schema for a selected component. The schema tab contains a list of what are known as a component’s bindable properties, along with data types, internal structure, and special attributes.
The Bindings tab uses this information to handle data correctly. The top portion of the Schema tab displays bindable properties associated with the selected component. The bottom portion of the Schema tab, displays detailed information about the selected schema item (selected from the top portion of the Schema tab).
A component’s schema describes the structure and type of data, independent of exactly how the data is stored. For example, the Schema tab identifies data, but not if the data is stored using XML objects, or possibly ActionScript code.
Schemas are important because they help create a communication link between other components, using the Bindings tab. For example, you can use the XMLConnector and DataGrid components to pull data from an XML document, and then display that information on the Stage. The XMLConnector provides the communication link to the external data file, and the DataGrid provides you with an easy way to organize and display the information, but not until you define the data using the Schema tab, and then bind the XMLConnector to the DataGrid using the Bindings tab.
A component’s schema simply represents the properties and fields that are available for data binding. Each property or field contains settings that control validation, formatting, type conversion, and other features that affect how data binding and the data management components handle the data of a field. The bottom pane of the Schema tab presents these settings, and gives you the ability to view or edit them.
To modify the schema of a component, you must first select an instance of the component. For example, if you want to modify the schema of a DataGrid component panel, you first select the component, open the Component Inspector panel, click the Schema tab, and then make the changes. Each component has its own unique schema, and changing parameters in the Component Inspector panel only changes the selected instance.
Select a unique instance of a component on the Stage.
Open the Component Inspector panel.
Click the Schema tab.
Click the Add A Component Property (+) button to add additional fields to the schema list.
Click the Add A Field Under The Selected Field (+) button to add an additional field that’s nested within the selected field.
Click the Delete The Selected Field Or Property (-) button to remove the selected field or property from the schema.
Select an item in the upper portion of the Schema tab, and then modify its options in the lower portion of the Schema tab.
Did You Know?
The Schema tab displays data based on the selected component. Although all components have properties, by default, the Schema tab only displays properties that contain dynamic data. Dynamic data properties are called bindable properties. Flash lets you bind to any property by adding it to the schema panel yourself (using the Add Field (+) button), or using ActionScript code.
You can write ActionScript code to change the properties for any Flash component instance. For example, you can change the color of text of a label instance named myLabel using the following code:
myLabel.setStyle("color", "0x990000")
The preceding code would instruct Flash to change the color of the text used in the Label component instance named myLabel to red. Changes to the properties of a component can be attached to the instance on the Stage (influences only the one instance), or they can be used to globally change all instances, by placing the script in Frame 1 on the Timeline.
