In the current project that I am working on, there was a part where I needed the coordinates of points along a path. The brute force way was to estimate the next point myself and to compile to see if I was right, repeat until I had all the coordinates I needed. Very tedious and boring task and the path could change often so there was high chances that I would redo this process often. What better time to start making a tool! Well it turn out that my project changed so much that that part wasn’t in it anymore… But it still makes a great topic for this blog.

Let me start by showing you what will be the result of this first post. (Below is not juste whitespace, click in it to ad points. You can select a path to make a control point appear, drag the control point to make a curve).

As you can see this is pretty bare bone. But the good thing about that is that you can use this as the base of multiple tools.

I built this using Robotlegs. If I am going to build something for myself, might as well learn (or train) a few things on the way. Plus, I think Robotlegs is very well suited for application style projects. Now that being said, using that kind of framework (MVC) will require you to create a lot of extra classes but in the end you will understand what you gain by doing so. Out of all these, 4 of them are really important. The Model, where you will keep all information on paths and points at all time and three View classes; one for the clickable area layer, one for the paths layer and one for the point layer.

The easiest of all of them is the clickable are layer. It’s job is just to register clicks and tell the framework where something has been clicked. This could have been done otherwise, but since we will want to layer stuff (points are over paths) plus we will want to select points and path to move or curve them, it is just easier to create a view just to register clicks on the unused stage and put that view in the back off our application.

package com.zedia.drawingtool.view.components {
  import com.zedia.drawingtool.events.PointEvent;
  import com.zedia.drawingtool.model.objects.PointObject;
  import flash.display.Sprite;
  import flash.events.MouseEvent;
 
  /**
    * @author dominicg
  */
  public class DrawingArea extends Sprite {
    public var pointArray:Array;
    private var _pathArray:Array;
    public function DrawingArea() {
      graphics.beginFill(0xffffff);
      graphics.drawRect(0, 0, 550, 400);
      graphics.endFill();
      addEventListener(MouseEvent.MOUSE_DOWN, _onMouseClick, false, 0, true);
    }
    private function _onMouseClick(event : MouseEvent) : void {
      dispatchEvent(new PointEvent(PointEvent.ADD_POINT, new PointObject(event.stageX, event.stageY)));
    }
  }
}

Our second view is the one that handles the points. Points are simple visual objects, they are just circles placed at a x and y coordinate. So when the user clicks on the clickable layer, the point view is notified and a circle is added where the click was registered. Another functionality that is added is that you can drag a point to move it around the stage. One thing to notice is that whenever a point is moved, it tells the framework about it so that the Model is always up to date and so that the path layer can display the paths correctly.

package com.zedia.drawingtool.view.components {
	import com.zedia.drawingtool.events.PointEvent;
	import com.zedia.drawingtool.model.objects.PointObject;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	/**
	 * @author dominicg
	 */
	public class PointLayer extends Sprite {
		private var _pointVector:Vector.<PathPoint>;
		public function PointLayer() {
			_pointVector = new Vector.<PathPoint>();
		}
		public function addPoint(point:PointObject):void{
			var pathPoint:PathPoint = new PathPoint();
			pathPoint.addEventListener(PointEvent.POINT_MOVED, _onPointMoved, false, 0, true);
			pathPoint.x = point.x;
			pathPoint.y = point.y;
			addChild(pathPoint);
			_pointVector.push(pathPoint);
		}
 
		private function _onPointMoved(event:Event) : void {
			dispatchEvent(new PointEvent(PointEvent.POINT_MOVED, new PointObject(PathPoint(event.target).x, PathPoint(event.target).y, _pointVector.indexOf(PathPoint(event.target)))));
		}
	}
}

Now this is the last of the view class: the PathLayer. It is also the most complicated of the three view classes because a path is a complex object. It is comprised of a start point, an end point and a control point. With those you can draw a curve using the curveTo method from the AS3 drawing API. Here is the code:

