About Flex Builder perspectives
To support a particular task or group of tasks, editors and supporting views are combined into a perspective. Flex Builder contains two perspectives: Flex Debugging and Flex Development. Flex Builder Professional contains an additional perspective, Flex Profiling.
Perspectives change automatically to support the task at hand. For example, when you create a Flex project, the workbench switches to the Development perspective; when you start a debugging session, the Debugging perspective is displayed when the first breakpoint is encountered. You can also manually switch perspectives yourself by selecting Window > Perspective from the main menu (Window > Open Perspective in plugin version). Or, you can use the perspective bar, which is located in the main workbench tool bar.
If you use the plug-in configuration of Flex Builder and have other Eclipse plug-ins installed, you might have many additional perspectives. While predefined perspectives are delivered with each Eclipse plug-in, you can customize them to your liking or create your own. Customizing or creating a perspective is a matter of selecting, placing, and sizing the editors and views you need to accomplish your development tasks. For more information about working with and customizing perspectives, see Working with perspectives.
The Flex Development perspective
The Flex Development perspective includes the editors and views you need to create Flex and ActionScript 3.0 applications. When you create a project, Flex Builder switches into the Development perspective so you can begin developing your application. The following example shows the Flex Navigator, Outline, and Problems views:
The focal point of the perspective (and the workbench generally) is the editor area. The editor area contains all of the currently open documents in a multitab interface. The supporting views are placed around the editor area. Perspectives predefine the layout of all the elements within it, but you may rearrange them to your liking. For more information, see Navigating and Customizing the Flex Builder Workbench.
In Source (code editing) mode, the Development perspective contains the following elements:
The editor area contains all of the open documents. When you create a Flex project, the main MXML application file is opened in the editor area. You can then open and switch between any of the MXML, ActionScript, and CSS documents you are working in.
The MXML and CSS editors operate in two modes (Source and Design) and the Development perspective is modified to accommodate each set of tasks as you toggle between the two modes. The ActionScript editor is a single-purpose editor that is used to create ActionScript files.
For more information about using the MXML editor, see About code editing in Flex Builder and Working with components visually.
The Flex Navigator view contains all of the projects and resources in the workspace and is therefore an essential element of the Flex Builder workbench. It is always displayed in the Development and Debugging perspectives.
For more information about the Flex Navigator view and working with projects, see Working with Projects.
In Source mode, the Outline view presents a hierarchical view of the code structure of the selected MXML or ActionScript document so that you can inspect and navigate the sections or lines of code in the document. The Outline view also displays syntax error alerts that the compiler generates. This view is also available when you use the ActionScript editor.
For more information about using the Outline view in Source mode, see Using the Outline view to navigate and inspect code.
As you enter code, the Flex Builder compiler detects syntax and other compilation errors, and these are displayed in the Problems view. When you debug your applications, errors, warnings, and other information are displayed in the Problems view.
For more information, see Running and Debugging Applications.
Flex Development perspective in Design mode
You visually lay out and design your Flex applications in the MXML editor in MXML Design mode. Design mode is the visual representation of the code that you edit in Source mode. In Design mode, however, additional views are added to support design tasks. These are the Components, Flex Properties, and States views. In addition, when you are in Design mode, the Outline view displays the MXML structure of your Flex applications. You can also display and edit CSS in CSS Design mode. For more information about designing Flex applications in Flex Builder, see Building a Flex User Interface.
In Design mode, the development perspective contains the MXML editor and the Components, States, and Flex Properties, and Outline views.
In MXML Design mode, you interact with your Flex applications visually; dragging and dropping components on to the design area, selecting and resizing components, and so on. You can also expand the MXML editor in Design mode to clearly see and select individual components, and use pan and zoom to get a closer look at items; this is especially useful when you have embedded container components. For more information about working in Design mode, see Building a Flex User Interface.
The Components view contains all of the standard Flex components, which you can select and add to the design area. As you create your own custom components, they are also displayed in the Components view.
For more information, see Adding and changing components.
Flex allows you to create applications that change their appearance based on events that are triggered directly by the user or events that are generated programmatically. These user interface transformations are referred to as view states. You create and manage view states in the States view.
For more information about view states, see Adding View States and Transitions.
When a Flex component is selected, its properties are displayed in the Flex Properties view. You can set and edit properties as appropriate. You can view a component's properties graphically (as shown in the following example) and as a categorized or alphabetical list.
For more information, see Setting component properties.
In Design mode, the Outline view presents a hierarchical view of the MXML structure of your Flex applications. You can easily navigate the structure of your application by selecting individual MXML tag statements and components. When you select an item in the Outline view, it is highlighted in Design mode.
For more information about working with the Outline view in Design mode, see Inspecting the structure of your MXML.
The Flex Debugging perspective
The Flex Debugging perspective contains the tools you need to debug your Flex and ActionScript applications. Like the Development perspective, the primary tool within the debugging perspective is the editor. In the context of debugging your applications, the editor works with the debugging tools to locate and highlight lines of code that need attention so that you can fix them and continue testing your application.
For example, you can set breakpoints in your script to stop the execution of the script so that you can inspect the values of variables and other information up to that point. You can also move to the next breakpoint or step in to a function call to see the variable values change.
The Debugging perspective appears automatically when the first breakpoint is reached. You can also switch to the Debugging perspective manually by selecting it from the Perspective bar, which is located at the right edge of the main workbench toolbar.
The Debugging perspective contains Debug, Breakpoints, Console, Variables, and Expressions views.
The Debug view (in other debuggers this is sometimes referred to as the callstack) displays the stack frame of the suspended thread of the Flex application you are debugging. You use the Debug view to manage the debugging process. For example, the Debug view allows you to resume or suspend the thread, step into and over code statements, and so on.
For more information about working with the Debug view, see Managing the debugging session in the Debug view.
Flex applications are single-threaded (not multithreaded like Java, for example) and you can debug only one Flex application at a time. Therefore, when you debug a Flex application, you see only the processes and Debug view for a single thread of execution.
The Debug view shows a list of all the functions called to that point, in the order called. For example, the first function called is at the bottom of the list. You can double-click a function to move to it in the script; Flex Builder updates the information in the Variables view to reflect the new location in the script.
The Breakpoints view lists all of the breakpoints you set in your project. You can double-click a breakpoint and display its location in the editor. You can also disable, skip, and remove breakpoints.
For more information, see Managing breakpoints in the Breakpoints view.
The Console view displays the output from trace statements placed in your ActionScript code and also feedback from the debugger itself (status, warnings, and errors).
For more information, see Using the Console view.
The Variables view displays information about the variables in a selected stack frame. You can select variables to monitor (in the Expressions view) and also change variable values during the debugging session. During the debug session you can see the changes in the currently running SWF file and experiment with fixes for the problem you need to resolve.
For more information, see Managing variables in the Variables view.
The Expressions view is used to monitor a set of critical variables. You can choose the variables you consider critical in the Variables view and add them to the Expressions view for monitoring.
When you debug your application, you can then monitor and, if needed, modify the values. You can also add and remove variables in the Expressions view. For more information, see Using the Expressions view.
For more information about debugging Flex and ActionScript applications, see Running and Debugging Applications.
The Flex Profiling perspective
Flex Builder Professional contains an additional perspective. The Adobe Flex profiler helps you identify performance bottlenecks and memory leaks in your applications. The Profiling perspective displays several panels (or views) that present profiling data in different ways. As you interact with your application, the profiler records data about the state of the application, including the number of objects, the size of those objects, the number of method calls, and the time spent in those method calls. For more information about the profiler, see About profiling.
Other useful workbench views
In addition to the editors and views associated with Flex Builder's default development, debugging, and profiling perspectives, the workbench contains other views that help you streamline the application development process.
You can access views that are not already displayed with a perspective and add them to the workbench by selecting Window > Other Views > General (Window > Show View Other in plugin version). These optional views are categorized by type and are associated with distinct workbench functionality or with specific Eclipse plug-ins. For more information about working with views, see Working with editors and views.
You will find that several workbench views in particular are valuable aids as you develop your applications in Flex Builder. These include the Tasks, Bookmarks, and Search views.
The Bookmarks view is used to manage the bookmarks that you add to specific lines of code or to resources. As in a web browser, bookmarks are used as a convenience for keeping track of noteworthy items. Selecting a bookmark locates and displays it in the workbench.
For more information about the Bookmarks view, see About markers.
The Search view is displayed automatically when you search the resources in the workspace. You can use it to define and recall previous searches and to filter the list of search results.
For more information about the Search view, see Searching in the workbench.