Archive for February, 2010

Some tricks when switching to Robotlegs from PureMVC

From the past posts and a couple of tweets, you all know I have been playing around with Robotlegs. Also, up until now, my framework of choice has been PureMVC, so what I want to do in this post is inform you of the little road bumps I hit when trying to learn the new framework.

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.

, , ,

8 Comments


A real portfolio and the sources to go with it

Well ya it’s kinda was crazy that I am a Flash dude and that I had an html portfolio. Well that time is over!

Go see my new portfolio here : http://www.zedia.net/portfolio2010/

Now I am not a designer, so I did my best in that domain and I think I managed pretty well but you know, a designer would still have done better. There are still some tweaks I want to do: add sounds, individual urls for projects, analytics, loading indicators, add dates to projects, etc. I will continue to work on it but I thought it was good enough to show.

I built it using FlashDevelop and compiled using the Flex compiler version 4. I used Flash to make the visuals and exported those as swc to import them in my ActionScript project. I used PureMVC as my framework.

Since this is my project I can do what I always wanted to do and share the sources for it. I tried to comment it a bit and I am not saying that this is how one should code, but I have found that you can learn a great deal by looking at someone else’s code. That is what I am offering to you. You can reuse my code for whatever you want I don’t care, just don’t reuse my logo.

Here are the files:

Portfolio.rar

, ,

3 Comments


And now an AS3 Project – Robotlegs project template for FlashDevelop

So yesterday I gave you files templates for Robotlegs. I now give you a project template. File templates are used when you want to add a new file to a project, project templates are used at the creation of a project. It will create the folder structure, add libraries and create the basic files you will need in most projects of that type.

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.

, , ,

5 Comments


Robotlegs templates for FlashDevelop

I just finished my first project using Robotlegs and I can say I really like it. Way less code to write. The only thing that bothers me is that you have to create new Events when you want to pass around complex data but I think AS3Signals might fix that so I will look into that later on.

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.

Robotlegs Templates for Flash Develop

, , , , , , , , ,

6 Comments


Skinning the ComboBox Flash component

This post is more for me because I keep forgetting how to do this. For my defense I have to say that it is not exactly the first thing that comes to mind when you are trying to change the font in the ComboBox component, but at least I won’t have to remember in which project I did it; I’ll just turn to my friend Google and type : comboBox + zedia.

Editing the visual is mostly easy inside of flash but my main problem is always the fonts. In a previous post I talked about fonts in Flash in general, this one will use that as a base and apply it to the ComboBox. Here is the code to change the font in the textfield and the dropping list:

var myFormatWhite:TextFormat = new TextFormat();
myFormatWhite.font = "DFC GillSansLight";
myFormatWhite.size = 15;
myFormatWhite.color = 0xffffff;
 
var myFormatBeige:TextFormat = new TextFormat();
myFormatBeige.font = "DFC GillSansLight";
myFormatBeige.size = 14;
myFormatBeige.color = 0xa18c52;
 
comboBox.textField.setStyle("embedFonts", true);
comboBox.textField.setStyle("textFormat", myFormatWhite);<
 
comboBox.dropdown.setRendererStyle("embedFonts", true);
comboBox.dropdown.setRendererStyle("textFormat", myFormatBeige);
 
comboBox.prompt = "Province"; //default value that won't show in the dropdown
comboBox.addItem( { label:"New Brunswick", data:"New Brunswick" } );
comboBox.addItem( { label:"Nova Scotia", data:"Nova Scotia" } );
comboBox.addItem( { label:"Ontario", data:"Ontario" } );
comboBox.addItem( { label:"Prince Edward Island", data:"Prince Edward Island" } );

My problem was mostly with the setRendererStyle method; not that obvious. I also put the code for adding items in the ComboBox and to have a default text in it that doesn’t show in the dropdown. Now the next bit of code if to check, when you used ComboBox.prompt, if something was selected:

if (comboBox.selectedIndex == -1) {
//show error message because comboBox wasn't changed
}

P.S. all this code assumes that I have dragged the component to the stage in the Flash IDE

, , ,

4 Comments


Log, trace, log, release, log?

Ok, this title doesn’t make sense if you haven’t read the article which goes against the concept of title, but I find it funny!

So here I was looking for a solution to the problem I think every Flash Developer most have had: I can trace fine when I am in the Flash IDE but sometimes I need to test in the browser and then I loose my traces…

Easy solution: use a logger tool like Alcon or MonsterDebugger.

Problem: it’s annoying. When you are at the point where you need the extra logger you need to find the ActionScript classes to make it work blabla.

What I want is an elegant solution that when I test locally it uses the trace and when I test in the browser it uses the logger. I was already using the snippet for trace in FlashDevelop so I thought I could make a snippet that would have this if statement and do just that. My first bump in the road was the fact that I didn’t know how to add an import statement when using a snippet at a different place in the code.

