Writing Code With FDT

From FDT Documentation

Jump to: navigation, search
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