Writing Code With FDT

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(QuickFixes)
(Source Files)
 
(101 intermediate revisions not shown)
Line 1: Line 1:
-
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.  
+
[[File:001_0004x.png|center]]
 +
FDT’s most notable features are those associated with the Smart Editor. While we can't go over all the Smart Editor features, we'll take a look at some of the more powerful ones including code completion, code generation and FDT's formatter.  
 +
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 ==
+
= <center>Source Files</center> =
-
Let's begin by downloading the project from the [Basic AS3 Tutorial]] [http://dl.dropbox.com/u/154189/fdt_wiki_files/as3_project.zip here] and then import it - see [[Sharing and Archiving Projects]]
+
[[File:Download_soruce_files.png|center|link=http://github.com/TeamFDT/Examples/blob/master/sample-projects/writing_code_finish.zip?raw=true]]
 +
 
 +
= <center>Video</center> =
 +
{{#widget:Vimeo|id=15745041|width=600|height=400}}
 +
 
 +
= <center>Getting Started</center> =
 +
Let's begin by downloading the project from the [[Basic AS3 Tutorial]] and then import it. If you're not sure how to import projects see the [[Sharing and Archiving Projects]] tutorial.
While you don't need to import the project to follow along, it will jump start things for us.
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) ==
+
= <center>Advanced Code Completion (context and convention based)</center> =
-
[[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.
+
[[Code Completion]], or content assist, is designed to help developers write code quickly. It's also 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) - within either the currently active object or any object reference you are working with.
-
=== Type Definition Auto Complete ===
+
== <center>Type Definition Auto Complete</center> ==
-
With our project open, let's create another circle on the screen [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/editing_start.png]. 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.  
+
With our project open, let's create another circle on the screen [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_001.jpg]].  
-
Select the Shape type from the popup window by either using the arrow keys or clicking it with the mouse [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/edit_fdt_auto_complete.png].
 
-
=== Reference, Property and  Method Auto Complete ===
+
<syntaxhighlight lang="actionscript" highlight="15">
-
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...' [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/edit_fdt_create_field.png]. 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 [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/edit_fdt_property_auto_complete.png] and use auto complete to quickly access the object's  'graphics' methods [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/edit_fdt_method_auto_complete.png].
+
package {
 +
import flash.display.Shape;
 +
import flash.display.Sprite;
-
Continue creating out circle using auto complete [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/edit_fdt_finish_another_circle.png].
+
/**
 +
* @author Powerflasher
 +
*/
 +
public class Main extends Sprite {
 +
public function Main() {
 +
var circle : Shape = new Shape();
 +
circle.graphics.beginFill(0xff0000);
 +
circle.graphics.drawCircle(150, 150, 100);
 +
addChild(circle);
-
== QuickFixes ==
+
                      another_circle = new Shape();
 +
}
 +
}
 +
}
 +
</syntaxhighlight>
-
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.
 
-
=== Generate References ===
+
Start creating ''another_circle'' and as you begin typing ''Shape'' type, hit auto complete, ''Ctrl+Space'' (OSX) or ''Ctrl+Space'' (Windows), to see FDT's auto completion suggestions.  When using auto complete, the more you type, the more FDT will filter out.
-
Of the QuickFixes,  reference generation is one of the most used. Using this QuickFix developers can quickly create field variables, local variables and add parameters to methods.
+
Select the ''Shape'' type from the popup window by either using the arrow keys or clicking it with the mouse [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_002.jpg]].
-
== Add Cast To Object ==
+
== <center>Reference, Property and  Method Auto Complete</center> ==
-
Sometimes a variable ( reference ) is assigned via a method that will return an object of a different type. FDT will flag this as an error and using a QuickFix will add a cast to the method call.
+
Next, let's 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...'' [http://fdt.powerflasher.com/docs/File:04_003.jpg]. 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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_004.jpg]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_005.jpg]].
-
Example:
+
Continue creating our circle using auto completion [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_006.jpg]].
-
class Main extends Sprite {
+
-
private var my_object : MovieClip;
+
 +
<syntaxhighlight lang="actionscript">
 +
package {
 +
import flash.display.Shape;
 +
import flash.display.Sprite;
 +
 +
/**
 +
* @author Powerflasher
 +
*/
 +
public class Main extends Sprite {
 +
                private var another_circle : Shape;
public function Main() {
public function Main() {
-
my_object = make_new_object();
+
var circle : Shape = new Shape();
 +
circle.graphics.beginFill(0xff0000);
 +
circle.graphics.drawCircle(150, 150, 100);
 +
addChild(circle);
 +
 
 +
                        another_circle = new Shape();
 +
circle.graphics.beginFill(0x00ff00);
 +
circle.graphics.drawCircle(300, 300, 50);
 +
addChild(another_circle);
}
}
 +
}
 +
}
 +
</syntaxhighlight>
 +
 +
= <center>QuickFixes</center> =
 +
[[File:04_009x.png|center]]
 +
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 ones.
 +
 +
== <center>Class & Interface Generation</center> ==
 +
 +
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'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_007.jpg]].
 +
 +
<syntaxhighlight lang="actionscript">
 +
another_circle = new Circle();
 +
</syntaxhighlight>
 +
 +
 +
FDT will flag this an en error because I haven't created it yet [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_008.jpg]]. I'll use Quickfix to generate the class for me [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_009.jpg]].
 +
 +
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 ) [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_010.jpg]]. Have this class inherit from Shape and then hit ''Finish''. When created, FDT will open our new class in the editor [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_011.jpg]].
 +
 +
