Make your life easier with this Flash Builder 4 plugin (sourcemate)

Posted on Oct 3, 2010

I have been working with flex for about 4 years now and moved to Flash Builder 4 about six months ago.

The one thing I have really missed in programming flex is the proper IDE that makes your life easier, making simple tasks simple for the programmer.

For instance, I always wanted to write private vars (with shortcuts) and then make getters and setter with a click of a button, with no real need for typing them all.

Typing is a waste of time for programmers. Don’t get me wrong, we all have to type code, after all this is how we make a living, but writing the complete method template other than just a shortcut and then a click on a button is something that at the end of the day takes the toll from your project.

So, let’s take some scenarios that I encountered in my life as a Flex programmer and team leader.

Code generation

This is one of the things that I have been looking at deeply upon when I was about to buy sourcemate plugin, the plugin promised and kept it’s promise to make your life simpler by being able to define what they call snippets.

Those snippets have a set that comes predefined, you can also define as many snippets as you want.

One killer feature is being able to share snippets with others, this is just a terrific feature. It allows the team to write the same code, or at least code with the same signature, all methods look the same, all vars look the same and more.

A sample template:

[as3]

for (var ${index}:int = 0; ${index} < ${array}.length; ${index}++)

{

${indent}var ${element:varName}:${type} = ${array}[${index}] as ${type};

${indent}${cursor}

}

[/as3]

this template’s shortcut is ‘for’ and then a CMD+SPACE

As you can probably see, this is a peace of code you have probably written dozens of time, it usually takes you much more than just couple of seconds.

You can navigate your way inside the template with the TAB key on you keyboard, clicking the TAB on the keyboard will take you on this path (in this template):

  1. define the array param (rename)
  2. define the element type (rename)

So, you can customize the template, generally speaking, making this code fit your array and your element type takes about 5 seconds, this is a huge improvement in times, you can shave quite some time from your work day.

Customized snippet

Now, let’s see how we can customize a snippet to fit our own code.

In a project I am currently working on there’s a class (ViewHelper) that has a base class (BaseViewHelper).

This base class has a model property, in the class you are writing, you want to make a getter that will be called myModel, and this will return a casted instance of the model property

Generally, it looks like this:

[as3]

public function get myModel():CurrentConfiguration

{

return CurrentConfiguration(this.model);

}

[/as3]

Just take a look at this code, as you can see there’s a template here.

Llet’s check what the template is:

  • decide if the method is public/private/protected
  • set the type of the getter

This is what the template looks like now:

[as3]

${visibility:link(public,protected,private)} function get myModel():${modelName}

{

${indent}return ${modelName}(this.model);

}

[/as3]

Now, when I want to put this in my class all I have to type is myModel and then CTRL+SPACE, set the type, select the visibility and I’ll have a myModel getter inside my class.

Refactoring

The next best thing this plugin gives you is refactoring.

After reading uncle Bob’s book (Clean Code) I am crazy about refactoring, it makes my code so much simpler, also when getting into other programmers code, I refactor it, break a method into several smaller, more single responsibility methods and then, just then I start working on what I have to do.

The great thing about refactoring with sourcemate is that the function created is created with all of the params (variables) that it needs in order to work, the refactoring also detects if the function should return a value or just be void.

These are the options for refactoring, I don’t think it needs much more explanations then thus:

More

This plugin gives you so much more than what I have written about, it has many more great features like generating ASDoc comments, generating documentation for the project and many more.

This plugin is by far the best thing that have happened to my Flex development experience since Flex builder 3 came out