Content Assist, Quick Assist, and Quick Fix

Content Assist

As you enter MXML, ActionScript, and CSS code, hints and ASDoc reference documentation displays to help you complete your code. This feature is called Content Assist.

In the MXML editor, if you type within an MXML component, you are prompted with a list of all properties of that component. The following example shows code hints for properties of an MXML component:

Selecting and entering properties displays possible property values (if predefined values exist). The following example shows code hints for property values:

Content Assist works similarly for the ActionScript editor and CSS editor.

Content Assist in the MXML editor

In the MXML editor, code hints appear automatically as you enter your code. The following example shows the code hints that are displayed when you add a tag to a Panel tag. It also shows the ASDoc reference documentation. Click inside the ASDoc content, or press F2 to display the content in a separate, scrollable window. Click outside the ASDoc window to close it.

Content Assist categorizes code hints by type, showing you both visual and nonvisual MXML components, properties, events, and styles.

By default, Content Assist only displays code hints for recommended types. Recommended types are those components available in the declared namespace or are otherwise available, depending on the enclosing tags. The components that are available to you in an application depend on the namespace declaration of the application and also the tags enclosing the insertion point in the editor.

For example, in some contexts only Spark components are allowed. In other contexts, both Spark and Halo components are allowed. Content Assist filters the code hints, depending on the context.

Press Control+Space multiple times to cycle through filters for displayed code hints, as listed below:
  • Initial display: Recommended types

  • All components

  • Properties

  • Events

  • Effects

  • Styles

  • Return to recommended types

Which code hints to display, and the order for cycling through code hints, is a user preference. To change the default setting from the Preferences dialog, see MXML code.

Content Assist in the ActionScript editor

Code hints appear automatically as you enter your ActionScript code in the ActionScript editor.

Content Assist filters the code hints, depending on the context. Press Control+Space multiple times to cycle through filters for displayed code hints, as listed below:

  • Templates

  • Variables

  • Functions

  • Classes and Interfaces

  • Packages

  • Namespaces

Which code hints to display, and the order for cycling through code hints, is a user preference. To change the default setting from the Preferences dialog, see ActionScript code.

Content Assist in the CSS editor

Content Assist provides hints for CSS styles within embedded <fx:Style> tags or in stand-alone CSS documents, as the following example shows:
Note: Code hints in CSS documents do not appear until you press Control+Spacebar.

Content Assist also provides hints for component classes within the ClassReference in a CSS document, as the following example shows:

You can also choose to type the full-qualified class name, then the available classes and packages are displayed as follows:

The ClassReference tag provides hyperlink navigation to let you navigate to the referenced component or skin class. To do so, press the Control key (Command key for Mac) and move the cursor over the ClassReference tag, the class name becomes a hyperlink. For more information on hyperlink navigation, see Open code definitions.

Display ActionScript reference summary

  1. Begin entering a line of code that contains either an MXML or ActionScript class. You can also hover over the class.

    As you type, ActionScript reference summary for the class displays next to the code hints. If you hover over a class, just the ActionScript reference summary appears.

  2. Click inside the ActionScript reference summary, or press F2 to display the ActionScript reference content in a separate, scrollable window. When you finish reading the documentation, click outside the window. The ASDoc window closes.

  3. To display the ASDoc view, press Ctrl+3, and type asdoc, and select Views:

Quick Assist

The Quick Assist feature in Adobe Flash Builder provides context-based assistance to help you quickly perform a task. Quick Assist lets you select an action from a list of actions that are applicable to your current code fragment.

To invoke Quick Assist, do one of the following:

  • Select Quick Assist from the context menu in the editor, and select the required option.

  • Use the keyboard shortcut Control+1(Windows) or Command+1 (Mac OS), and select the required option.

Currently, the following Quick Assist options are available:

Rename in File

Use Quick Assist to rename code elements that have the Rename/Refactor action enabled. That is, variables, methods, class names, parameters, imports, and states and ActionScript code inside MXML tags.

To rename all instances of a variable or method in your file, place your cursor in the selected variable or method name, and invoke Quick Assist. Then, select the Rename In File option to rename the variable or method name. Similarly, you can change the ID property of an MXML component.

Rename in Workspace

Use Quick Assist to rename code elements that have the Rename/Refactor action enabled across files in your workspace.

To rename all instances of a variable or method in your workspace, place your cursor in the selected variable or method name, and invoke Quick Assist. Then, select the Rename In Workspace option to rename the variable or method name. You can update all references to the variable or method in your workspace.

Organize Imports

Place the cursor on any import statement, and invoke Quick Assist. Then, select the option to organize imports. For more information on organizing import statements, see Organize import statements.

Generate Import Statement

If you have an undefined variable, you can place your cursor anywhere within the line of code and invoke Quick Assist. You get an option to import the component. If the component has MX and Spark equivalents, both the options appear.

