Working with Data

Prof Rama Satish K.V.

RNSIT, Bangalore
 Introduction
When working with data, you generally want to store it in
some sort of data repository within memory. These
repositories are known as data models.
In the first section of this chapter, well look at each of
the three basic ways to store data in data models.
You can use ActionScript for all your data management
needs, but then youre not really using the power of the
Flex framework. To simplify linking data from a data
model to a control or from one control to another control
or component, you can use a powerful feature called
data binding.
Once you know the basics of working with data in a Flex
application, youll have a foundation for sending and
receiving data.
 Using Data Models
You can work with data in many ways in Flex
applications, including as low-level ActionScript
solutions and high-level MXML solutions;
This section looks at both techniques. You can
use these data models as a repository for data
retrieved from a remote procedure call (RPC)
such as a web service method call.
You can also use a data model to store user
input data before sending it to the server.
You can even use a data model simply as a
mechanism for populating form input, such as a
combo box.
 Using the Model Tag
The <mx:Model> tag allows you to create
an object that represents a data structure
using MXML. To use the tag practically,
you must always specify an id attribute.
Once youve created a model this way,
you can do one of two things:
Create a data structure using tags.
Specify a source attribute to populate the
model from a file.
Referencing model data
Using XMLs
Using Remote object
 Using http services
SEND.mxml
Send.php
 Data Binding
Flex applications typically utilize lots of data retrieved
from both RPCs (server-side method calls) and user
input collected in forms.
One way you can work with data is to use extensive
ActionScript. ActionScript provides low-level access to all
the data in your Flex application.
Yet the ActionScript code can be redundant, and it can
be time-consuming to write.
Although extensive ActionScript may be necessary in
some cases, the Flex framework provides a feature
called data binding that simplifies working with data in
most cases.
 Purpose of Data binding
Data binding lets you associate data from
one object with another.
There are lots of ways to use data binding.
The following examples list a few of the
most common uses for data binding:
Link form input controls (text inputs,
checkboxes, etc.) with data models.
Link two or more controls (e.g., display a slider
value in a text component).
Understanding Data Binding Syntax
There are three ways to apply data
binding:
Curly brace ({}) syntax
<mx:Binding>
BindingUtils
Each technique for applying data binding
has advantages and disadvantages, which
well discuss in the next few sections.
Curly braces
TextInput and Textarea Binding
(12-3)
 <mx:Binding>
The <mx:Binding> tag allows you to do exactly
the same things as curly brace syntax, but with
MXML tags rather than inline expressions. The
<mx:Binding> tag requires the following
attributes:
source
The origin of the data you want to link
destination
The point which you want notified when the value
changes from the source
Prog12-2
Prog12-2
Prog12-3
 BindingUtils
In most cases, you should use curly brace or
<mx:Binding> syntax for data binding.
However, neither technique allows you to
dynamically configure data binding at runtime.
The mx.binding.utils.BindingUtils class has a
static method called bindProperty( ) that allows
you to configure data binding from ActionScript.
This ActionScript solution provides the most
flexibility and the lowest-level access to data
binding of all the techniques.
 BindingUtils.bindProperty( )
The syntax for the bindProperty( ) method
is as follows:
BindingUtils.bindProperty(destinationObje
ct, destinationProperty, sourceObject,
sourceProperty);
Prog12-4
 ChangeWatcher object
Using a ChangeWatcher object, you can disable
data binding or change the source point.
You can stop a data binding association
between two points by calling the unwatch( )
method of the ChangeWatcher object.
Prg12-5
 Enabling Data Binding for Custom Classes

Data binding is enabled for some types of objects

by default, but it wont work for instances of
custom classes by default.
You must enable data binding with the [Bindable]
metatag.
The [Bindable] metatag tells the Flex compiler to
configure whatever it precedes so that it works
with data binding.
You can use [Bindable] with the following:
A class
A property
An implicit getter method
An implicit setter method
Examples
 Customizing Data Binding
Data binding works by dispatching events using the
standard Flash Player event model.
If you were to look at the generated ActionScript for an
application that uses data binding, you would see that
classes with bindable properties dispatch events, and where
MXML uses data binding syntax, the generated ActionScript
class registers event listeners.
When you use the [Bindable] tag, the default event type that
gets dispatched is propertyChange.
Data Binding Examples
Controlling Images
 Building Data Binding Proxies
Some types of objects and some elements in Flex
applications cannot use data binding directly.
For example, you cannot use data binding directly with
component styles.
Yet you can build an elegant solution that uses something
called delegation.
Delegation is what occurs when a class called a proxy
wraps an object, and it passes along requests to the
object it wraps.
The goal of delegation may be different in different
scenarios, but in this case, the goal is to provide a layer
of indirection so that the data binding-enabled proxy can
accept requests in place of the object that cannot accept
those requests.
Example