package com.zedia.drawingtool.view.components {
	import com.zedia.drawingtool.events.PathEvent;
	import com.zedia.drawingtool.model.objects.PointObject;
	import com.zedia.drawingtool.model.objects.PathObject;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	/**
	 * @author dominicg
	 */
	public class PathLayer extends Sprite {
		private var _pathVector:Vector.<Path>;
		private var _selected:int = -1;
		public function PathLayer() {
			_pathVector = new Vector.<Path>();
		}
		public function addPath(pathObject:PathObject):void{
			var path:Path = new Path(pathObject.firstPoint, pathObject.secondPoint, pathObject.controlPoint);
			path.addEventListener(PathEvent.PATH_CLICKED, _onPathClicked, false, 0, true);
			path.addEventListener(PathEvent.CONTROL_POINT_MOVED, _onControlPointMoved, false, 0, true);
			addChild(path);
			_pathVector.push(path);	
		}
 
		private function _onControlPointMoved(event : Event) : void {
			dispatchEvent(new PathEvent(PathEvent.CONTROL_POINT_MOVED, new PathObject(new PointObject(0,0,0), new PointObject(0,0,0), _pathVector.indexOf(Path(event.target)), Path(event.target).controlPoint)));
		}
 
		private function _onPathClicked(event : Event) : void {
			if (_selected > -1){
				_pathVector[_selected].deselect();
			}
			_selected = _pathVector.indexOf(Path(event.target));
		}
 
		public function updatePaths(updatedPathVector : Vector.<PathObject>) : void {
			for (var i : int = 0; i < updatedPathVector.length; i++) {
				_pathVector[updatedPathVector[i].id].update(updatedPathVector[i]);
			}
		}
		public function deselectAll():void{
			if (_selected > -1){
				_pathVector[_selected].deselect();
				_selected = -1;
			}
 
		}
	}
}

You will find more information about paths in the Path class inside the view folder.

Finally the last important class is the Model. This is where you keep information about the state of the application. With the information stored in the Model you can recreate exactly how the application is right now, which is really practical if you want to save the state to a file or export data. As you will see, it is mostly saving a data representation of visual objects in our views (points and paths).

package com.zedia.drawingtool.model {
	import com.zedia.drawingtool.events.PathEvent;
	import com.zedia.drawingtool.events.PointEvent;
	import com.zedia.drawingtool.events.PathVectorEvent;
	import com.zedia.drawingtool.model.objects.PathObject;
	import com.zedia.drawingtool.model.objects.PointObject;
 
	import org.robotlegs.mvcs.Actor;
 
	import flash.geom.Point;
 
	/**
	 * @author dominicg
	 */
	public class DrawingModel extends Actor {
		private var _pointVector:Vector.<PointObject>;
		private var _pathVector:Vector.<PathObject>;
		public function DrawingModel() {
			_pointVector = new Vector.<PointObject>();
			_pathVector = new Vector.<PathObject>();
		}
 
		public function addPoint(point:PointObject):void{
			point.id = _pointVector.length;
			_pointVector.push(point);
			dispatch(new PointEvent(PointEvent.ADD_POINT_APPROVED, point));
			var pointLength : int = _pointVector.length;
			if (_pointVector.length > 1) {
				var controlPoint:Point = new Point((_pointVector[pointLength - 1].x - _pointVector[pointLength - 2].x)/2, (_pointVector[pointLength - 1].y- _pointVector[pointLength - 2].y)/2);
				_pathVector.push(new PathObject(_pointVector[pointLength - 2], _pointVector[pointLength - 1], _pathVector.length, controlPoint));
				dispatch(new PathEvent(PathEvent.ADD_PATH_APPROVED, _pathVector[_pathVector.length -1]));
			}
		}
 
		public function updatePoint(point : PointObject) : void {
			trace (point.id);
			_pointVector[point.id].x = point.x;
			_pointVector[point.id].y = point.y;
			//Update paths now
			var resultingPathVector:Vector.<PathObject> = new Vector.<PathObject>();
			if (point.id == 0) {
				_pathVector[point.id].firstPoint = point;
				resultingPathVector.push(_pathVector[point.id]);
			} else if (point.id == _pointVector.length - 1){				
				_pathVector[point.id - 1].secondPoint = point;
				resultingPathVector.push(_pathVector[point.id - 1]);				
			} else {
				_pathVector[point.id].firstPoint = point;
				resultingPathVector.push(_pathVector[point.id]);
 
				_pathVector[point.id - 1].secondPoint = point;
				resultingPathVector.push(_pathVector[point.id - 1]);
			}
			dispatch(new PathVectorEvent(PathVectorEvent.UPDATE_PATHS, resultingPathVector));
		}
 
		public function updateControlPoint(path : PathObject) : void {
			_pathVector[path.id].controlPoint = path.controlPoint;
		}
	}
}

Well that is it for now. You can download the source code below and see the classes that I didn’t talk about. This is all good but this tool right now just draw paths but it doesn’t transform or export the data in any way. This will be the topic of a next post.

ZediaBezierTool

Flash and the City

What I think they can improve on next year is the venue; the 3 legged dog was too small to hold this kind of event. I would suggest changing for a new place. What I really liked: that the speakers where different from the speakers on the other conferences roasters (seems like it’s all the same people speaking from conferences to conferences) so I got to see people I had not seen yet.

The realisation

I consider myself a developer and FATC was really more aimed towards developers, so I should have been very happy there. The thing is, I wasn’t; it didn’t have the same impact as FITC did on me, which is weird. I don’t know, maybe it is because I follow a lot what is happening in the Flash community and I am well informed on the new possibilities the platform has technically. Because of that, the presentations didn’t marvel me as much as a creative presentations where everything is mostly new. Maybe I am not so much a developer after all.