== <center>Method Generation</center> ==
 +
 +
Next thing I want to do is jump back to the ''Main'' class and change the type declaration of ''another_circle'' at the top to match the new class we created.
 +
 +
<syntaxhighlight lang="actionscript">
 +
private var another_circle : Shape;
 +
</syntaxhighlight>
 +
 +
 +
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]] [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_012.jpg]]. Once here, change the Type from Shape to Circle [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_013.jpg]].
 +
 +
<syntaxhighlight lang="actionscript">
 +
private var another_circle : Circle;
 +
</syntaxhighlight>
 +
 +
 +
With our class created, we can easily create methods in that class from anywhere. What I want to do is, move the bit of code where we create the circle, into the Circle class. Begin by writing the name of the method you want to generate and make sure to include the executing parenthesis ''()'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_014.jpg]].  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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_015.jpg]] and then trigger Quickfix.
 +
 +
<syntaxhighlight lang="actionscript">
 +
circle.draw_circle(0xff0000, 50);
 +
</syntaxhighlight>
 +
 +
 +
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_016.jpg]].
 +
 +
Now fill in the code for this method [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_017.jpg]]:
 +
 +
<syntaxhighlight lang="actionscript">
 +
public function draw_circle(color : int, size : int) : void {
 +
    this.graphics.beginFill(color);
 +
    this.graphics.drawCircle(0, 0, size);
 +
}
 +
</syntaxhighlight>
 +
 +
 +
Return to ''Main.as'' and remove the code we don't need anymore [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_018.jpg]].
 +
 +
Next I'll create a new method in this class, ''draw_circles()'', [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_019.jpg]] select the code I want to move by holding down shift and pressing the up arrow [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_020.jpg]], release shift and then hold down
 +
''option'' and tap the down arrow to move the code to the new method [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_021.jpg]].
 +
 +
<syntaxhighlight lang="actionscript">
 +
