flexonrails.net

About a year ago I wrote a post about how the Flex/As3 community needs a package manager like RubyGems for managing libraries and components.

Well, I have some good news. Recently I’ve learned about two potential solutions to this problem.

The first I learned about from a comment on the original post by Luke Bayes. Here is an excerpt:

I’ve been working on ’sprouts’ for the past year and finally landed on an architecture that actually sits on top of Rubygems for package management. Even though we have a functional pre-alpha in the wild right now, we expect to release a production-ready build before the end of January 2008 that will really support versioning via Rubygems the repository.

Check it out: http://www.projectsprouts.org

The second potential solution is a Flex plugin for Maven. It appears that it is still under development, but it looks promising. You can check it out here.

The as3 Inflector class can be used to pluralize or singularize most words.  It is essentially a direct port of the Rails inflector class.

Here is a little demo Flex app that I put together to demo the classes functionality.

You can right click on the app to view the source and grab the class, or you can just click here.

A little while ago I posted about my ActionScript 3 implementation of the STOMP protocol.  Well, I am just now getting around to posting that I created a google project site and released the source.   This version is slightly updated from the one that was included in my example code in the previous post.

 If you have any questions about this project, or if you would like to contribute, please let me know.  Please post any bugs to this issue list.

I am pleased to announce the first release of as3yaml, an ActionScript 3 library for parsing and emitting YAML. It is a direct port of Ola Bini’s jvyaml, which was itself a port of Kirill Simonov’s PyYAML.

For those of you who are unfamiliar with YAML, here is a concise description from the yaml.org welcome page:

YAML(tm) (rhymes with “camel”) is a straightforward machine parsable data serialization format designed for human readability and interaction with scripting languages such as Perl and Python. YAML is optimized for data serialization, configuration settings, log files, Internet messaging and filtering. YAML(tm) is a balance of the following design goals:

• YAML documents are very readable by humans.
• YAML interacts well with scripting languages.
• YAML uses host languages’ native data structures.
• YAML has a consistent information model.
• YAML enables stream-based processing.
• YAML is expressive and extensible.
• YAML is easy to implement.

Here are some example of YAML taken from the current version of the YAML spec:

american:
  - Boston Red Sox
  - Detroit Tigers
  - New York Yankees     

national:
  - New York Mets
  - Chicago Cubs
  - Atlanta Braves     

-
  name: Mark McGwire
  hr:   65
  avg:  0.278     

-
  name: Sammy Sosa
  hr:   63
  avg:  0.288

Here is an example of decoding a YAML string and converting it to ActionScript objects:

With the following YAML stored in a file called myYaml.yaml

  ---
  Date: 2001-11-23 15:03:17 -5
  User: ed
  Fatal:
    Unknown variable "bar"
  Stack:
    - file: TopClass.py
      line: 23
      code: |
        x = MoreObject("345\n")
    - file: MoreClass.py
      line: 58
      code: |-
        foo = bar

You can load then load the YAML and decode it as follows.

   public function loadYaml() : void 
   { 
       var loader : URLLoader =  new URLLoader(); 
       loader.load(new URLRequest('myYaml.yaml')); 
       loader.addEventListener(Event.COMPLETE, onYamlLoad); 
   } 
  public function onYamlLoad(event : Event) : void 
  { 
       var yamlMap : HashMap = YAML.decode(event.target.data) as HashMap; // returns a HashMap 
       trace(yamlMap.get("Date"));  // returns a Date object and prints: Fri Nov 23 15:03:17 GMT-0500 2001 
       trace(yamlMap.get("User"));  // returns a String and prints: ed 
       trace(yamlMap.get("Fatal")); // returns a String and prints: Unknown variable "bar" 
       trace(yamlMap.get("Stack")); // returns an Array and prints: [object HashMap],[object HashMap] 
       trace(yamlMap.get("Stack")[0].get("line"));  // returns an Int and prints: 23 
       trace(yamlMap.get("Stack")[0].get("code"));  // returns a String and prints: x = MoreObject("345\n")     
 
  }

