Format, navigate, and organize code

The Flash 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. Code navigation includes the ability to select a code element (a reference to a custom component in an MXML application file, for example) and go to the source of the code definition, wherever it is located in the project, workspace, or path.

Multiple line code blocks can be collapsed and expanded to help you navigate, view, and manage complex code documents. In Flash Builder, expanding and collapsing multiple-line code statements is referred to as code folding and unfolding.

    Code formatting, indenting, and commenting

    As you write code, Flash Builder automatically indents lines of code to improve readability, adds distinguishing color to code elements, and provides many commands for quickly formatting your code as you enter it (adding a block comment, for example).

    To change the default formatting, in the Preferences dialog box, select Flash Builder > MXML Code > Formatting. You can change the order and grouping of the attributes.

    When you paste MXML or ActionScript code into the code editor, Flash Builder automatically indents the code according to your preferences. You can also specify indenting for a selected block of code.

    To specify the indentation preferences, in the Preferences dialog, select Flash Builder > Editors. You can specify the indent type and size.

    Set, fold, and unfold code blocks

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

      View full size graphic

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

      View full size graphic

      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.

      View full size graphic

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

    Apply syntax coloring preferences

    You can easily adjust syntax coloring preferences.

     Open the Preferences dialog and select Flash Builder > Editors > Syntax Coloring.

    For more information, see Syntax coloring.

    Default font colors can also be configured on the Text Editors and Colors and Fonts Preferences pages (see Preferences > General > Appearance > Colors and Fonts. See also Preferences > General > Editors > Text Editors).

    Indent code blocks

    The editor automatically formats the lines of your code as you enter it, improving readability and streamlining code writing. You can also use the Tab key to manually indent individual lines of code.

    When you copy and paste code blocks into Flash Builder, Flash Builder automatically indents the code according to your indentation preferences.

    If you want to indent a block of code in a single action, you can use the Shift Right and Shift Left editor commands.

    Shift a code block to the left or right

    1. In the editor, select a block of code.

    2. Select Source > Shift Right or Source > Shift Left.

    3. Press Tab or Shift Tab to indent or unindent blocks of code.

    Set indent preferences

    1. Open the Preferences dialog and select Flash Builder > Indentation.

    2. Select the indent type (Tabs or Spaces) and specify the IndentSize and Tab Size.

    Add comments and comment blocks

    You can add or remove comments using options in the Source menu or by using keyboard shortcuts. You can add the following types of comments:

    • Source comment for ActionScript (//)

    • Block comment for ActionScript (/* */)

    • ASDoc comments for ActionScript (/** */)

    • Block comment for MXML (<!---->)

    • CDATA block for MXML (<![CDATA[ ]]>)

    Comments in ActionScript code can be toggled on or off.

     Adobe Community Professional, Paul Robertson, blogged about using block selection mode.

    Toggle comments in ActionScript code

    1. In the editor, select one or more lines of ActionScript code.

    2. Press Control+Shift+C (Windows) or Command+Shift+C (Mac OS) to add, or remove, C-style comments.

    3. Press Control+/ (Windows) or Command+/ (Mac OS) to add, or remove, C++ style comments.

    Add XML comments in MXML code

    1. In the editor, select one or more lines of MXML code.

    2. Press Control+Shift+C (Windows) or Command+Shift+C (Mac OS) to add a comment.

    Add CDATA blocks in MXML code

    1. In the editor, select one or more lines of MXML code.

    2. Press Control+Shift+D (Windows) or Command+Shift+D (Mac OS) to add a comment.

    Navigate and inspect code

    With applications of any complexity, your projects typically contain many resources and many lines of code. Flash Builder provides several features that help you navigate and inspect the various elements of your code.

    Open code definitions

    Flash Builder lets you 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. From the Navigate menu, select Go To Definition.

      You can use the keyboard shortcut, F3.

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

    Flash 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.

    Use the Outline view

    The Outline view is part of the Flash Development perspective (see The Flash Development perspective), and, therefore, is available when you edit code. 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.

    ActionScript outline view

    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 is not private or 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 toolbar

    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 (for example, layout constraints), and compiler tags such as Model, Array, and Script.

    MXML Outline view

    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 menu contains additional commands to switch between the MXML and class views.

    Outline view toolbar

    To switch between the two views, from the toolbar menu, select Show MXML View or Show Class View.

    Use 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.

    View full size graphic

    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.

    View full size graphic

    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, from the Navigate menu, select Quick Outline.

    You can also use the keyboard shortcut, 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.

    Browse and view classes

    The Open Type dialog is available for browsing all available classes (including Flex framework classes) in your project. Select a class in the Open Type dialog to view the implementation.

    Open Type dialog

    The Open Type dialog is also available for selecting classes as the base class for a new ActionScript class or a new MXML component.

    The Open Type dialog lets you filter the classes that are displayed according to the text and wild cards that you specify. The dialog uses color coding to indicate recommended types and excluded types. Recommended types display as gray. Excluded types appear brown.

    Recommended types are those classes available in the default namespace for a project. For example, in some contexts only Spark components are allowed. In other contexts, both Spark and Halo components are allowed.

    Excluded types are those classes that are not available in the default namespace for a project.

    Open the Open Type dialog

    • (Browse classes) To browse classes and view their implementation:

      1. From the Flash Builder menu, select Navigate > Open Type.

      2. (Optional) Type text or select filters to modify the classes visible in the list.

      3. Select a class to view the source code.

        You cannot modify the source code for classes in the Flex framework.

    • (New ActionScript classes) When selecting a base class for a new ActionScript class:

      1. Select File > New > ActionScript class.

      2. For the Superclass field, click Browse.

      3. (Optional) Type text or select filters to modify the classes visible in the list.

      4. Select a base class from the list.

    • (New MXML components) When selecting a base component for a new MXML component:

      1. Select File > New > MXML Component.

      2. From the list of projects in your workspace, select a project for new MXML component and specify a filename.

        The available base components vary, depending on the namespaces configured for a project.

      3. For the Based On field, click Browse.

        Note: Clear or modify the default base class listed in the Based On field to widen your choices.

      4. (Optional) Type text or select filters to modify the classes visible in the list.

      5. Select a base component from the list.

    Show line numbers

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

     From the context menu in the editor margin, select Show Line Numbers.

    The editor margin is between the marker bar and the editor.

    Show line numbers

    Use markers

    Markers are shortcuts to lines of code in a document, to a document itself, or to a folder. Markers represent tasks, bookmarks, and problems and they are displayed and managed. Selecting markers opens the associated document in the editor and, optionally, highlights the specific line of code.

    With Flash Builder, you must save a file to update problem markers. Only files that are referenced by your application are checked. The syntax in an isolated class that is not used anywhere in your code is not checked.

    The workbench generates the following task and problem markers automatically. You can manually add tasks and bookmarks.

    Tasks
    Task markers represent a work item. Work items are generated automatically by the workbench. You can add a task manually to a specific line of code in a document or to the document itself. For example, to remind yourself to define a component property, you might create a task called “Define skinning properties.” You can also add general tasks that do not apply directly to resources (for example, “Create a custom component for the employee log-in prompt”). You use the Task view to manage all the task markers. For more information, see Add tasks.

    Problems
    Problem markers are generated by the compiler and indicate invalid states of various sorts. For example, syntax errors and warnings generated by the compiler are displayed as problem markers in the Problem view. For more information, see Filter the Tasks and Problems views.

    Bookmarks
    You can manually add bookmarks to a line of code or a resource (folder or document). You use bookmarks as a convenience, to keep track of, and easily navigate to items in your projects. You use the Bookmarks view to manage all bookmarks. For more information, see Add and delete bookmarks.
    Note: The Tasks and Bookmarks views are not displayed by default in the Flash Development perspective. For more information about adding these views, see Work with views.

    Navigate markers

    Markers are descriptions of and links to items in project resources. Markers are generated automatically by the compiler to indicate problems in your code, or added manually to help you keep track of tasks or snippets of code. Markers are displayed and managed in their associated views. You can easily locate markers in your project from the Bookmarks, Problems, and Tasks views, and navigate to the location where the marker was set.

    Go to a marker location

     Select a marker in the Bookmarks, Problems, or Tasks views.

    The file that contains the marker is located and opened in the editor. If a marker is set on a line of code, that line is highlighted.

    Add tasks

    Tasks represent automatically or manually generated workspace items. All tasks are displayed and managed in the Tasks view (Window > Other Views > General > Tasks), as the following example shows:

    View full size graphic

    Add a task to a line of code or a resource

    1. Open a file in the editor, and then locate and select the line of code where you want to add a task; or in the Flex Package Explorer, select a resource.

    2. In the Tasks view, click the Add Task button in the toolbar.

    3. Enter the task name, and select a priority (High, Normal, Low), and click OK.

    Note: The resource, as shown in the Flex Package Explorer, does not indicate that it was marked. You can view and manage all task markers in the Task view.

    Complete and delete tasks

    When a task is complete, you can mark it and then optionally delete it from the Tasks view.

    Mark a task as complete

     In the Tasks view, select the task in the selection column, as the following example shows:

    View full size graphic

    Delete a task

     In the Tasks view, open the context menu for a task and select Delete.

    Delete all completed tasks

     In the Tasks view, open the context menu and select Delete Completed Tasks.

    Add and delete bookmarks

    You can use bookmarks to track and easily navigate to items in your projects. All bookmarks are displayed and managed in the Bookmarks view (Window > Other Views > General > Bookmarks), as the following example shows:

    View full size graphic

    Add a bookmark to a line of code or a resource

    1. Open a file in the editor, and then locate and select the line of code to add a bookmark to.

    2. From the main menu, select Edit > Add Bookmark.

    3. Enter the bookmark name, and click OK.

      A bookmark icon () is added next to the line of code.

    Note: The resource, as shown in the Flex Package Explorer, does not indicate that it was marked. You can view and manage all bookmarks in the Bookmarks view.

    Delete a bookmark

    1. In the Bookmarks view, select the bookmark to delete.

    2. Right-click (Windows) or Control-click (Mac OS) the bookmark and select Delete.

    Organize import statements

    You can add, sort, and remove unused import statements in ActionScript and MXML script blocks using the Organize Imports feature.

    To use the Organize Imports feature, with an ActionScript or MXML document that contains import statements open in the editor, do one of the following:

    • Select Organize Imports from the Source menu.

    • Use the keyboard shortcut: Control+Shift+O (Windows) or Command+Shift+O (Mac OS)

    • Place the cursor on any import statement, and press Control+1. Then, select the option to organize imports.

    Add missing import statements

    If you have undefined variables within your ActionScript script or MXML script block, you can add all missing import statements all at once by using the Organize Imports feature.

    Resolve ambiguous imports

    When you use the Organize Imports feature in the MXML and ActionScript editors, the packages in which the classes are located are automatically imported into the document.

    If you declare an ActionScript type that is present in two packages, you can choose the import statement for the required package. For example, Button is present in both spark.components and mx.controls packages.

    If you have more than one instance of ambiguous import statements, all the unresolved imports are displayed letting you resolve them one after the other.

    Remove unused import statements

    Flash Builder places all import statements at the head of an ActionScript document or at the top of the script block of an MXML document by default.

    To remove import statements that are not referenced in your document, keep the document that contains import statements open in the editor, and use the Organize Imports feature.

    Sort import statements

    You can quickly sort all the import statements in your ActionScript or MXML script block using the Organize Imports feature.

    Flash Builder sorts the import statements alphabetically by default. To change the default order in which you want Flash Builder to add the import statements, use the Preferences dialog. To do so, open the Preferences dialog, and select Flash Builder> Editors > ActionScript Code > Organize Imports. For more information, see ActionScript code.

    Auto-import missing import statements when copy-pasting ActionScript code

    When you copy ActionScript code from an ActionScript document and paste into another ActionScript document, any missing import statements are automatically added. The missing import statements are added at either the package level or file level depending on where you paste the code.

    Note: This feature is supported only for ActionScript code. If you copy ActionScript code from a file outside Flash Builder or from a file other than an ActionScript file, then the missing import statements are not added.

    Consolidate import statements across MXML script blocks

    If you have multiple MXML script blocks in a document with multiple import statements defined for each script block, Flash Builder lets you consolidate all the import statements.

    The Consolidate Import Statements Across MXML Script Blocks option in the Organize Imports preferences dialog box is selected by default. The import statements are consolidated, sorted, and added only once at the top of the first script block.

    Consolidate import statements from the same package using wildcards

    If you have multiple import statements from the same package, you can use wildcards in your import statement instead of repeating the statements multiple times.

    You can specify the number of import statements that are allowed for types in the same package before the <package>.* wildcard is used. For example, if you have multiple import statements from the flash.events package, Flash Builder consolidates all the import statements as:
    import flash.events.*;

    By default, Flash Builder applies the <package>.* wildcard if you use more than 99 import statements from the same package. You can change the default value using the Organize Imports Preferences dialog. For more information, see ActionScript code.