package {
 +
import flash.display.Sprite;
 +
 +
/**
 +
* @author Powerflasher
 +
*/
 +
public class Main extends Sprite {
 +
private var another_circle : Circle;
 +
public function Main() {
 +
draw_circles();
 +
}
 +
 +
private function draw_circles() : void {
 +
var circle : Shape = new Shape();
 +
circle.graphics.beginFill(0xff0000);
 +
circle.graphics.drawCircle(150, 150, 100);
 +
addChild(circle);
-
private function make_new_object() : DisplayObject {
+
another_circle = new Circle();
-
return new MovieClip();
+
another_circle.draw_circle(0xff0000, 50);
 +
addChild(another_circle);
}
}
}
}
 +
}
-
-video demo / screenshots  of class and  interface generation
+
</syntaxhighlight>
-
== Namespace Generation ==
+
-
== Code Templates ==
+
== <center>Reference Generation</center>  ==
-
Default key binding: ctrl+space
+
-
FDT’s template, also refereed to as code snippets, allow for quick generation of commonly used code. Although FDT ships with many templates pre-installed, users can edit existing templates, create new ones and even share templates with other FDT developers. Similar to Advanced Code Completion, code templates are activated by hitting the keystroke  ctrl+space. When activated, begin typing the name of the template and then select it within the pop up windows that appears.
+
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'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_022.jpg]] and then removing the keyword ''var'' and the type declaration [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_023.jpg]].  
-
-video demo / screenshots of templates in action.
+
Last I'll invoke Quickfix to change this into a field variable [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_024.jpg]] and then use the ''draw_circle'' method to remove some unneeded code [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_025.jpg]].
-
Opening The Templates Editor
+
-
To access FDT’s templates, open FDT’s Preferences window and navigate to FDT>Editor>Templates.
+
-
Creating Templates
+
-
With the Templates window open, click the New... button to begin creating your own template. With the New Template window open we see various fields to fill in:
+
-
Name -The name of the template that will be searched when code completion is activated.
+
-
Context - The language context that the template will be active within while editing a file in the Editor View.
+
-
Description - A description of the template. This appears both within the content assist pop up window and within the New Templates window.
+
-
Pattern - The text that will inserted when a user selects the template via the pop up window.
+
 +
<syntaxhighlight lang="actionscript">
 +
package {
 +
import flash.display.Shape;
 +
import flash.display.Sprite;
-
After setting the Name, Context and Description, fill in what text you wish to be inserted into your file when this template is selected. To enhance the functionality of templates users can add variables to their templates. Variables allow for more powerful and flexible templates by analyzing the context of the template when activated and adding text based on that context. FDT ships with a number of pre-defined variables which can be accessed by clicking the Insert Variable... button.  Users can add their own their variables by using the syntax ‘${}’ and adding your own description between the braces.
+
/**
 +
* @author Powerflasher
 +
*/
 +
public class Main extends Sprite {
 +
private var another_circle : Circle;
 +
private var circle : Circle;
 +
public function Main() {
 +
draw_circles();
 +
}
-
Tip - When multiple instances of a custom variable exist, all instances of that variable will be simultaneously be updated.
+
private function draw_circles() : void {
 +
circle = new Circle();
 +
another_circle.draw_circle(0xff0000, 100);
 +
addChild(circle);
-
-video demo / screenshots of templates in action.
+
another_circle = new Circle();
-
Editing Existing Templates
+
another_circle.draw_circle(0xff0000, 50);
-
With the Templates window open, choose a template to edit and click the Edit... button.. The Edit Template window will open and you can begin to edit the selected template.  When finished, click OK to save the template.
+
addChild(another_circle);
-
Importing and Exporting ( Sharing ) Templates
+
}
-
Templates can be easily shared and even versioned via CVS. FDT templates are distributed via XML which FDT creates upon exporting and upon importing, will interpret the XML and add the templates to the Templates Editor.
+
}
-
Exporting Templates
+
}
-
With the Templates window open highlight the templates you wish to export, it can be just one or all of them. With your chosen templates selected, click the Export... button. FDT will then convert the templates to XML and then ask you where you would like to save the generated XML.
+
-
Importing Templates
+
-
With the Templates window open click the Import... button. FDT will then ask you to select the file which contains the templates you wish to add to your existing list of templates.  Navigate to a valid .XML file and then click Open. If the provided template file is valid, FDT will add the templates to the available templates.  If the templates valid is invaild, e.g. an error in the .XML syntax, FDT will notify with an error message.
+
-
== Organize Imports ==
+
</syntaxhighlight>
-
Default key binding: cmd+shift+o
+
-
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 will both remove unused import statements and add any import statements your code needs.
+
== <center>Property Generation</center> ==
-
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.
+
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_026.jpg]].
-
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.
+
<syntaxhighlight lang="actionscript" highlight="4">
-
Project Specific Settings
+
private function draw_circles() : void {
-
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.
+
    circle = new Circle();
 +
    circle.draw_circle(0xff0000, 100);
 +
    circle.color = 0x00ff00;
 +
    addChild(circle);
-
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.  
+
    another_circle = new Circle();
-
Navigation Shortcuts
+
    another_circle.draw_circle(0xff0000, 50);
-
Jump To Declaration
+
    addChild(another_circle);
-
Default key binding: F3
+
}
-
While writing the code it is often necessary to change between different classes and other declarations. In order to expedite the work FDT defines some hot keys making it possible to go to declarations very quickly. The most important hot key is F3. If the cursor is placed on a literal - no matter, if it is a variable, a function or a class - using F3 makes the cursor jump directly to the declaration. If the cursor is placed on a literal and F4 is used, you get to the type declaration. In case of a variable it is the variable's type, in case of a function it is the type of a return value. F5 only works with functions that either overwrite other functions or that implement an interface. Here using F5 leads you to the overwritten method or the declaration within the interface respectively.
+
</syntaxhighlight>
 +
 
 +
 
 +