There are some more examples available in the as3yaml docs.

I have been working on this for a little while now, and running it through various tests, so I think it is at a point where it is ready to be released into the wild. Please submit any bugs that you find to the issues list on the google project site. If you have any interest in contributing to the project, please let me know.

 THANKS:

• Of course, special thanks to Ola Bini and Kirill Simonov for their excellent work on jvyaml and PyYaml, respectively.
• I would also like to thank the as3commons project.  This library made the port from Java quite a bit easier than it might have been. 

method_missing is one of the small bits of Ruby magic that can be used to some really amazing things when used properly, and some really dangerous things when used improperly. Rails dynamic finders are good example of the amazing things that you can do. Here are some others.

It is possible to implement something like method_missing in AS3 using the Proxy class. Here is a relatively simplistic example:

import flash.utils.Proxy;
import flash.utils.flash_proxy;
 
dynamic public class BaseProxy extends Proxy
{     
	flash_proxy override function callProperty(method: *, ...args): * {
	   try { 		 
	   var clazz : Class = getDefinitionByName(getQualifiedClassName(this)) as Class;
	    return clazz.prototype[method].apply(method, args);
	   }
	   catch (e : Error) {
		return methodMissing (method, args);
	   }
 
	}
 
	protected function methodMissing(method : *, args : Array) : Object{
		throw( new Error("Method Missing"));
	}
}

The callProperty method is called whenever an undefined method is called on an instance of this class, or any instance of class that extends this class. In the try block we check if the method was defined on the prototype. If it is not found there, we call methodMissing.

So, now if we create another class that extends this one like so

public dynamic class Model extends BaseProxy
{
	public function myMethod (arg1 : String, arg2 : Boolean) : String {
		return arg1 + " " + arg2;
	}
}

and then run the following trace statements

import flash.display.Sprite;
 
public class MethodMissingExample extends Sprite
{
	public function MethodMissingExample()
	{
		var m : Model =  new Model();
 
		Model.prototype.runtimeMethod = function (date : Date) : String {
			return "I was defined at runtime at " + date.toLocaleTimeString();
		};
 
		trace(m.myMethod("I exist", true));
                trace(m.runtimeMethod(new Date()));
		trace(m.someMethod(0, false, "x"));
	}
}

You will see the following in the console:

I exist true
I was defined at runtime at 09:58:00 PM
Error: Method Missing

The first call succeeds because myMethod is defined. someMethod is not defined, so a Method Missing error gets thrown.

Now, if we override the missingMethod in the Model class like so,

public dynamic class Model extends BaseProxy
{
	public function myMethod (arg1 : String, arg2 : Boolean) : String {
		return arg1 + " " + arg2;
	}
 
	override protected function methodMissing(method : *, args : Array) : Object {
		return "You called " + method + " with " + args.toString();
	}
}

and run the same trace statements you will see the following in the console:

I exist true
I was defined at runtime at 09:58:00 PM
You called someMethod with 0,false,x

To follow on my last post, here is a little Flex chat application that uses Apache ActiveMQ and the ActionScript 3 STOMP library that I have been working on.

You can get the source for the application here.

You will need to download and install ActiveMQ to run this app. Installing ActiveMQ is pretty straight-forward. You can grab one of the latest snapshots here, and then follow the instructions posted here.

Here are some basic instructions to get ActiveMQ up and running:

1. Download an unzip to the directory of your choice.
2. Open a command-line and navigate to the bin folder inside activemq
3. Run the activemq application inside the bin folder. (e.g., $ activemq/bin/activemq).

Once you’ve got ActiveMQ running.  Go ahead a launch a couple instances of the Flex chat app.  Login to each one and start chatting.  For example,

You can also see the chat messages that come from the chat demo that comes with ActiveMQ.

In your browser, go to: http://127.0.0.1:8161/demo/chat.html, login and send a chat message.  For example,

