FLEX Social API Tutorial
This tutorial will demonstrate how to use the yourminis Social Widget API to take advantage of social features within Facebook and OpenSocial supported websites.
Requirements
- Completed the RSS Flex Widget Tutorial
- Download the source code for this example here: Samples.
Steps
1. Open the .mxml file you created in the RSS Flex Widget Tutorial
We will be extending the widget we developed in the RSS Flex Widget Tutorial with social capabilites.
2. Go to the onClick function
This is the function where we handle the clicking of the RSS item within the Repeater. Currently, this handler navigates the user to the URL and tracks the URL click within the yourminis widget reporting server.
private function onClick(url:String):void
{
widget.navigateToURL(new URLRequest(url));
}
3. Add a call to create a new social Activity
There are two classes that delegate social-related functions within the yourminis API:
yourminis.api.social.SimpleSocial
yourminis.api.social.Facebook
All wAPI widgets will have a widget.social instance of type yourminis.api.social.ISocial automatically set before the widget.WIDGET_LOADED event within the top level DisplayObject.
In the code below, we will utilize the Facebook API if the widget is running in Facebook, otherwise we will use the OpenSocial API.
private function onClick(url:String):void
{
//create an activity in opensocial or
// a mini-feed & newfeed item in facebook
widget.social.createActivity(
"clicked a <a href='" + url + "'>link</a>",
"The full URL is: <a href='" + url + "'>"
+ url + "</a>");
widget.navigateToURL(new URLRequest(url));
}
4. Re-compile your widget and Upload
Go to the dashboard, click add new widget, and follow the prompts.
The resulting code should look like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="300" height="300" initialize="onLoad()" backgroundAlpha="0">
<mx:Script>
<![CDATA[
public var widget:Object; //Widget
[Bindable]
private var rssdata:XML;
public function onLoad():void
{
addEventListener("widget-loaded",onWidgetLoaded);
}
public function onWidgetLoaded(evt:Event):void
{
//initialize widget container instance (width,height,backgroundColor)
widget.initWidget(300,300,0xccffff);
widget.addEventListener(widget.WIDGET_RESIZED,onResize);
widget.addEventListener(widget.DROPDOWN_LOADED,onDropDownLoaded);
loadFeed(widget.getSetting("feedurl","http://feeds.feedburner.com/yourminis"));
}
private function loadFeed(feed:String):void {
widget.setSetting("feedurl",feed);
var rss:Object=widget.newRSS();
rss.addEventListener(Event.COMPLETE,onRSSLoaded);
rss.load(new URLRequest(feed));
}
private function onRSSLoaded(event:Event):void {
var loader:URLLoader = URLLoader(event.target);
rssdata = XML( loader.data );
}
private function onResize(evt:Event):void
{
this.width=widget.width-10;
this.height=widget.height-10;
}
private function onClick(url:String):void
{
//create an activity in opensocial or
// a mini-feed & newfeed item in facebook
widget.social.createActivity(
"clicked a <a href='" + url + "'>link</a>",
"The full URL is: <a href='" + url + "'>"
+ url + "</a>");
widget.navigateToURL(new URLRequest(url));
}
private function onDropDownLoaded( evt:Event):void
{
widget.chrome.addDropDownItem("yourminis","http://feeds.feedburner.com/yourminis",loadFeed);
widget.chrome.addDropDownItem("digg","http://digg.com/rss/index.xml",loadFeed);
widget.chrome.addDropDownItem("flickr","http://api.flickr.com/services/" +
"feeds/photos_public.gne?format=rss2",loadFeed);
}
]]>
</mx:Script>
<mx:Panel layout="vertical"
title="Flex RSS Widget"
width="{this.width-10}" height="{this.height-10}">
<mx:Repeater width="100%" height="100%"
id="items"
dataProvider="{rssdata.channel.item}">
<mx:VBox width="100%" horizontalAlign="left" creationCompleteEffect="Fade">
<mx:LinkButton
textAlign="left"
label="{ items.currentItem.title}"
click="onClick( event.currentTarget.getRepeaterItem().link);"></mx:LinkButton>
<mx:TextArea paddingLeft="10" paddingRight="10" editable="false"
width="98%" cornerRadius="6" height="60"
backgroundColor="0xf9f9f9"
htmlText="{ items.currentItem.description}" ></mx:TextArea>
<mx:Text paddingRight="10"
width="98%"
textAlign="right"
text="{ (items.currentItem.creator==null?'':items.currentItem.creator)+
' ' + (items.currentItem.date==null?'':items.currentItem.date)}" />
</mx:VBox>
</mx:Repeater>
</mx:Panel>
</mx:Application>
5. Test
In order to test the Social APIs, you will need to have the widget loaded within either Facebook or an OpenSocial site that supports creating new activities. To test on Facebook, your widget needs to be associated to a Facebook application using the instructions in the Dashboard -> Syndication -> Galleries section of your widget.
On facebook, this is what it would look like in the mini-feed after clicking links in this widget:
Conclusion
Congratulations! You successfully added social capabilities to your flex widget and can begin to take advantage of the distribution that social networks have to offer.
Next Steps
Start sharing your social widgets!