After selecting the Quickfix, FDT wil open the target class in the editor and allow you to make any final adjustment to it [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_027.jpg]]. While I'm here, I'll jump to my ''draw_circle'' method and save that color assignment [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_028.jpg]].
 +
 
 +
<syntaxhighlight lang="actionscript" highlight="2">
 +
public function draw_circle(color : int, size : int) : void {
 +
    this.color = color;
 +
    this.graphics.beginFill(color);
 +
    this.graphics.drawCircle(0, 0, size);
 +
}
 +
</syntaxhighlight>
 +
 
 +
== <center>Getter and Setter (Accessor and Mutator) Generation</center> ==
 +
 
 +
While this public property created before works for reading the color, it doesn't actually help if you want to change the color. In that case, let's 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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_029.jpg]]. Next I'll use a Qucikfix to have FDT generate both a getter and a setter [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_030.jpg]].
 +
 
 +
<syntaxhighlight lang="actionscript">
 +
package {
 +
import flash.display.Shape;
 +
 +
public class Circle extends Shape {
 +
private var _color : int;
 +
 
 +
public function Circle() {
 +
}
 +
 
 +
public function draw_circle(color : int, size : int) : void {
 +
this._color = color;
 +
this.graphics.beginFill(color);
 +
this.graphics.drawCircle(0, 0, size);
 +
}
 +
 
 +
public function get color() : int {
 +
return _color;
 +
}
 +
 
 +
public function set color(color : int) : void {
 +
_color = color;
 +
}
 +
}
 +
}
 +
</syntaxhighlight>
 +
 
 +
 
 +
With the methods created [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_031.jpg]], I'll generate a property to record the size of the circle by typing ''size'' and then use auto complete to create the property [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_032.jpg]].  I'll then jump to the ''draw_circle'' method and record that property [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_033.jpg]].
 +
 
 +
<syntaxhighlight lang="actionscript" highlight="3">
 +
public function draw_circle(color : int, size : int) : void {
 +
    this._color = color;
 +
    this.size = size;
 +
    this.graphics.beginFill(color);
 +
    this.graphics.drawCircle(0, 0, size);
 +
}
 +
</syntaxhighlight>
 +
 
 +
 
 +
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_034.jpg]].
 +
 
 +
<syntaxhighlight lang="actionscript">
 +
public function set color(color : int) : void {
 +
    _color = color;
 +
    this.graphics.clear();
 +
    this.graphics.beginFill(color);
 +
    this.graphics.drawCircle(0, 0, this.size);
 +
}
 +
</syntaxhighlight>
 +
 
 +
== <center>Event Handler Generation</center> ==
 +
 
 +
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_035.jpg]] to the stage for a mouse event [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_036.jpg]]. When I've written the name of the event handler I want to execute, I can invoke Quickfix to auto generate the method for me [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_037.jpg]].
 +
 
 +
<syntaxhighlight lang="actionscript" highlight="7">
 +
public class Main extends Sprite {
 +
    private var another_circle : Circle;
 +
    private var circle : Circle;
 +
 