This will be the first in a series of posts where I’ll cover how you can do publish\subscribe and other messaging methods with Flex and Rails using ActiveMQ, the Rails ActiveMessaging plugin, and the STOMP protocol to get them all communicating. In this post I will describe how to create a simple Flex consumer that receives messages from a Rails app that serves as the producer.

Before we get to that, let’s start with a brief description of the technologies involved. The following descriptions are from the technologies’ respective websites:

Apache ActiveMQ

Apache ActiveMQ is the most popular and powerful open source Message Broker.

Apache ActiveMQ is fast, supports many Cross Language Clients and Protocols and many advanced features while fully supporting JMS 1.1 and J2EE 1.4. Apache ActiveMQ is released under the Apache 2.0 License.

ActiveMessaging

ActiveMessaging is an attempt to bring the simplicity and elegance of rails development to the world of messaging. Messaging, (or event-driven architecture) is widely used for enterprise integration, with frameworks such as Java’s JMS, and products such as ActiveMQ, Tibco, IBM MQSeries, etc.

And, lastly the protocol that we’re going to use to tie everything together:

STOMP

The Stomp project is the Streaming Text Orientated Messaging Protocol site (or the Protocol Briefly Known as TTMP and Represented by the symbol :ttmp).

Stomp provides an interoperable wire format so that any of the available Stomp Clients can communicate with any Stomp Message Broker to provide easy and widespread messaging interop among languages, platforms and brokers.

Now that you know a little something about technologies that we will be using (I am assuming that you probably already know about Flex and Rails), let’s build something.

Prerequisites:

• Ruby 1.8.6
• Rails 1.2.3
• Java 1.5.0_07+
• MySQL (or any other database that works with Rails migrations)

Here are the source files if you would like to follow along.

Source Files:

• Flex Application
• Rails Application

Creating the Rails App

Let’s kick things off by creating the Rails producer app. It’s going to be a really small app called sales_report that is used to capture and distribute simple sales data.

1. Crack open the database of your choice and create a database called sales_report. For example,

$ CREATE DATABASE sales_report

2. Create the app

$ rails sales_report
$ cd sales_report

3. Generate your sale model

$ script/generate model sale

4. Open up the 001_create_sales.rb migration that you just created in db/migrate and add the following

  def self.up
    create_table :sales do |t|
      t.column :customer, :string
      t.column :product, :string
      t.column :quantity, :integer
    end
  end

5. Open up config/database.yml and configure it for your database. For example,

development:
    adapter: mysql
    database: sales_report
    username: root
    password: your_password_here
    socket: /tmp/mysql.sock

6. Run the migration rake task to create the sale table that you defined in migration file above.

$ rake db:migrate

7. Generate the sales controller.

$ script/generate controller sales index

8. For this application,we really just need to be able to produce new sales records, so Rails scaffolding will work just fine. Open up sales_controller.rb and make it look like this:

class SalesController < ApplicationController
  scaffold :sale
end

9. That’s all for the basic Rails app. Now it’s time to start working with ActiveMessaging. So, let’s install the plugin and a couple of gems that it uses.

$ gem install daemons
$ gem install stomp
$ script/plugin install http://activemessaging.googlecode.com/svn/trunk/plugins/activemessaging

10. Now that we have everything installed, let’s create an ActiveMessaging processor. We don’t actually need the processor for this tutorial, but it generates some other files that we do need.

$ script/generate processor sale
create  app/processors
create  app/processors/sale_processor.rb
create  test/functional/sale_processor_test.rb
create  config/messaging.rb
create  config/broker.yml
create  app/processors/application.rb
create  script/poller

11. Open up config/broker.yml and configure the stomp adapter as follows:

development:
   adapter:
   stomplogin: ""
   passcode: ""
   host: localhost
   port: 61613
   reliable: false

12. Now open up config/messaging.rb and specify the destination for the queue, like so

ActiveMessaging::Gateway.define do |s|
  s.destination :sale_queue, '/queue/Sale'
