A while ago now I ported my site from WordPress to the awesome Octopress. I have also been shufflin’ assets and moving demo’s and code over to a repos on my github account. So please feel free to either leave a comment or ping me pointing out anything that may have gone astray?

Decide what you want, decide what you are willing to exchange for it. Establish your priorities and go to work.

H. L. Hunt

One question I see quite a lot when it comes to architecting an application using MVC is how to get data into the view from the model and keeping that data current. The simplest and quickest routes to achieve this is to create a reference to the model within a view mediator and either bind or directly get the data. This is an approach I indeed blogged about but is a technique I quickly moved away from. Here is how I now manage this.

I am a staunch advocate of AS3-Signals and use them extensively in all my applications nowadays. Whilst contemplating how to best manage data within an modular application that was rapidly growing it was Stray as usual, who pointed me to a technique that I use consistently now due to its simplicity, cleanliness and strong typing the response Signal and payload.

A suggested simple example could be a view mediator has been registered after a user logs in and the view wants to display the name of the currently logged in user which is stored in the model . Using AS3-Signals a request-response approach can be used where the mediator can dispatch a request Signal for the username within the onRegister() method (if using robotlegs), then a command can retrieve the data from the model and dispatch a Signal response with the username.

Example in a Robotlegs application scenario:

The first key factor to this logic is the requesting Signal needs to create and pass as a payload the response Signal. This can simply be a plain ol’ Signal or a custom Signal you have created.

1
2
3
4
5
6
7
8
9

public function RequestSignal()
{
    super(ResponseSignal);
}

public function createResponse():ResponseSignal
{
    return new ResponseSignal(String);
}

As you can see the ResponseSignal is expecting to pass a String value as its payload.

The Mediator would dispatch the injected instance of the RequestSignal with the response Signal as the payload. A handler method will need to be setup for the response.

1
2
3
4
5
6
7
8
9
10
11

public function submitRequest():void
{
    var response:ResponseSignal=requestSignal.createResponse();
    response.addOnce(onResponse);
    requestSignal.dispatch(response);
}

public function onResponse(username:String):void
{
    view.username=username;
}

And finally a command would be mapped to the RequestSignal to manage the retrieving of the model data and dispatching of the response Signal.

1
2
3
4
5
6
7

[Inject]
public var responseSignal:ResponseSignal;

override public function execute():void
{
    responseSignal.dispatch(model.username);
}

Full example application code can be found here on github

I have found this to be a really nice standardised approach to exchanging messages throughout my applications, thanks once again to Stray and Rob Penner.

How many developers out there are still manually deploying project files to their remote server?

In my experience, automated deployment is typically declared as a nice to have but not usually a task where time actually gets set aside to complete. This post is focusing on what I would term as the simplest essence of automated deployment. The sequence of steps:

1. Compile e.g. generating project files using rake or compiling a swf.
2. Commit i.e. pushing to a git repository.
3. Transfer e.g. copying local files to a remote server.

Heads Up

This is not covering the full CI setup, versioning, etc, this is simply a small (time saving) step for those developers who are still pushing projects manually. Further fun stuff like CI and automated builds comes in another post ;)

On the surface (for a simple project), all we are doing using the automated logic within this blog post is avoiding the transfer of local files to a remote server. However, for a project which starts to get slightly more complex for example deploying to different server directories e.g development, staging and production this approach starts to really shine. And in my experience it is the FTP’ing of files that I found swiftly became the mundane pain in the proverbial!

The project could be of any type you choose, whether a rails project, wordpress blog or flash app it’s all good. What you do need is the project in version control and this blog post focuses on using git.

Here’s what we are going to cover

• Setup the (remote) server-side web directories.
• Create a remote git repository (our hub) for the project.
• Write a post-update git hook to deploy our project files to defined serverside directories.
• Setup our initial local project setup.
• Add our local project to git.
• Test deployment to dev.
• Test deployment to production.

The scenario involves having two branches in your git repository, a master and a develop branch. Similary on your remote server you would have two directories under your wwwroot, I have called mine example (mapped to the domain example.com) and example_dev (mapped to the domain dev.example.com). Also on the server I have installed git and setup a user account named git. Here I presume you have ssh access to your remote server i.e. using your git account i.e. ssh git@mydomain.com.

Remote server web configuration

Navigate to your webroot directory and create two new directories as detailed above. Create your publically accessible directories under each site and ensure they have appropriate permissions (I simply open up access of these example public folders, you can restrict as you see fit):

cd /srv/www/
mkdir -p example/public_html
mkdir -p example_dev/public_html
chgrp -R users example
chgrp -R users example_dev
chmod 777 example/public_html
chmod 777 example_dev/public_html

Remote server git configuration

Login to your server under your git user account (or once on your server sudo su - git) and enter the following (replacing example with the project name of your choice) to create our project hub repository:

mkdir example.git && cd example.git
git init --bare

Configure git hooks

Still under the git user account:

vim hooks/post-update

Within this post-update file enter the following ensuring you change the root files to your defined directory names:

#!/bin/sh

echo $1
echo "*UPDATE*"


case " $1 " in
*'refs/heads/develop'*)
        GIT_WORK_TREE=/srv/www/example_dev git checkout develop public_html
        echo
        echo "Dev was pulled"
        echo
        ;;
esac

case " $1 " in
*'refs/heads/master'*)
        GIT_WORK_TREE=/srv/www/example git checkout master public_html
        echo
        echo "Master was pulled"
        echo
        ;;
esac

When there is a push from our local repository to the remote hub repository, this logic will determine which branch we pushed to i.e. develop or master and checkout the files from the public_html directory into the appropriate web root. There is a little visual feedback in the console to highlight what branch has been checked out.

Lastly we must ensure this post-update file is executable:

chmod +x hooks/post-update

Local project configuration

Create a new project directory and navigate on in:

mkdir newtriks.com && cd newtriks.com

Local project git configuration

Initialise a new git repository and commit a newly created test file. Finally add your remote hub url as the local respository remote alias and push to the master branch.

git init
echo 'Hello master!' > index.html
git add index.html
git commit -q -m'Initial pimp hit'
git remote add web git@[your ip]:example.git
git push web +master:refs/heads/master

Testing deployment to production

If you navigate in your browser to the production domain i.e. example.com, you should see Hello master!

Local develop branch configuration

Create and checkout a new branch within your project named develop. Update the index.html file and commit then push to the hubs develop branch.

git checkout -b develop
echo 'Hello, develop!' > index.html
git add index.html
git commit -m'Test dev pimp hit'
git push web develop

Testing deployment to development

If you navigate in your browser to the development domain i.e. dev.example.com, you should see Hello develop!!

Hopefully all works for you and your now comfortable with this initial start in automated deployment using git.

Resources

Thanks to these links and their authors for getting me started with this approach:

• A web-focused Git workflow | Joe Maller
• A Git Primer | danielmiessler.com
• A Git Website | http://toroid.org

Hopscotch Kidney Fund for Children is a charity dedicated to helping children with kidney disease. It helps by offering fun and exciting events and activities for children. It also offers financial grants to parents for specific items needed at home to help their child and grants for parents in times of medical emergencies.

Please help raise money for this charity by making a donation via our Just Giving Page. Thank you.

I am a huge fan of generators as they for me, are a massive time saving tool in my day to day development. I have heard the arguments against them but personally, they speed up my work flow significantly for the repetitive tasks such as file/package creation and the initial injection of basic class code. As an added bonus my Unit Test classes also get generated and in some instances they are specific to the actual class type, it’s a no brainer for me to use these type of tools.

A little history

Up until now I have used Project Sprouts for both my project builds and generators and I still think its an amazing resource. However, there were a few minor issues and complexities (as a Ruby noob) I encountered on the generators which got myself and Dominic chatting on IM about potential solutions. Dominic highlighted an initial hurdle which resulted in Luke Bayes kindly taking time out to explain generators thus giving us an insight into the inner workings of Project Sprouts. The main problem with diving in and changing Project Sprouts was due to it being ultimately extremely powerful, but complex under the hood for someone like myself, simply put we just needed some classes generated.

