The first step in this tutorial is to open create a new flex mxml file for your widget. You can use your favorite text editor or Flex IDE.

This will be the main application for the widget

In this step, you will add <mx:Application ... initialize="onLoad()" ... and initialize access to the widget container runtime. Create a <mx:Script> tag and add an event handler function onLoad() as shown below.

The main difference with using Flex and the yourminis wAPI is that the initialize="onLoad()" event handler needs to be added to your flex application.

Basic Widget API Flex code:

Create a new function loadFeed and instantiate a new RSSLoader instance using the widget.newRSS() class factory. After creating the instance, add a listener to the Event.COMPLETE event and call rss.load(...)

In the onLoad event handler, make a call to loadFeed:

Once the RSS Feed is returned, the Event.COMPLETE Event is fired on the RSSLoader Instance.

Set the XML response to a variable that we will define.

Add a bindable XML variable "rssdata" for display purposes.

Create a panel and repeater and bind to our bindable "rssdata" variable.

The resulting code should look like this:

Sign up for a yourminis account. If you already have an account, sign in now. You must be signed in before you can use the Online Widget Test Console.

Your widget should look like this:

By enabling resizing, users can customize the widget dimensions, along with the other settings, on the desktop or web sandbox before copying it to another destination or for personalization.

Add the Resize Event Handler:

private function onResize( evt:Event ):void 
{ 
	this.width = widget.width -10;
	this.height = widget.height -10;
}

In the onLoad event handler, add a Listener for the widget.WIDGET_RESIZED event.

widget.addEventListener(widget.WIDGET_RESIZED,onResize);

Your widget should now be resizable in the Test Panel.

Add a click event handler and use the widget.navigateToURL(...) API:

private function onClick(url:String):void
{
	widget.navigateToURL(new URLRequest(url));
}

Add a click event listener to the LinkButton element:

Now, this widget will track all URL Clicks from this widget for future reporting. As well, if the widget is ever copied to someone's myspace page, the links, which are typically disabled on myspace, will now allow the user to click out to external URLs.

Every widget published to yourminis also offers the ability to customize options within a dropdown located on the top/right-hand corner of the widget.

Add a dropdown event handler function for the widget.DROPDOWN_LOADED Event:

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);
}

Add an event Listener after the call to initWidget in the onLoad event handler:

widget.addEventListener(widget.DROPDOWN_LOADED,onDropDownLoaded);

function loadFeed(feed):void
{
    widget.setSetting("feedurl",feed);

    var rss = widget.newRSS();
    rss.addEventListener(Event.COMPLETE,onRSSLoaded);
    rss.load(new URLRequest(feed));
}

loadFeed(widget.getSetting("feedurl","http://feeds.feedburner.com/yourminis"));

Sign up for a yourminis account. If you already have an account, sign in now. You must be signed in before you can use the Online Widget Test Console.

Click on the dropdown in the top/right corner and click "flickr". Your widget should look like this:

Congratulations! You've created a fully functional RSS Flex Widget using the wAPI.

Go build some cool widgets!