Writing Code With FDT

From FDT Documentation

One of FDT’s most notable features are the Smart Editor features. While we can't go over all the Smart Editor features, we'll take a look at some of the most powerful ones. In this walkthrough we'll use the project created in the Basic AS3 Tutorial as a base to explore FDT's code writing capabilities.

Getting Started

While you don't need to import the project to follow along, it will jump start things for us.

Advanced Code Completion (context and convention based)

Code Completion, or content assist, is designed to help developers write code quickly but also is useful when working with an API that is either new to you or so large that remembering all of it is not reasonable. It can be used to access variables, properties and methods (even methods defined in an objects superclass) - with either the currently active object or any object reference you are working with.

Start creating another_circle and as you begin typing Shape type, hit auto complete, Ctrl+Space (OSX) or Ctrl+Space (Win), to see FDT's auto completion suggestions. When using auto complete, the more you type, the more FDT will filter out.

Select the Shape type from the popup window by either using the arrow keys or clicking it with the mouse [2].

Reference, Property and Method Auto Complete

Next, I'm going to use one of FDT's Quickfixes, more on those next, to quickly create a field variable. Trigger quickfix, Cmd+1 (OSX) or Ctrl+1 (Win), and choose Create field...[3]. After that hit enter or return to accept the code generation and continue editing. Let's then continue using auto complete to quickly access the object's graphics methods [4][5].

QuickFixes

To many developers, QuickFixes are their favorite feature. QuickFixes are contextual code generation that you can use to fix errors quickly and develop in a Coding By Intention fashion. This tutorial won't go over all of FDT's QuickFixes, but it will give a great intro to using many of the most popular them.

Class & Interface Generation

FDT's Class & Interface Generation allows developers to create create classes on the fly. In our example, I want to encapsulate this circle drawing logic into a Class. To begin, I'll rename this Shape type definition to a new Class I want to create named Circle[7].

another_circle = new Circle();

FDT will flag this an en error because I haven't created it yet [8]. I'll use quickFix to generate the class for me [9].

When invoked, FDT will open the New ActionScript Class Wizard with the class name and package location ( in this case there is none since we're on the top level ) [10]. Have this class inherit from Shape and then hit FInish. When created, FDT will open our new class in the editor [11].

Method Generation

Next thing I want to do is jump back to the Main class change the type declaration of another_circle at the top to match the new class we created.

privatevar another_circle : Shape;

Even though there is no error here - because our new Circle class is a Shape - when I use auto completion, FDT will auto complete to the Shape class and not provide code hinting for any new methods or properties we create. Jump to the declaration of the class by placing the cursor over the variable name and hit F3 for Jump To Declaration[12]. Once here, change the Type from Shape to Circle [13].

privatevar another_circle : Circle;

With our class created, we can easily create methods in that class from anywhere. What I want to do is, move the bit of where we create the circle into the Circle class to simplify things. Begin by writing the name of the method you want to generate and make sure to include the executing parenthesis ()[14]. In this case, I'll take it a bit further and show how FDT will automatically edit the method signature when generating the method. I'll add some parameters to the new method [15] and then trigger quickFix.

circle.draw_circle(0xff0000, 50);

When the quickFix is executed, FDT will navigate to the target Class and write the method for us and edit the signature to match the parameter types we had put in before. If you like, tab through the fields in case you want to change the names of the parameters [16].

Next I'll create a new method in this class, draw_circles(), [19] select the code I want to move by holding down shift and pressing the up arrow [20], release shift and then hold down
'option' and tap the down arrow to move the code to the new method [21].

Reference Generation

Of the QuickFixes, reference generation is one of the most used. Using this QuickFix developers can quickly create field variables and local variabless. We used this before to create our another_circle field variable before. I'm going to use this again to change the local variable circle to a field variable. Do this by just changing the type from Shape to Circle[22] and then removing the the keyword var and the type declaration [23].

Last I'll invoke quickFix to change this into a field variable [24] and then use the draw_circle method to remove some unneeded code [25].

Property Generation

There's a good chance that sometime in the future I am going to want to read or change the color of one of our circles. I could jump to the Circle class and create a field variable there, but it'd be faster to create the property here from this Main class. Creating properties in this fashion is similar to the method generation described before. Simply write the name of the property, I'm using color in this case, you want to create as well as make the assignment [26].

After selecting the quickfix, FDT wil open the target class in the editor and allow you to make any final adjustment to it. [27]. While I'm here, I'll jump to my 'draw_circle' method and save that color assignment [28].

Getter and Setter (Accessor and Mutator) Generation

While this public property that I created before works for reading the color, it doesn't actually help me if I want to change the color. In that case, I'm going to create both a getter and setter to take care of this. Because field variables and methods can't have the same name, I'll quickly edit the name of 'color' to "_color' and make it a private property. [29]. Next I'll use a qucikFix to have FDT generate both a getter and a setter [30].

With the methods created [31], I'll generate a property to record the size of the circle by typing size and then use auto complete to create the property [32]. I'll then jump to the draw_circle method and record that property [33].

Event Handler Generation

The last quickFix we'll cover in this tutorial will be event handler generation. Now that the Circle class is setup to easily change color, I'm going to write some code so that whenever I click the stage, the circles will change to a random color.

Jump back to your Main class, and within the constructor, add an event listener [35] to the stage for a mouse event [36]. When I've written the name of the event handler I want to execute upon this mouse click event, I can invoke quickfix to auto generate the method for me [37].

Organize Imports

During the course of writing code, either you will need to import an object into your class or unused imports will accumulate. Using Organize Imports, Cmd+Shift+O (OSX) or Ctrl+Shift+O (Win) will both remove unused import statements and add any import statements your code needs.

With our Main class active in the editor [40], use the Organize Imports key stoke to get rid of that unused Shape import statement [41].

import flash.display.Sprite;
import flash.display.Shape;

Code Formatter

The last thing to go over in this tutorial is using FDT's Code Formatter. The code formatter allows you to define how your code is structured including while space, wrapping braces, indentation, and blank lines. Check out the Code Formatter docs to learn how to customize the code formater and even how to setup project specific formatting.

In this example, there isn't much formatting that needs to be taken care of. The only one that sticks out is how the constructor is pushed up against the field variables [42]. To correct this, I'll call the auto formatter, Cmd+Shift+F (OSX ) or Ctrl+Shift+F (Win), and FDT will adjust the blank lines to provide some space for easier reading [43].