Dominic found that Ruby on Rails also had generators and used a tool called Thor to facilitate this. Within a ridiculously short period of time Dominic had created a basic working model which he named Gator. This swiftly got segregated into a further library specifically for AS3 and MXML named gator-as3.

Gator-as3

The main use case scenario for generators in my development is when using the Robotlegs framework e.g. generating a view with it’s corresponding mediator plus unit tests. Another scenario is creating the typical directory structure of a project I use regularly, this became one of the first nuts Dominic cracked.

Project Templates

Please remember that gator and gator-as3 is all work in progress

Currently you can install something named a project template (naming conventions may change - I like project skeleton or Gator Bone). This basically is a directory structure which you instruct gator to install and then on creating a new project can be included and generated. Lets see this in action:

This article presumes you have Ruby installed on your dev environment, I use Ruby 1.9.2-p180.

1) Create a directory named RobotLegsTemplate and create the following directory structure including a simple README.md (this file can be omitted if you so choose):

1
2
3
4
5
6
7
8

RobotLegsTemplate/
  src/
      com/
          newtriks/
              controller/
              models/
              README.md
              views/

2) On command line install gator-as3 (this will also install gator):

1

gem install gator-as3 --pre

3) Install the template changing your path to the template accordingly:

1

gator project install /Users/newtriks/Development/dev/gator/RobotLegsTemplate

This will store your template in ~/.gator/templates/projects/.

4) Now create a new project based on this new template:

1

gator project new gator_example RobotLegsTemplate

Bam, you should now have a brand new project with the templates directory structure!

RobotLegs Generators

So the next step for me was to start porting across some of the generators I use in my daily development i.e. RobotLegs generators. I have created gator-as3-robotlegs on Github and so far covered the absolute basics needed for using RobotLegs within your project, this is all work in progress :)

1) Create a new directory named robotlegs_gator.

2) Gator projects need a configuration file where you (a) require the libraries i.e. gator-as3-robotlegs so they can be used within your project (b) define various project settings i.e. directory structure for Gator. So create the configuration file which has to be named gator.rb within your project root and add the following contents replacing your name and values as you see fit:

1
2
3
4
5
6
7
8
9
10

require "gator/as3/generators" 
require "gator/as3/generators/test/asunit4"
require "gator/as3/robotlegs/generators"
require "gator/as3/robotlegs/generators/test/asunit4"

project Gator::Project::ProjectBase.new
project.name = "MyProject"
project.options[:authors] = ["newtriks"]
project.layout[:source,:main,:as3] = "src"
project.layout[:source,:test,:as3] = "test"

This will tell Gator to use a directory structure as follows: [project root]/src & [project root]/test.

3) Install my gator-a3-robotlegs ruby gem:

1

gem install gator-as3-robotlegs --pre

4) Navigate into your project on command line and type the following to generate a view component (AS3) and mediator:

1

gator generate as3 robotlegs view_with_mediator com.newtriks.controller.CustomView --test

This should generate the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

gator_example/
  gator.rb
  src/
      com/
          newtriks/
              controller/
                  components/
                      CustomView.as
                  mediators/
                      CustomViewMediator.as
  test/
      AllTests.as
      com/
          newtriks/
              controller/
                  components/
                      CustomViewTest.as
                  mediators/
                      CustomViewMediatorTest.as

Nice huh?!

Currently I append certain names to particular templates generated i.e. Mediator, Service, Command so the following:

1

gator generate as3 robotlegs view_with_mediator com.newtriks.controller.CustomView --test

Appends the ‘Mediator’ string to the classname within the actual generator, this will be customisable in the future and with the ease generators and templates can be created you can custom make your own to your hearts content. Another point to add for the view/mediator generation is the views will be placed into a components directory and the mediator into mediators directory. This was something I pushed out on twitter recently and found that the general consensus leaned towards this architecture, but as above, this can easily be modified.

The –test parameter passed tells the generator to create the corresponding test, omit this to just create the class without a test.

More commands available for RobotLegs

Generate a RobotLegs Command Class:

1

gator generate as3 robotlegs command com.newtriks.controller.Startup --test

Generate a View Class:

1

gator generate as3 robotlegs view com.newtriks.views.CustomView --test

Generate a RobotLegs Mediator Class:

1

gator generate as3 robotlegs mediator com.newtriks.views.CustomMediator --test

Generate a RobotLegs Model (extends Actor) Class:

1

gator generate as3 robotlegs model com.newtriks.models.Login --test

Generate a RobotLegs Service (extends Actor) Class:

1

gator generate as3 robotlegs service com.newtriks.services.Remote --test

Command to generate a standard AS3 class:

1

gator generate as3 klass com.newtriks.Custom --test

TDD

As mentioned above passing in the value –test auto creates the corresponding Unit Test for the generated class. I use ASUnit4 for my testing and therefore have created a library of generators and templates as seen here. However, if you look on the gator-as3 repos you will see a FlexUnit set of generators and templates (in development). Simply changing the require in your gator.rb from:

1

require "gator/as3/generators/test/asunit4"

to:

1

require "gator/as3/generators/test/flexunit4"

Will instruct Gator to generate tests using FlexUnit4 instead of ASUnit4! How cool is that?! You can add whatever testing framework you want and structure your templates how you see fit…

I hope you will get some benefit from using Gator and have fun getting stuck in and having a play, any issues, requests or general feedback for anything Gator related then please go via the Gator Google group.

Further reading

• gator-as3 on Github
• gator-as3 on RubyGems.org
• gator-as3-robotlegs on Github
• gator-as3-robotlegs on RubyGems.org

If you clicked on the link above you will see a definition of modular as:

[Modular Architecture] Refers to the design of any system composed of separate components that can be connected together. The beauty of modular architecture is that you can replace or add any one component (module) without affecting the rest of the system. The opposite of a modular architecture is an integrated architecture, in which no clear divisions exist between components.

In reality when approaching your project it can be difficult to decide which logic should be separated out as a module, but I have found that the more you embark on the modular route the easier this decision becomes, there is no hard and fast rule to follow. I will not go into specific benefits in using a modular approach in Flex/ActionScript development as there are plenty of articles on the internet, if you would like an introduction into Flex modules and RobotLegs then read Joel’s informative post.

The example I built is on GitHub as a repository named AS3ModularRobotLegsExample and has a README detailing all the necessary information to get you up and running, including all the links to the required libraries etc.

I have used both Modular utilities on RobotLegs applications and both have their merits, however, I primarily started using the utilities in Flex applications with the latest versions of RobotLegs and As3 Signals so settled on Joel’s fork. After using that particular fork in Flex applications with no issues, I was concerned that there would be potential obstacles using it in a pure AS3 project as it appeared from the example geared towards Flex Modules. It works absolutely fine though but there are slight changes in the example Joel provides hence my creating the AS3ModularRobotLegsExample.

After reading around the links I provided above I think the main areas to familiarise yourself within the example would be the module loading logic therefore I recommend looking at the unit tests:

• LoadModulesCommandTest class
• UnloadModulesCommandTest class
• ModuleStoreTest class
• ModuleDictionaryTest class

As I stated in the README my chosen approach to module loading is one of many and mine is not necessarily the optimal method.

I am now working on a Flex 4.5 example and how to use Gator to generate the project as whole to save having to build this core logic manually plus the classes and corresponding Unit Tests.

As a developer are you testing locally, committing to source control and finally manually deploying your SWF’s to staging and production environments?

Do you work on applications as part of a team?

Do you use Continuous Integration (CI) and automated builds?

My answer was yes to all of the above except unfortunately the CI process. As you may well know from my blog and on twitter I have a keen interest with Project Sprouts and recently have also looked at Buildr, particulary Dominic Graefen’s AS3 port: Buildr-as3.

Together with Dominic (share my pain) Graefen (thnx man), I have been determined to setup a CI server using Jenkins on an Amazon EC2 instance which compiles SWFs and runs FlexUnit tests, for example on commit to git.

This was not a straight forward task…in fact it was a Grade A pain in the ar$e but eventually (it would appear) I managed to refine the process down to achieve the goal. Below are the steps that I have taken to set up an EC2 micro-instance with Git, Jenkins, RVM, Ruby, VNC, standalone debugger Flash Player, Buildr-as3 and compile/run FlexUnit tests using a Flex 4 based example! I have setup and torn down at least 6 instances to test and remove surplus instructions so hopefully it’s as lean as possible.

