[YahooFinance(tickerSymbol="ADBE", days="60")]
public var adobeStocks:IList;

When you annotate the list variable with that metadata the YahooFinanceProcessor gets notified to process it and for the case above fetches the Adobe stock data for the last 60 days. The result is a list of objects which contain a date and a price. You can then bind this list to a chart é voilá, your chart shows live fetched data without writing any code (ok, except declaring the variable).

Here the full source of the view component:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Script>
		<![CDATA[
			import mx.collections.IList;
 
			[Bindable]
			[YahooFinance(tickerSymbol="ADBE", days="60")]
			public var adobeStocks:IList;
 
			[Bindable]
			[YahooFinance(tickerSymbol="MSFT", days="60")]
			public var microsoftStocks:IList;
		]]>
	</fx:Script>
 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
 
	<s:Label text="Stock Prices last 60 days" />
	<mx:LineChart id="chart" width="100%" height="100%" showDataTips="true" dataProvider="{adobeStocks}">
		<mx:horizontalAxis>
			<mx:CategoryAxis categoryField="date" title="Time" />
		</mx:horizontalAxis>
		<mx:verticalAxis>
			<mx:LinearAxis title="Price" baseAtZero="false" />
		</mx:verticalAxis>
 
		<mx:series>
			<mx:LineSeries dataProvider="{microsoftStocks}" displayName="Microsoft" xField="date" yField="price" />
			<mx:LineSeries dataProvider="{adobeStocks}" displayName="Adobe" xField="date" yField="price" />
		</mx:series>
	</mx:LineChart>
	<mx:Legend dataProvider="{chart}" />
 
</s:Group>

The result looks like this:

When you have a look at the source of the YahooFinaceProcessor you see how easy it is to build.

The example also shows how to use the MediateSignalProcessor build by Sam Ahn.
There are also a bunch of other custom metadata processors on the way like the ResourceProcessor also by Sam.
Note that I had to add -keep-as3-metadata+=YahooFinance which you have to do for any new metadata you introduce.

The following works on a Mac with Ruby and RubyGems installed but should be similar under Windows. Open the Terminal, switch to your working directory where you want to create your new project and:

# installs project sprouts
sudo gem install sprout
# creates a new Flex 4 project named SproutsExample
sprout -n flex4 SproutsExample
# switch directory
cd SproutsExample
# build the project
rake

Now you see all dependencies like SDK and Flash Player being downloaded. So you can run this on a machine without Flex SDK and Flash Player installed because Sprouts handles all dependencies. However, I got this error:

/Library/Ruby/Gems/1.8/gems/sprout-flashplayer-bundle-10.22.7/lib/clix_wrapper.rb:20:  (RuntimeError)
[ERROR] You must install the rb-appscript gem to use the desktop debug Flash Player, you do this by running: sudo gem install rb-appscript

As being told I tried to run: sudo gem install rb-appscript which ended up in this error:

ERROR:  Error installing rb-appscript:
ERROR: Failed to build gem native extension.
/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby extconf.rb
mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/ruby.h

After a little web search I found out that I need to install the latest XCode since I am on Snow Leopard.

Having XCode installed I tried again sudo gem install rb-appscript and it works!

So another try with rake and horray, the project gets compiled and the standalone flash player comes up showing the compiled default project!

So far so good. Now let’s try to create a class and a unit test for it.
Due to a little bug in the flex 4 gem edit scripts/generate and replace

 begin
      Sprout::Sprout.generate('flex4', ARGV.shift, ARGV, File.dirname(File.dirname(__FILE__)))
    rescue RubiGen::GeneratorError => e
      Sprout::Sprout.generate('as3', ARGV.shift, ARGV, File.dirname(File.dirname(__FILE__)))
    end

with

Sprout::Sprout.generate('as3', ARGV.shift, ARGV, File.dirname(File.dirname(__FILE__)))

btw: when the fix for this is in place update with

sudo gem update sprout-flex4-bundle

So, now you are ready to create a class including test classes:

# creates the class com.soenkerohde.util.MathUtil and test classes
script/generate com.soenkerohde.util.MathUtil

You see the output

create  src/com/soenkerohde/util
create  src/com/soenkerohde/util/MathUtil.as
create  test/com/soenkerohde/util
create  test/com/soenkerohde/util/MathUtilTest.as
force  test/AllTests.as

# Run the tests
rake test

Now you see your tests compiling and they fail for now to remind you that you haven’t implemented the actual test code yet.

Pretty impressed by Sprouts so far but enough for now. In my next post I will try to go a little bit deeper and check what else Sprouts can do for me to not waste time on what can be automated.

Source and Download

