In this article, I created a twitter widget using Flex Builder 3.  Using TwitterScript to access the Twitter API, I can retreive your tweets, profile image, followers, etc.  Download the twitter widget flex builder project and play around with it yourself.

For more information about the code, please visit my original article for this project, Creating a Twitter Widget Using Flex and TwitterScript.

My original article, skimmed over the details of making this widget come to life.  Now that I am providing a download of my Flex Builder 3 project, Flex developers can open it up and make it work for themselves.

I link to all the important resources in my original article, but I think that it is important to list out all the links again…

On google code, you can find TwitterScript.  My initial widget was based on this article, Twitter AS3 library TwitterScript Flex Example.  To find out more user feedback, I was lead to this article, Twitter and Flash (twitterscript).  After creation of my widget, I had to reference this article, Twitter in Flash – Getting Past the SecurityErrorEvent, to troubleshoot twitter’s cross domain policy.

Here is the ALL of the code for my main mxml file.

TwitterWidget.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:components="com.components.*"
  layout="absolute"
  creationComplete="init();" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">

  <mx:Script>
    <![CDATA[
      import mx.events.EffectEvent;
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import twitter.api.data.TwitterStatus;
      import twitter.api.events.TwitterEvent;
      import twitter.api.Twitter;
      import com.event.TweetLinkEvent;

      [Bindable] private var USERNAME:String;
      private var t:Twitter;
      private var tweets:ArrayCollection = new ArrayCollection();
      private var currentTweetIndex:int = 0;
      private var animation:Boolean = false;

      private function init():void {
        //DO WHAT EVER YOU WANT WITH THE RESULT
        var style :StyleSheet = new StyleSheet();

        //active color
        var active:Object = new Object();
        active.color = "#0000ff";

        //hover color
        var hover:Object = new Object();
        hover.textDecoration = "underline";
        hover.color = "#0000ff";

        //link color
        var link:Object = new Object();
        link.color = "#0000ff";
        style.setStyle("a:active", active);
        style.setStyle("a:hover", hover);
        style.setStyle("a:link", link);
        //SAMPLE TWEET, NOTICE THERE THERE ARE NO HREF's
        currentTweet.styleSheet = style;
        //do stuff
        USERNAME = "jonkarna";
        if(application.parameters["username"] != null) USERNAME = application.parameters["username"];
        t = new Twitter();
        t.loadUserTimeline(USERNAME);
        t.addEventListener(TwitterEvent.ON_USER_TIMELINE_RESULT, populateTweets);
      }

      private function populateTweets(e:TwitterEvent):void {
        var twitterStatus:TwitterStatus;
        for (var i:String in e.data) {
          twitterStatus = e.data[i];
          tweets.addItem(twitterStatus);
        }
        currentTweet.htmlText = tweets[currentTweetIndex].text;
        profileImage.source = twitterStatus.user.profileImageUrl;
      }

      private function newerTweet(e:MouseEvent):void {
        if(!animation) {
          currentTweetIndex--;
          moveLeftCurrent.play();
          animation = true;
        }
      }

      private function setNewerTweet(e:EffectEvent):void {
        setTweet();
        moveInNewer.play();
      }

      private function olderTweet(e:MouseEvent):void {
        if(!animation) {
          currentTweetIndex++;
          moveRightCurrent.play();
          animation = true;
        }
      }

      private function setOlderTweet(e:EffectEvent):void {
        setTweet();
        moveInOlder.play();
      }

      private function endAnimation(e:EffectEvent):void {
        animation = false;
      }

      private function setTweet():void {
        //keeping our index in the proper range
        if(currentTweetIndex < 0) currentTweetIndex = 0;
        else if(currentTweetIndex >= tweets.length) currentTweetIndex = tweets.length - 1;

        //enable/disable newer button
        if(currentTweetIndex > 0) newerTweetButton.enabled = true;
        else newerTweetButton.enabled = false;

        //enable/disable older button
        if(currentTweetIndex < tweets.length - 1) olderTweetButton.enabled = true;
        else olderTweetButton.enabled = false;

        //setting the current tweet
        currentTweet.htmlText = tweets[currentTweetIndex].text;
      }

      //follow twitter
      private function followTwitter(e:MouseEvent):void {
        var urlRequest:URLRequest = new URLRequest("http://www.twitter.com/" + USERNAME);
        navigateToURL(urlRequest, "_blank");
      }

      //twitter link
      private function handleLink(evtObj:TweetLinkEvent):void{
        //DO WHAT EVER YOU WANT WITH THE RESULT
        Alert.show(evtObj.text + " is " +  evtObj.linkType);
      }
    ]]>
  </mx:Script>

  <!-- older button animations -->
  <mx:Move id="moveRightCurrent" duration="500"
    xFrom="10" xTo="190"
    target="{currentTweet}"
    effectEnd="setOlderTweet(event)"/>
  <mx:Move id="moveInOlder" duration="500"
    xFrom="-170" xTo="10"
    target="{currentTweet}"
    effectEnd="endAnimation(event)"/>
  <!-- newer button animations -->
  <mx:Move id="moveLeftCurrent" duration="500"
    xFrom="10" xTo="-170"
    target="{currentTweet}"
    effectEnd="setNewerTweet(event)"/>
  <mx:Move id="moveInNewer" duration="500"
    xFrom="190" xTo="10"
    target="{currentTweet}"
    effectEnd="endAnimation(event)"/>

  <mx:Panel x="0" y="0" width="200" height="200" layout="absolute" title="{USERNAME}" horizontalScrollPolicy="off" backgroundColor="#FFFFFF" borderColor="#0000FF" cornerRadius="0">
    <mx:Button id="newerTweetButton" x="93" y="128" label="Newer" width="75" click="newerTweet(event)" enabled="false"/>
    <mx:Button id="olderTweetButton" x="10" y="128" label="Older" width="75" click="olderTweet(event)"/>
    <components:TwitterText id="currentTweet" x="10" y="10" text="Loading..." width="113" height="110"
      tweetLinkClicked="handleLink(event)"
      selectable="true" />
    <mx:Image id="profileImage" x="122" y="10" width="48" height="48" alpha="0.49"/>
  </mx:Panel>
  <mx:Label x="10" y="204" text="Follow {USERNAME}" width="180"
    click="followTwitter(event)" useHandCursor="true" buttonMode="true" mouseChildren="false"/>
</mx:Application>