I am sure there could be further refinements made and on one of my test server setups I found I had some odd output which I need to work out why and where?

*(gflashplayer:1490): GLib-GObject-WARNING **: instance of invalid non-instantiatable type `(null)’

(gflashplayer:1490): GLib-GObject-CRITICAL *: g_signal_handlers_disconnect_matched: assertion `G_TYPE_CHECK_INSTANCE (instance)’ failed

But the tests run and all is happy. Micro-instances and rvm/project builds are not fast and I found have a tendency to hang on the first run/install so perseverance is required, but once running, all seems sweet with the world. Any further tips or guidance would be most welcomed! Oh and if you want to see an example of using CI for your Flex/Flash project just take a peek at this super sweet example.

EC2 Setup

Add SSH keys to EC2

1

http://alestic.com/2010/10/ec2-ssh-keys

Create EC2 instance from AMI (includes gitolite)

1

http://alestic.com/alestic-git/overview

Ubuntu Requirements

Includes basics from setup requirements

1
2
3
4
5

sudo apt-get update

sudo apt-get upgrade

sudo apt-get install build-essential dkms gcc linux-headers-$(uname -r) ncurses-dev zlibc zlib1g zlib1g-dev ia32-libs curl

Install necessary packages for ruby/rvm/buildr

1

sudo apt-get -y install unixodbc unixodbc-dev freetds-dev tdsodbc sqsh libxslt-dev libxml2-dev bison openssl libreadline6 libreadline6-dev git-core libssl-dev libyaml-dev libsqlite3-0 libsqlite3-dev sqlite3 autoconf libc6-dev

Jenkins Setup

Install Jenkins as per jenkins installation

Ensure port 8080 is open

1
2
3
4
5

cd /tmp
wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo aptitude update
sudo aptitude install jenkins

Configure Jenkins user

1
2
3

sudo adduser jenkins admin

sudo passwd jenkins

RUBY/RVM Setup - logged in as jenkins user

Install RVM

Huge props to this dudes article.

1
2
3

sudo su - jenkins

bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)

Configure .bashrc & .profile

1
2

touch ~/.bashrc
touch ~/.profile

Copy below source to .bashrc and reload

.bashrc source

1

source ~/.bashrc

Copy below source to .profile and reload

.profile source

1

source ~/.profile

Java Setup

Install correct JDK

1

sudo apt-get install openjdk-6-jdk

Configure JAVA_HOME path

1
2
3
4
5
6
7

vi ~/.bashrc

# Set JAVA_HOME path
JAVA_HOME=/usr/lib/jvm/java-6-openjdk
export JAVA_HOME
PATH=$PATH:$JAVA_HOME/bin
export PATH

Reload .bashrc

1

source ~/.bashrc

Check path is correct

1

echo $JAVA_HOME

Reboot - not 100% necessary

1

sudo reboot

Ruby Setup

Install Ruby 1.9.2

1

rvm install 1.9.2-p180

note Takes a while on an EC2 micro-instance (seriously can take ages > 30mins)

Set 1.9.2 as ruby default

1

rvm --default 1.9.2-p180

Prevent ri & RDoc creation due to time - optional

1
2

sudo su - jenkins
echo "gem: --no-ri --no-rdoc" >> ~/.gemrc

Gems Setup

Install Bundler

1

gem install bundler

Install buildr

1

JAVA_HOME=$JAVA_HOME gem install buildr

Install buildr-as3

1

gem install buildr-as3

Flash Setup

Install Standalone debugger FlashPlayer

As root

1
2
3
4
5
6
7
8
9
10
11

cd /tmp

wget http://download.macromedia.com/pub/flashplayer/updaters/10/flashplayer_10_sa_debug.tar.gz

tar xzvf flashplayer_10_sa_debug.tar.gz

sudo mv flashplayerdebugger /usr/bin

sudo ln -s /usr/bin/flashplayerdebugger /usr/bin/gflashplayer

rm flashplayer_10_sa_debug.tar.gz

VNC Setup

Install Vnc server

Instructions sourced here

1
2
3

sudo apt-get install vnc4server xinetd

vnc4server

Enter a password & take notice of the number after the colon (:)

1

vnc4server -kill :1

Replace the number “1” with the number from above.

1
2
3

sudo chmod 755 /etc/X11/xinit/xinitrc

sudo apt-get install vncviewer

Enable for Vnc Jenkins

1
2
3
4
5

sudo su - jenkins

vnc4server

vnc4server -kill :[number after colon when started server]

Install XVNC plugin in jenkins

1
2
3

https://wiki.jenkins-ci.org/display/JENKINS/Xvnc+Plugin

Jenkins > Manage Jenkins > Manage Plugins > Available

Reboot

Project Setup

1

sudo reboot

Create a new project

In Jenkins create a new free-style software project called SomeProject.

Enable Xvnc for project

1

Project > Configure > Build Environment > Run Xvnc during build

Run a build

To generate a workspace you need to run a build first

Install unzip

1

sudo apt-get install unzip

Copy local workspace to remote

1
2
3

sudo su - jenkins

cd jobs/SomeProject/

You may want to guarantee the integrity of the following zip before performing wget

1

wget http://db.tt/Dx5LbUo

Unzip workspace and cleanup

1
2
3

rm -r workspace
unzip [whatever wget saved it as mine was Dx5LbUo]
rm -r [whatever wget saved it as mine was Dx5LbUo] __MACOSX

Run first build on command line - also takes a long time for first build

1
2
3
4

sudo su - jenkins
cd ~/jobs/SomeProject/workspace
buildr clean
buildr test

Configure project build

In Jenkins > Project > Configure > Add Build Step > Execute Shell

1
2

buildr clean
buildr test

Post Build Actions > Publish JUnit test result report

1

