The Flex Builder editors provide many shortcuts for navigating your code, including folding and unfolding code blocks, opening the source of code definitions, and browsing and opening types. Multiple line code blocks can be collapsed and expanded to help you navigate, view, and manage complex code documents. In Flex Builder, expanding and collapsing multiple-line code statements is referred to as code folding and unfolding.

Setting, folding, and unfolding code blocks

1. In the editor, click the fold symbol (-) or the unfold symbol (+) in the editor's left margin.

   

   Folding a code block hides all but the first line of code.

   

   Unfolding the code block to make it visible again. Hold the mouse over the unfold (+) symbol to show the entire code block in a tool tip.

   

2. By default, code folding is turned on in Flex Builder. To turn off code folding, open the Preferences dialog and select Flex > Editors, and then deselect the Enable Code Folding option.

Using the Outline view to navigate and inspect code

The Outline view is part of the Flex Development perspective (see The Flex Development perspective), and, therefore, is available when you edit code and design your application. You use the Outline view to more easily inspect and navigate the structure of your MXML, ActionScript, and CSS documents.

The Outline view contains three modes: Class, MXML, and CSS. In Class mode, the Outline view displays the structure of your code (classes, member variables, functions, and so on). In MXML mode, the Outline view displays the MXML structure (tags, components, controls, and so on). In CSS mode, CSS selectors and nested properties within them are displayed.

Selecting an item in the Outline view locates and highlights it in the editor, which makes it much easier to navigate your code.

Outline view in Class mode

When you edit an ActionScript document (or ActionScript contained in an MXML document), the Outline view displays the structure of your code. This includes import statements, packages, classes, interfaces, variables not contained in functions, and functions. This view does not include metadata, comments, namespace declarations, and the content of functions.

In the Outline view, nodes and items in the tree structure represent both the different types of language elements and their visibility. For example, red icons indicate private elements, green indicates public elements, and yellow indicates that the element was neither explicitly marked private nor public.

Outline view toolbar in Class mode

In Class mode, the Outline view toolbar contains the sort and filter commands, as the following example shows:

Outline view in MXML mode

When you edit an MXML document, which can contain both MXML and ActionScript code, both the Class and MXML modes are available in the Outline view.

In MXML mode, each item in the Outline view represents an MXML tag and the following types of tags are displayed: components, controls, nonvisual tags such as WebService or State, component properties that are expressed as child tags (layout constraints, for example), and compiler tags such as Model, Array, and Script.

The Outline view in MXML mode does not show comments, CSS rules and properties, and component properties expressed as attributes (as opposed to child tags, which are shown).

Outline view toolbar in MXML mode

When the Outline view is in MXML mode, the toolbar contains additional commands that let you switch between the MXML and class views.

To switch between the two views, you use these toolbar commands. You can also switch the MXML editor modes (from Source to Design and vice versa) to achieve the same thing.

Using Quick Outline view in the editor

Within the ActionScript and MXML editors, you can access the Quick Outline view, which displays the Outline view in Class mode. The Quick Outline view is displayed in a pop-up window within the editor itself, not as a separate view, and you can use it to quickly navigate and inspect your code.

The Quick Outline view contains the same content as the Class mode, but it also includes a text input area that you can use to filter the displayed items. For example, entering an item name into the Quick Outline view displays only the items that contain those characters.

The Quick Outline view does not contain the commands that let you alphabetically sort or hide items.

As in the Outline view, selecting an item locates and highlights it in the editor.

Open the Quick Outline view

 With an ActionScript or MXML document open in the editor, press Control+O.

Close the Quick Outline view

 Navigating outside the Quick Outline view closes the view. You can also press ESC to close the Quick Outline view.

Opening code definitions

With applications of any complexity, your projects will contain many resources and many lines of code. To help simplify navigating and inspecting the various elements of your code, you can open the source of an external code definition from where it is referred to in your code. For example, if you create a custom MXML component and import it into your MXML application you can select the reference to the MXML component and open the source file in the editor.

Open the source of a code definition

1. Select the code reference in the editor.
2. Press F3.

   The source file that contains the code definition opens in the editor.

Flex Builder also supports hyperlink code navigation.

Open the source of a code definition using hyperlink navigation

1. Locate the code reference in the editor.
2. Press and hold the Control key (Windows) or Command key (Mac OS) and hold the mouse over the code reference to display the hyperlink.
3. To navigate to the code reference, click the hyperlink.

Browsing and opening class types

To quickly browse all the available types in your project (including the Flex framework), use the Open Type dialog box.

1. From anywhere in the workbench, press Control+Shift+T (Windows) or Command+Shift+T (Mac OS).

   The Open Type dialog box appears.

2. To narrow the list of types, enter characters or the desired type name.

   Only the types that contain the characters or name are displayed.

3. To open the class type source file in the editor, double-click the class type name.

Showing line numbers

You can add line numbers in the editor to easily read and navigate your code.

1. In the editor, right-click (Windows) or Control-click (Mac OS) in the editor margin, which is between the marker bar and the editor, to display the context menu.

   

2. Select the Show Line Numbers option.