Writing Code With FDT

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(Reference, Property and Parameter Generation)
Line 45: Line 45:
=== Reference, Property and Parameter Generation  ===
=== Reference, Property and Parameter Generation  ===
-
 
-
==== Reference  ====
 
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. We used this before to create our 'another_circle' field variable before [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/edit_fdt_create_field.png]. 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' [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_quickfix_var_gen.png] and then removing the the keyword 'var' and the type declaration [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_quickfix_var_gen_remove_keyoword_type.png].  
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. We used this before to create our 'another_circle' field variable before [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/edit_fdt_create_field.png]. 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' [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_quickfix_var_gen.png] and then removing the the keyword 'var' and the type declaration [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_quickfix_var_gen_remove_keyoword_type.png].  
Line 52: Line 50:
Last I'll invoke QuickFix to change this into a field variable [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_quickfix_var_gen_reference.png] and then use the 'draw_circle' method to remove some unneeded code [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_quickfix_var_gen_clean_up.png].   
Last I'll invoke QuickFix to change this into a field variable [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_quickfix_var_gen_reference.png] and then use the 'draw_circle' method to remove some unneeded code [http://dl.dropbox.com/u/154189/fdt_wiki_screenshots/editing_fdt_tutorial/fdt_edit_quickfix_var_gen_clean_up.png].   
-
==== Property  ====
+
FDT also lets you add parameters to a method ( [[Parameter Generation]] ) and create accessors and mutators - getter and setters- ( [[Getter and Setter Generation]] ).
-
 
+
-
Another way of using QuickFixes is to generate properties for a class. WIth our current example, a time may come when I want to read or change the current color of a circle. I'll do this by creating a 'color' property on this circle right here from the 'Main' class. For right now, I'll just
+
== Add Cast To Object ==
== Add Cast To Object ==

Revision as of 22:54, 15 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.

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, Property and Parameter Generation

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

FDT also lets you add parameters to a method ( Parameter Generation ) and create accessors and mutators - getter and setters- ( Getter and Setter Generation ).

Add Cast To Object

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.

Example: class Main extends Sprite { private var my_object : MovieClip;

public function Main() { my_object = make_new_object(); }

private function make_new_object() : DisplayObject { return new MovieClip(); } }

-video demo / screenshots of class and interface generation

Namespace Generation

Code Templates

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.

-video demo / screenshots of templates in action. 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.


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.

Tip - When multiple instances of a custom variable exist, all instances of that variable will be simultaneously be updated.

-video demo / screenshots of templates in action. Editing Existing Templates 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. 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

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. 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. Navigation Shortcuts Jump To Declaration 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.


Open Resource

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.


-screenshots

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

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

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.

-screenshots

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

Get FDT5