 +
    public function Main() {
 +
          draw_circles();
 +
  this.stage.addEventListener(MouseEvent.CLICK, change_color);
 +
    }
 +
 
 +
    private function draw_circles() : void {
 +
          circle = new Circle();
 +
          circle.draw_circle(0xff0000, 100);
 +
          circle.color = 0x00ff00;
 +
          addChild(circle);
 +
 
 +
          another_circle = new Circle();
 +
          another_circle.draw_circle(0xff0000, 50);
 +
          addChild(another_circle);
 +
}
 +
</syntaxhighlight>
 +
 
 +
 
 +
After executing the Quickfix [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_038.jpg]], fill in the code that will change the color of our circles [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_039.jpg]].
 +
 
 +
<syntaxhighlight lang="actionscript" >
 +
    public function Main() {
 +
          draw_circles();
 +
          this.stage.addEventListener(MouseEvent.CLICK, change_color);
 +
      }
 +
 
 +
      private function change_color(event : MouseEvent) : void {
 +
          another_circle.color = 0xffffff * Math.random();
 +
          circle.color = 0xffffff * Math.random();
 +
 
 +
    another_circle.x = stage.stageWidth * Math.random();
 +
    another_circle.x = stage.stageWidth * Math.random();
 +
 
 +
    circle.x = stage.stageWidth * Math.random();
 +
    circle.y = stage.stageHeight * Math.random();
 +
}
 +
</syntaxhighlight>
 +
= <center>Organize Imports</center> =
 +
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.
-
== Open Resource ==
+
With our ''Main'' class active in the editor [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_040.jpg]], use the [[Organize Imports]] key stoke to get rid of that unused ''Shape'' import statement [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_041.jpg]].
-
Default key binding: cmd+shift+r / ctrl+shift+r
+
-
Another possibility to open a file is given by the "Open Resource" dialogue which opens when pressing CTRL+SHIFT+R. Enter the initials of the file to be opened and select the file. The wildcards * (any number of optional characters) and ? (one optional character) can also be used in order to search certain files.
+
 +
<syntaxhighlight lang="actionscript" highlight="2">
 +
        import flash.display.Sprite;
 +
import flash.display.Shape;
 +
</syntaxhighlight>
-
-screenshots
+
= <center>Code Formatter</center> =
-
== Quick Outline ==
+
-
Default key binding: cmd+o / ctrl+o
+
-
Withing the Editor View, invoking Quick Outline will have FDT open a pop up window that allows users to see a list of the methods, imports and attributes of the currently active class. There is a search field at the top to allow users to filter the pop up display and using the up and down arrows allows users to select a declaration and then hit enter or return to have FDT jump to that declaration.
+
-
-screenshots
+
The last thing to go over in this tutorial will be 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.
-
== Open Type ==
+
-
Default key binding: cmd+shift+t / ctrl+shift+t
+
-
Open Type is similar to Jump To Declaration except it acts as more of a search of available source code from all open projects. This includes MXML files, Actionscript files, and SWCs. When invoked FDT will show all Types available sorted by project.  Users can filter the results via the text input box on the top.
+
-
-screenshots
+
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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_042.jpg]]. 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 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:04_043.jpg]].
-
== Dependency View ==
+
-
Default key binding: cmd+u / ctrl+u
+
-
In order to understand quickly which class depends on others the "Quick Type Dependency" is useful. This opens via CTRL+U and shows a tree that explains the direct and indirect dependencies of the current file. Core classes are, however, not included. This way, it is possible to understand a program's structure more quickly and reduce, for example, the dependencies of classes amongst each other.
+
-
If you enter a letter in the entry field the view is being filtered and only elements starting with the according letter are shown. The wildcards * (any number of optional characters) and ? (one optional character) can also be used. Via the arrow keys elements can be selected and using return leads to the respective text passage.
+
= <center>Wrap Up</center> =
-
-screenshots
+
FDT has many, many more features to be explored. Stay tuned for more tutorials!
-
== Reference and Declaration Search ==
+
-
Default key binding: cmd+r / ctrl+r
+
-
There are many occasions in which it is interesting to know where a method, a class or a variable is being used. Therefor, FDT offers a specialized search function. If the cursor is placed over the name of a class, a method or a variable, all references can be found quickly. These results are displayed in the "Search View". Double clicking or hitting return/enter on one of the entries leads directly to the source.
+
-
FDT Search
+
-
Default key binding: cmd+h / ctrl+h
+
-
FDT search differs from Reference and Declaration Search in that when executed, the FDT Search Window will open and users can then can choose if you intend to search for references, declarations or both. Additionally, it can be defined if FDT should search in the workspace or only in the current project. The results are also displayed in the "Search View".
+