end

13. Almost done. The last step for the Rails app is to create an Observer that watches the Sale model to see when a new sale is saved to the database and then publishes it to the queue that you just set up.

$ script/generate observer sale

14. Now edit app/model/sale_observer.rb as follows.

require 'activemessaging/processor'
class SaleObserver < ActiveRecord::Observer
  include ActiveMessaging::MessageSender
  publishes_to :sale_queue
 
  def after_save(sale)
    record = sale.to_xml
    publish :sale_queue, record
  end
end

This class watches the Sale model. When a new sale record is saved to the database the after_save method is called. This method takes the new sale ActiveRecord instance converts it to XML and publishes it to the sale_queue.

15. Finally, boot up the server.

$ script/server

Installing ActiveMQ
Installing and running ActiveMQ is dead simple.

1. Just go and grab one of the latest snapshots from here.

2. Download it and unzip it.

3. Navigate to activemq/bin and run activemq.

4. If you need additional instruction, check out this page.

5. Once you have ActiveMQ up and running, proceed to the next section on building the Flex app.

The Flex App and the STOMP AS3 Client
To get Flex talking with ActiveMQ we are going to be using the STOMP protocol. When I first started looking into ActiveMQ I came across this ActionScript 3 STOMP client developed by Richard Jewson. I’ve since update the library substantially so that it implements the majority of the STOMP protocol. For now, you can get the source for the STOMP library by downloading the source for the Flex app. I am going to submitting this code to the STOMP project on codehaus.org, so in the future you will be able to grab updates from there.

For the Flex app we’ll just focus on the code that is needed to connect to ActiveMQ via STOMP and consume the xml that Rails is publishing. To makes things a bit easier, we’ll start with the completed Flex and just walkthrough the code. If you haven’t already download the source for the Flex app. To see what the Flex app looks like click here. As you can see it’s pretty much just a data grid that is used for displaying the sale info.

So, here is the important code, which is all inside the script tags in the Flex app:

[Bindable]
private var sales : ArrayCollection = new ArrayCollection();
 
private var stomp : STOMPClient = new STOMPClient();
private var queue : String = "/queue/Sale";
 
private function init () : void
{
	stomp.connect("localhost", 61613);
	stomp.subscribe( queue );
 
	stomp.addEventListener(MessageEvent.MESSAGE, handleMessages);
	stomp.addEventListener(ReceiptEvent.RECIEPT, handleReceipts);
	stomp.addEventListener(STOMPErrorEvent.ERROR, handleErrors);
 
}
 
private function handleMessages(event : MessageEvent) : void
{
	var incomingMsg : XML = XML(event.message.body);
	var processedSale : ObjectProxy = simplerXMLDecoder(incomingMsg);
	orders.addItem(processedSale);
}
 
private function handleReceipts (event : ReceiptEvent) : void
{
	trace ("Got receipt: " + event.receiptID)
}
private function handleErrors (event : STOMPErrorEvent) : void
{
	trace ("Error: " + event.error.body)
}
 
private function simplerXMLDecoder (x : XML) : ObjectProxy
{
	var xdoc : XMLDocument =  new XMLDocument();
	xdoc.ignoreWhite = true;
	xdoc.parseXML(x.toXMLString());
	var decoder : SimpleXMLDecoder =  new SimpleXMLDecoder(true);
	return decoder.decodeXML(XMLNode(xdoc.firstChild)) as ObjectProxy;
}

Here’s what’s going on in this code.

• Up near the top we create a new STOMPClient
• Directly below we specify the destination for the queue that we will be subscribing to, which is the same destination that we specified in messaging.rb above.
• In the init() method, which is called when the application loads, we connect to the STOMP broker (ActiveMQ) and then subscribe to the queue.
• We then set up listeners to listen for messages from ActiveMQ.

All of the real action is happening in the handleMessages method.

