Creating a Simple RIA Tutorial

Watch the video version of this tutorial. User

rating
Application Overview
?
• 1
• 2
• 3
• 4
• 5

Learn more

• Using Layout
Containers
• Getting the
Most Out of
the Flex
Builder
Design View
• Flex
3:Feature
Introductions
• Flex Quick
Starts:
Handling data
• Flex over
XML/XSL
• Flex Quick
Starts:
Building an
advanced
user interface
• Flex Quick
Starts:
 Building
custom
components
• Flex Quick
Starts:
Handling data

Show / Hide
hints for:

•
Create a new Flex application project named
FlickrRIA
1. In the Flex Builder IDE, select File > New > Flex
Project and name the project "FlickrRIA".
2. Accept the default location for the project and confirm
that the Application Type is Web Application and that
the Server Technology is set to None.
3. Click Finish to create the project.
The FlickrRIA.mxml application file opens in the MXML
editor. The editor is in Source mode.
 Format the Display
1. In the opening Application tag, delete the code
layout="absolute".
2. For the Application tag, add the
backgroundGradientColors attribute with the value of
[0xFFFFFF, 0xAAAAAA], the horizontalAlign attribute
with the value of left, the verticalGap attribute with the
value of 15, and the horizontalGap attribute with the
value of 15.
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"

backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
horizontalAlign="left"
verticalGap="15" horizontalGap="15" >

Workin
Use Design mode to lay out the search form
g with
1. Click the Design button to change to the Flickr
Design mode. Using the Design mode is the
easiest way to layout a form in Flex Builder. • When
workin
g with
Flickr,
be
sure
to
check
out
2. From the Components view, drag an HBox the
component from the Layout folder to the design Comm
area. Keep the default values of the component. unity
The HBox component contains the label, input Guideli
 field, and button for the form and displays them nes
horizontally. • And

Note: The blue lines that appear in the design the

area help you position the component. When you API
release the component in the design area, it snaps Terms
into position. of Use

LEARN
MORE

Flex
•
Builde
r is an
Integr
ated
Develo
pment
Enviro
nment
(IDE).
• The
IDE is
built
on
Eclipse
.
• Use
3. Drag the Label component from the Controls Flex
folder to the HBox component. Builde
r to
create
SWF
files.
• What
is a
SWF?
• What
 are all
those
files in
the
Naviga
tor?
• Where
does
Flex
Builde
r save
my
projec
ts?
• Is it
OK to
leave
projec
ts
open
4. To change the default appearance of the Label in the
component, double-click the Label component Naviga
and enter Flickr tags or search terms. tor?
• Notice
the
XML
design
ator.
5. Drag the TextInput component from the • Use
Controls folder to the position following the Label MXMLt
component in the HBox. The TextInput component o
provides the user with a space to input search declar
terms. e or
create
instan
ces of
Flex
6. Drag a Button component from the Controls
Action
 Script
folder to the position following the TextInput
Class
component in the HBox component.
compo
7. Double-click the Button component and enter nents.
Search to change the default appearance.
ASP
Create the HTTPService object
• MXML
1. Change to the Source mode. files
are
[rough
ly
equiva
2. Use the HTTPService component to call the lent to
Flickr service and return the results. After the .aspx
opening Application tag and before the HBox files.]
component, create an HTTPService component.
It does not have a closing tag. To the HTTPService Key
component, add the id attribute with a value of Concep
photoService, the url attribute with the value of t:
[http://api.flickr.com/services/feeds/photo Designi
s_public.gne], and the result attribute with the ng a UI
value of photoHandler(event). The Layout
photoHandler event packages the service results.
• Try
We create the {{photoHandler}} function later in
out
this tutorial.
Flex
<mx:HTTPService id="photoService" compo
nents
url="http://api.flickr.com/services/feed with
s/photos_public.gne" the
result="photoHandler(event)"/> Flex
Comp
onent
Explor
er.

• See
the
 Flex
Action
Script
Langu
age
Refere
nce.
LEARN
Create a bindable XML variable in
MORE
ActionScript 3.0
1. Before the HTTPService component, add • What is
a Script component by entering ActionScript?
<mx:Script>. Flex Builder completes the
ASP
tag for you. Alternatively, you can place the
Script component after the HTTPService o ActionScrip
component. t files are
<mx:Script> roughly
<![CDATA[ equivalent
to aspx.cs
code
]]>
behind
</mx:Script>
files.
2. In the mx:Script block, enter import o How do I

