Swiz Yahoo Finance Metadata Processor

Swiz 1.0 alpha introduced a very cool new feature which lets you extend Swiz be creating custom metadata processors.
This means that if you want to add a metadata like [MyCustomMetadata] you can now do so and Swiz offers you a very easy way to implement it.
For the Swiz 360 Flex demo app I have build a proof of concept YahooFinance metadata processor. The idea was to have something like this:

[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.

Running Project Sprouts

A few weeks ago I attended the SanFlashCisco usergroup meeting which was really great. After the meeting we moved to the Mars bar where I got to know Luke Bayes who founded Project Sprouts. Project Sprouts is a Ruby based open-source, cross-platform project generation and configuration tool for ActionScript 2, ActionScript 3, Adobe AIR and Flex projects. Also be sure to check the the GitHub repository.

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 =&gt; 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.

360 Flex Swiz Birds of a Feather

Thanks to all who joined the Swiz BOF session at 360 Flex in San Jose today.

John Yanarella and I got the opportunity to show Swiz and some examples. We even had Chris around via Skype and I hope you guys enjoyed it!

Here the links to the slides and code:

Many thanks to John Wilker for organizing this great conference and inviting us to talk. 360 Flex is a great event so if you missed it make sure to attend next time when it’s around!

Powerful Cancelable Events

When you dispatch events I bet that most Flash/Flex devs don’t take advantage of the fact that dispatchEvent returns a Boolean value indicating wether or not the event has been canceled. Normally your code looks similar to this:

var event:MyEvent = new MyEvent(MyEvent.FOO);
dispatchEvent(event)

If you want to let something only happen if the event wasn’t canceled it should look like this:

// The second "true" sets the event cancelable, first one sets bubbles
var event:MyEvent = new MyEvent(MyEvent.FOO, true, true);
if(dispatchEvent(event)){
   // do the actual task
}

With the code above the event listener can control if the actual task gets executed or not:

dispatchingInstance.addEventListener(MyEvent.FOO, fooHandler);
function fooHandler(event:MyEvent):void{
   // depending on what you want to achieve you can cancel the event by calling preventDefault
   event.preventDefault();
   // this will cause dispatchEvent to return false so the actual task doesn't get executed
}

A real life usecase for UI related events could be dispatching an event before closing a popup window:

function closeButtonHandler(event:Event):void{
   if(dispatchEvent(new MyWindowEvent(MyWindowEvent.CLOSE, true, true)){
      PopUpManager.closePopup(this);
   }
}

Cancelable events are also very interesting when you develop APIs because it offers powerful and easy to use hooks for the API user.
I am making heavy use of cancelable events in my swizdesktop lib. Catching the different update phase events you get hooks to stop the update process by calling preventDefault on the listened event.

Connecting Pivotal Tracker with GitHub

GitHub with Pivotal Tracker is the killer agile combination.
With the just release Tracker v3 API update it is now easy to connect them.

You only have to configure GitHub Post-Receive Hooks so you can automatically deliver stories/bugs by providing the Tracker ID in the commit statement like: Fixes #TrackerId

How to set it up:

  1. Create a Pivotal Tracker API token: Login to PT -> My Profile -> Create New Token
  2. GitHub -> Project -> Admin -> Service Hooks -> Post-Receive URLs
  3. Paste https://www.pivotaltracker.com/services/v3/github_commits?token=YOUR_TOKEN_FROM_STEP_1

Now that was easy!

Flex 4 main class interface errors

I ended up a few times with these kind of errors while migrating to newer Flex 4 builds:

Description Resource Path Location Type
1044: Interface method invalidateParentSizeAndDisplayList in namespace mx.managers:ISystemManager not implemented by class _Main_mx_managers_SystemManager. example-project line 23 Flex Problem

Description Resource Path Location Type
1144: Interface method callInContext in namespace mx.core:IFlexModuleFactory is implemented with an incompatible signature in class _Main_mx_managers_SystemManager. example-project line 23 Flex Problem

The location/resource for these errors is the main MXML itself but that’s all you get. So you ask yourself what went wrong? A quick Google search does not help (until I blogged this hopefully) so where to start?

The problem is that you are mixing different SDK versions. In my case my project linked to a library which was compiled with a different SDK version and now the important thing: the framework linkage in the library was set to “Merge into code“. Change it to “Use default (external)” and you are fine.

Properties for actionscript3_v3_api
Uploaded with plasq‘s Skitch!