Well not exactly integrating Yahoo Pipe with Flex but you can use Yahoo Pipes within flex application to give your application an extra edge. Yahoo Pipe is an powerful mashup editor comes with an excellent graphical IDE (ppl who have worked on IVR script designing using some of the graphical IVR script generation tools will know this). In this blog I will try to give you an overview (actually in depth) about what is yahoo pipes and what can we do with this new breed of Web API and how can we use it to extend flex application.

Yahoo Pipe is a powerful Mashup creation web tool with excellent graphical web IDE, for those who do not have any idea about “Mashups” run through Youtube video.
To create yahoo pipes you need not know any programming language or any scripting it just drag and drop component based IDE. Yahoo pipe support RSS feed what that means is you can parse, agreegate, translate and create your own custom feeds without knowing any related technology. And good thing is that Pipe supports multiple types of output formats e.g. JSON, RSS and HTML of course now you can publish these pipes to public so that everybody can use your pipes or rather we will call as pipe services.
Well Pipes has got loads other functionality but I will concentrate on RSS to explain you integration aspect.

Now lets create simple Pipe which fetches multiple types (Atom, RSS, RDF) of feeds and agreegates them into one simple RSS output feed format (which we will use it in our flex application). It is a pain to handle and parse multiple types of feeds in you flex application, so Pipe will give one combined output feed format which you can easily parse in your flex.

Pipe Source Code: This pipe searches web for “Adobe+Flex” Related news and outputs them into one combined RSS feed which we will display in our flex application.
NOTE: Click on view source link to check source, you need valid yahoo account.

Now lets build Flex application to show this feed. following flex code will search feeds related to keyword entered in TextInput box.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
<mx:Script>
<![CDATA[
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;

[Bindable]
private var feedDiscoveryURL:String;

private function searchFeeds():void {
feedDiscoveryURL = “http://pipes.yahoo.com/pipes/pipe.run?_id=mm3e55×13BG9R2uxy6ky6g&_render=rss&searchStr=”+searchTxt.text;
srchFeed.send();
}
private function handleResult(event:ResultEvent):void {
var tmp:Object = event.result.rss.channel.item;
if(tmp != null) {
var items:Array = new Array();
for(var i:Number=0; i < tmp.length; i++ ) {
trace(tmp[i]);
items.push( tmp[i] );
}
}
feedListDgr.dataProvider = new ArrayCollection(items);
}
]]>
</mx:Script>

<mx:HTTPService id=”srchFeed” url=”{feedDiscoveryURL}” fault=”Alert.show(event.fault.message);” result=”handleResult(event);” showBusyCursor=”true”/>

<mx:Form>
<mx:FormItem label=”Search keyword”>
<mx:TextInput id=”searchTxt” width=”160″/>
<mx:Button id=”searchBtn” label=”Search” click=”searchFeeds();”/>
</mx:FormItem>
</mx:Form>
<mx:DataGrid id=”feedListDgr” width=”70%”>
<mx:columns>
<mx:DataGridColumn headerText=”Title” dataField=”title”/>
<mx:DataGridColumn headerText=”Description” dataField=”description”/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Trick: Pipe gives option to redirect output as RSS feed and that you can see in output window of your pipe as shown in following screen. We will use RSS output format in our flex application.

And here is the flex output

You can also use powerful “Translate” option to translate your feeds into different languages and show them in your flex application.

Leave a note if you have any doubts.

Keep flexing,
Satish