Latest revision as of 12:10, 2 June 2012

001 0004x.png

FDT’s most notable features are those associated with the Smart Editor. While we can't go over all the Smart Editor features, we'll take a look at some of the more powerful ones including code completion, code generation and FDT's formatter.

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

Source Files

Download soruce files.png

Video

Getting Started

Let's begin by downloading the project from the Basic AS3 Tutorial and then import it. If you're not sure how to import projects see the Sharing and Archiving Projects tutorial.

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. It's also 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) - within 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 Img preview.png.


package {
	import flash.display.Shape;
	import flash.display.Sprite;
 
	/**
	 * @author Powerflasher
	 */
	public class Main extends Sprite {
		public function Main() {
			var circle : Shape = new Shape();
			circle.graphics.beginFill(0xff0000);
			circle.graphics.drawCircle(150, 150, 100);
			addChild(circle);
 
                       another_circle = new Shape();		}
	}
}


Start creating another_circle and as you begin typing Shape type, hit auto complete, Ctrl+Space (OSX) or Ctrl+Space (Windows), 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 Img preview.png.

Reference, Property and Method Auto Complete

Next, let's 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... [1]. 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 Img preview.png Img preview.png.

Continue creating our circle using auto completion Img preview.png.

package {
	import flash.display.Shape;
	import flash.display.Sprite;
 
	/**
	 * @author Powerflasher
	 */
	public class Main extends Sprite {
                private var another_circle : Shape;
		public function Main() {
			var circle : Shape = new Shape();
			circle.graphics.beginFill(0xff0000);
			circle.graphics.drawCircle(150, 150, 100);
			addChild(circle);
 
                        another_circle = new Shape();
			circle.graphics.beginFill(0x00ff00);
			circle.graphics.drawCircle(300, 300, 50);
			addChild(another_circle);
		}
	}
}

QuickFixes

04 009x.png

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

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 Img preview.png.

another_circle = new Circle();


FDT will flag this an en error because I haven't created it yet Img preview.png. I'll use Quickfix to generate the class for me Img preview.png.

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 ) Img preview.png. Have this class inherit from Shape and then hit Finish. When created, FDT will open our new class in the editor Img preview.png.

Method Generation

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

private var 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 Img preview.png. Once here, change the Type from Shape to Circle Img preview.png.

private var 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 code where we create the circle, into the Circle class. Begin by writing the name of the method you want to generate and make sure to include the executing parenthesis () Img preview.png. 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 Img preview.png 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 Img preview.png.

Now fill in the code for this method Img preview.png:

public function draw_circle(color : int, size : int) : void {
	     this.graphics.beginFill(color);
	     this.graphics.drawCircle(0, 0, size);
}


Return to Main.as and remove the code we don't need anymore Img preview.png.

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

package {
	import flash.display.Sprite;
 
	/**
	 * @author Powerflasher
	 */
	public class Main extends Sprite {
		private var another_circle : Circle;
		public function Main() {
			draw_circles();
		}
 
		private function draw_circles() : void {
			var circle : Shape = new Shape();
			circle.graphics.beginFill(0xff0000);
			circle.graphics.drawCircle(150, 150, 100);
			addChild(circle);
 
			another_circle = new Circle();
			another_circle.draw_circle(0xff0000, 50);
			addChild(another_circle);
		}
	}
}

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 Img preview.png and then removing the keyword var and the type declaration Img preview.png.

Last I'll invoke Quickfix to change this into a field variable Img preview.png and then use the draw_circle method to remove some unneeded code Img preview.png.

