Share Media on Twitter Using Flex, Part I: The Basics

Coding the Application in Flash Builder

From the Flex project in Flash Builder, open Main.mxml from the default package folder in the project’s src directory. This is the root of the application, indicated by the green arrow and blue dot symbols; these mean that the root element of this file contains an Application tag, and that the compiler will treat this as the root file of the project.

Towards the bottom of this code you’ll see a List tag—this is the data list that you created in Flash Catalyst. For now, it contains dummy data inserted by Catalyst inside an ArrayCollection, which we’ll need to tweak. Look at each of these rows of data and you’ll see that there are values for each of the images used. Only one of these will be dynamic later on, which is the profile picture for Twitter users. The others are part of the interface, and will be static.

Open the components folder, and you’ll see that one of the components that it contains is called RepeatedItem1.mxml—in that file you’ll find a number of BitmapImage tags towards the bottom of the code. Switching between this and Main.mxml, copy and paste the image location values for image2, image3, image4, and image5 from the first row of the repeated list data respectively, overwriting the source attribute for the first four BitmapImage tags.

Replacing BitmapImages (View larger image in a new window.)

Next, we need to modify the custom component containing the login form elements. Locate and open CustomComponent1.mxml from the components directory, and look for the richtext1 RichText component. This is the login error message that we’ll display, so here, we need to set the visible property of this component to false—it can be switched on when there’s an unsuccessful login attempt.

We’d also like to ensure that the password field behaves as expected, displaying asterisks instead of characters, so we’ll add an attribute to that field. Look for the textinput0 TextInput component; we’ll add a displayAsPassword attribute with a value of true. The Script block at the top of this component’s code was placed there by Catalyst to switch to the list state when the user logs in. Right now this is called as soon as the user clicks on the Log In button. However, we only want to show that state if the user’s login was correct, so we’ll need to alter the code here.

The function in the Script block uses a call to the path mx.core.FlexGlobals.topLevelApplication to refer to Main.mxml. The remainder of that code changes the visual state of the application to the one called twitterDisplay —that’s the state with our list of tweets. Instead of switching states here, we’re going to do that in another part of the application. We’ll use the path to set the value of variables in that file to the user login and password details when they’re entered into the form; then call a function to fetch the user’s friends’ timeline data from Twitter via our PHP proxy. We’ll do that by adding the following lines to the existing function:

mx.core.FlexGlobals.topLevelApplication.userLogin=textinput4.text;  
mx.core.FlexGlobals.topLevelApplication.userPassword=textinput0.text;  
mx.core.FlexGlobals.topLevelApplication.fetchFriendsTimeline();

The first two take the text values of the two input fields in the form and set the values to variables in Main.mxml, while the third line calls a function we’ll write to call the PHP proxy. Switch back to Main.mxml, where we’ll add a Script block to the top of the code:

<fx:Script>  
 <![CDATA[  
 ]]>  
</fx:Script>

The CDATA comments are necessary so that the compiler knows that the contents of the script block should not be evaluated as XML. Inside those tags we’ll create an ArrayCollection to store the data returned from the PHP proxy and populate the data list. We’ve added the Bindable compiler directive so that these three variables will broadcast any changes to their values during the operation of the application. We’ll also add another variable, twitterCallType, to use later as a switch for processing Twitter results within a function:

import mx.collections.ArrayCollection;  
private var twitterCallType:String;  
[Bindable] private var twitterAC:ArrayCollection;  
[Bindable] public var userLogin:String;  
[Bindable] public var userPassword:String;

We’ll add a dataProvider attribute to the List tag towards the bottom of the code and set it to the ArrayCollection, binding it to that variable by surrounding it with curly braces. By now we’ve removed the ArrayCollection from the list that was created by Catalyst. In this example, we used an XML-style self-closing element—that’s why there’s no closing List tag:

<s:List x="99" y="124" skinClass="components.DataList1"  
 d:userLabel="Data List"  
 visible.twitterLogin="false"  
 id="list1" dataProvider="{twitterAC}" />

Next up, we’ll add our call to the PHP proxy.