Writing Code With FDT

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
Line 76: Line 76:
With our Main class active in the editor [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_organize_import_stat.png], use the [[Organize Imports]] key stoke to get rid of that unused 'Shape' import statement [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_organize_import_after.png].
With our Main class active in the editor [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_organize_import_stat.png], use the [[Organize Imports]] key stoke to get rid of that unused 'Shape' import statement [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_organize_import_after.png].
-
Code Formatter
+
== Code Formatter ==
Default key binding: cmd+shift+f / ctrl+shift+f
Default key binding: cmd+shift+f / ctrl+shift+f

Revision as of 04:25, 16 September 2010

One of FDT’s most notable features are the Smart Editor features. In this walkthrough we'll use the project created in the Basic AS3 Tutorial as a base to explore FDT's code writing capabilities.


Contents

Getting Started

Let's begin by downloading the project from the [Basic AS3 Tutorial]] here and then import it - see Sharing and Archiving Projects

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 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.

Type Definition Auto Complete

With our project open, let's create another circle on the screen [1]. Start creating 'another_circle' and as you begin typing 'Shape' type, hit auto complete, ctrl-space (OSX) or alt-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 alt+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 fill in the variable name [4] and use auto complete to quickly access the object's 'graphics' methods [5].

Continue creating out circle using auto complete [6].

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]. 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. 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].

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 [16].

When selected, FDT with navigate to the target Class and write the method for us and edit the signature to match the parameter types we put in before [17]. If you like, tab through the fields in case you want to change the names of the parameters [18].

Now fill in the code for this method [19].

Return to 'Main.as' and remove the code we don't need anymore [20]. Next I'll create a new method in this class [21], select the code I want to move by holding down shift and pressing the up arrow [22], release shift and then hold down 'option' and tap the down arrow to move the code to the new method [23].

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 [24]. 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' [25] and then removing the the keyword 'var' and the type declaration [26].

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

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 [29]. After selecting the quickfix, FDT wil open the target class in the editor and allow you to make any final adjustment to it. [30]. While I'm here, I'll jump to my 'draw_circle' method and save that color assignment [31].

Getter and Setter (Accessor and Mutator) Generation

While this public property I created before works for reading the color, it doesn't actually help me if I want to changing 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. [32]. Next I'll use a QucikFix to have FDT generate both a getter and a setter [33].

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

Next I'll go to my setting function, and adjust it so when I change the color of the circle, this circle will redraw itself with the new color [37].

Event Handler Generation

The last QuickFix I'll cover in this tutorial will be event handler generation. Now that my 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 [38] to the stage for a mouse event [39]. 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 [40].

After executing the quickfix [41], fill in the code that will change the color of our circles [42].

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+0 (Win) will both remove unused import statements and add any import statements your code needs.

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

Code Formatter

Default key binding: cmd+shift+f / ctrl+shift+f

FDT allows you to define how your code is formatted. Whenever a user invokes FDT’s code formatter ( via keystroke ), FDT will readjust formatting such as indentation, white space, braces and blank lines.

To set your own formatting scheme, open FDT’s preferences window and navigate to FDT>Code Style>ActionScript Formatter. Here adjustments can be made to the how the Code Formatter behaves as well as see a preview of the how code will be adjusted when the Code Formatter is invoked. Project Specific Settings FDT also allows for project specific settings. This is helpful when working in a team environment and the team as set it’s own formatting standards.

Enable project specific formatting via the Project Properties Window. Open the window by right clicking on the target project and selecting “Properties”. Once here navigate to ActionScript Formatter and click on ‘Enable project specific settings’. When clicked, FDT’s ActionScript Formatter will appear.

Get FDT5