Using Flex Gumbo and Twitpic API to display pictures Thumbnails

First we'll create a simple user-interface, the one you can see on the picture.

<?xml version="1.0" encoding="utf-8"?>
<s:Application     xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:mx="library://ns.adobe.com/flex/halo"
                xmlns:com="com.palleas.*"
                creationComplete="init(event)">
    <!-- Layout -->
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" />
    </s:layout>

    <!-- Misc -->
    <fx:Script source="com/palleas/Twitpic.as" />
   
    <!-- Data Declaration -->
    <fx:Declarations>
        <s:ArrayCollection id="sizes">
            <fx:Object label="Mini picture size" data="mini" />
            <fx:Object label="Thumb picture size" data="thumb" />
            <fx:Object label="Large picture size" data="large" />
        </s:ArrayCollection>
    </fx:Declarations>
    <!-- States -->
    <s:states>
        <s:State name="default" />
        <s:State name="pictureSelected" />
    </s:states>
   
    <!-- UI -->
    <s:HGroup>
        <s:TextInput id="pictureID" />
        <s:DropDownList id="pictureSize" dataProvider="{sizes}" selectedIndex="0" labelField="label" />
        <s:Button label="Show Picture" id="showPictureButton" enabled.pictureSelected="false" />
        <s:Button label="Clear Picture" enabled="false" enabled.pictureSelected="true" id="clearPictureButton" />
    </s:HGroup>   
    <mx:Image id="selectedPicture" visible="false" visible.pictureSelected = "true" />
</s:Application>

Then, we'll use some Actionscript to use the Twitpic public API.

import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.IndexChangedEvent;

// called when UI is ready
protected function init(event:FlexEvent):void {
    selectedPicture.addEventListener(IOErrorEvent.IO_ERROR,onError);
    showPictureButton.addEventListener(MouseEvent.CLICK,onShowClick);   
    clearPictureButton.addEventListener(MouseEvent.CLICK,onClearClick);       
    pictureSize.addEventListener(IndexChangedEvent.SELECTION_CHANGED,onSelectionChange);
}

// called when the user clicks on "show picture"
protected function onShowClick(e:MouseEvent):void {
    // if the user has entered a valid id
    if(pictureID.text == "") {
        Alert.show("Please enter a valid picture ID !");
    } else {
        updatePicture();
    }
}

// update picture's source
protected function updatePicture():void {
    selectedPicture.source = "http://twitpic.com/show/"+pictureSize.selectedItem.data+"/"+pictureID.text;
    currentState = "pictureSelected";
}

// called when the user changes the size of the picture
protected function onSelectionChange(e:Event):void {
    if(currentState=="pictureSelected") {
        updatePicture();
    }
}

// called if the picture can't be loaded
protected function onError(e:IOErrorEvent):void {
    Alert.show("Couldn't find picture, try to specify a valid twitpic picture ID !");
    selectedPicture.source= "";
    currentState = "default";
}

// called when the user clicks on "Clear Picture"
protected function onClearClick(e:MouseEvent):void {
    currentState = "default";
    selectedPicture.source= "";
}

Click here to see an online example..