• The handleMessages method gets called when the Rails app sends out the xml for a new sale.
• When a new message is received we take the body of the message (which is the xml from Rails) and use the XMLDecoder class to turn it into a bindable ObjectProxy.
• Finally, the new sale is added to the sales ArrayCollection, which is the data provider for the data grid in the Flex app.

Getting Everything Up and Running

Alright, now we are actually ready to run something. Assuming that the Rails app and ActiveMQ are still running, all that we need to do is launch the Flex app. You can either build the app yourself from the source files, or you can go in to the source files, open the bin folder and launch StompSalesReport.html.

Now, open a browser and navigate to http://localhost:3000/sales/new

You should see our spartan, but functional, scaffolded interface. Enter some product info and click Create.

Now if you switch back to Flex app, you should see the following:

Pretty exciting stuff. Immediately after the sale was saved to the database, the SaleObserver published it to the queue, where ActiveMQ pushed it out to the Flex app.

One last little tidbit. If you change the code in init() method in the Flex app so that it looks like this:

private function init () : void
{
        var ch : ConnectHeaders =  new ConnectHeaders();
	ch.clientID = "MYTOTALLYUNIQUECLIENTID";
	stomp.connect("localhost", 61613, ch);
 
	var sh : SubscribeHeaders = new SubscribeHeaders();
	sh.amqSubscriptionName = "MYSUBSCRIPTION";
	stomp.subscribe( queue, sh );
 
	stomp.addEventListener(MessageEvent.MESSAGE, handleMessages);
	stomp.addEventListener(ReceiptEvent.RECIEPT, handleReceipts);
	stomp.addEventListener(STOMPErrorEvent.ERROR, handleErrors);
}

By passing a client-id header on connect and a subscriptionName header on subscribe we create what is known as a durable subscriber.

If you compile the Flex app, launch it and then close it. Then go in back to the Rails app and create a new sale, relaunch the Flex app and you should immediately see the sale show up.

Whew! That’s it. This post was way too long. I am thinking that it may be easier to cover this stuff in a screencast. Let me know in the comments if you think a screencast would be a good idea.

As always, let me know if you have any questions.

In a previous post I discussed how you can use the include statement to ‘mixin’ methods and properties defined in an ActionScript file into your classes. I find this approach to be somewhat limited, so I’ve put together a class that allows you to mix one class into another. The class is an all-static class that is simply called Mixin. The class is a bit long to include in this post, but you can view the source by clicking here.
Here is a quick example of how you can use this class. Let’s start with two classes that we will use as mixins:

public dynamic class ClassMixin
{
	import flash.utils.*;
 
	// bound method that retains reference to this class
	// this will always return the fully qualified path
	// to this class
	public function whoAmI () : String
	{
		return getQualifiedClassName(this);
	}
 
	// function expression that is attached to the prototype
	// this return the class name of the class that it is
	// called from
	prototype.whoBeMe = function () : String {
		return getQualifiedClassName(this);
	};
 
	// this will return the class object for the instance
	// that invokes it
	prototype.myClass = function () : Class {
		return getDefinitionByName(this.whoBeMe()) as Class;
	};
}

public class Ext
{
	public static var staticVar : Number = 123;
 
	public var instanceVar : Number = 321;
 
	public static function staticMethod () : String
	{
		return 'I am static';
	}
 
	public function instanceMethod () : String
	{
		return 'I am an instance';
	}
 
	public function iCallProtected () : String
	{
		return iAmProtected();
	}
 
	protected function iAmProtected () : String
	{
		return 'Protected';
	}
}

And a third class that is the mixee (the one that we will mix the other two classes into).

public dynamic class Model
{
	// dynamic reference to 'this' class object.
	private static var self : Class = prototype.constructor;
 
	// mixin classes during static init
	Mixin.extendClass(self, ClassMixin);
	Mixin.extendClass(self, Ext);		
 
	public function Model()
	{
 
	}
 
}

