You work with data in Flex Builder by directly modifying your MXML and ActionScript application code.

Data-driven controls and containers

Flex provides control and container components from which you build your Flex application user interface. A number of these components present data, which users can select and interact with when using the application. Here are a few examples of how data-driven controls are used:

• On an address form, you can provide a way for users to select their home country (or other typical form input) by using the ComboBox or List controls.
• In a shopping cart application, you can use the TileList or HorizontalList controls to present product data that includes images.
• You can provide standard navigation options by using containers such as the TabBar, LinkBar, and ButtonBar controls.

You provide data input to all of the data-driven controls with a data provider.

For information about using the data-driven controls, see Using Data-Driven Controls in the Adobe Flex 3 Developer Guide.

Data providers and collections

A collection object contains a data object, such as an Array or an XMList object, and provides a set of methods that let you access, sort, filter, and modify the data items in that data object. Several Adobe Flex controls, known as data provider controls, have a dataProvider property that you populate with a collection.

The following simple example shows how a data provider is defined (as an ActionScript ArrayCollection) and used by a control:

<?xml version="1.0"?>
<!-- dpcontrols\ArrayCollectionInAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initData()">
    <mx:Script>
        <![CDATA[
            import mx.collections.*;
            [Bindable]
            public var stateArray:ArrayCollection;
            
            public function initData():void {
                stateArray=new ArrayCollection(
                [{label:"AL", data:"Montgomery"},
                {label:"AK", data:"Juneau"},
                {label:"AR", data:"Little Rock"}]);
            }
        ]]>
    </mx:Script>

    <mx:ComboBox id="myComboBox" dataProvider="{stateArray}"/>
</mx:Application>

For more information about data providers and collections, see Using Data Providers and Collections in the Adobe Flex 3 Developer Guide.

Remote data access

Flex contains data access components that are based on a service-oriented architecture (SOA). These components use remote procedure calls to interact with server environments, such as PHP, Adobe ColdFusion, and Microsoft ASP.NET, to provide data to Flex applications and send data to back-end data sources.

Depending on the type of interfaces you have to a particular server-side application, you can connect to a Flex application by using one of the following methods:

• HTTP GET or POST by using the HTTPService component
• SOAP-compliant web services by using the WebService component
• Adobe Action Message Format (AMF) remoting services by using the RemoteObject component

You can also use Flex Builder to build applications that use LiveCycle Data Services ES, a separate product that provides advanced data service features. LiveCycle Data Services ES provides proxying for remote procedure call (RPC) service applications as well as advanced security configuration. LiveCycle Data Services ES also provides the following data services:

Data Management Service 

Allows you to create applications that work with distributed data and also to manage large collections of data and nested data relationships, such as one-to-one and one-to-many relationships.

Message Service 

Allows you to create applications that can send messages to and receive messages from other applications, including Flex applications and Java Message Service (JMS) applications.

Flex Builder provides a set of data wizards that automatically generate database applications that use PHP, J2EE, or ASP.NET. For more information, see Automatically generating database applications.

Data binding

In the code example in Data providers and collections, you may have noticed that the value of the ComboBox control's dataProvider property is "{stateArray}". This is an example of data binding.

Data binding copies the value of an object (the source) to another object (the destination). After an object is bound to another object, changes made to the source are automatically reflected in the destination.

The following example binds the text property of a TextInput control (the source) to the text property of a Label control (the destination), so that text entered in the TextInput control is displayed by the Label control:

<mx:TextInput id="LNameInput"></mx:TextInput>
...
<mx:Label text="{LNameInput.text}"></mx:Label>

To bind data from one object to another, you use either the curly braces ({ }) syntax (as shown in the example) or the <mx:Binding> tag. For more information, see Using data binding with data models and Binding Data in the Adobe Flex 3 Developer Guide.

Data models

A data model is an object that you can use to temporarily store data in memory so that it can be easily manipulated. You can define a data model in ActionScript, in MXML by using a tag such as <mx:Model>, or by using any object that contains properties. As an example, the following data model shows information such as a person's name, age, and phone number:

<mx:Model id="Employee">
<Employee>
    <name>
        <first>Jennifer</first>
        <last>Nadeau</last>
    </name>
    <age>30</age>
    <work_tel>555-555-5555</work_tel>
</Employee>
</mx:Model>

The fields of a data model can contain static data (as in the example), or you can use data binding to pass data to and from the data model.

You can also define the data model within an XML file. You then reference the XML file through the file system or through a URL by using the <mx:Model> tag's source property, as the following example shows:

<mx:Model source="content.xml" id="Contacts"/>
<mx:Model source="http://www.somesite.com/companyinfo.xml" id="myCompany"/>

For more information about data models, see Storing Data in the Adobe Flex 3 Developer Guide.

Data validation

You use data validation to ensure that the data the user enters into your application is valid. For example, if you want the user to enter a valid ZIP code you use a ZIP code data validator.

Flex provides predefined data validators for the following types of data: credit card, currency, date, e-mail, number, phone number, regular expression, social security, string, and ZIP code.

Data validators are nonvisual Flex components, which means that you do not access them from the Components panel. Instead, you work with them in code, as the following MXML example shows:

<!-- Define the ZipCodeValidator. -->
<mx:ZipCodeValidator id="zcV" source="{zipcodeInput}" property="text"/>
<!-- Define the TextInput control for entering the zip code. -->
<mx:TextInput id="zipcodeInput"/>

In this MXML example, the validator is defined with the appropriate MXML tag, and it is bound to the ID property of a TextInput control. At run time, when the user enters the phone number into the TextInput control, the number is immediately validated.

You can, of course, use data validators in ActionScript by defining a variable as an instance of a validator class and then creating a function to bind it to the input control.

Data validators are often used with data models. For more information, see Validating Data in the Adobe Flex 3 Developer Guide.

Data formatting

To display the proper format of certain types of data in your application, you use a data formatter. Flex provides predefined data formatters for the following types of data: currency, date, number, phone, and ZIP code.

Data formatters are bound to input controls, and they format data correctly after the user enters it. For example, a user might enter a date in this format:

120105

Bound to the text input control is a data formatter that stores and displays the date in this format:

12/01/05

As with data validators, data formatters are nonvisual Flex components that you can work with either as MXML tags or as ActionScript classes.

For more information, see Formatting Data in the Adobe Flex 3 Developer Guide.