package {
	import flash.display.Shape;	
	import flash.display.Sprite;
 
	/**
	 * @author Powerflasher
	 */
	public class Main extends Sprite {
		private var another_circle : Circle;
		private var circle : Circle;
		public function Main() {
			draw_circles();
		}
 
		private function draw_circles() : void {
			circle = new Circle();
			another_circle.draw_circle(0xff0000, 100);
			addChild(circle);
 
			another_circle = new Circle();
			another_circle.draw_circle(0xff0000, 50);
			addChild(another_circle);
		}
	}
}

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 Img preview.png.

private function draw_circles() : void {
     circle = new Circle();
     circle.draw_circle(0xff0000, 100);
     circle.color = 0x00ff00;     addChild(circle);
 
     another_circle = new Circle();
     another_circle.draw_circle(0xff0000, 50);
     addChild(another_circle);
}


After selecting the Quickfix, FDT wil open the target class in the editor and allow you to make any final adjustment to it Img preview.png. While I'm here, I'll jump to my draw_circle method and save that color assignment Img preview.png.

public function draw_circle(color : int, size : int) : void {
     this.color = color;     this.graphics.beginFill(color);
     this.graphics.drawCircle(0, 0, size);
}

Getter and Setter (Accessor and Mutator) Generation

While this public property created before works for reading the color, it doesn't actually help if you want to change the color. In that case, let's 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 Img preview.png. Next I'll use a Qucikfix to have FDT generate both a getter and a setter Img preview.png.

package {
	import flash.display.Shape;
 
	public class Circle extends Shape {
		private var _color : int;
 
		public function Circle() {
		}
 
		public function draw_circle(color : int, size : int) : void {
			this._color = color;
			this.graphics.beginFill(color);
			this.graphics.drawCircle(0, 0, size);
		}
 
		public function get color() : int {
			return _color;
		}
 
		public function set color(color : int) : void {
			_color = color;
		}
	}
}


With the methods created Img preview.png, I'll generate a property to record the size of the circle by typing size and then use auto complete to create the property Img preview.png. I'll then jump to the draw_circle method and record that property Img preview.png.

public function draw_circle(color : int, size : int) : void {
     this._color = color;
     this.size = size;     this.graphics.beginFill(color);
     this.graphics.drawCircle(0, 0, size);
}


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 Img preview.png.

public function set color(color : int) : void {
     _color = color;
     this.graphics.clear();
     this.graphics.beginFill(color);
     this.graphics.drawCircle(0, 0, this.size);
}

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 Img preview.png to the stage for a mouse event Img preview.png. When I've written the name of the event handler I want to execute, I can invoke Quickfix to auto generate the method for me Img preview.png.

public class Main extends Sprite {
     private var another_circle : Circle;
     private var circle : Circle;
 
     public function Main() {
          draw_circles();
	  this.stage.addEventListener(MouseEvent.CLICK, change_color);     }
 
     private function draw_circles() : void {
           circle = new Circle();
           circle.draw_circle(0xff0000, 100);
           circle.color = 0x00ff00;
           addChild(circle);
 
           another_circle = new Circle();
           another_circle.draw_circle(0xff0000, 50);
           addChild(another_circle);
}


After executing the Quickfix Img preview.png, fill in the code that will change the color of our circles Img preview.png.

     public function Main() {
          draw_circles();
          this.stage.addEventListener(MouseEvent.CLICK, change_color);
      }
 
      private function change_color(event : MouseEvent) : void {
           another_circle.color = 0xffffff * Math.random();
           circle.color = 0xffffff * Math.random();
 
	    another_circle.x = stage.stageWidth * Math.random();
	    another_circle.x = stage.stageWidth * Math.random();
 
	    circle.x = stage.stageWidth * Math.random();
	    circle.y = stage.stageHeight * Math.random();
	}

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 Img preview.png, use the Organize Imports key stoke to get rid of that unused Shape import statement Img preview.png.

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

Code Formatter

The last thing to go over in this tutorial will be 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 Img preview.png. 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 Img preview.png.

Wrap Up

FDT has many, many more features to be explored. Stay tuned for more tutorials!

Get FDT5