There are plenty of blog posts out there hailing the virtues of Robotlegs IoC/DI Framework, so I will skip the ‘so cool’ speech and simply say 1) DI goes a long way towards keeping my view components clean and 2) working directly with AS Events, vs. PureMVC Notifications, is a welcome simplification. Dig’n Robotlegs.
After walking through the Robotlegs demo by Joel Hooks I decided to build a simple AS3 demo based on the minimalist PureMVC demo by Chandima Cumaranatunge. This app will track and trace out keystrokes with the support of Robotlegs.
To start-
Download the sample project for use as a guide.
Create an AS project called Keystroke. FYI I am working in Eclipse w/ FlexBuilder plugin
Modify the project properties to include the RobotLegs swc
In the src dir create the following directory structure
In the keystroke dir create new AS class called KeystrokeContext which extends Context from org.robotlegs.mvcs.Context
Open Keystroke.as (your main project file) and type the following inside the constructor
var context:KeystrokeContext = new KeystrokeContext();
context.contextView = this;
*make sure the import statement for your context file is included near the top of this file.
Create the View -
Create an AS class in the views dir called StageOverlay.as which extends MovieClip. This will act as our view component but do little more than receive focus and overlay the application.
Add an event listener to the constructor which fires drawStage(event) in response to ADDED_TO_STAGE. Use drawStage() to add a TextField the display list. See the sample file for details.
Return to Keystroke.as and add StageOverlay to the display list
var stageOverLay:StageOverlay = new StageOverlay();
this.addChild(stageOverLay)
Create mediator and listeners -
Create an AS class in the views dir called StageMediator which extends org.robotlegs.mvcs.Mediator.
1. inject StageOverlay and KeyDataModel (above the constructor)
2. create the onRegister() function and inside it map listeners for the native KEY_DOWN event and the custom KEYSTROKE_ADDED event and assign the handlers
3. create a handler that dispatches a StageEvent in response to KEY_DOWN
4. create a handler that updates the text field in the view with data from the model in response to KEYSTROKE_ADDED
Use Context to map mediator to view -
1. Open KeystrokeContext.as and create a startup() function
2. Inside startup() type mediatorMap.mapView( StageOverlay, StageMediator);
Create the model, events, and commands -
1. In the events dir create StageEvent.as extending Event (see sample) which will be dispatched by our StageMediator
2. In the events dir create KeyDataModelEvent.as extending Event (see sample) which will be dispatched by our KeyDataModel upon update
3. In the contollers dir create StoreKeyCommand.as extending Command. This will trigger the addKeystoke() in our model.
4. In the models dir create KeyDataModel.as extending Actor. This will contain a keystrokes:Array to store data, a function addKeystroke() to populate keystrokes, and a function get keystrokeList() to retrieve keystrokes.
Use Context to map model, event and command -
1. Open KeystrokeContext.as
2. inside startup() type injector.mapSingleton(KeyDataModel);
3. inside startup() type commandMap.mapEvent( StageEvent.KEYSTROKE_EVENT, StoreKeyCommand);
Run your new AS app and you should be in business.
more posts at toddrothe.com/blog
