Creating a Simple RIA Tutorial

Watch the video version of this tutorial.

Application Overview

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" >

Use Design mode to lay out the search form

1. Click the Design button to change to the Design mode. Using the Design mode is the easiest way to layout a form in Flex Builder.

2. From the Components view, drag an HBox component from the Layout folder to the design area. Keep the default values of the component. The HBox component contains the label, input field, and button for the form and displays them horizontally.

Note: The blue lines that appear in the design area help you position the component. When you release the component in the design area, it snaps into position.

3. Drag the Label component from the Controls folder to the HBox component.

4. To change the default appearance of the Label component, double-click the Label component and enter Flickr tags or search terms.

5. Drag the TextInput component from the Controls folder to the position following the Label component in the HBox. The TextInput component provides the user with a space to input search terms.

6. Drag a Button component from the Controls folder to the position following the TextInput component in the HBox component.

7. Double-click the Button component and enter Search to change the default appearance.

Create the HTTPService object

1. Change to the Source mode.

2. Use the HTTPService component to call the Flickr service and return the results. After the opening Application tag and before the HBox component, create an HTTPService component. It does not have a closing tag. To the HTTPService component, add the id attribute with a value of photoService, the url attribute with the value of [http://api.flickr.com/services/feeds/photos_public.gne], and the result attribute with the value of photoHandler(event). The photoHandler event packages the service results. We create the {{photoHandler}} function later in this tutorial.

<mx:HTTPService id="photoService"
	 url="http://api.flickr.com/services/feeds/photos_public.gne"
	 result="photoHandler(event)"/>

Create a bindable XML variable in ActionScript 3.0

1. Before the HTTPService component, add a Script component by entering <mx:Script>. Flex Builder completes the tag for you. Alternatively, you can place the Script component after the HTTPService component.

<mx:Script>
<![CDATA[

]]>
</mx:Script>

2. In the mx:Script block, enter import mx.collections.ArrayCollection. ArrayCollection is the type of object that is used as a data provider.

<mx:Script>
<![CDATA[
    import mx.collections.ArrayCollection;
]]>
</mx:Script>

3. After the ArrayCollection import statement, enter import mx.rpc.events.ResultEvent to import the ResultEvent class. The ResultEvent class is the type of event that the HTTPService generates.

<mx:Script>
<![CDATA[
    import mx.collections.ArrayCollection;
    import mx.rpc.events.ResultEvent;

]]>
</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>

Create the submit button click handler

1. Using the Outline view, locate the Button component in the HBox component. Clicking the Button component in the Outline view locates the Button component code in the Source mode.

2. To the Button component, add the click attribute with a value of requestPhotos(). When a user clicks the button, it calls the requestPhotos() handler, which initiates the HTTPService call.

<mx:Button label="Search" click="requestPhotos()"/>

Send the HTTPService request and keywords 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.url}"/>

            </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.url}"/>

                <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.