Best of show

Anyway there was still some presentations that I found really amazing. The best one that I saw really was Gaia Flash Framework by Jesse Warden. He spoke about using Gaia and Robotlegs together. I mostly knew what he was speaking about but it still was awesome. I wish I could see it again in slow motion because there are so many words that come out of Jesse’s mouth. What is the major point of interest is Jesse’s views on the industry and the way he express them. If you get the chance to see him speak don’t miss it. Well, he started doing some video capsules, so you should go watch those. I used to make the new guys watch them when they had nothing to do (when is the next one coming out Mr Warden? I want more!). Aside from this Jesse, it was also good to see that Jesse Freeman is a very well spoken, nice , intelligent and professional dude. It clashes from his Twitter personality where all he does is wine about Adobe (well he seems to like Adobe now that he is working with Flash on Android). I really enjoy his articles on InsideRIA but sometimes I want to unfollow him on Twitter because all his bitchin is impacting on my moral. It was nice to see him in person, it gives me a new (good) perspective on the guy. Also another interesting thing I learned was that searching for Flash Bum (Jesse’s username on Twitter is theflashbum) on Google images yields unexpected results.

All in all it was a great week-end, I wish good luck to the Flash and the City team for next year.

One thing that bugged me with Robotlegs was the use of the expression Dependency Injection. Cool word, it must mean something huge. Well if you look at it quickly; not really. If you take time to think about it, it means more.

Half of it is injection

Well, how you implement dependency injection is actually pretty simple and is something that you are doing every day (well if you program). Dependency Injection is giving, by the mean of the contructor, a method or a property, dependency (data) to an object. As Joel Hooks said it in his InsideRIA article (read it, it’s a good intro): “When you pass a variable to the constructor of a class, you are using Dependency Injection. When you set a property on a class, you are using Dependency Injection.”

Ain’t that just pleasing; I can just walk around the office and tell every one I am doing Dependency Injection.

The concept behind it

I first was reading about this on the Robotlegs best practices and I couldn’t understand anything (that’s mostly the case when I am first exposed to a design pattern, no offense to that document). After that I found Hooks article and I said to myself: “this ain’t complicated, why all the fuss”, but I wasn’t really understanding the concept (the why) behind it. It took me this article to really understand. The example is really simple and clearly expose why we should use dependency injection.

Why we should use dependency injection is mostly to create more flexible Classes. If a Class as settings that could change and that it depends on them to work, these settings should not be set inside the Class’ code but outside of it. That way every time the settings change, you don’t need to go in the Class’ code to change them.  You should really read Fabien Potentier’s article about it; he does a way better job at explaining this than me. Also this presentation by Jeff More is pretty good. The more you read about it the more you’ll understand what it is.

Fine but it still feels like magic in Robotlegs

When you read the wikipedia article on Dependency Injection, at one point they list some draw backs and one of them was that “Code that uses dependency injection can seem magical to some developers” and that is exactly how I felt about it in the context of Robotlegs. Mostly because of the use of the [Inject] metatag. That is not a mechanism I was used to in AS3. I was thinking that these meta where holy blessed keywords that only Adobe could create.

Well it turns out I was wrong. Well half wrong. The [Inject] meta is used at runtime while let’s say the [Embed] metatag is used at compile time, so it is not exactly the same beast. In Robotlegs, injection is handled by the SwiftSuspenders. What it does is that for all rules you create using the method mapValue, mapClass and mapSingleton it will inspect the classes it receive. It uses the function flash.utils.describeType on the Class to do so, this will return an XML that represent that Class. In this XML, there will be tags that represent the [Inject] metatag. That is what SwiftSuspenders is looking for when parsing the class representation XML, after that it can freely do the injection (passing the values) according to the rules.

Now you could go and create your own metatags, but it seems that the compiler would remove them at compilation. If you use the source for the SwiftSuspenders instead of the SWC they tell you to add this to the compiler arguments:

-keep-as3-metadata+=Inject

-keep-as3-metadata+=PostConstruct //This is another metatag that SwiftSuspenders makes use of

This will prevent the compiler from removing the metatags from the Classes, so you could basically change these lines to make the compiler keep your newly created metatags. I have no idea why you don’t have to do this when using the SWC.

That is kinda what I wanted to cover. I’m still not fully comfortable with dependency injection but at least I have a better idea of how it works underneath. I hope you feel the same.

Only the home page was built using Robotlegs. It is pretty simple so it was a good fit to try a new framework, but there is way more going on than what it looks like. Everything on the home page is customizable from a xml and there are a lot of layers of views.

At some point in the project I was finding real beauty in the code, but I was really sad because nobody other than developer could see that beauty…

