I often find that I can really boost my productivity by simply learning what the tools I am using can do to help me. While this may not be as glamorous as an esoteric coding trick, it can speed up my coding regardless of what I am doing. For example, I've recently found a number of shorcuts in Flex Builder's Outline View that are making my life a lot easier these days.

Outline View Icons

Knowing the Outline View icons can save you a lot of trouble. As a bonus, Flex Builder uses the same icons in code hinting, so knowing these will help you there as well.

For all icons, hollow means properties, solid means methods. Green circles are private, yellow diamonds are protected, and red squares are private. Yes, Flex icons are magically delicious.

If you see a big circle with a "C" in it, that is a Class. Many of the Framework Classes have "pseudo private" classes outside the package definition, and Outline View is probably the easiest way to see this.

Jog your memory

One thing I use Outline view for a lot is to remind myself what I named that variable, mxml tag, or even style. It's much easier to glance over at the outline view of a Class than to scroll up or down to where something is declared (then back).

MXML or Class View

The default for MXML classes is MXML View, which shows the MXML tags in a hierarchical XML type structure. But did you know you can switch to see Class View by clicking the green circle with a "C" in it below the Outline tab? This allows you to see all of the declarations, regardless of where and how they are declared.

You may not realize that you can see Outline View even in Debugging Perspective. Simply go to the Window menu and select "Outline."

Quick Access

If you click a property or method name in Outline View, Flex Builder will scroll Outline view until the function, method or Class is visible, then highlight that property or method. If you start typing the name of the property or method, Flex will also navigate to the property or method and highlight it. If you have several related properties or methods that begin with the same letter(s), Flex will cycle through them if you type the first few letters repeatedly. This has been the single biggest time saver I have found in Outline View.

Case Study in using Outline View

This week, I received a comp that showed a chart with the vertical axis on the left, but the labels to the right of it. I searched for an easy way to make this happen. So far I haven't come up with much, so I came to the conclusion that the best way to do it would be to create a subclass of AxisRenderer. So I popped open AxisRenderer to see what would be involved.

I quickly realized that the method handled the actual placement of the labels was private, drawLabels(). I used the References functionality to track down that this function is called from updateDisplayList(). When I look at the Class definition, I can see that all of the functions called from updateDisplayList are private. This means that in order to override updateDisplayList and replace the drawLabels() functionality, I would also need to replace the logic of the 3 other private functions (private functions are not available in subclasses).

I also could see that these methods accessed private variables that referred to UIComponents that were accessed by even more functions called by other logic. This meant that changing those 4 functions could potentially have implications that could ripple throughout the entire class, even if we were to copy and paste the logic in the other 3.

Based on this, the development team was able to make the decision within a few minutes to ask the design team to consider whether the custom label placement was really necessary. Without Outline View, it would have probably taken me an hour or more to pore over the code and determine how much functionality would need to be rewritten to support the change.

For more on Outline View, check out the Flex 3 LiveDocs.

Read more from Amy Blankenship.