AdvancED Flex 4

433

Chapter 13

Working with Web 2.0 APIs

by Elad Elrom

Web 2.0 is a huge change from Web 1.0 for two main reasons: the emphasis on community and the

emphasis on services. Successful sites like YouTube, Twitter, Salesforce, and others emphasize both of

these. They use the Web to build communities around content and then use services to distribute the

content outside of the walls of their sites.

In this chapter, you will use Flex in combination with these sites and services to learn how to connect and

interact with them at the API level.

Twitter API for Flex and AIR Apps

The first example we will show you an AIR/Flex application that allows the customer to update their Twitter

(http://twitter.com) status. To get started, you will need a free account on Twitter, so open one in

case you don’t have one already.

Twitter changed their cross-domain policy and they are not allowing anyone to access their site via cross-

domain requests because of a security hole that was found. You can see Twitter cross-domain policy at

http://twitter.com/crossdomain.xml. At the time of writing, you can only access Twitter API in Flash

originating from twitter.com (see Figure 13-1).

<allow-http-request-headers-from domain="*.twitter.com" headers="*" secure="true"/>

The Twitter API will only work for Adobe Integrated Runtime (AIR) applications so to create a Twitter web

client you will have to use a proxy. We will show you both ways.

CHAPTER 13

434

Figure 13-1. Twitter cross-domain policy

Twitter API Using an AIR Application

First, download the Twitter Flex library from here: http://code.google.com/p/twitterscript/.

Next, create TwitterAIRExample AIR application and paste the library you downloaded from Google

code and the following code.

<?xml version="1.0" encoding="utf-8"?>

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

creationComplete="creationCompleteHandler(event)">

<fx:Script>

<![CDATA[

import twitter.api.Twitter;

import mx.events.FlexEvent;

private var twitterapi:Twitter = new Twitter();

protected function creationCompleteHandler(event:FlexEvent):void

{

twitterapi.setAuthenticationCredentials( "Your-User-Name", "Your-Password" );

twitterapi.setStatus("Updated my status from an AIR app");

}

WORKING WITH WEB 2.0 APIS

435

]]>

</fx:Script>

</s:WindowedApplication>

Compare your code with ours: http://code.google.com/p/advancedflex4/ under Chapter 13. The

code does authentication of the twitter’s user credentials and then sets a new status on the account.

Twitter API Using Flex Application

As mentioned before, since the cross-domain policy requires that the calls originate from Twitter.com you

need to use a proxy to access Twitter. You will be using a PHP proxy. To do this, you first need to

download the Twitter Flex library created by Austin Marshall (http://youxylo.com/projects/

twitter/).

After downloading the Twitter library, create a new Flex project and call it TwitterFlexExample and add

the ActionScript source for the library you previously downloaded to it. You then need to modify the

endpoint.php script with your login and password:

curl_setopt($ch,CURLOPT_USERPWD,"user:password");

curl is a command line tool for transferring data with URL syntax. In your case, you use it to pass the user

name and password information.

After you change the file, save it under the following location in your project: TwitterFlexExample/

assets/php.

To test the application, install a local server by using Mamp (http://www.mamp.info/en/index.html)

for Mac OS or you can use XAMPP (http://www.apachefriends.org/en/xampp.html) or WAMP

(http://www.wampserver.com/) for PC.

Use the following code to create the Twitter Flex application:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="1024" minHeight="768"

creationComplete="creationCompleteHandler(event)">

<fx:Script>

<![CDATA[

import twitter.api.Twitter;

import mx.events.FlexEvent;

private var twitterapi:Twitter = new Twitter();

protected function creationCompleteHandler(event:FlexEvent):void

{

twitterapi.setProxy( 

"http://localhost:8888/TwitterFlexExample/assets/php/endpoint.php" );

twitterapi.setAuth( "Your-User-Name", "Your-Password" );

// -- make sure to update endpoint.php in order for this script to run --

// curl_setopt($ch,CURLOPT_USERPWD,"user:password");

CHAPTER 13

436

twitterapi.setStatus( "Playing around" );

}

]]>

</fx:Script>

</s:Application>

Once the creationCompleteHandler method is called, you call the twitter API and set the proxy, and then

you can set the status of the user. Remember to change the setting so the project is deployed on the local

server, by right-clicking the project and selecting the project. From the context menu, select Properties

➤

Flex Build Path then set the localhost location (see Figure 13-2).

Figure 13-2. Properties window for project TwitterFlexExample

The Flex API for Twitter is really easy to use. You just give it your authentication details and the location of

the proxy, and then set your status to whatever you choose. In this case, you can easily update the user’s

status. In the following script, an input box and a button are added so the user can update their status.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="1024" minHeight="768"

width="349" height="43"

creationComplete="creationCompleteHandler(event)">

<fx:Script>

<![CDATA[