Public dependency injection

The first one is really small. Robotlegs makes use of dependency injection (more on that in a later post) and to do so you have to put a meta tag [Inject] before you variable declaration. That is all good, just remember to make your variable public or else you’ll get an error. I wasn’t accustomed with the error I got so it took me some time to find out why I got it.

[Inject]
public var view:Footer; //remember to make public injectable variables

Playing with models

First thing first, when creating my model I was looking to extend the Model class from the Robotlegs framework. Turns out there is no such class; models should extend the Actor class. Services also extends the Actor class.

The next gotcha was a little weird to me at first because it is different from PureMVC mindset. Robotlegs does lazy instantiation, so when you map a model using the injector.mapSingleton method the model will only be created the first time it is injected (that is how I understood it). For some models this is ok, but for others they need to be created before that. In order to do so you use injector.instantiate method and pass it the class you want to create. Here is the code for it and how you would pass data to your newly created model:

injector.mapSingleton(ApplicationModel);
var appModel:ApplicationModel = injector.instantiate(ApplicationModel);
appModel.init("whatever you want here");

Where do I list and handle framework events?

This is the big plus for Robotlegs, no more handling notifications but not listing them and then not figuring out why it doesn’t work. Robotlegs uses the same mechanism, in a mediator, to listen to view events than to listen to framework events which makes it easier to deal with.

So to listen to a view event I would do this:

eventMap.mapListener(view, StringEvent.HIT_ZONE_ROLL_OUT, _onRollOut, StringEvent);

and to listen to a framework event I would do this:

eventMap.mapListener(eventDispatcher, StringEvent.RESIZE, _onResize, Event);

Robotlegs basically wraps around the traditional addEventListener method and what does this give us as an additional bonus? We don’t ever have to set these listeners to weak reference because that is the way they are set by default. Oh, the joy!

Learning a new framework isn’t an easy task (at least when you don’t know any), but I found that learning Robotlegs from a PureMVC background was pretty easy. I hope you will take the time to check it out.

In this Robotlegs project template I added 7 files : Preload.fla, Main.as, IMain.as, MainContext.as, CreateModelsCommand.as, CreateMediatorsCommand.as and ApplicationModel.as.

I added the Preload.fla because has explained in this post, I pass the loaderInfo(I do this to pass the flashvars) from the preloader to the loaded Main so I thought it would make understanding why I did that in the Main easier. This is a template preloader so there is no graphics in it, just the basic code to make a preloader work.

In the Main.as I also do some weird things, namely this:

if (Capabilities.playerType == "StandAlone"){
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
init(this.loaderInfo);
}
 
//and this in the init method
if (Capabilities.playerType == "StandAlone"){
local = true;
}

I do this to test locally without having to compile the preloader every time. Also, I might need to know if I am local if I use AMF. In that case, the url for my gateway will be different.

For the rest, it is pretty straight forward, a MainContext for the application that will start it, a command to create the models, a command to create the mediators and finally an ApplicationModel. I don’t create the ApplicationModel in the CreateModelsCommand because I want to parse the data(parameters) inside of the LoaderInfo I passed in the constructor of the MainContext.

If you use this project template along with the files templates, you’re in for major time saving while enjoying Robotlegs!

Here are the files:
000 ActionScript 3 – AS3 Project with Robotlegs.rar

So when you downloaded the files, go in FlashDevelop, in the top menu select Tools and then Application Files… This will open the application files folder of FlashDevelop. Now go in the Projects Folder and add the files that you downloaded (copy the “000 ActionScript 3 – AS3 Project with Robotlegs” folder there). Now the next time you create a new project in FlashDevelop, scroll down and you will see it.

You may not agree with everything that is in those templates, then there is two things you can do. Either discuss about it in the comments or modify my project template. It is very easy to do so; I never even looked at documentation to learn how to do it.

Since I have all my templates for PureMVC done in FlashDevelop, I thought I would do the same for Robotlegs. So I have built a template for a Command, a Context, a Mediator, an Actor and I also put in a ResizeModel (I know some people do this in a mediator but if you want to change this go ahead). Now, I don’t think these will be perfect, but it is a good starting point.

I am also working on a AS3 Project – Robotlegs template, but I want to try it out before I give it out. When I am pleased with it, I’ll post it along with an update of the other templates.

Here is the files with the templates:

RobotlegsTemplates.rar

To add them in FlashDevelop, in the Tools menu click in Application Files. This will open the folder where the applications files for FlashDevelop are. In there open the Templates folder, then the ProjectFiles folder, then the AS3Project folder. Now copy the Robotlegs folder you downloaded there. To use them, in the project view in FlashDevelop, right click on a folder, click “Add” and then Robotlegs. At that point you will see the five templates you just added.