Flash Builder 4.x shortcuts and debugging tips

I’ve been collecting a summary of Flash Builder 4.x tips I find useful to help me be more productive as a developer and thought I would share them here. I’m including the shortcut for the feature where possible (based on Mac OS, for Windows use Ctrl in place of Cmd). Please feel free to comment on other features or tips you find useful that I may not have covered!

Many developers are unaware of all of the shortcuts currently available in Flash Builder 4 IDE or perhaps don’t take the time to try to remember them, however knowing and using these shortcuts can dramatically improve developer efficiency and productivity and decrease overall development time. The following is a list of features and shortcuts I find particularly useful. They are listed in a manner that can be used as a quick reference guide or printed for daily use.

Important Note: Those items marked with ** are only available in the Flash Builder 4.5 IDE.

• Content assist: Ctrl-Spacebar―This is a commonly used feature by most developers, however if for some reason you are not using it already, you should start now. Pressing Ctrl+Spacebar together triggers a content assist pop-up menu with all properties and functions available for the object you’re working with. What many developers may not know when using this, is that you can further filter this list to show Code Templates**, Properties, Events, Effects or Styles only by pressing Ctrl+Spacebar again and again. It’s called “proposal cycling” and you can see the name of the current filtered list in the bottom of the pop-up menu (All, Templates**, Properties, Events, Effects etc.). It can save a lot of time, such as when you know you are only interested in the events that you could listen to on an object for instance. Note that the order of proposal options can be customized in the Preferences under Flash Builder | MXML Code | Content Assist Cycling.
• Organize imports: Shift-Cmd-O―This cleans up unused import statements and organizes them by package. This option was available in Flex Builder but only for ActionScript files. In Flash Builder 4 it works in MXML now too.
• Quick outline: Cmd-O―This quickly jumps to a variable or function from here. Start typing the first few letters of what you’re looking for and select it to take you to it. This is the one you should definitely take away from this article and use.
• Quick access: Cmd-3―This quickly executes a command or opens a certain editor or view here. You can type a substring of what you’re looking for and it will show all matches, and you can even type the first letter of multiple words to bring it up. For instance if you’re looking for the Test Case Class command you could just type TCC or tcc and it will show. Note that this camelCase typing approach works for most of the features including the code hinting. What’s really cool too is that it keeps your history, so for instance if you’re debugging an application, the Debug command will show up first in your history since it’s the last thing you used and you can quickly execute it again. I also love this feature for using the Tour de Flex Eclipse plug-in view for Flash Builder 4. I can simply hit Cmd-3 and ‘tdf’ and it will show me that view in the pop-up menu (assuming you have installed the plug-in, and if you haven’t, you should certainly do so! You can find info on this plug-in here). Below is a screenshot that shows this feature in use (see Figure 1):

• **Quick Assist/Fix: Ctrl+1―Pressing this key combination will trigger a pop-up menu containing suggestions of options to fix your current line or assist you in generating code to support your code. For instance it may suggest declaring a variable that you are trying to use but hasn’t been declared. It can be particularly useful to quickly generate event handler or method stub code rather than manually having to type them in every time. The suggestions will vary depending on where in your code you invoke it.
• Word completion: Ctrl-.―Start typing a word and use this command (Ctrl-period). It will guess what word you might be typing. Keep hitting it to suggest new words if it doesn’t match the first time. This works similarly to cell phone texting.
• Fix indentation: Cmd-I―Just select the block of code that needs fixing and Cmd-I will do it for you without having to manually tab.
• Duplicate lines of code―Option(Alt)-Cmd-Up arrow
• Move lines of code―Option(Alt)-Down or Up arrow
• Delete line without using clipboard―Cmd-D
• Delete last word―Cmd-Backspace
• Quick access to definition―Hold down the Cmd key and highlight a function name for instance and it will turn it blue like a hyperlink and allow you to go straight to it when clicked.
• Flash Builder built-in version control―Flash Builder 4 actually keeps a history of your file states internally and can allow you to compare to a previous version or even revert to one using the Compare With… or Replace With… The Compare with will use an internal diff based on your current version and a version you worked on previously.
• Set number of open editors―Flash Builder 4 now has a setting that allows you to set a number of editors to be allowed open at any given time rather than opening an unlimited number of them. When it hits the set number it will begin closing older ones. This option is not set by default. You need to go to Window > Preferences > General > Editors and check the box and set your desired value.
• Cycle States: Cmd-\ and Shift-Cmd-\―When using states, this option will grey out any code not in a particular state for easier view. It will cycle to the next state or back depending on the option you choose.
• Open Call Hierarchy: Ctrl-Option-H—It shows where this function is being called from. This is useful to see how many changes would be needed for instance if you want to change or remove a function.
• Cycle through open files/editors: Ctrl-tab—It quickly hops to a different open editor. Related to this is Open Type (Shift-Cmd-T) or Open Resource (Shift-Cmd-R). These options allow you to quickly open source code files for objects in the Flex SDK or with Open Resource you can actually open any type of file.
• Check or modify key mappings—It goes to ‘Windows > Preferences > General > Keys to change your key mappings to whatever you want, or add additional ones here.
• Generate event handler—If you select an event from the code hinting and hit Enter, you will now get an option to generate an event handler for that particular event. For instance, inline on a button, if you start typing click and select it from the intellisense popup menu and hit Enter, you will then see an option to ‘Generate Click Handler’. If you select it, Flash Builder 4 will add a new function to your Script block (and if there is no Script block yet it will create one).
  
  Tip: Set an id on your MXML component before generating event handlers and it will name the function with that id. For instance, if my button id is myBtn, the click handler generated will be myBtn_clickHandler.

