HowTo: Improve your workflow with Snippets, comments and ‘dormant’ variables
I use FlexBuilder. I used to use FDT but the code-completion, hover-over links and - most importantly - ability to compile from MXML that FlexBuilder offers eventually tempted me away. Still, there’s one thing about FDT I miss: it wrote A LOT of code for me. Nothing complicated, stuff like getters & setters that are tedious and time consuming. It was great that FDT could take that off my hands.
These days, with FlexBuilder, I don’t have that any longer. Which isn’t great but I’ve managed to concoct a workaround using ‘Snippets’, comments and ‘dormant’ variables, which has sped things up for me and which could do the same for you.
Let me explain…
Snippets
These, for those of you that don’t know, are sections of reusable code that you can insert into a file. Putting your cursor in the place you want a snippet to appear and clicking on its name (in a ‘Snippets’ dialog box) will insert the snippet at that position. They’re simple to use and save time rewriting repetitious things like for loops. Insideria have a great little tutorial here that will show you how to install a ‘Snippets’ plugin for FlexBuilder and I recommend you do just that. That link also details a little ‘ToDo’ FlexBuilder plugin that I’ve found really helps too. Go do that first then come back here and read on.
Comments and ‘Dormant’ Variables
When I say ‘dormant’ I mean variables that are added to your code but never instantiated. A class’ various properties appear in FlexBuilder’s ‘Outline’ dialog when FlexBuilder is focused on that file. Here’s a boilerplate ‘SomeClass’ example, followed by its representation in the ‘Outline’ dialog:
package { public class SomeClass { private var _someVar:int; public function SomeClass() {} } }
You can see that both the constructor method and the ‘_someVar’ variable appear in the dialog. Clicking on either of them will take you to that point in the code, so it really helps with navigating around.
What we can do with this is to create a snippet that contains only comments and some potentially ‘dormant’ variables and utilise this ‘Outline’ functionality to make the class easier and quicker to work with. Here’s the snippet we’ll use:
// ------------------------------------------------------------------------------------------------------------------------------ // INIT METHODS // ------------------------------------------------------------------------------------------------------------------------------ private var ____________________initMethods:int; // ------------------------------------------------------------------------------------------------------------------------------ // PUBLIC METHODS // ------------------------------------------------------------------------------------------------------------------------------ private var ____________________publicMethods:int; // ------------------------------------------------------------------------------------------------------------------------------ // PROTECTED METHODS // ------------------------------------------------------------------------------------------------------------------------------ private var ____________________protectedMethods:int; // ------------------------------------------------------------------------------------------------------------------------------ // PRIVATE METHODS // ------------------------------------------------------------------------------------------------------------------------------ private var ____________________privateMethods:int; // ------------------------------------------------------------------------------------------------------------------------------ // LISTENER METHODS // ------------------------------------------------------------------------------------------------------------------------------ private var ____________________listenerMethods:int; // ------------------------------------------------------------------------------------------------------------------------------ // GETTERS / SETTERS // ------------------------------------------------------------------------------------------------------------------------------ private var ____________________gettersSetters:int;
Under each comment i’ve added an int variable whose name is formed of two distinct parts: a prefix made up of a whole line of underscore characters, and a suffix describing what each section contains. The comments are there for when you are looking at the file itself, the ‘dormant’ variables are there for the ‘Outline’ dialog. I’ll hereafter add my various properties and functions to the class in the relevant places. These two private methods, for instance, they’ll go directly under the ‘____________________privateMethods’ variable:
// ------------------------------------------------------------------------------------------------------------------------------ // PRIVATE METHODS // ------------------------------------------------------------------------------------------------------------------------------ private var ____________________privateMethods:int; private function _doSomething ():void { trace("_doSomething"); } private function _doSomethingElse ():void { trace("_doSomethingElse"); }
You can see how i like to organise my methods. Under each ‘heading’ I list my various methods alphabetically, making them dead easy to navigate to. More importantly though, I split the methods up into ‘init’, ‘public’, ‘protected’, ‘private’, ‘listeners’ and ‘getters/setters’. This forms just five groups of methods and that guards against your classes becoming too bloated. Let me explain:
Sometimes a class can get so long and overloaded with methods that organising it becomes a case of grouping functionality instead of method types together. For instance, instead of saying ‘this group contains my private functions’ you might say ‘this group controls the appearance of textfields’. If that happens it’s a sure sign that your class is doing too much; you should just have a seperate, single class for the ‘control of the appearance of your textfields’. if you use the ‘public, ‘protected’ etc method of organisation and one of your five groups of methods starts to get too full up and slightly confusing, its a sure sign that what you need to do is move some of the functionality over to a new class. because:
one class = one job
Now that’s all fine and dandy, but why do this? If you look back at the ‘Outline’ dialog now, you’ll see why:
The ‘dormant’ variables and the two new methods have now appeared in the ‘Outline’ dialog and the ‘dormant’ variables have split the dialog up into small, manageable sections with their long, underscore-based prefixes serving visually to easily differentiate between them and genuine methods and properties. The only role of the ‘dormant’ variables is to act as headers and spacers for the ‘Outline’ dialog box.
I’ve also added a getter and a setter method so you can see how clearly this view separates out the whole thing and makes it much quicker and easier to work with.
Tags: ActionScript3, AS3, comments, snippets, variables