Flash Builder tips and tricks

In this article you'll find several simple and effective tips, timesaving shortcuts, and other helpful information to increase your productivity with Flash Builder.

Note: Throughout the article, the usage of Ctrl key and Alt key is specific to Windows. For Mac, the equivalent of the Ctrl key (Win) is the Command key, and the equivalent of the Alt key (Win) is the Option key.

Note: * represents a new or enhanced feature in Flash Builder 4.5

• Content Assist―Content Assist provides you with a list of suggested completions for partially entered code strings.

  Press Ctrl+Space to invoke Content Assist.

  
• Code proposal cycling - Press Ctrl+Space multiple times to filter the list of suggestions that Content Assist provides, and show only properties, events, effects, and so on.
• *Metadata code completion - Invoke code completion hints for metadata that you use in your MXML and ActionScript documents.

  In MXML documents:

  Enter '[' within <fx:Metadata> or <fx:Script> tags:

  

  In ActionScript documents:

  Enter '[' before a class name, variable, or getter or setter function.

• *Code completion when using states - If your MXML application has multiple states, selecting a state in the MXML code editor will provide code completion specific to the selected state.

  You can select a state using the Show State pop-up menu.

  When you define multiple states in your application, the MXML code editor automatically adds a Show State pop-up menu, like this:

  
• Camel-case code hinting - Flash Builder displays relevant code hints even when you type characters in camel case. For example, to show all matching properties for the AdvancecDataGrid control, you can simply type ADG, as follows:
  

• Access code definitions - Press Ctrl to quickly access a code definition of a language element. For example, if you want to access a function definition. Hover the pointer over the function name, and press Ctrl. The function name turns into a hyperlink. Clicking the hyperlink takes you to the function definition.
• Quick Access - Press Ctrl+3 to quickly access views, editors, and frequently used commands.
  Press Ctrl+3 and press the Spacebar to switch between different editors, views, and perspectives:
  
  Press Ctrl+3, and type go to, to see all the Go To commands:
  

  You can also type a substring of the command that you want, or the first letter of the command, and it will show all matches. For example, to debug an application, press Ctrl+3, and type deb. The commands recognize camel-case typing also.

  The Quick Access feature stores a history of your previous commands with the last-used commands appearing first. For example, if you're debugging an application, the Debug command appears first in your history. This helps you quickly execute frequently used commands.

• *Quick Assist - Press Ctrl+1 to invoke Quick Assist. The Quick Assist feature provides context-based assistance to help you quickly perform coding tasks, like the following:
  • Rename in file
  • Rename in workspace
  • Generate getter/setter
  • Convert local variable to field
  • Assign to variable
  • Split variable declaration
  • Organize imports

  For more information on each of these Quick Assist options, see Quick Assist.

  Flash Builder helps you identify places in your code where you have an undefined method, variable, or class, and lets you generate stub code using Quick Assist. The undefined identifiers in your code are indicated by .

  The generated stub code can be used as a placeholder for the code that you want to implement later without rendering your code incompatible.

  For more information, see Generate from usage.

• Quick Outline - Press Ctrl+O to access the Quick Outline view.
  
  

  The Quick Outline view is displayed in a pop-up window within the editor itself, and not as a separate view. You can use it to quickly navigate and inspect your code.

  Start typing the first few letters of what you're looking in the Quick Outline view and select it to take you to the right line in your code.

• *Code templates - Code templates let you speed-up your coding efforts by letting you auto-insert frequently used coding patterns. Flash Builder provides over 100 pre-defined templates for ActionScript, CSS, and MXML code.

  To insert a code template, just type the name of the template in the code editor, and press Ctrl+Space. For example, to insert a 'for loop' in your code, just type fori and press Ctrl+Space.

  To display all the available code templates in the context of your code, press Ctrl+Space twice.

  

  To create and edit code templates, go to the Preferences dialog box, and select Flash Builder > Editors > Code Templates.

  For more information, see Code templates.