mx.collections.ArrayCollection. know when

ArrayCollection is the type of object that is to use
used as a data provider. ActionScrip
t and when
<mx:Script>
to use
<![CDATA[ MXML?
import
mx.collections.ArrayCollection; • Learn about
]]> Flex Builder
</mx:Script> code editor
features.
3. After the ArrayCollection import Key
statement, enter import Concept:
mx.rpc.events.ResultEvent to import
the ResultEvent class. The ResultEvent class Data Binding
is the type of event that the makes it
HTTPService generates. easy to show
<mx:Script> and update
<![CDATA[ data in the
import UI. When
mx.collections.ArrayCollection; the data
changes, the
import
mx.rpc.events.ResultEvent; UI changes.

]]>
</mx:Script>
4. Create a bindable private variable
named photoFeed of the ArrayCollection
class after the import statement in the
mx:Script block. The photoFeed
ArrayCollection is populated with the
HTTPService response data.
<mx:Script>
<![CDATA[
import
mx.collections.ArrayCollection;
import
mx.rpc.events.ResultEvent;

[Bindable]
private var
photoFeed:ArrayCollection;

]]>
</mx:Script>

LEARN
Create the submit button click handler
MORE
1. Using the Outline view, locate the Button
 component in the HBox component. Clicking the Key
Button component in the Outline view locates the Concep
Button component code in the Source mode. t:
Event
listeners
and
callback
function
s let
your
code
2. To the Button component, add the click respond
attribute with a value of requestPhotos(). When to
a user clicks the button, it calls the events,
requestPhotos() handler, which initiates the such as
HTTPService call. when
the user
<mx:Button label="Search" clicks
click="requestPhotos()"/>
with a
Send the HTTPService request and keywords mouse.
to the Flickr API
3. Using the Outline view, locate the TextInput
component in the HBox component and add the
id attribute with a value of searchTerms. The
instance name for the TextInput component is id.
<mx:TextInput id="searchTerms"/>
4. In the mx:Script block, create a private
function named requestPhotos() with the
return value of *void. This is the function where
the HTTPService call is initiated.
<mx:Script>
<![CDATA[
import
mx.collections.ArrayCollection;
 import mx.rpc.events.ResultEvent;

[Bindable]
private var
photoFeed:ArrayCollection;

private function
requestPhotos():void{

}
]]>
</mx:Script>
5. In the function, cancel any previous requests to
photoService by using the cancel method. The
instance name of the HTTPService component is
photoService.
6. Create an Object variable named params.
7. Create a format parameter of the params
variable with a value of rss_200_enc. This value
tells Flickr how to package the response.
8. Create a tags parameter of the params
variable with a value of searchTerms.text. This
is the value that was entered in the the search
field.
9. Send the request and params by using the
send method of photoService.
<mx:Script>
<![CDATA[
import
mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
 private var
photoFeed:ArrayCollection;

private function
requestPhotos():void{
photoService.cancel();
var params:Object = new
Object();
params.format = 'rss_200_enc';
params.tags = searchTerms.text;
photoService.send(params);
}
]]>
</mx:Script>

Create the HTTPService result handler

10. After the requestPhotos() function, create a
private function named photoHandler and pass the
event of type ResultEvent to the function. The return
type is void. The photoHandler handles the response
from the HTTPService call.
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
private var photoFeed:ArrayCollection;

private function requestPhotos():void{

photoService.cancel();
var params:Object = new Object();
params.format = 'rss_200_enc';
params.tags = searchTerms.text;
 photoService.send(params);
}

private function
photoHandler(event:ResultEvent):void{

}
]]>
</mx:Script>
Populate the photoFeed XML variable
11. In the photoHandler() function, populate the
photoFeed variable with the data located in the event
object, event.result.rss.channel.item, and type it as
ArrayCollection
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
private var photoFeed:ArrayCollection;

private function requestPhotos():void{

photoService.cancel();
var params:Object = new Object();
params.format = 'rss_200_enc';
params.tags = searchTerms.text;
photoService.send(params);
}

