Flex Builder Tips & Tricks

The following are some tips, tricks, and little nuggets within Flex Builder.
NOTE – some of these tips only work in Flex 3 Beta.

I. Code Hinting:
CNTRL-SPACE pops up coding hint-menu. (Most of the time!)

Horizontal Bar

II. Find Closing Bracket:
CNTRL-SHIFT-P or APPLE-SHIFT-P toggles cursor between the first “{” and the corresponding closing “}” when editing ActionScript code.

Horizontal Bar

III. Moving a Block of Code
Highlight or click a line or lines – hold the ALT key down while moving the up/down arrows. This will shift the code block up or down respectively. This is very useful for relocating code blocks.

Horizontal Bar

IV. Highlight All Instances in Code

Step 1: Highlight an instance in ActionScript.

Highlight Code

Step 2: Click on the “Mark Occurences” icon.

Highlight Icon

Step 3: The result is all instances are highlighted.

Highlight Result

Horizontal Bar

V. Auto Comment ActionScript
CNTRL + “/” or Apple + “/” = auto comment all highlighted/selected lines.

Highlight Auto-Complete

Horizontal Bar

VI. Compare History of File Changes: this is a pretty nifty and powerful feature that allows you to see older versions of the file you are working on.ᅠᅠ

ᅠStep 1: Right-click on file in the “Navigator” window > Select “Compare With” > “Local History”

Compare

Step 2: You will see a list of versions in the “History” pane at the bottom of Flex Builder. Select a timestamp by double-clicking. The two versions will be shown in parallel windows for comparison and review. Differences will be highlighted.
Code Comparison View

Horizontal Bar

VII. Syntax Coloring (Customize)
Preferences > Flex > Editors > Syntax Coloring

Syntax Coloring

Horizontal Bar

VIII. Multiple Instances of the Text Editor:

For viewing multiple instances of the same file (ie: split file mode) or for viewing multiple files side by side.

Step 1: Create a new editor window instance. Right-click on the .mxml file tab in the source window mode. Select “New Editor”.

New Editor Window

Step 2: Click and hold your new tab. You will see a little icon that looks like a stack of file folders. While holding the mouse button down drag tab to the right edge of Flex Builder until you see a square recticle dividing your work area in half.

Recticle

Step 3: The end result is you now have two code windows for the same file (or different files). This allows you to work at the top of a file in one window (ie: in your ActionScript code) and in the bottom of your file in the other window (ie: your MXML code). Or you could use this method to compare two separate files.

Result

NOTE – you do not have to put the template side by side. You can stack them horizontally or vertically. In fact you can mix and match. Dividing the work area into a left & right, and then further sub-dividing the right side into a top or bottom frame. I am not sure what the limits of this ability is, but the example below shows you that you can get pretty extreme with this feature.

Extreme Example

Horizontal Bar

IX: Disable Flex Builder’s Auto-Copying Files to Bin

The default behavior of Flex Builder to copy numerous files into the bin directory can create headaches for developers. Especially those utilizing version control software such as SVN (Subversion), as the SVN files are also copied creating nested arrangements that can break your local working directory’s relationship with your code repository.

The following figure shows you where to disable this:

Step 1: Select a project and select properties.

Step 2: Choose “Flex Compiler”

Step 3: Uncheck the box titled “Copy non-embedded files to output directory” as seen in the figure below.

No auto-copy to bin

Horizontal Bar

Hope you found these examples and insights helpful and of use. I think it is always beneficial to share what we learn or discover, as well as that which has been shared with us. If you have any similar tips or tricks – please feel free to post them in reply.

And always…if something wasn’t simple enough to understand, please let me know and I’ll endeavor to clarify it further. Thank you!

– The Saj

Horizontal Bar

X: Additional Tips’n’Tricks (sent from our readers)

CTRL-O: Opens the “quick” outline panel.

SHIFT-CTRL-O: Organizes and alphabetizes import statements in .as files

F3 (function key 3): Jumps to the definition / declaration of the highlighted class, function, or variable.

Double-click on a tab to maximize it; double-click on it again to restore it to its previous size (comes in handy for searching the Console).

Ctrl + Shift + R will open a filterable search dialog that supports the use of wildcards. [Thanks Alex]

Horizontal Bar

Advertisements

11 Responses to “Flex Builder Tips & Tricks”


  1. 1 Jeff Houser November 6, 2007 at 5:23 pm

    Control – Shift -C will add comments to ActionScript and/or MXML. It’s smart enough to figure out which type of comments to add and place them appropriately.

    Although, it does not work with on partial lines I’ve found.

  2. 2 Jim November 6, 2007 at 7:05 pm

    Nice! Thanks for posting these. This entry will make a handy bookmark.

  3. 3 Jim November 7, 2007 at 8:59 pm

    Jeff – I didn’t see your comment when I left mine last night, but I think you have a good idea: let’s add to Jason’s list…

    CTRL-O: Opens the “quick” outline panel.

    SHIFT-CTRL-O: Organizes and alphabetizes import statements in .as files

    F3 (function key 3): Jumps to the definition / declaration of the highlighted class, function, or variable.

    Double-click on a tab to maximize it; double-click on it again to restore it to its previous size (comes in handy for searching the Console).

    There’s more cool Eclipse stuff that’s not coming to mind at the moment…

  4. 4 JabbyPanda February 19, 2008 at 3:15 am

    For the advantage of the others – “Mark Occurrences” feature is for Flex Builder 3 only and it works only for ActionScript code, no for MXML layout.

  5. 5 alex June 2, 2008 at 3:22 am

    Ctrl + Shift + R will open a very cool search over files names box.

  6. 6 Mike September 3, 2008 at 12:11 am

    Thanks for the copy nonembedded files tip. saved me some time.

  7. 7 surgery for acid reflux August 25, 2010 at 8:03 am

    Cool blog, I had not noticed thesaj.wordpress.com previously in my searches!
    Keep up the good work!


  1. 1 Jim Robson » Sassie Tips & Tricks Trackback on November 6, 2007 at 8:49 pm
  2. 2 Flex Builder Tips & Tricks « Kaushik’s Blog Trackback on November 10, 2007 at 4:17 pm
  3. 3 How to restore lost files… « The Saj - S.A.S.S.I.E. Trackback on April 23, 2008 at 2:30 pm
  4. 4 soon™ » Blog Archive » Flex Builder Tips & Tricks Trackback on March 28, 2009 at 11:10 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




November 2007
M T W T F S S
« Sep   Dec »
 1234
567891011
12131415161718
19202122232425
2627282930