In the Model class above you will see two calls to Mixin.extendClass(). The extendClass method takes the class in the second argument and mixes its methods and properties (both static and instance) in to the class in the first argument. These extendClass method calls are made directly inside the class block, so they are invoked when the Model class object is initialized. You can read more about this in my previous post about static initializations in ActionScript.

So, now if you were to execute the following class:

public class Main extends Sprite
{
	public function Main()
	{
		var m : Model = new Model();
 
		//bound method returns original class name
		trace (m.whoAmI());
 
		// this function is not bound and it returns name
		// of the class that is calling the function
		trace (m.whoBeMe());
		trace(m.myClass());
 
		//mixed in from Ext
		trace (Model['staticMethod']());
		trace (m.instanceMethod());
		trace(m.myClass().staticVar);
		trace(m.instanceVar);
 
		// mixed in method calls a protected method in the Ext class
		trace (m.iCallProtected());
 
		// you can override methods that are attached to prototype at runtime
		Model.prototype.whoBeMe = function () : String {
			return 'I am you';
		};
		trace (m.whoBeMe());
 
	}	
 
}

You would see the following in the console:
com.rxr.mixinexample::ClassMixin
com.rxr.mixinexample::Model
[class Model]
I am static
I am an instance
123
321
Protected
I am you
You can view the full source and download it here.

That title may be a bit of a stretch, AS3 does not support mixins in the same way as Ruby, but it is possible to define a set of methods and/or attributes in a single file and then mix those methods and attributes into your AS3 classes. Here’s how:

First create a new ActionScript file (a file, not a class) then add the methods and/or attributes that you want to mix in to your classes.

For example, I created a file called classmixin.as that looks like this:

// ActionScript file 
 
	import flash.utils.*; 
 
        // returns the name of the class 
	public function whoAmI () : String 
	{ 
		return getQualifiedClassName(this); 
	} 
 
        // returns the class object 
	public function myClass () : Class 
	{ 
		return getDefinitionByName(whoAmI()) as Class; 
	} 
 
        // returns the prototype object 
	public function proto () : Object 
	{ 
		return myClass().prototype; 
	}

Now, let’s say that you want to add these methods directly to two classes, one is controller called ContactsController and one is a model called Contact. To do this you need to use the include statement along with the relative path to file that defines the methods. For example:

package com.rxr.mixinexample.control 
{ 
	public class ContactsController 
	{ 
		include "/../classmixin/classmixin.as" 
	} 
}

package com.rxr.mixinexample.model 
{ 
	public class Contact 
	{ 
		include "/../classmixin/classmixin.as" 
	} 
}

That’s it. Now both of these classes have all of the methods defined in classmixin.as, so if you were to run the following code:

package { 
	import flash.display.Sprite; 
	import com.rxr.mixinexample.control.ContactsController; 
	import com.rxr.mixinexample.model.Contact; 
 
	public class MixinExample extends Sprite 
	{ 
		public function MixinExample() 
		{ 
			var a : ContactsController = new ContactsController(); 
			var b : Contact = new Contact(); 
 
			trace(a.whoAmI()); 
			trace(b.whoAmI()); 
 
		} 
	} 
}

you would see these trace statements in the console:

com.rxr.mixinexample.control::ContactsController
com.rxr.mixinexample.model::Contact

This mixin capability in AS3 works a bit differently than mixins in Ruby. In Ruby when you mixin a module you are really creating a reference to that module and when you call a method that was mixed in it is actually being delegated to the module. Also, in Ruby when you mixin in a module only the member methods get mixed in, though there is way to mixin statics as well, but you have to add some extra code to make this happen. This is because the module is an object itself and the static methods belong to the module, so if you want to add them to your class you need to extend the module.

In AS3 when you include a .as file, it is though you are appending that file directly to the class definition. So you are not creating a reference to a module, you are just adding the contents of the file to your class, so if you define static attributes or methods they will be added to your class along with the member attributes and methods.

Please let me know if you have any questions, or if any of this is unclear.

You can grab the source files for this example here.