• Source on GitHub
• Download SWC
• API docs

Usage

Add FGATracker to your BeanLoader:

<ga:FGATracker id="fgaTracker"
	   account="GOOGLE ANALYTICS ID" xmlns:ga="com.soenkerohde.ga.*" />

Dispatch TrackPageEvent or TrackActionEvent:

From a view class (set bubbles=true):

dispatchEvent( new TrackPageEvent( TrackPageEvent.PAGE, "/pagename", true ) );
dispatchEvent( new TrackActionEvent( TrackActionEvent.ACTION "category", "action", "label", NaN, true ) );

From a non-view class:

_dispatcher.dispatchEvent( new TrackPageEvent( TrackPageEvent.PAGE, "/pagename" ) );

You can get a reference if your class implements the IDispatcherBean interface:

private var _dispatcher:IEventDispatcher;
public function set dispatcher(dispatcher:IEventDispatcher):void
{
	_dispatcher  = dispatcher;
}

Today I am happy to announce that the public beta of FlairLoc is available.

Features

• Change resources in a user interface with search capability
• Extract resource keys from source code and synchronizes it with all locale sets
• Automatic translation into 42 languages with the Google Translate API
• Add new automatic translated languages in only 4 CLICKS
• Generation of locale compile statement and Ant parameters

For more information, screenvideo and screenshots and to install the application please visit the product page.

After a bit of research a came across the awesome open source library oauth-as3. There were no examples yet but I remembered an Email from my friend Claus with a link to this github project. The example application uses the oauth-as3 library and demonstrates how to integrate the library.

To use OAuth in your Twitter application you need a consumerKey and consumerSecret which you can get after the registration of your client app: http://twitter.com/oauth_clients/ or go to your settings and select the “Connections” tab for an overview and further links.
However, the github example doesn’t work anymore because Twitter changed their API recently and implemented a PIN mechanism for desktop cients which should provide even more security.

So how does it work?

1. Get the request token with your consumerKey/Secret
2. Open the browser and pass the request token
3. User authenticates on the Twitter site and gets a 6 digit pin code
4. User enters pin code in the AIR app which you need to get the access token
5. Save the accessKey/Secret in the EncryptedLocaleStorage for all further requests/sessions

I have build a high level AS3/Flex library for OAuth which is hosted on github. The library is licensed under Apache License, Version 2.0.
Check the inline comments of the IOAuth interface which should already explain the basics.

Here a little semi pseudo code example:

// create OAuth
oauth:IOAuth = new OAUth(consumerKey, consumerSecret);
 
// get request token
var loader:URLLoader = oauth.getRequestToken("http://twitter.com/oauth/request_token");
loader.addEventListener(Event.COMPLETE, requestTokenHandler);
 
function requestTokenHandler(e:Event):void
{
	requestToken = OAuthUtil.getTokenFromResponse(e.currentTarget.data as String);
	var request:URLRequest = oauth.getAuthorizeRequest("http://twitter.com/oauth/authorize", requestToken.key);
	// opens website where user has to login on Twitter and gets 6 digit pin code
	navigateToURL(request, "_blank");
}
 
function getAccessToken(pin:int):void
{
	var loader:URLLoader = oauth.getAccessToken("http://twitter.com/oauth/access_token", requestToken, {oauth_verifier:pin});
	loader.addEventListener(Event.COMPLETE, accessTokenHandler);
}
 
function accessTokenHandler(e:Event):void
{
	accessToken = OAuthUtil.getTokenFromResponse(e.currentTarget.data as String);
	// TODO store accessToken.key and accessToken.secret in EncryptedLocalStorage for all further requests
}

Instead of opening the Twitter authorization page in the browser the library also contains OAuthLoader which is a wrapper around HTMLLoader which enables to directly show the authorization page within an AIR window:

// use this in the requestTokenHandler instead of navigateToURL
var loader:OAuthLoader = new OAuthLoader();
loader.load(request);
loader.percentWidth = 100;
loader.percentHeight = 100;
var w:Window = new Window();
w.width = 800;
w.height = 400;
w.title = req.url;
w.addChild(loader);
w.open();

The OAuth library is not only considered to be used with Twitter but this was the first thing I have tested from AIR. When you build a web client there will be no pin mechanism but I haven’t tested this yet. If you have it working or see problems/bugs for web clients please drop a comment a or better file a bug.

Big thanks to Shannon Hicks for his core oauth as3 library and to Masayoshi Sekimura for the example which got me started.

Links

• High level AS3/Flex library for OAuth
• Core oauth-as3 library
• OAuth
• Twitter OAuth FAQ
• Twitter API Documentation
• Getting Started with OAuth