**/reports/flexunit4/*.xml

And finally click Save at the bottom of the configuration page.

Build Project

Click Build Now

Note this build may take a couple of attempts

Further reading

• Buildr installation
• Buildr installation scripts

Are you a Flex or AS3 developer?

Do you use TDD?

If yes for both then do you do end to end testing?

For me the answer was no, that is until Stray first walked me through the concept whilst also introducing me to her utility named RobotEyes to facilitate end to end testing. I then proceeded to fork her RobotEyes repos and integrated the necessary logic to utilise the tool within a Flex project (see my RobotEyes Flex fork). There are other end to end tools for Flex out there but the major advantage for using RobotEyes as opposed to the other options are that RobotEyes actually integrates into your existing test cases, oh yeh!!!

1
2
3
4
5
6
7
8
9
10
11
12

import com.newtriks.views.LoggerTest;
import com.newtriks.views.SearchViewTest;
import com.newtriks.xendtoendtests.SearchWithResponseTest;

[Suite]
public class AllTests
{
    // End to end in the test suite yo!
    public var search_with_response_test:SearchWithResponseTest;
    public var search_view_test:SearchViewTest;
    public var logger_test:LoggerTest;
}

I have now constructed an example Flex 4 project to demonstrate an end to end test using RobotEyes. To help grasp the concept I have tried to keep this example as simple as I possibly can. The particular example introduces ASUnit 4 so you may want to also have a look at my previous blog post as an introduction into ASUnit 4. Please watch this space for further information on both RobotEyes and end to end testing AS3 and Flex applications.

RobotEyes Flex example

ActionScript to Ruby Tips

1

private var name:String="Simon";

1

@name="Simon"

1
2

var name:String="Simon";
trace("Hello "+name);

1
2

name="Simon"
puts "Hello #{name}"

1
2
3
4
5
6

function dump(name:String="World")
{
    trace("Hello "+name);
}

dump("Simon");

1
2
3
4
5

def dump(name="World")
    puts "Hello #{name}"
end

dump "Simon"

1
2
3
4
5

var _names:Array=["tom", "dick", "harry"];
for(var name:String in _names)
{
    trace("Hello "+name);
}

1
2
3
4

names=["tom", "dick", "harry"]
names.each do |name|
    puts "Hello #{name}"
end

1
2

var _names:Array=["tom", "dick", "harry"];
trace("Hello "+_names.join(", "));

1
2

names=["tom", "dick", "harry"]
puts "Hello #{names.join(", ")}"

1
2
3
4
5
6
7
8
9
10
11
12
13

var _names:Array=["tom", "dick", "harry"];
if(_names==null)
{
    trace("nil");
}
else if(!_names.length)
{
    trace("empty");
}
else
{
    trace("Hello "+_names[0]);
}

1
2
3
4
5
6
7
8

names=["tom", "dick", "harry"]
if names.nil?
    puts "nil"
elsif names.empty?
    puts "empty"
else
    puts "Hello #{names[0]}"
end

1
2
3
4
5
6
7
8
9
10

private var _foo:String;
public function set foo(value:String):void
{
    _foo=value;
}

public function get foo():String
{
    return _foo;
}

1

attr_accessor :foo

1
2
3
4
5
6
7
8
9

public function set foo(value:String):void
{
    _foo=value;
}

public function get foo():String
{
    return _foo;
}

1
2
3
4
5
6
7

def foo=(value)
    @foo = value
end

def foo
    @foo
end

1
2

$ rvm install 1.9.2
$ rvm use 1.9.2

To check which version of ruby your using and its installation location you can use the following:

1
2

$ ruby -v
$ which ruby

To check the the version of Sprouts you have installed for the currently loaded Ruby version (also lists all other installed gems):

1

$ gem list

My personal preference is to then set this specific version to be the default ruby i.e. when I open Terminal this is the version that is used:

1

$ rvm --default use 1.9.2

To switch back simply use:

1

$ rvm use system

Install Project Sprouts Now we have our ruby environment setup we can install Project Sprouts to a specific version of ruby.  Follow the instructions on the Project Sprouts website: Getting Started and go create a project shown in the installation example, have a little play familiarising yourself with Project Sprouts. If you installed everything correctly you should see flashsdk (1.0.27.pre) and sprout (1.1.11.pre): When you run:

1

$ gem list

Install IntelliJ IDEA Download and install IntelliJ IDEA 10.5 (other versions will be fine running this example). Create a new AS3 project Now this is an area I am trying to refine into a slightly smoother process by removing one of the steps, but for now roll with me.

1. Open IntelliJ and File > Create Command-line Launcher then follow the instructions.  This will enable us to launch IntelliJ in the current shell session and therefore target the specific RVM ruby version using IntelliJ’s command-line tool (super thanks to @devboy_org for this tip).

Create a new IntelliJ Project

For now this is not the ideal process and I am working on a better solution.  Step one is only applicable if your using RVM and not your system default installation of Ruby.  I have found two ways to set up a project, the first is the quickest and easiest and I thought I would show another optional alternative (Option Two below).

OPTION ONE

Step One:

1: If not your default then using RVM set the specific ruby version where you installed Project Sprouts

1

rvm use 1.9.2

2: Open IntelliJ IDEA from command line

1

idea .

You will see a warning from IntelliJ basically stating there is no project setup.

Step Two:

1: Now go ahead and create a Flex/ActionScript project as per normal named SomeProject. 2: In IntelliJ go to Tools > Run Command or use the hot keys (for mac it’s) SHIFT CMD X to open the Command Line Tools window and run the following command to navigate up to the projects parent directory:

1

cd ../

3: If you created a Flex project then bring up the command window and type:

1

sprout-flex SomeProject

else if ActionScript:

1

sprout-as3 SomeProject

4: In the command window navigate into your project folder:

1

cd SomeProject

5: Install dependencies

1

bundle install

OPTION TWO

Basically its a two step process where you first create a Flex/Actionscript project in IntelliJ as shown below and the secondly have to run the Project Sprouts generator for either a new as3 or flex project.  My future aim is to essentially create the IDEA project files using Project Sprouts at the same time as creating a new flex/as3 project and then auto load IntelliJ using the command-line launcher, all in one hit (similar to what is currently available for Maven Plugin)!  If anyone can help out pointing me in the right direction for generating IDEA files using rake then I would appreciate the help?

Step One:

Open IntelliJ and follow the below screen shots:

1: Create a new project from scratch

2: Give your project a name

3: Don’t bother creating a src directory as we can leave our Project Sprouts generator to do that

4: Define your module Flex SDK and finish

Step Two:

Open a new Terminal window and cd to where you created your new project:

1: Generate the project using sprouts

1

sprout-as3 SomeProject

2: Move into the project directory

1

cd SomeProject

3: Install dependencies

1

bundle install

4: Open in IntelliJ IDEA

1

idea .

Confirm that all our project files are in place!

Compile and run the project

For this tutorial I am going to show one particular method to run the project rake file. This is the simplest approach but if you have used RVM you must ensure you loaded the project in IntelliJ using the command-line launcher.

In IntelliJ go to Tools > Run Command or use the hot keys (for mac it’s) SHIFT CMD X to open the Command Line Tools window and either type rake or rake test and hit Enter. You should hopefully now see your rake task being run and either the swf with your project or the swf with an ASUnit test runner.

NOTE

Versions used for this example:

• asunit4 (4.2.3.pre)
• bundler (1.0.14)
• flashsdk (1.0.29.pre)
• rake (0.9.2)
• rubygems-update (1.8.5)
• rubyzip (0.9.4)
• sprout (1.1.15.pre)

AsUnit is the only open-source unit test framework for ActionScript that works with ActionScript 2, 2.5, 3.0, Flash Authoring (back to MX and up to CS4), Flex Builder, the Flex Framework (2 and 3), MTASC, MXMLC, and any version of Flash Player since version 6, including AIR and even FlashLite. We can even emit JUnit-compatible XML results. There is no dependency on any external tooling or framework.

It just works, and it works everywhere.

AsUnit4 test framework works with Flash Players 9, 10 and Adobe AIR and any version of the Flex framework. ASUnit3 tests can still be run in the latest version using Legacy Runner  (thanks to @robpenner for pointing to an example).  In ASUnit4 there are a list of significant new features and improvements including (as referenced from Luke): + Injection using SwiftSuspenders. + Speed improvements. + Composition over inheritance. + It uses annotations providing enormous flexibility. + It can swap runners at runtime thus supports legacy test cases (or even - at some point - other framework’s test cases). + It’s much easier to build custom printers. + The async functionality is much cleaner.

We will create the classes manually for this blog post, however in reality I use Project Sprouts to generate all my test classes, whats the point in doing it all manually?!

Setup your flex project in IntelliJ IDEA

I was about to do a screencast for setting up a flex project but remembered that both @jhooks and @codebum have removed the need for you to listen to my (potentially irritating) voice by recording their own extensive tutorials, so if your unsure of how to get started with IntelliJ I recommend watching their screencasts!

My final project setup screen looks like the following: Add Required Libraries to Project

1. Download ASUnit4 and copy the asunit directory and all of its contents from the src directory to the projects src directory.
2. Next create a lib directory in the project root and and copy into it: Reflection.swc and SwiftSuspenders-v1.5.1.swc.
3. Click the Project Structure icon (or use cmd; or File > Project Structure) and  in Project Setting select Module > Dependencies. Select Add > Library > * New Library > Actionscript/Flex.  Name the library lib and click Add Folders With SWC browsing to your lib directory select it and click OK and then OK* again to come out of the project settings panel.

Create a Test Runner and Test Suite

1. Within the project src create a new MXML Component (Flex 4) naming it FlexTestRunner and setting the Parent Spark component as Application.  Ensure the Class code looks as below:

1. Next within the project test directory create a new ActionScript class and name it AllTests and ensure the Class code looks as below:

Configure IntelliJ IDEA to use ASUnit4

IntelliJ has not got in built support to compile and run ASUnit4 as it has for FlexUnit and so we have to perform two steps to compile and run:

1. In your project root create a new directory called test then click the Project Structure icon (or use cmd; or File > Project Structure) and  in Project Setting select Module.  In the right hand panel under Sources select the newly created test directory and click the Sources button directly above the project file tree and click OK as shown below:
2. Secondly we need to create a run configuration for our tests.  Select Run > Edit Configurations and click the plus icon in the top left hand corner.  Select Flex from the drop down menu and name the new configuration TestRunner check the Main Class radio button and click the button to the left to browse to the main class, select FlexTestRunner and click OK.  You run configuration should look like below:

Start Writing Some Unit Tests

Now we have IntelliJ IDEA and ASUnit4 all configured plus a Test Runner and Suite let’s start looking into how to create our first UnitTest.

If you Run your TestRunner now it should run your FlexTestRunner and display no tests were found or executed with a nice little green stripe along the bottom of the window (this turns red if failed tests).  All we are going to do now is keep it simple (no package directories) and test a component which has a TextInput and a Button, on click of the button it will validate the text entered (I will re-use this logic in my up and coming example on end to end tests in Flex using RobotEyes).

1. Test the component class itself

Create a new ActionScript Class called SearchViewTest within the test directory.  The first thing we are going to do is use the new logic in ASUnit4 to inject the visual context of the test suite into the test case.  This is a handy new feature making use of SwiftSuspenders with the advantage being detailed nicely here by @stray_and_ruby:

…the idea is that the visual context of the test suite can be injected into any visual test case, rather than (as in asunit 3) having to addChild to the test case itself which forced the test cases to extend Sprite and was a bit messy. Create the injection point for the visual context as this is going to be testing out component on the display list, also add a private variable for the component we are going to test:

1
2
3
4

[Inject]
public var context:Sprite;

private var searchView:SearchView;

Now run the TestRunner, obviously this is going to flag up as a problem in our IDE as there is no SearchView component yet, so go ahead and create a new mxml component (parent spark component: Group) and name it SearchView.

Back to the test class we are going to add 3 core chunks of logic: + Before: Logic run before tests are actually initiated. + After: Logic run after tests completed. + Test: Actual test case to run.

All of the above are identified in our test class in the form of Metadata tags. Update SearchViewTest so it is the same as below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

[Before]
        public function setUp():void
        {
            searchView=new SearchView();
            context.addChild(searchView);
        }

        [After]
        public function tearDown():void
        {
            searchView=null;
        }

        [Test]
        public function instantiated():void
        {
            assertTrue(searchView is SearchView);
        }

So lets run this new test logic, but first we need to add the test case to our test suite AllTests:

1

public var search_view_test:SearchViewTest;

Now run the TestRunner and you should see the following:

2. Test a text input of a specific id is on the components display list

Swiftly back into our test class add:

1
2
3
4
5

[Test]
        public function search_view_has_search_textinput():void
        {
            assertNotNull(searchView.searchRequest_txt);
        }

Run TestRunner and you should get a compile error as we have not yet created the text input, so within SearchView add the following code:

Run TestRunner and it should now pass.

3. Test a button of a specific id is on the components display list****

Add the following new test:

1
2
3
4
5

[Test]
        public function search_view_has_submitbutton():void
        {
            assertNotNull(searchView.submit_btn);
        }

Run TestRunner and you should get a compile error as we have not yet created the button, so within SearchView add the following code below the text input:

Run TestRunner and it should now pass.

4. Test text input text populates correctly

Add another test to confirm that text input text matches what is actually entered:

1
2
3
4
5

[Test]
        public function search_text_is_populated():void
        {
            assertSame(searchView.searchRequest_txt.text, "Hello World");
        }

This test should Fail as we have not yet entered any text, so amend the above test as below:

1
2
3
4
5
6

[Test]
        public function search_text_is_populated():void
        {
            searchView.searchRequest_txt.text="Hello World";
            assertSame(searchView.searchRequest_txt.text, "Hello World");
        }

Run TestRunner and it should now pass.

4. Test button dispatches a specific event

In our final test we will confirm the submit button dispatches a specific event and to achieve this we shall inject the IAsync interface as provided by the framework:

1
2

[Inject]
        public var async:IAsync;

And then finally add the following test and handler functions:

1
2
3
4
5
6
7
8
9
10
11

[Test]
        public function submit_button_dispatches_specific_eventname():void
        {
            searchView.addEventListener("submitSearchEvent", async.add(submitDispatchesSpecificEventType));
            searchView.submit_btn.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
        }

        protected function submitDispatchesSpecificEventType(event:Event):void
        {
            assertSame(event.type, "submitSearchEvent");
        }

In order of events what is happening here is:

1. Adding an asynchronous handler function as the event handler to the view class for the expected dispatch of an event of type submitSearchEvent when the submit_btn is clicked. The async handler uses the function submitDispatchesSpecificEventType.
2. Manually dispatch a click event from the submit_btn.
3. Check the event type passed into the async event handler.

Your final test class should now look like this:

Run TestRunner and it should fail. So finally add the logic in the SearchView component that will handle the button click event dispatch of a specific event submitSearchEvent:

Run the TestRunner and it should pass!

Hopefully that should serve as a gentle introduction to ASUnit4.

Note: If for some reason your test fails due to a timeout on the async handler then just increase the handler timeout duration and it should pass.

Here are some further useful links and remember the tips are in the tests:

1. AS3
2. Flex 3
3. Flex 4
4. AIR 2
5. Test Suite
6. Visual Test Case
7. Async Test Case
8. ASUnit3 Docs
9. Keep an eye on my RobotLegs Project Sprout generators to save you a load of time creating components and their corresponding tests: https://github.com/newtriks/sprout-robotlegs

A serious shout out to @stray_and_ruby for all her patience and guidance in the realms of TDD, thank you!

Simply put Alfred App is:

Alfred is a productivity application for Mac OS X, which aims to save you time in searching your local computer and the web. And Project Sprouts is: Project Sprouts is a highly cohesive, loosely coupled collection of features that take some of the suck out of programming. So the two combined essentially mean super speed and efficiency for those mundane tasks i.e. creating new projects or classes etc.  The first script I put up creates a new AS3 project, downloads Stray’s Project Sprouts generators for Robotlegs and opens up the newly created project in a Finder window.  Have a play and see what you think and also be sure to check out this amazing site for further scripts to use with Alfred.

As you may be aware, this particular setup also discourages (and as I recall prevents) a root password login, naturally for heightened security, so I had to do some digging. I soon discovered that using the cat command I could work around the issue and append my local public ssh key to the authorized_keys on the remote server. This is what it should look like:

1

cat ~/.ssh/id_dsa.pub | ssh -i your-amazon-generated-key.pem ec2-user@your-amazon-instance-ip "cat>> .ssh/authorized_keys"

You should then be able to SSH into your server using RSA based authentication and ultimately regain the privilege to use the scp command.

Funnily enough @vandergoog pointed out on Twitter a similar person undergoing the same issue whom also resolved it in the same manner, plus a poll was setup and there are a few votes for true, so I am not alone on this.

Please note that I am sure that this is due to some inherent Amazon/security logic that is both recommended plus beneficial and I am missing the boat on this one, any further insight from any hardcore Linux/SSH users would be appreciated.

The idea was spawned whilst at Flash On The Beach and I was chatting to another Flash developer about OSMF. We were both not overly keen on the framework (in certain scenarios) and he went onto explain he re-uses the building blocks of an FLV player he built based on Minimal Comps, which I thought was a great idea. Feel free to fork and add to the project on GitHub (improvements are welcomed) or download and use at your leisure for rapid testing within your projects. This is not intended to be a feature rich player to be used on live sites, its simply a light weight solution for developers involved with media related applications.

1
2
3
4
5
6
7
8
9
10

<cfset args = arrayNew(1)>
<cfset args[1] = #foo#>
<cfset args[2] = #joined_strings#>

<cfexecute name = "myscript.sh"
             arguments = "#args#"
                 variable="_result"
             errorVariable="_error"
                 timeout = "99">
</cfexecute>

• And lastly in the Shell script I create an Array from the joined_strings argument, looping through this and performing necessary actions on each element:

1
2
3
4
5
6
7
8
9

#!/bin/bash
NAME=$1
STR=$2
STRINGS=(${STR[*]})
echo: foo: $NAME
for ix in ${!STRINGS[*]}
do
    echo "${STRINGS[$ix]}"
done

Output in Flex:

1
2
3

[trace] foo: newtriks
[trace] "one"
[trace] "two"

This is not my area of expertise so if anyone can offer better solutions they would be appreciated.

This link helped with the final hurdle, thank you to the author!

Here I will detail the main snippets of functionality, download the actual source (links at bottom of the post) to get the full picture.

I tend to programme more in ActionScript as opposed to mxml, this is just my personal preference, however, lets do things a bit different and create a ValueObject using mxml and bind the selectedItems property to the selectedItems getter within custom List:

1
2
3
4
5
6
7
8
9
10
11

<fx:Declarations>
        <!-- demo dataprovider -->
        <fx:Array id="dp">
            <vo:Item itemName="Iron Man"/>
            <vo:Item itemName="Spiderman"/>
        </fx:Array>
        <!-- Custom vo -->
        <vo:CustomVO id="model">
            <vo:selectedItems>{itemList.selectedItems}</vo:selectedItems>
        </vo:CustomVO>
    </fx:Declarations>

In a custom List create a Bindable getter that the VO selectedItems property (see above) is bound to:

1
2
3
4
5

[Bindable(event="propertyChange")]
public function get selectedItems():Array
{
     return _items;
}

In the List create a handler for the dataChange Event:

1
2
3
4

protected function handleCreationComplete(event:FlexEvent):void
{
    list.addEventListener(FlexEvent.DATA_CHANGE, handleItemSelected);
}

Still within the List add a method to loop through the data provider to retrieve all the currently selected items. This will change the selectedItems total count and update bindings by dispatching a propertyChange Event:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

protected function handleItemSelected(event:FlexEvent):void
{
    setSelectedItems();
}

protected function setSelectedItems():void
{
    var i:int;
    var length:int=dataProvider.length;
    var item:Item;
    _items=[];
    for(i=0; i<length; i++)
    {
        item=dataProvider.getItemAt(i) as Item;
        if(item.itemSelected)
        {
            _items.push(item);
        }
    }
    dispatchEvent(new Event("propertyChange"));
}

Within the custom ItemRenderer a data Object is going to be assigned a custom VO named Item with the following properties:

1
2

public var itemName:String;
public var itemSelected:Boolean=false;

In the ItemRenderer assign a handler to the CheckBox change Event and update the data’s itemSelected property. If the itemSelected property has changed then dispatch a dataChange Event, this will ensure all the Bindings are kept in sync thus updating our custom VO in the main class.

1
2
3
4
5
6

protected function handleSelectionChange():void
{
    if(data.itemSelected==item_cb.selected) return;
    data.itemSelected=item_cb.selected;
    this.dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE, true));
}

This is a simple example as I stated above and there are many ways to achieve the final goal.

Hopefully this will help someone out there, and if you want to read more about Bindings then view my BindingUtils chain and DataBinding a Proxy to a Mediator posts.

View the example [wpfilebase tag=file id=1]

1) Install IntelliJ IDEA:

jetbrains.com/idea/download/

2) Download and follow setup instructions for MXUnit (mxunit.org).

3) Create a new project in IntelliJ: File > New Project.

4) Keep the default Create project from scratch option and click next.

5) Name your project example_project and ensure your project files location is in your ColdFusion root e.g. /Users/newtriks/Sites/example_project

6) Ensure create module is selected and the module to use is the default Java Module and click next.

7) Select do not create a src directory and then click next and then finish.

8) Create an Application.cfc in the root of example_project by right clicking on the example_project directory > New > ColdFusion Tag Component and enter the following:

1
2
3
4
5

<cfcomponent output="false">
  <!--- set up per application mappings --->
  <cfset this.mappings = {}>
  <cfset this.mappings["/com"] = GetDirectoryFromPath( GetCurrentTemplatePath() ) & "com">
</cfcomponent>

9) Create a new directory in example_project and name it com.

10) Within the newly created com directory create a new file named App.cfc and enter the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<cfcomponent>
    <cffunction name="addRapper" 
              access="remote"
              returntype="any">
      <cfargument name="rapperName" 
                  type="string" 
                  required="true" 
                  hint="Name of a rapper">
      <cfscript>
          var dummyResult=StructNew();
          dummyResult.name=rapperName;
            return dummyResult;
      </cfscript>
  </cffunction>
</cfcomponent>

11) Create the following package structure:

example_project > test

12) Within the test directory create AppTest.cfc and enter the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<cfcomponent extends="mxunit.framework.TestCase">
  <cffunction name="setUp" returntype="void" access="public" hint="Setup prior to running tests">
      <cfset obj = createObject("component","com.App")>
  </cffunction>
  <cffunction name="tearDown" returntype="void" access="public" hint="Tear down post running tests">
      <!--- cleanup --->
  </cffunction>
  <cffunction name="testAddRapper" returntype="void" access="public">
      <cfscript>
          var rapperName="Kool Keith";
          var result = obj.addRapper(rapperName);
          debug(result);
          assertEquals(rapperName,result.NAME);
      </cfscript>
  </cffunction>
</cfcomponent>

13) Select: Run > Edit Configurations and add a new configuration by clicking the plus icon in the top left corner.

14) Select ColdFusion in the list of available run configurations and name it test-example.

15) In the web path input field enter the below url (amend your localhost param accordingly) and click OK:

1

http://localhost/example_project/test/AppTest.cfc?method=runTestRemote

16) Select Run > Run or click the green triangle in the toolbar. You should see the below image:

Time saving utilities are crucial as a developer to help cut down on repetitive tedious tasks and also to help reduce errors. Applications such as Text Expander was one great time saving tool and then when I discovered live templates in IntelliJ IDEA, I truly saw the rewards of code generation, especially when combined with ANT for project builds. Project Sprouts takes time saving to a completely new level, accelerating project development workflow in a well structured and logical format.

What I was keen on understanding was where it would help me the most (initially at least) and that is project and class Generators (also read).

Sprout generators should be installed by RubyGems as command line applications on your system. After installing the flashsdk gem, you should have access to a variety of generators…..Some generators are expected to create new projects, others expect to run within existing projects.

Stray kindly hooked me up with her RobotLegs bundle to get me started (this is specific to V0.7 of Sprouts) and I also found the library by Kristofer Joseph which I understand Luke Bayes (Project Sprout creator) has assisted on also. Kristofer’s library has been updated for the V1 release of Project Sprouts and is in turn an excellent resource to understand the hooks required for using Generators in the latest Project Sprouts release (combined with reading the documentation and source of the Sprout-FlashSDK Gem).

I wanted to gain an understanding of building my own Generators and wanted to help detail the steps necessary to achieve this task. The rest of this post outlines how to create a custom class generator using a combination of command line (note I am on Mac OS X) and code editing (I use TextMate, feel free to choose your tool). l define a custom Event template and write a Generator for it, including simple Unit Tests and obviously a project example.

Pre-Requirements:

• Download and install RVM: rvm.beginrescueend.com. This is not necessarily a requirement but saves a load of potential grief with permissions etc so is highly recommended.
• Install follow instructions for ProjectSprouts setup: projectsprouts.org.

1. Create a new Ruby project using the sprout-ruby generator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Newtriks-MB:~ newtriks$ cd ~/Development/dev/

Newtriks-MB:dev newtriks$ sprout-ruby CustomGenerators
Created directory: ./custom_generators
Created file:      ./custom_generators/Gemfile
Created file:      ./custom_generators/Rakefile
Created file:      ./custom_generators/custom_generators.gemspec
Created directory: ./custom_generators/lib
Created file:      ./custom_generators/lib/custom_generators.rb
Created directory: ./custom_generators/lib/custom_generators
Created file:      ./custom_generators/lib/custom_generators/base.rb
Created directory: ./custom_generators/test
Created directory: ./custom_generators/test/fixtures
Created directory: ./custom_generators/test/unit
Created file:      ./custom_generators/test/unit/custom_generators_test.rb
Created file:      ./custom_generators/test/unit/test_helper.rb
Created directory: ./custom_generators/bin
Created file:      ./custom_generators/bin/custom-generators

2. CD into the newly created project and create a new Ruby Gem using sprout-generator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Newtriks-MB:dev newtriks$ cd custom_generators
 
Newtriks-MB:custom_generators newtriks$ sprout-generator MyEvent
[INFO] It seems you already have a Gemfile in this project, please be sure it has the following content:
 
  gem "sprout", ">= #{Sprout::VERSION::STRING}"
 
  group :development do
    gem "shoulda"
    gem "mocha"
  end
 
Skipped directory: ./bin
Created file:      ./bin/my-event
Skipped directory: ./lib
Skipped directory: ./lib/
Created directory: ./lib/generators
Created file:      ./lib/generators/my_event_generator.rb
Created directory: ./lib/generators/templates
Created file:      ./lib/generators/templates/MyEvent.as
Skipped directory: ./test
Skipped directory: ./test/unit
Created file:      ./test/unit/my_event_generator_test.rb
Skipped file:      ./test/unit/test_helper.rb
Skipped directory: ./test/fixtures
Created directory: ./test/fixtures/generators

3. Keep things as simple as we can for now and only unit test the custom Event generation, so remove the custom_generators_test:

1

rm ./test/unit/custom_generators_test.rb

4. Run a rake test (we know this will fail):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Newtriks-MB:custom_generators newtriks$ rake test
(in /Users/newtriks/Development/dev/custom_generators)
/Users/newtriks/.rvm/rubies/ruby-1.9.2-p136/bin/ruby -I"lib:test/unit" "/Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/rake-0.8.7/lib/rake/rake_test_loader.rb" "test/unit/my_event_generator_test.rb"
Loaded suite /Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/rake-0.8.7/lib/rake/rake_test_loader
Started
E
Finished in 0.006820 seconds.
 
  1) Error:
test: A new MyEvent generator should generate a new MyEvent. (MyEventGeneratorTest):
RuntimeError:  - 'This is your generator template' should include '(?-mix:Your content to assert here)'
    /Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/sprout-1.1.7.pre/lib/sprout/test_helper.rb:232:in `assert_matches'
    test/unit/my_event_generator_test.rb:54:in `block (3 levels) in <class:MyEventGeneratorTest>'
    /Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/sprout-1.1.7.pre/lib/sprout/test_helper.rb:186:in `assert_file'
    test/unit/my_event_generator_test.rb:51:in `block (2 levels) in <class:MyEventGeneratorTest>'
    /Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/shoulda-2.11.3/lib/shoulda/context.rb:382:in `call'
    /Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/shoulda-2.11.3/lib/shoulda/context.rb:382:in `block in create_test_from_should_hash'
    /Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/mocha-0.9.10/lib/mocha/integration/mini_test/version_142_and_above.rb:27:in `run'
 
1 tests, 2 assertions, 0 failures, 1 errors, 0 skips
 
Test run options: --seed 12221
rake aborted!
Command failed with status (1): [/Users/newtriks/.rvm/rubies/ruby-1.9.2-p13...]
 
(See full trace by running task with --trace)

Open project in TextMate (or IDE of your choice):

1

Newtriks-MB:custom_generators newtriks$ mate .

EDIT WITHIN TEXTMATE

5. Create a simple method to test for class creation:

-> edit: test > unit > my_event_generator_test.rb

1
2
3
4
5
6
7
8
9
10
11
12
13
14

should "generate a new MyEvent" do
    # provide example input:
    @generator.input = "MyEvent"
    @generator.execute
 
    input_dir = File.join @temp, "my_event"
    assert_directory input_dir
 
    input_file = File.join input_dir, "MyEvent.as"
    # test input dir exists
    assert_directory input_dir
    # test input create a class of the same name in input dir
    assert_file File.join(@temp, 'my_event', 'MyEvent.as')
end

/ END EDIT WITHIN TEXTMATE

6. Run the rake test again:

1
2
3
4
5
6
7
8
9
10
11

Newtriks-MB:custom_generators newtriks$ rake test
(in /Users/newtriks/Development/dev/custom_generators)
/Users/newtriks/.rvm/rubies/ruby-1.9.2-p136/bin/ruby -I"lib:test/unit" "/Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/rake-0.8.7/lib/rake/rake_test_loader.rb" "test/unit/my_event_generator_test.rb"
Loaded suite /Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/rake-0.8.7/lib/rake/rake_test_loader
Started
.
Finished in 0.006958 seconds.
 
1 tests, 3 assertions, 0 failures, 0 errors, 0 skips
 
Test run options: --seed 36007

7. Test a build and install, note does not show up in gemlist:

1
2
3
4
5
6
7
8
9
10
11

Newtriks-MB:custom_generators newtriks$ gem build custom_generators.gemspec
WARNING:  bin/custom-generators is missing #! line
  Successfully built RubyGem
  Name: custom_generators
  Version: 0.0.0.pre
  File: custom_generators-0.0.0.pre.gem
Newtriks-MB:custom_generators newtriks$ gem install --local custom_generators
Successfully installed custom_generators-0.0.0.pre
1 gem installed
Installing ri documentation for custom_generators-0.0.0.pre...
Installing RDoc documentation for custom_generators-0.0.0.pre...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Newtriks-MB:custom_generators newtriks$ gem list
 
*** LOCAL GEMS ***
 
archive-tar-minitar (0.5.2)
asunit4 (4.2.2.pre)
bundler (1.0.7)
custom (0.0.4.pre, 0.0.3.pre, 0.0.2.pre, 0.0.1.pre)
flashsdk (1.0.18.pre)
mocha (0.9.10)
open4 (1.0.1)
rake (0.8.7)
rubygems-update (1.4.2, 1.4.1)
rubyzip (0.9.4)
shoulda (2.11.3)
sprout (1.1.7.pre)

EDIT WITHIN TEXTMATE

8. Increase our RubyGem version number:

-> edit: lib > custom_generators.rb

1

VERSION = '0.0.1.pre'

/ END EDIT WITHIN TEXTMATE

9. Build the custom gem:

1
2
3
4
5

Newtriks-MB:custom_generators newtriks$ gem build custom_generators.gemspec
  Successfully built RubyGem
  Name: custom_generators
  Version: 0.0.0.pre
  File: custom_generators-0.0.0.pre.gem

10. Locally install our custom gem:

1
2
3
4
5

Newtriks-MB:custom_generators newtriks$ gem install --local custom_generators
Successfully installed custom_generators-0.0.1.pre
1 gem installed
Installing ri documentation for custom_generators-0.0.1.pre...
Installing RDoc documentation for custom_generators-0.0.1.pre...

Note it is now displaying in the local gem list:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Newtriks-MB:custom_generators newtriks$ gem list
*** LOCAL GEMS ***

archive-tar-minitar (0.5.2)
asunit4 (4.2.2.pre)
bundler (1.0.7)
custom_generators (0.0.1.pre)
flashsdk (1.0.18.pre)
mocha (0.9.10)
open4 (1.0.1)
rake (0.8.7)
rubygems-update (1.4.2, 1.4.1)
rubyzip (0.9.4)
shoulda (2.11.3)
sprout (1.1.7.pre)

EDIT WITHIN TEXTMATE

11. Start steps to extend the FlashSDK Gem, firstly define the dependency in the Gemfile:

-> edit: Gemfile

Add:

1

gem 'flashsdk', '>= 1.0.13.pre'

Ensure the actual generator includes the library:

-> edit: lib > custom_generators.rb

Add:

1

require 'flashsdk'

12. Define the custom generator template, here we will simply create a custom event making use of the package_name and class_name variables:

These package name and class name variables are processed by Sprouts using your arguments. There are several pre-processed variables you can use: full_class_name, class_name and package_name all use dot syntax (full_class_name is the package.Class value), while class_file and class_dir are path/file values relative to your source directory.

-> edit: lib > generators > templates > MyEvent.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package <%= package_name %>{
    import flash.events.Event;
 
    public class <%= class_name %> extends Event {
 
        public function <%= class_name %>(type:String,
                bubbles:Boolean=false,
                cancelable:Boolean=false) {
            super(type, bubbles, cancelable);
        }
 
        override public function clone():Event {
            return new <%= class_name %>(type, bubbles, cancelable);
        }
    }
}

-> edit: lib > generators > my_event_generator.rb

13. Update the logic within the custom event class generator, note extending the FlashSDK Gem

1
2
3
4
5
6
7
8
9
10
11
12
13

module CustomGenerators
  ##
  # This is where you describe your new Generator.
  class MyEventGenerator <FlashSDK Gem::ClassGenerator
 
    def manifest
        directory class_directory do
          template "#{class_name}.as", 'MyEvent.as'
        end
    end
 
  end
end

14. Amend the gem to include the FlashSDK Gem:

-> edit: bin > my-event

1
2
3
4
5
6
7
8
9

#!/usr/bin/env ruby

require 'rubygems'
require 'flashsdk'
require 'generators/my_event_generator'

generator = CustomGenerators::MyEventGenerator.new
generator.parse! ARGV
generator.execute

15. Increase the version number of the gem:

-> edit: lib > custom_generators.rb

1

VERSION = '0.0.2.pre'

16. Change our custom generator namespace:

-> edit: test > unit > my_event_generator_test.rb

Change:

1
2

# Instantiate the generator:
@generator        = Sprout::MyEventGenerator.new

To:

1
2

# Instantiate the generator:
@generator        = CustomGenerators::MyEventGenerator.new

17. Update the unit test method accordingly:

1
2
3
4
5
6
7

should "generate a new CustomEvent using MyEvent template" do
    # provide example input:
    @generator.input = "CustomEvent"
    @generator.execute
 
    assert_file File.join(@temp, 'src', 'CustomEvent.as')
end

/ END EDIT WITHIN TEXTMATE

18. Install required gems:

1
2
3
4
5
6
7
8
9
10
11

Newtriks-MB:custom_generators newtriks$ bundle install
Using rake (0.8.7) 
Using archive-tar-minitar (0.5.2) 
Using bundler (1.0.7) 
Using open4 (1.0.1) 
Using rubyzip (0.9.4) 
Using sprout (1.1.7.pre) 
Using flashsdk (1.0.18.pre) 
Using mocha (0.9.10) 
Using shoulda (2.11.3) 
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.

19. Test the generator:

1
2
3
4
5
6
7
8
9
10
11

Newtriks-MB:custom_generators newtriks$ rake test
(in /Users/newtriks/Development/dev/custom_generators)
/Users/newtriks/.rvm/rubies/ruby-1.9.2-p136/bin/ruby -I"lib:test/unit" "/Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/rake-0.8.7/lib/rake/rake_test_loader.rb" "test/unit/my_event_generator_test.rb"
Loaded suite /Users/newtriks/.rvm/gems/ruby-1.9.2-p136/gems/rake-0.8.7/lib/rake/rake_test_loader
Started
.
Finished in 0.037701 seconds.
 
1 tests, 1 assertions, 0 failures, 0 errors, 0 skips
 
Test run options: --seed 52964

20. Build the gem:

1
2
3
4
5

Newtriks-MB:custom_generators newtriks$ gem build custom_generators.gemspec
  Successfully built RubyGem
  Name: custom_generators
  Version: 0.0.2.pre
  File: custom_generators-0.0.2.pre.gem

21. Install the gem locally:

1
2
3
4
5

Newtriks-MB:custom_generators newtriks$ gem install --local custom_generators
Successfully installed custom_generators-0.0.2.pre
1 gem installed
Installing ri documentation for custom_generators-0.0.2.pre...
Installing RDoc documentation for custom_generators-0.0.2.pre...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Newtriks-MB:custom_generators newtriks$ gem list
*** LOCAL GEMS ***

archive-tar-minitar (0.5.2)
asunit4 (4.2.2.pre)
bundler (1.0.7)
custom_generators (0.0.2.pre, 0.0.1.pre)
flashsdk (1.0.18.pre)
mocha (0.9.10)
open4 (1.0.1)
rake (0.8.7)
rubygems-update (1.4.2, 1.4.1)
rubyzip (0.9.4)
shoulda (2.11.3)
sprout (1.1.7.pre)

22. Create a project to test the new generator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Newtriks-MB:custom_generators newtriks$ cd ../

Newtriks-MB:dev newtriks$ sprout-as3 EventTestProject
Created directory: ./EventTestProject
Created file:      ./EventTestProject/rakefile.rb
Created file:      ./EventTestProject/Gemfile
Created directory: ./EventTestProject/src
Created file:      ./EventTestProject/src/EventTestProject.as
Created file:      ./EventTestProject/src/EventTestProjectRunner.as
Created directory: ./EventTestProject/assets
Created directory: ./EventTestProject/assets/skins
Created file:      ./EventTestProject/assets/skins/DefaultProjectImage.png
Created directory: ./EventTestProject/lib
Created directory: ./EventTestProject/bin

Newtriks-MB:dev newtriks$ cd EventTestProject

23. Run my-event generator:

1
2
3

Newtriks-MB:EventTestProject newtriks$ my-event CustomEvent
Skipped directory: ./src
Created file:      ./src/CustomEvent.as

24. Destroy previous generator run logic:

1
2
3
4

Newtriks-MB:EventTestProject newtriks$ my-event CustomEvent --destroy
Removed file:                ./src/CustomEvent.as
Skipped remove directory:    ./src
Skipped remove directory:    .

25. Re-run my-event generator within a package structure:

1
2
3

Newtriks-MB:EventTestProject newtriks$ my-event com.newtriks.events.CustomEvent
Created directory: ./src/com/newtriks/events
Created file:      ./src/com/newtriks/events/CustomEvent.as

Successful custom generator generated Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package com.newtriks.events {
  import flash.events.Event;

    public class CustomEvent extends Event {

        public function CustomEvent(type:String,
              bubbles:Boolean=false,
              cancelable:Boolean=false) {
          super(type, bubbles, cancelable);
        }
      
      override public function clone():Event {
          return new CustomEvent(type, bubbles, cancelable);
      }
    }
}

Further reading:

Gem Bundler: gembundler.com

Many thanks to @stray_and_ruby and @lukebayes for proof reading the code in this blog post.

1) Install TextMate:

macromates.com

2) Install the GetBundles tmbundle:

github.com/adamsalter/GetBundles.tmbundle

3) In TextMate:

Bundles > GetBundle > Install Bundle.

This will generate a list of available bundles, scroll down the list to ColdFusion and follow instructions to install.

4) Download and follow setup instructions for MXUnit (mxunit.org).

5) Create a new directory in your ColdFusion root and name it example_project.

6) You can now either open TextMate and drag the example_project onto the dock icon, or in Terminal cd to example_project and type:

1

mate .

7) Create an Application.cfc in the root of example_project by right clicking on the example_project directory in TextMate’s gutter and enter the following:

1
2
3
4
5

<cfcomponent output="false">
  <!--- set up per application mappings --->
  <cfset this.mappings = {}>
  <cfset this.mappings["/com"] = GetDirectoryFromPath( GetCurrentTemplatePath() ) & "com">
</cfcomponent>

8) Create a new directory in example_project and name it com.

9) Within the newly created com directory create a new file named App.cfc and enter the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<cfcomponent>
    <cffunction name="addRapper" 
              access="remote"
              returntype="any">
      <cfargument name="rapperName" 
                  type="string" 
                  required="true" 
                  hint="Name of a rapper">
      <cfscript>
          var dummyResult=StructNew();
          dummyResult.name=rapperName;
            return dummyResult;
      </cfscript>
  </cffunction>
</cfcomponent>

10) Create the following package structure:

example_project > test

11) Within the test directory create AppTest.cfc and enter the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<cfcomponent extends="mxunit.framework.TestCase">
  <cffunction name="setUp" returntype="void" access="public" hint="Setup prior to running tests">
      <cfset obj = createObject("component","com.App")>
  </cffunction>
  <cffunction name="tearDown" returntype="void" access="public" hint="Tear down post running tests">
      <!--- cleanup --->
  </cffunction>
  <cffunction name="testAddRapper" returntype="void" access="public">
      <cfscript>
          var rapperName="Kool Keith";
          var result = obj.addRapper(rapperName);
          debug(result);
          assertEquals(rapperName,result.NAME);
      </cfscript>
  </cffunction>
</cfcomponent>

12) In TextMate go to Bundles > Bundle Editor > Show Bundle Editor.

13) Select HTML from the list, click on the bottom left + icon in the Bundle Editor selecting New Command.

14) Enter the following command text amending the url to point to your ColdFusion localhost:

1
2

echo "<meta http-equiv='Refresh' content='0;
    URL=http://localhost/~$USER${TM_FILEPATH#$HOME/Sites}?method=runTestRemote'>"

15) Ensure the AppTest.cfc class is open and hit your shortcut keys specified for the newly created command to see the below window