For example, if you have an undefined variable btn in your code:

var btn:Button;

Place your cursor anywhere in the line of code, and press Control +1. You get options to import the Button component. If you select the Spark Button component, the import statement is created as follows:

import spark.components.Button;

Split Variable Declaration

Use Quick Assist to split a variable into two parts: variable declaration and variable initialization.

Quick Assist appears in the following contexts.

Context

Example

Local variables inside a function

If you have a function, as follows:
public function TestAS() 
{ 
var i:int=10; 
} 
To split the variable using Quick Assist, place your cursor anywhere within the variable declaration var i:int=10; and press Control+1. Then, select the option to split the variable declaration.
The variable is split as follows:
public function TestAS() 
{ 
var i:int; 
i=10; 
} 

Multiple variables inside a function

If you have a function as follows:
public function TestAS() 
{ 
    var i:int=10, j:int=20; 
} 
To split the variables using Quick Assist, place your cursor anywhere within the variable declaration var i:int=10, j:int=20; and press Control+1. Then, select the option to split the variable declaration.
You can split the variable as follows:
public function TestAS() 
{ 
    var i:int, j:int=20; 
    i=10; 
}

You can further split the variable j:int=20; by placing your cursor anywhere within the variable declaration, and press Control+1. Then, select the option to split the variable declaration.

The variable is split as follows:
public function TestAS() 
{ 
    var i:int, j:int; 
    j=20; 
    i=10; 
}

Assign to Variable

When you evaluate an ActionScript expression, if the expression returns a value, you can use Quick Assist to create a variable for that expression. Quick Assist is not available for methods that do not have a return type or if the return type is void.

The name of the variable that is created is derived from the name of the function or identifier in the expression. If the derived name exists, then the name is incremented.

For example, if you have the following code:

var i:int; 
i; 

Place your cursor after "i", and invoke Quick Assist. Then, select Assign Statement To A New Local Variable. A variable "i2" is created. Because the variable i is already present, the new variable name is incremented to "i2" as follows:

var i:int; 
var i2:int = i; 

For example, Assign to Variable appears in the following contexts:

Context

Example

Literal Expression

Quick Assist supports a wide range of simple and complex expressions.

For example, if you have an expression as follows:

100+150

Place your cursor anywhere within the expression, and press Control+1, then you get code like the following:

var number2:Number = 110 + 500;

Method Call

If you have the following code within a method:

var ac:ArrayCollection = new ArrayCollection(); 
ac.createCursor();

Place your cursor within ac.createCursor(); and press Control+1. Then, select the option to assign the statement to a new local variable. The local variable is created as follows:

var createCursor:IViewCursor = ac.createCursor();

Property Access

If you have the following code within a property:
var ac:ArrayCollection = new ArrayCollection(); 
ac.source;
Place your cursor anywhere within ac.source, and press Control +1. Then, select the option to assign the statement to a new local variable. The local variable is created as follows:
var source:Array = ac.source;

Convert Local Variable to Field

When you have local variables inside a function, Quick Assist lets you create a field in the class.

For example, if you have a variable inside a function, as follows:

var i:int = 10;

Place your cursor anywhere within the variable definition, and invoke Quick Assist. Then, select Convert Local Variable To Field. The class field is created as follows:

private var i:int;

The name of the new field is the same name as the local variable, provided there are no conflicts in the class scope. If the name exists, then the field name is incremented, and you can rename the variable or method in your file.

Convert Local Variable to Parameter

When you have a local variable inside a function, Quick Assist lets you convert the local variable into a parameter.

For example, if you have a variable inside a function, as follows:

public function method():void { 
var i:int = 10; 
}

Place your cursor anywhere within the variable definition, and invoke Quick Assist. Select Convert Local Variable To Parameter. The parameter is created as follows:

public function method(i:int):void { 
    i = 10; 
}

After the parameter is generated, you can rename all references of the parameter using linked mode.

Convert Anonymous Function to Named Function

When you have an anonymous function, you can quickly convert it to a named function using Quick Assist.

For example, if you have an anonymous function, as follows:

public function method1():void; 
{ 
    var foo:Function = function(x:int, y:int, z:int):void; 
    { 
        trace(x, y, z); 
    } 
}
Place your cursor within function(), and press Control+1. Then, select Convert Anonymous To Named Function. The named function is created as follows:
public function method1():void; 
    { 
        var foo:Function = fooFunction; 
    } 
    protected function fooFunction(x:int, y:int, z:int):void; 
    { 
        trace(x, y, z); 
    }

After the function is generated, you can rename all references of the function using linked mode.

Assign Parameter to New or Existing Variable

When you have a function containing a parameter, Quick Assist lets you assign the parameter to a new instance variable.

For example, if you have a function containing a parameter, arg, as follows:

class A{ 
    function method(arg:String):void { 
    } 
}

