11 April 2011
Familiarity with Flex and/or ActionScript 3
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:
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, MXML and CSS templates are shipped with Flash Builder 4.5:
You can view and edit the pre-defined templates by going to Preferences > Flash Builder > Editors > Code Templates > ActionScript/CSS/MXML (see Figure 2).
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 3).
You can edit the templates, as well as import/export the templates, so as to share a consistent set of templates within a team environment.
To customize the event handler template such that the generated namespace is private and the handler name is componentName_on_event, you can modify the event handler template (see Figure 4).
The generated event handler will look like Figure 5.
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 6).
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 7).
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 8).
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 4.5, 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 9).
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 10).
The various Quick Assists introduced in Flash Builder 4.5 are discussed below:
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:
In addition to the code editing improvements already discussed, Flash Builder 4.5 provides enhanced support for editing CSS code.
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 (see Figure 16).
Flash Builder 4.5 provides code completion support for various media query element (see Figure 17).
You can navigate to the class of a selector or a referenced class using the hyperlink as shown in the figures below (see Figures 18 and 19). 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 you’ve read about the new features in this release that will enhance your coding productivity, we encourage you to download Flash Builder 4.5 and experience them for yourself. To learn more, read the following article:
You can also check out the What’s new in Flash Builder 4.5 article for more information on the other new features added in this release.