So while looking in the FlashDevelop forums I came upon FDTracer. Well it doesn’t exist anymore, it was a pluggin before but it is now an integral part of FlashDevelop. Turns out I always had it under my nose but I never knew about it. It would be nice if in the interface they actually tell what it is and how to use it.

So here are a couple of pictures to show you where that logger is. In FlashDevelop, under View it is called Flash Log Viewer and is by default one of the tab at the bottom of the program:

What this thing does is that it reads the logs that the Flash Player writes on the computer. You see, when you put the final swf on the server and the user plays it in his browser, all of your trace statements are written in the log file. That is why leaving trace statement in your final release is not that good for performance. Anyway one last thing to know is that you actually have to start it before it works. So press the little play button and start seeing your trace.

What is cool with this little thing is that it will work locally and in the browser, you don’t have do to anything(execpt press play) to make it work. Also if you feel spyish you can check the trace from Flash website made by others.

So yeah, please clean your traces…

, , , , , ,

10 Comments


Analytics for Mobile Applications : a good idea, six months too late

So yesterday I was talking with my friend that does iPhone applications about what data he gets from Apple about the applications he builds. It turns out that aside from the number of sales, he doesn’t have any data. I found this weird and we started talking about how it wouldn’t be that hard to build a kind of Google Analytics for Mobile Applications. In a sense, it would be very similar to the library GA for Flash except that you build a library for every Mobile SDK plus you have a webserver where the data is analysed.

It took so much time for a library of analytics to be made for Flash, I thought there might be a chance that nobody did anything like this for mobiles. So we got all excited (like so many other time), we started thinking how we would build this. But today I searched on the web and found Flurry a company that has an analytics division that does exactly this. Well not exactly how I would do it but about 85% the same. So my bubbles is a bit busted.

Flurry does it mostly right but their interface is a bit complicated and they didn’t make their analytics that specific to mobiles. There are plenty of concepts that exist in the mobile world that are new: what people do in their first and last run of the application, the number of tap (click with fingers) by session, the accelerometer, etc. And they don’t track that, yet. Also they provide an  API for events, but not for navigation (pageViews in the GA world). I think navigation still has an important role in the analytics of an application than in the analytics of a website. You want to know what the users did in a certain section of your app (how many taps in the help section for example).

So all of that could be implemented and would give a better service than what Flurry is offering. The problem is that their platform is already built and even if there is not much competition (they seem to be the only ones doing this), it would still be hard to beat their momentum.

So what do you think? Should I invest time in this project knowing these risks, or should I let this go and wait for another idea?

, , , , ,

1 Comment


The iPad and me

I don’t really like to do opinion pieces. On the subject of technology, like religion, sometimes it doesn’t really matter what you say; both sides never really listen to each other. I don’t want to add another pointless my side is better than yours article. But I think it is sad when people say that such and such is bad and should die. Like it is currently the case with Flash and the whole iPad brouhaha. What I think these people don’t consider is the human impact behind this.

If Flash was to go away tomorrow, I’d find myself without a job. Well, I’d need time to learn another language and then I’d find another job but it wouldn’t be the same thing. I am really glad I found Flash and ActionScript 3. This is what I want to do for at least the next 5-10 years. What I like about it is that it speaks to both my programmer and creative side. It is also fast-paced; in the web agency world, you move from projects to projects really fast and you have to keep up with technology at the same time. It might seems weird but I really like that; no time to get bored. If it wasn’t for Flash, I don’t think think I would love my job as much as I do.

After the iPad announcement I found myself a bit confused and stressed about my future. The future of Flash seemed uncertain so my future seemed uncertain to. Not uncertain because of the evolution of technology (like HTML5) but because a company decided what the outcome should be. If all Apple products stop supporting Flash, this is not good news to me. What possibilities I had would lessen. Some would say that I shouldn’t tie myself to a technology, I know, and if I have too I will learn something knew, but as I said before I really like Flash. That made me think that it’s not only companies that can choose who gets to live or to fade (technology wise). Us, as developers, can put our weight in the balance too. As long as there will be people producing get content for the Flash platform, it will continue to thrive. If I like Flash that much, I must not be alone and from reading all those article that take Flash’s defense, I think I am right. So I feel more at ease now. The future is still uncertain but certainly less gloomy.

One last thing about the iPad. Zeldman in his post states that the computer of tomorrow is a computer that is dead simple but that in return doesn’t give all powers over it for the sake of usability, like the iPhone and the iPad do. I think that a portion of the population in fact wants that. Right now this portion might be big, but I think it will shrink because it doesn’t consider that the children that are raised right now have never seen the time when there was no computers. These will be way more computer literate than my parents lets say. For that I think a device like the iPad is closer to a toy than to a tool. If it wanted to dominate the netbook market, than it will fail. We don’t really know what is the role the netbook is going to take, but by making one that is limited in its usage, you also reduce your chance of getting it right.

Well that’s all I had to say.

, , ,

7 Comments