• *Organize imports

  Place your cursor on an import statement, press Ctrl+1, and select Organize Imports.

  To sort the import statements alphabetically by package name, pressCtrl+Shift+O.

• Call Hierarchy

  Press Ctrl+Alt+H to open the Call Hierarchy view. You can use this view to find all the instances in your project where a specific method, property, or variable is used.

  

  Double-click an entry to open the file that contains the entry, and inspect the code. You can also click a node to see the call stack trace. You can view the calls from and calls to a method in both Flex and ActionScript projects.

• Fixing indentation

  To fix the indentation for a block of code without using tabs, select the block of code and press Ctrl+I.

• Finding code

  Use the Ctrl+F shortcut to find and optionally replace text strings in the file that is currently open in your editor.

  To search all resources across projects in the workspace, use the advanced search features of Flash Builder. See Finding code references in the Advanced Tips & Tricks section below.

• Code commenting

  You can quickly comment-out lines of code in your ActionScript and MXML code using the Ctrl+Shift+C keyboard shortcut. The keyboard shortcut works as a toggle letting you add or remove comments.

  You can add the following types of comments:

  • Source comment for ActionScript (//)
  • Block comment for ActionScript (/* */)
  • ASDoc comments for ActionScript (/** */)
  • Block comment for MXML (<!---->)

  To add CDATA blocks (<![CDATA[ ]]>) in your MXML code, press Ctrl+Shift+D.

• Code indenting

  Flash Builder automatically indents the line of code according to your indentation preferences (In the Preferences dialog, select Flash Builder > Editors, and specify the indent type and size).

  If you, however, want to fix any indentation, you can do it without manually indenting individual lines of code using the Tab key.

  Just select the block of code for which you want to fix the indentation, and press Ctrl+I.

• *Block selection and edit mode

  If you have multiple instances of a variable name or a package name that you want to change, click in the Flash Builder toolbar and select the multiple lines of code. You can edit once and all the lines of code change.

• *Format MXML documents

  To format code in a swift keystroke, select one or more lines of MXML code and press Ctrl+Shift+F.

  You can change the default formatting using the Preferences dialog box. In the Preferences dialog box, go to Flash Builder > MXML Code > Formatting to change the order and grouping of the attributes.

• Move lines of code

  You can quickly move lines of code up and down by selecting the lines of code and pressing Alt and the Up or Down Arrow keys.

  Delete lines of code

  Select the lines of code that you want to delete and press Ctrl+D.

  To delete only the last character in a line of code, press Ctrl+Backspace.

• Conditional breakpoints—You can specify conditions for breakpoints to stop the debugger from executing when specific conditions are met.

  You can configure the conditional breakpoint to stop execution for any of the following conditions:

  • The expression evaluates to true.
  • The value of the expression changes.
  • A specified Hit Count is reached.

  To set a conditional breakpoint, first set a breakpoint on a line by pressing Shift+Ctrl+B. Then right-click and select Breakpoint Properties. You can specify the condition as multiple expressions separated with a comma.

  For more information, see Setting conditional breakpoints.

• Watchpoints—You can use watchpoints to monitor a specific instance of a variable during debugging. When debugging an application, you can set watchpoints on specific instances of variables to stop execution when the watched variable changes value.

  To set a watchpoint in a debugging session, first set a breakpoint on a line by pressing Shift+Ctrl+B. When debugging stops at the breakpoint, go to the Variables view, open the context menu for a variable, and select Toggle Watchpoint.

  For more information, see Using watchpoints.

• Expressions—You can drag-and-drop lines of code from the editor into the Expressions view to quickly monitor code expressions.

• Run to Line—Use the Run to Line command to break out of a loop during a debugging session.

  While debugging, you sometimes find that your code is executing a loop that repeats many times. To break out of this loop and continue to run to a line further in the code, press Ctrl+R to use the Run to Line command.

• Switching views—Press Ctrl+F7 to quickly switch to a different view in your workspace:
  
• Switching between Source and Design modes — Press Ctrl+`(Left Quote) to toggle between the Design mode and Source mode.

• *Working in Source mode and Design mode simultaneously

  You can choose to open both the Source mode and Design mode of a file at the same time.

  1. Right-click the editor's tab, and select New Editor. You now have two editor tabs for the same file.
  2. Drag one of the tabs to position the editor windows side-by-side.
  3. Set one of the editors to Design mode, and set the other editor to Source mode.

• *Turning Design mode on/off

  If you want to work only in the Source mode without using the Design mode, go to the Window menu, and deselect Enable Design Mode. You can select Enable Design Mode anytime to display the Design mode again.

• Cycling states

  When using multiple states in your application, you can cycle through the different states and view code that is applicable to only that state, graying out all other code.

  Press Ctrl+\ to quickly cycle to the next state or press Shift+Ctrl+\ to move to the previous state.

• *Setting Flash Builder as the default editor for ActionScript and MXML files

  Open the Preferences dialog and select Flash Builder > File Associations.

  Select the ActionScript Files (*.as) and MXML Files (*.mxml) check boxes to set the file associations.

• *Use custom triggers to invoke code hints—Apart from accessing code hints by pressing Ctrl+Spacebar, you can specify your own trigger keys.

  Go to the Preferences dialog box, and select Flash Builder > Editors. Select Use Additional Custom Triggers, and type the keys that you want to use as a trigger for accessing code hints.

  If you type even one key of the trigger, code hints are invoked. For example, if you specify the trigger keys as ab. Typing either a or b invokes Content Assist.

• Finding code references

  You can find references to code identifiers such as getters and setters, interfaces and classes, variables, and functions.

  To do so, click the code identifier to which you want to find references, and select Search > References.

  You can find references within a file, project, or workspace.

  Press Ctrl+Shift+G to find all references within a workspace.

• Refactoring code

  Refactoring lets you rename a code identifier and automatically update all references to the identifier. Flash Builder lets you do it in three simple steps:

  1. Click a code identifier in the editor, and press Ctrl+Alt+R.
  2. Type the new name for the code identifier.
  3. Click Preview to review the change between the original and refactored code.

  For more information, see Finding references and refactoring code.

• *Customize code generated by Flash Builder

  Flash Builder automatically generates predefined code when you generate event handlers, getters and setters, or when overriding and implementing methods.

  You can customize the predefined code that Flash Builder generates by editing the code template, as follows:

  1. Open the Preferences dialog box, and select Flash Builder > Editors > Code Templates > Flash Builder.
  2. Select the name of the code template that you want to customize, and click Edit.

  For more information, see Customizing code templates.

• *Override/implement methods

  For a class, you can select the methods that you want to override and the methods that you want to implement by selecting Source > Override/Implement Methods.

  

  For more information, see Override or implement methods.

• *Exclude files during project compilation

  You can specify the file types that you do not want Flash Builder to copy to the output folder during project compilation.

  Go to the Preferences dialog box, and select Flash Builder > File Exclusions. You can add new filename extensions and filenames, or remove any existing ones from the list.

• *Testing applications with different standalone Flash Players

  You can change the stand-alone Flash Player while launching or debugging an application.

  Go to the Preferences dialog box, select Flash Builder > Debug, and change the location of the Flash Player executable.

• ActionScript Reference documentation

  To display the ASDoc tooltip, press F2:

  

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

  

  Flash Builder reference documentation

  Press F1 to invoke Flash Builder reference documentation specific to a dialog box or wizard.

The complete list of keyboard shortcuts available in Flash Builder can be referred to anytime by simply pressing Ctrl+Shift+L.

There are also a number of other useful resources, like the following, to help increase your coding productivity in Flash Builder:

• Coding productivity enhancements in Flash Builder 4.5
• Adobe TV Flash Builder videos

Thank you very much to Holly Schinsky for her inputs to this article.