Place your cursor within arg, and invoke Quick Assist. Then, select Assign Parameter To New Instance Variable. The statement is changed to:

class A { 
    private var arg:String; 
    function method(arg:String):void { 
    this.arg = arg; 
    } 
}

If you have instance variables already defined, you can assign the parameter to one of them.

For example, if you have a variable, myArg, defined as:

class A { 
    private var myArg:String; 
    function method(arg:String):void { 
    } 
}

Place your cursor within arg, and invoke Quick Assist. Quick Assist detects the myArg variable, and shows the option Assign Parameter To Instance Variable 'myArg'. Selecting this option, changes the statement to:

class A { 
    private var myArg:String; 
    function method(arg:String):void { 
        myArg = arg; 
    } 
}

After the variable is generated, you can rename all references of the variable using linked mode.

Create New Local Variable With Cast Type

Quick Assist lets you quickly create a cast type local variable within a conditional expression.

For example, if you have an if statement:
if(myObject is Button) { 
}

Or a while statement:

while(myObject is Button) { 
}

Place your cursor within the if or why statement, and invoke Quick Assist. Quick Assist shows you the option Create New Local Variable With Cast Type. Selecting this option generates the following conditional expression:

if(myObject is Button) { 
    var button:Button = myObject as Button; 
}

After the local variable is generated, you can rename all references of the variable using linked mode.

Replace Conditional Statement With If-Else Statement

Quick Assist lets you replace a conditional statement with an if-else statement.

For example, if you have a conditional statement, as follows:

var foo:String = bool?"Yes":"No";

Place your cursor anywhere within the condition statement, bool?"Yes":"No", and invoke Quick Assist. Then, select Replace Conditional With 'If-Else'. The if-else statement is generated, as follows:

var foo:String; 
    if (bool) 
        { 
            foo = "Yes"; 
        } 
    else 
        { 
            foo = "No"; 
        }

Add Else, Else-If, Finally, and Catch statements

If you have an If statement, you can use Quick Assist to add Else and Else-If statements.

For example, when you have an if statement:

var foo:Boolean = false; 
if(foo) { 
}

Place your cursor within if, and invoke Quick Assist. Quick Assist shows you options to add else and else-if statements. If you’ve defined an else statement already, then Quick Assist shows you an option to add an else-if statement.

Similarly, if you’ve defined a try statement, you can add finally and catch statements.

Generate Getter/Setter

Quick Assist lets you generate getters and setters (get and set accessor functions) for class variables.

For example, if you have code like the following:

private var result:ResultEvent;

Place your cursor in the variable, result, and invoke Quick Assist. Then, select the option to create the getter and setter for result. The Generate Getter/Setter dialog box appears. Using this dialog box, you can specify a new getter and setter function. For more information on generating getter and setters, see Generate get and set accessor functions.

Generate functions

Quick Assist lets you generate special functions such as labelFunction, iconFunction, and such.

For example, to create a labelFunction for the following code:

<mx:DataGrid labelFunction="lblfunc" dataTipFunction="tipFunc" />

Place your cursor within "lblfunc", and invoke Quick Assist. Then, select the option to create the labelFunction. Stub code for the function is generated as follows:

protected function lblfunc(item:Object, column:DataGridColumn):String 
    { 
    // TODO Auto-generated method stub 
    }

Generate event handlers from MXML code

Quick Assist lets you generate event handlers with custom handler names within MXML code.

For example, to generate an event handler on clicking an <mx:Button> tag, enter the following code:

<mx:Button click="clickHandler" />

Then, place your cursor within "clickHandler", invoke Quick Assist, and select generate event handler. The event handler and stub code are generated as follows:

<mx:Button click="clickHandler(event)" />
protected function clickHandler(event:MouseEvent):void 
    { 
        // TODO Auto-generated method stub 
    }

You can also generate an event handler for the following code, by pressing Control+1 anywhere within "clickHandler(event)".

<mx:Button click="clickHandler(event)" />

To customize the predefined stub code that Flash Builder generates, see Code templates.

Quick Fix

The Quick Fix feature in Flash Builder identifies unresolved issues in code and prompts you with a list of options to fix your code. The Quick Fix feature is supported only for ActionScript files or ActionScript code in an MXML file.

For example, when you have code as follows:

import flash.display.Sprite; 
    public class QuickFix extends Sprite 
    { 
        public function QuickFix() 
        { 
            var t:TestUnitClass 
        } 
    }

Flash Builder identifies the undefined variable by an error indicator with a bulb next to the error icon . When you hover your pointer over the undefined variable, you see the following Quick Fix options:

To use the Quick Fix feature, do any of the following:

  • Select Quick Fix/Assist from the context menu in the editor, and select the required option.

  • Use the keyboard shortcut Control+1(Windows) or Command+1 (Mac OS), and select the required option.