• Generate skin class—This option allows you to quickly create a custom Spark skin while inline on the component. While inline on a Spark component select the skinClass property and hit Enter, and you will then be prompted with an option to “Create Skin”. If selected you will be prompted with a new dialog box like this (see Figure 2):

Notice that you can generate a copy of the default Spark skin and then modify as needed which speeds up the process greatly. Also note the Remove ActionScript styling code checkbox. If you don’t need to set any exclusions for styling then you should check this box.

• Generate item renderer—This option works similar to the above option but for creating item renderers quickly. The option is available on all components that use an itemRenderer (including MXML).
• Code Commenting Shortcuts—To quickly comment a block of code in ActionScript, take advantage of the Cmd-/ option. For a block of MXML code use the Shift-Cmd-C. Definitely take note of these code commenting shortcuts because I find that I’m constantly using them during debugging if I need to comment something out quickly to test, or when I don’t always like to commit to a full delete of a block of code I may be changing but rather just comment it out first.
• Generate Getter/Setter—This generates getter/setter functions for variables (see Figure 3). This is an option that I often used in Eclipse for Java development and I find it very useful. This option is located in the “Source” menu either from the main menu or right-click context menu. Note that you need to have your cursor on the line of the variable definition in order for it to work.

• Quick import statement addition—This might be the ultimate of lazy tips, but I find myself doing it all the time. If I do not know exactly which package a particular event or something is in that does not require a variable to be created (which would add the import automatically for you), or even if I do know what package it’s in but don’t want to scroll up to add it, I will simply go up a line and quickly type a variable declaration to use the code hinting to find the class I need and let it add the import for me, then do Cmd-D to delete that line and leave the import.

The following tips are useful to know and remember while in a debugging session. Some of them are actually new in Flash Builder 4 and definitely worth knowing.

Conditional breakpoints—You can now set a condition on a breakpoint that will cause it to only fire a certain number of times, or based on a certain expression or boolean (for instance it will only halt at that breakpoint when a given variable is a certain value). To set a conditional breakpoint, first set a breakpoint on a line (Shift-Cmd-B), then right-click and select Breakpoint Properties. You can set multiple expressions and just separate them with a comma or even modify a line of code from here without recompiling. Watch this Adobe TV video for some interesting things you can do with this feature.

Watchpoints—New to Flash Builder 4, it allows you to monitor a variable instance during a debugging session. To use a watchpoint you need to set a breakpoint and when it stops at the breakpoint, go to the variables view and right click on the variable instance to toggle a watchpoint. You can find more information about how to debug with watchpoints in this article.

Expressions—You can actually drag any expression into this dialog box directly from your code to quickly monitor that expression. Note that if you are in the editor dialog box for the Expression you can type Shift-Enter to close it quickly rather than go to a newline.

Run to Line—Cmd-R—While in a debug session and stopped at a breakpoint, you can choose a line further in the code to run to by going to it and doing Cmd-R or right-click and find Run to Line in the context menu to continue to run to that specific line of code.

Network Monitoring—New to Flash Builder 4 it allows you to inspect and monitor network traffic from your Flex/AIR applications that use HTTPService, WebService, RemoteObject, URLRequest, etc. It can be used to examine XML, AMF, and JSON data sent using SOAP, AMF, HTTP, and HTTPS protocols. Note: this feature requires Flash Builder Premium and does not work with SSL or Data Management services provided by LiveCycle Data Services. 

I realize that I’ve mentioned a lot of key mappings here that may be hard to remember at first, but fortunately there’s a key mapping to show the current list of key bindings quickly that you can refer to anytime in your source using Cmd-Shift-L!

Also, to find out even more tips and tricks you can do with Flash Builder 4, check out this Adobe TV video by Scott Evans from the Flash Builder team. Also read the Adobe Developer Connection article Developer productivity improvements in Flash Builder 4 by Jason San Jose. He also shares tips on his blog.