Flex Builder contains editors that allow you to edit MXML, ActionScript 3.0, and CSS code. Editors are the essence of the workbench and views, and the perspectives in which they are contained support their functionality.

Editors are associated with resource types, and as you open resources in the workbench, the appropriate editor is opened. The workbench is a document-centric (and project-centric) environment for developing applications.

When you develop Flex applications in Flex Builder, you use the MXML, ActionScript 3.0, and CSS editors. Each editor provides the functionality needed to author the given resource type. Flex Builder contains the following editors:

MXML editor You use the MXML editor to edit MXML and to embed ActionScript and CSS code in <mx:Script> and <mx:Style> tags. The MXML editor has two modes: Source and Design. Source mode is used for editing code. Design mode is used for visually laying out and designing your applications. The two modes are synchronized and changes in one mode are immediately reflected in the other. For more information, see About code editing in Flex Builder.

ActionScript editor You use the ActionScript editor to edit ActionScript class and interface files. Although you can embed ActionScript functions into an MXML file by using the <mx:Script> tag, it is a common practice to define classes in separate ActionScript files and then import the classes into MXML files. Using this method, you can define most of your Flex applications in ActionScript.

CSS editor You use the CSS editor to display and edit Cascading Style Sheets. You can then apply styles to the visual elements of your applications. For more information, see Working with components visually and Using Styles and Themes in the Adobe Flex 3 Developer Guide.

Code hinting

Editors contain many features that simplify and streamline code development. Foremost among these features is Content Assist, which displays code completion hints as you enter MXML, ActionScript, and CSS code.

Code hints appear automatically as you enter your code. (You can also display code hints by pressing Control+Space.) The following example shows code hints in the MXML editor:

Code hints appear whenever you begin typing a code expression that Flex or the language (MXML, ActionScript, and CSS) recognizes. For example, if you type the name of a Flex component, you are prompted with a list of all properties of that component.

ActionScript code hinting is also supported. ActionScript code hints are displayed within embedded <mx:Script> tags in an MXML document and within stand-alone ActionScript files. Content Assist displays code hints for all ActionScript language elements: interfaces, classes, variables, functions, return types, and so on.

Content Assist also provides code hints for custom MXML components or ActionScript classes that you create yourself. For example, if you define a custom MXML component and add it to your project, code hints are displayed when you refer to the component in your MXML application file.

For more information, see About Content Assist.

Code navigation

Code navigation simplifies the burden of working with code, especially in large projects with many resources. Code navigation includes the ability to select a code element (a reference to a custom Flex 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.

Other code navigation features include code folding, which allows you to collapse and expand multiline code statements. Another feature is the Outline view, which hierarchically presents, and allows you to navigate to, all user interface and code elements in a file. For more information, see Navigating and organizing code.

Code formatting

As you write code, Flex 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). For more information, see Formatting and editing code.

Find references and code refactoring

Flex Builder lets you find all references and declarations to identifiers in a given file, project, or workspace, including references found in elements linked from SWC files and other entries on a library path (for example, classes, interfaces, functions, variables, and some metadata). You use refactoring to rename identifiers in your code while updating all references to them in your entire code base. For more information, see Finding references and refactoring code.