Developer productivity improvements in Flash Builder 4

Flash Builder 4 introduces some new and updated IDE maturity features designed to improve developer productivity and make writing MXML and ActionScript code faster and easier. These new features complement the data-centric capabilities, Flex 4 support, and other great features highlighted in the articles What's new in Flash Builder 4 and Five great new features in Flash Builder 4.

In this article I’ll cover some of the new functionality in Flash Builder 4, including the Call Hierarchy view, enhanced states syntax support, changes to code hints, and editor improvements.

Moving files and reorganizing packages is much easier with the new refactoring features in Flash Builder 4. From Package Explorer, you can select one or more ActionScript files, MXML files or package nodes , right click and choose "Move...".

By default, references to your files and packages will be updated. For example, import statements will be added, removed or changed based on the files that are moving. You can also preview the changes before making them to inspect each edit.

In addition, packages support rename refactoring. Renaming a package will add or remove directories as needed and update references in files as you would expect (e.g. package declarations, import statements, etc.). When renaming or moving packages, you have the option to update subpackages as well.

The Call Hierarchy view

Have you ever looked at an ActionScript function and wondered where that function was called in your code? The Call Hierarchy view shows a list of functions that call or reference a selected ActionScript function, variable declaration, or MXML property declaration. This feature can help you analyze and estimate the impact of code changes.

To use the Call Hierarchy view, select a function or property name and choose Navigate > Open Call Hierarchy or press Ctrl+Alt+H. This will activate the view and populate it with functions that call or reference the function or property you selected (see Figure 1). You can explore further up the tree and see the callers of those functions as well.

Double-click on a node in the tree to open and select the reference to the called function. You can also preview snippets with one or more calls by selecting the tree node and viewing the table of snippets on the right hand side.

You can use the view action menu to specify the search scope of the hierarchy (Workspace, Project, or File) and customize the visual layout of the view.

As your projects grow in size and complexity, the Call Hierarchy view provides a powerful new tool for you to navigate your ActionScript and MXML code and analyze dependencies within it.

The new enhanced states syntax introduced in Flex 4 makes it easier to write state-specific changes in-line rather than using out-of-context override tags. Flash Builder 4 adds two new features to support states editing in code: states code hints and state visualization.

States code hints

The new states syntax supports state-specific components and property values. For example, if you want a component to appear in only some states, use the includeIn attribute and specify a comma separated list of state names. To assign state-specific property values, use the new dot notation in attributes and property tags to specify the state; for example, <s:label.viewState>... or label.viewState="...". Flash Builder 4 will show state and state group names in code hints for each of these contexts (see Figure 2).

State visualization

If you are familiar with Design View you may have used the States view to toggle between states and visualize the resulting UI on the design surface. Flash Builder 4 now provides a similar feature while editing code in Source view.

When states are present in your MXML file, you will see a drop down list at the top of the editor that lists all your states. When you select a state, Flash Builder 4 will gray out any MXML code that is not in that state (see Figure 2). You can traverse the states in your file by using the actions in the Navigate menu: Toggle State Visualization (Ctrl+Shift+M), Next State (Ctrl+Shift+.), and Previous State (Ctrl+Shift+,).

Code hints are one of the most frequently used features of any IDE. In this release, we've made several subtle changes to how code hints work to improve usability and productivity.

More information in code hints

The proposals in the code hints popup now display more descriptive information.

• In ActionScript and MXML, types and tag names respectively show the packages they reside in; for example, "UIComponent - mx.core".
• Properties show their type and the class where they are declared; for example, "name : String - MyClass".
• When present, ASDoc comments are shown in a tooltip.
• ActionScript hints are now grouped by properties, then by functions.
• When namespaces are open (for example via use namespace mx_internal or this.mx_internal::...) code hints will show proposals for definitions in those namespaces.

Proposal cycling

Sometimes while writing MXML, you just want to see the list of available properties of a particular kind. For example, you would like to see all effects supported on s:Button. This kind of filtering behavior is now possible with proposal cycling in MXML.

To see this in action, open the code hints popup and press Ctrl+Space again after the popup is open (see Figure 3). By default, the next cycle you will see is All Properties (or Properties if you happen to be in an attribute scope). The name of the current cycle is displayed at the bottom of the popup. If you continue pressing Ctrl+Space until you see Effects, then code hints will shown only effects properties.

By default, the cycle order is as follows:

1. All (appears only for tag scopes)
2. All Properties
3. Properties
4. Events
5. Effects
6. Styles

You can reorder or turn off proposal cycling by opening the Preferences dialog and selecting Flash Builder > Editors > MXML Code > Advanced.

Code hints recommendations

To help with the transition from MX to Spark components, MXML code hint proposals now indicate when a component has been replaced with an alternative. If you trigger code hints for a component that has a replacement in Spark (for example, mx:Button), code hints will display “use s:Button instead” (see Figure 4). Also, “s:Button” will appear below the proposals for mx:Button.

