Flash Builder 4 Shortcuts and Tips

I've been collecting a summary of Flash Builder 4 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!

• Content-Assist – Ctrl-Spacebar – I'm sure most developers know of this, but if for some reason you don't, you MUST start using this. It displays a pop up of all properties and functions available on this object. What many of you may perhaps not know though, is that you can further filter this list to show only Properties, or only Events or Effects, etc. by pressing Ctrl-Spacebar again and again. They're calling it ‘proposal cycling' and it will have the name of the items you're looking at in the bottom of the popup (All, Events, Effects, Properties, etc.). I am so dependent on this now I don't think I could live without it!
• Organize Imports – Shift-Cmd-O – 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, it works in MXML now too, yay!
• Quick Outline – Cmd-O – Quickly jump 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 one you should definitely take away from this post and use.
• Quick Access – Cmd-3 – Quickly execute a command or open 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 and it will show (or tcc). 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 app, 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 plugin view for Flash Builder, I can simply hit Cmd-3 and ‘tdf' and it will show me that view in the popup (assuming you have installed the plugin, and if you haven't, you should certainly do so!! Information on this plugin can be found here). Below is a screenshot this feature in use:

  

• Word Completion – Ctrl-. – Start typing a word and use this command (Ctrl-period) and 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.
• Duplicates 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 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 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 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 – 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 – Quickly hop 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 – Go 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 and hit enter, you will then see an option to ‘Generate Click Handler'. If you select it, Flash Builder will add a new function to your Script block (and if there is no Script block yet 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 like this:

  

  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 checkbox for ‘Remove Styling Code'. 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 – generates getter/setter functions for variables. This is one I often used in Eclipse for Java development and I find 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.

Debugging Tips

• 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. See the Adobe TV video link I included at the bottom of this post for some interesting things you can do with this feature.
• Watchpoints – New to Flash Builder 4 and 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. More information about how to debug with watchpoints can be found in this article.
• Expressions – You can actually drag any expression into this dialog directly from your code to quickly monitor that expression. Note: If you are in the editor dialog 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 and allows you to inspect and monitor network traffic from your Flex/AIR apps 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.

Ok, so 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, check out this Flash Builder 4 Advanced Tips and Tricks video on AdobeTV by Scott Evans from the Flash Builder team. There's also an article on Adobe Devnet to take a look at called Flash Builder 4 Developer Productivity Improvements by Jason San Jose. He also shares tips on his blog which can be found here.