private function
photoHandler(event:ResultEvent):void{
photoFeed =
event.result.rss.channel.item as
 ArrayCollection;
}
]]>
</mx:Script>
Create the Tile component in MXML
1. Use a TileList component to display the images. After
the HBox component and before the closing
Application tag, add a TileList component with a
width of 100% and height of 100%.
<mx:TileList width="100%" height="100%">

</mx:TileList>
Bind the photoFeed XML data to the TileList
component
2. Using the Outline view, locate the TileList
component and add an attribute of dataProvider with a
value of {photoFeed} to bind the data to the tile
component. (Remember to move the > to the end of the
dataProvider line.)
<mx:TileList width="100%" height="100%"
dataProvider="{photoFeed}">

</mx:TileList>
Create the thumbnails item renderer in the Tile
component
3. The item renderer renders the layout for each item in
the TileList. Within the TileList component, add a
itemRenderer property.
<mx:TileList width="100%" height="100%"
dataProvider="{photoFeed}">
<mx:itemRenderer>
 </mx:itemRenderer>
</mx:TileList>
4. Create a layout component for the item renderer.
Within the itemRenderer property, add a Component
component.
<mx:TileList width="100%" height="100%"
dataProvider="{photoFeed}">
<mx:itemRenderer>
<mx:Component>

</mx:Component>
</mx:itemRenderer>
</mx:TileList>
5. Create the layout the item renderer will use. Within
the Component, add the VBox component with
attributes of width with a value of 125, height with a
value of 125. Add paddingBottom, paddingTop,
paddingRight and paddingLeft each with a value of 5
<mx:TileList width="100%" height="100%"
dataProvider="{photoFeed}">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="125" height="125"
paddingBottom="5"
paddingLeft="5"
paddingTop="5">

</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
6. Within the VBox component, create a Image
component. Add the attributes width with a value of
75, height with a value of 75. The itemRenderer passes
values to the Image component through the Image
component's data property. Add a source with a value
of {data.thumbnail.url} to the Image component to
populate the image.
<mx:TileList width="100%" height="100%"
dataProvider="{photoFeed}">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="125" height="125"
paddingBottom="5"
paddingLeft="5"
paddingTop="5"
paddingRight="5">

<mx:Image width="75"
height="75"
source="{data.thumbnail.u
rl}"/>

</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
7. After the Image component, create a Text
component with the text attribute having a value of
{data.credit} to display the name of the author.
<mx:TileList width="100%" height="100%"
dataProvider="{photoFeed}">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="125" height="125"
paddingBottom="5"
 paddingLeft="5"
paddingTop="5"
paddingRight="5">

<mx:Image width="75"
height="75"
source="{data.thumbnail.u
rl}"/>

<mx:Text
text="{data.credit}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
8. Save then run the application. You should see a form.
Submit a search term. You should see the application
display images.
Separate the thumbnail display to a custom
component
9. Create a new component: File > New > MXML
Component.

1. The filename is FlickrThumbnail.

2. The component is based on VBox.
3. Set the width to 125 and the height to 125.

10. Using the Outline view, locate the TileList

component.
11. Cut the Image and Text components from the
VBox component in TileList, and paste them into
FlickrThumbnail.mxml.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
 xmlns:mx="http://www.adobe.com/2006/mxml"
width="125" height="125">

<mx:Image width="75" height="75"

source="{data.thumbnail.url}"/>

<mx:Text text="{data.credit}"/>
</mx:VBox>
12. Add the following attributes to the VBox component:
paddingBottom, paddingTop, paddingRight, and
paddingLeft each with a value of 5;
horizontalScrollPolicy and verticalScrollPolicy, both
with a value of off; and horizontalAlign with a value of
center.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
width="125" height="125"
paddingBottom="5" paddingLeft="5"
paddingTop="5" paddingRight="5"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
horizontalAlign="center">

<mx:Image width="75" height="75"

source="{data.thumbnail.url}"/>

<mx:Text text="{data.credit}"/>
</mx:VBox>
13. Using the Outline view, locate the TileList
component in the FlickrRIA.mxml template.
14. Delete the code for the itemRenderer,
Component, and VBox components.
 15. Add the attribute itemRenderer to the TileList
component with a value of FlickrThumbnail.
<mx:TileList width="100%" height="100%"
dataProvider="{photoFeed}"
itemRenderer="FlickrThumbnail">

</mx:TileList>
16. Compile and run the application.

http://learn.adobe.com/wiki/display/Flex/Binding+and+Modeling