In an SDK 4 MXML file, if you look for hints on a component that doesn’t exist, the code hints will propose valid alternatives. For example, if you look for s:HBox, code hints will propose both s:HGroup and mx:HBox as potential matches (see Figure 5).

Camel case support

The Flex SDK naming conventions use a camel case pattern for nearly all identifiers. Flash Builder 4 uses the capital letters that denote word boundaries to accelerate code hinting (see Figure 6).

For example, instead of typing mx:AdvancedDataG to see all tags that start mx:AdvancedDataGrid, you can simply type ADG and the code hint proposals will be filtered as you would expect. The same applies to properties and attributes. For example, from a UIComponent, type eMin to show explicitMinimumHeight and explicitMinimumWidth. Note that each segment is matched from the beginning.

Camel case support is available in the ActionScript and MXML editors as well as the Open Type dialog (Ctrl+Shift+T).

Theme-aware style hints

With the introduction of skinning in Flex 4, some style properties are no longer relevant when using Spark skins (see http://opensource.adobe.com/wiki/display/flexsdk/Compiler+Errors+for+Other+Theme%27s+Styles). Code hints will suppress or enable style properties based on the theme selected for the project.

Language and Flex SDK Features

Several ActionScript and MXML language features are newly supported in code hints:

Full Vector support in ActionScript and MXML
The Vector base type declaration displays class and interface names in code hints. Also, code hinting for methods and array access to vectors shows the correct strong type.

MXML 2009 library tag definitions
Definitions declared within an MXML 2009 document are available in code hints as if they were a normal MXML component. Definitions also support rename refactoring.

FXG Support
FXG components are hinted just like any other component. They support rename and move refactoring and show up in the Open Type dialog just like a normal class.

Metadata references to types
ActionScript metadata tags such as [Event], [HostComponent], and so on have an attribute that specifies a fully qualified type name. These references are now recognized and support features you would expect for a type reference, including go to definition, mark occurrences, and rename and move refactoring.

Flash Builder 4 also includes several improvements for editing code.

Indent on paste and newline

When pasting code from one file to another or when pasting sample code from the web, you previously had to fix indentation manually. In Flash Builder 4, pasted code is automatically updated to match your indentation preferences.

Also, when inserting new lines, indentation is inserted correctly based on the parent tag, code block, or statement. For example, after a single line if expression, pressing the Enter key creates a newline indented one level from the if statement.

You can control automatic indentation in preferences under Flash Builder > Indentation. There you will find specific preference pages for ActionScript and MXML that you can configure and preview.

If you prefer, you can correct indention in an open file on demand by choosing Source > Correct Indentation or by pressing Ctrl+I.

Tabs and spaces preference

Prior to Flash Builder 4, tabs and spaces did not always respect the preferences set under Flash Builder > Indentation; they would behave differently in some cases based on the indentation on the current line. Those bugs have been addressed across the entire product.

Generated code, indentation (via newline, paste, or Source > Correct Indentation), and the tab key all correctly insert tabs or spaces based on your indentation preferences.

Parenthesis matching

Brace highlighting now supports parentheses in addition to curly braces. You can place the cursor after a curly brace or parenthesis character to highlight the matching open or close brace. You can also select Go To Matching Bracket (Ctrl+Shift+P), which now supports parentheses as well. This feature works in ActionScript, MXML, and CSS editors. You can enable and disable the feature in preferences under Flash Builder > Editors > Highlight Matching Braces.

Organize imports in MXML Files

Since Flex Builder 2, whenever you use Content Assist in the MXML and ActionScript editors, classes are automatically imported into the MXML Script block or ActionScript file respectively. By default, imports are organized alphabetically. You can control this behavior in preferences under Flash Builder > Editors > ActionScript Code by selecting Keep Imports Organized. Also by default, unused imports are removed when organizing. You can use the Remove Unused Imports When Organizing setting to enable or disable the feature.

In Flash Builder 4, the MXML Editor now supports organizing imports and removing unused imports in Script blocks.

Error markers in editor tabs

Error markers for files were introduced in the Package Explorer. Now, error markers also appear on the editor tab of your MXML, ActionScript, and CSS files.

SWC Inspection

Within each project, Package Explorer displays the SWCs in your classpath. SWCs are displayed as part of the selected SDK or as an additional referenced library (see project properties. Build Path > Library path settings).

For example, you can expand the "Flex 4.0" tree to see all the SWCs that come with the SDK. From there, you can browse each SWC and see the classes, interfaces, etc. that are defined in the SWC.

Where to go from here

I encourage you to download the new Flash Builder 4 and try these new developer productivity features in your day-to-day developer workflow.

As always, after you try them out, send us your feedback on the Flash Builder and Flex SDK forum.