Coding productivity enhancements in Flash Builder "Burrito"

Additional required other products

Flash Builder 4.5 release

• Download
• Learn more

Building on the release of Flash Builder 4, Flash Builder 4.5 introduces a range of improvements to the code editing environment that will help to make you more productive when writing Flex and ActionScript code.

Knowing what tools are available to you and how/when to invoke them are key to improving your coding productivity—by reading this article you’ll learn about the new features included in this release and be using them as you code in no time at all.

In particular, we’ll highlight the following Flash Builder 4.5 features:

• Code templates
• Metadata code completion
• Override implement methods
• Quick Assists such as Rename in file/workspace, Organize imports, Convert to field, Assign to variable, Split variable declaration
• Generate from usage to generate a local variable, field, method, class, interface, and event handler from their usage
• Customized code generation to change the code generated by Flash Builder.
• CSS improvements

Say, you have defined a variable of type Array and want to write a ‘for loop’ to go through the  elements of that Array. Rather than typing all the code yourself, you can now use Flash Builder 4.5 to generate the for loop for you. To do so, just type “fori” and press Ctrl + Space (see Figure 1). 

Code templates enable you to auto-insert code patterns that you  frequently use by using Content Assist (Ctrl + Space). Code templates are context-based and can range from a ‘for loop’ in ActionScript to a WebService tag in MXML. Over 100 pre-defined ActionScript (see Figure 2), MXML (see Figure 3) and CSS (see Figure 4) templates are shipped with Flash Builder 4.5 :

• ActionScript—package, class, for loop, while loop, try-catch block, and more.
• MXML—Button, DataGrid, HttpService, WebService, and more.
• CSS - Button, DataGrid, @font-face, and more.
  

You can view and edit the pre-defined templates by going to Preferences > Flash Builder > Editors > Code Templates > ActionScript/CSS/MXML (see Figure 4).

You can define new templates for frequently-used coding patterns, as well as import/export code templates, so as to share a consistent set of templates within a team environment.

Apart from creating your own code templates, there are various scenarios in which Flash Builder generates code for you – event handler, function, getter/setter, etc.. Now, you can customize the code generated by Flash Builder by using templates. You can view and edit these templates by going to Preferences > Flash Builder > Editors > Code Templates > Flash Builder (see Figure 15).

You can use the new metadata code completion support to enter metadata tags. Metadata hints are displayed when you enter the ‘[‘ character in the editor close to a class, method, or variable definition. A list of valid metadata tags that are contextual to the location within the class or MXML appear. You can select the metadata tag that you want to insert from this list. If you don’t see the metadata tag you need, then simply press CTRL+space again to see the full list of available choices (see Figure 5).

On selecting a tag, Flash Builder generates the metadata tag with the mandatory attributes. You can then easily navigate from one value to another using the tab key (see Figure 6). 

You can use Content Assist to easily enter class names and property names in the metadata tag. For example, when you add an [Event] tag, you can select the required event class from a list of all the event classes available in the project (see Figure 7).

You can also insert the optional attributes using Content Assist.

Flash Builder also supports metadata tags from third party SWCs if they have the required metadata.xml file embedded in them.

While implementing a class or customizing a base class behavior, you would need to frequently override super class methods and implement interface methods. In Flash Builder “Burrito”, you can achieve this task easily using the Override/Implement methods dialog box available from the Source menu. This dialog box displays a list of classes from which the active class inherits, and the interfaces that it implements (see Figure 8). 

From each super class, you can select the methods that you want to override, while for each interface, you can select the methods that you want to implement. You can also select the location at which the methods are to be inserted. Flash Builder generates the code stubs for the selected methods.

Quick Assist provides a context-based list of actions to help you with everyday coding tasks. To invoke Quick Assist, use the keyboard shortcut CTRL + 1 or select Quick Fix/Assist from the context menu (see Figure 9). 

The various Quick Assists introduced in Flash Builder 4.5 are discussed below:

• Rename in file—Allows you to perform a local inline rename of a variable, method, class, and argument without opening a dialog box. You just need to invoke this Quick Assist and start making changes to the selected element. As you type, all the references to the particular element within the file are renamed.
• Rename in workspace—Provides a shortcut to open the Rename refactoring dialog box.
• Convert local variable to field—Allows you to promote a local variable to a field variable. A new field variable is created and the declaration statement for the local variable is removed.
• Assign to variable—Creates a new variable for an expression statement. Type any expression and invoke Quick Assist. A new variable is generated and the  expression is created as the assignment statement for the new variable.
  For example, to assign a function call to a new variable, place the cursor on the function call and press Ctrl + 1. Select “Assign to variable” from the list that appears (see Figure 10 and Figure 11).

• Split variable declaration—Allows you to split the variables (with initialization) into variable declaration and variable initialization.
• Generate getter/setter—Provides an easy way to invoke the existing Generate Getter/Setter dialog box.
• Organize imports—Allows you to organize import statements within the current file.
• Insert import - Allows you to add import for unknown Class/Interface used in a file.
  

While coding, how many times do you realize that a variable, method, class or interface is not defined and that you can’t continue coding before you define these? Generate from usage is all about defining the undefined. It gives you a convenient option to generate place-holder stub code using Quick Assist (Ctrl + 1). All the undefined references will be highlighted with orange squiggles, so that you know when something is not defined and use Generate from usage.

The following are the various generate from usage options:

• Generate variable—Type the name of the variable that you want to create and invoke Quick Assist. Select the option to “Create a variable” and the variable declaration is generated for you. You can also use this Quick Assist if you are in an expression where something in not defined.  This option can also be used to create instance variables in other classes. For example, if obj is an object of type MyClass, pressing Ctrl + 1 on obj.property will give you an option to generate the instance variable property in class MyClass.
• Generate method—Similar to generating a variable, just type the name of the method that you want to create and invoke Quick Assist. Selecting the Create function option generates the method with all the required arguments (see Figure 12). Similar to how generate variable can be used to generate instance variables in other classes, this option can be used to generate methods in other classes as well.

• Generate class/interface—If you are trying to generate a variable with an unknown type, invoke Quick Assist and you’ll get an option to create a class/interface (see Figure 13).

• Generate event handler—Adding event handler to a component in ActionScript has become a lot easier now. Type
  component.addEventListener(“EVENT_NAME”, myHandler); and invoke Quick Assist. Select “Generate event handler” and the handler is generated for you (see Figure 14).

Following enhancements have been done in Flash Builder 4.5 to improve the support for css editing in CSS and MXML files.

Content assist improvements

You can insert a reference to a class is easily in Flash Builder 4.5 using the content assist available inside the ClassReference tag as shown in the following figure.

Flash Builder 4.5 provides code completion support for various media query elements –

Hyperlinks

You can navigate to the class of a selector or a referenced class using the hyperlink as shown in the figueres below. The hyperlink is displayed by holding the Ctrl or Cmd key when hovering over with the mouse. You can also use Navigate->Open Declaration menu option when the cursor is on the selector or class name in the ClassReference tag.

Now that you have seen how your coding experience is going to be enhanced, we encourage you to download Flash Builder “Burrito” and explore these new features. To learn more, you can also watch the following ATV videos:

• Coding productivity features in Flash Builder
• Flash Builder and Flash Catalyst designer/developer workflows

You can also check out the What’s new in Flash Builder “Burrito” article for more information on the other new features added in this release.