AdvancED Flex 4

CHAPTER 10

346

Data Interconnectivity

Now that you have connected to data sources to send and retrieve data, the next step is interconnectivity.

This is the process of placing the data into a data model, preparing the data for display, and attaching the

data into a user interface.

When building a mashup, you retrieve information through a UI from the user. You then may need to

validate the information, format it, create a data model, and send the request to a data source (see Figure

10-22).

Figure 10-22. Reading data, interconnectivity, and sending results to a UI

Similarly, once you retrieve information from a data source, you may need to validate the information,

format it, create a data model, and display the results back in a UI (see Figure 10-23).

Figure 10-23. Getting information from the user, interconnectivity, and sending results to a data source

Keep in mind that following all these steps is not always necessary, since there may be times when you

don’t need to validate or format the information.

Data Model

The most popular three ways to deal with data model is either to create a data model using the data model

tag in MXML, create a data model object that can be used in MVC (Model, View, controller) enterprise

Microarcitecture frameworks, or just place the model into a data provider such as ArrayCollection data

type or DataProvider tag.

A data model is an abstract model to describe the data properties and how to access it.

Advantages of creating data mode object are the follwing:

• A data model object contains properties for storing data and optional helpers’ methods for

additional functionality.

• Creating a data model allows you to bind a user interface data into a data model or you can

bind data from service directly to a data model.

You can define a simple data model in an MXML tag. When you need manipulation, use AS3 Value Object

(VO) data model.

FLEX MASHUPS

347

Let’s create two data models: one is using the MXML tag and the other one as a VO.

Creating Data Model Using the fx:Model and fx:XML Tags

Two helpful tags are the fx:Model and the fx:XML tag. These tags are compiler tags. See the the

following example:

<fx:Model id="infoVO">

<root>

<fullName>John Doe</fullName>

<email>[e-mail]</email>

<phone>212-222-2222</phone>

<zip>10001</zip>

</root>

</fx:Model>

MXML is a declarative languge and forming the model is very similar to XML as you can see.

Create a new project and call it DataModel. Take a look at the following two examples, one creates the

properties inside the Model tag and one attaches to a source XML file. Run the examples in debug mode

to see the results of the trace statements in the console window. The expected results in the console are

as follows:

infoVO full name property: John Doe

info2VO full name property: John Doe

In the DataModel.mxml, write the following complete code:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="1024" minHeight="768"

creationComplete="creationCompleteHandler(event)">

<fx:Script>

<![CDATA[

import mx.events.FlexEvent;

protected function creationCompleteHandler(event:FlexEvent):void

{

trace("infoVO full name property: "+this.infoVO.fullName);

trace("info2VO full name property: "+this.info2VO.fullName);

}

]]>

</fx:Script>

<fx:Declarations>

<fx:Model id="infoVO">

<root>

<fullName>John Doe</fullName>

<email>[e-mail]</email>

<phone>212-222-2222</phone>

<zip>10001</zip>