Navigating Your Code and FDT's Workspace

From FDT Documentation

Revision as of 00:16, 5 October 2010 by Aklement (Talk | contribs)
Jump to: navigation, search

[File:001_0005x.png[|center]] With all the ins and outs of an IDE like FDT, a developer can get lost in seemingly endless windows and views. It's important to know how to get around the application and make sure you stay in control of what you're looking at.

This walk through will demonstrate working with views and perspectives, then show off some of FDT's code navigation features.

There are numerous options, windows and keystrokes to remember. In case you forget a particular key binding, right click within the Editor and a popup will appear that will display the available navigation options as well as their keybinding [1].



When working with Eclipse, the platform FDT is built upon, you develop in something called Perspectives. The perspective you are currently working in will determine which tools are available to you. As a Flash developer, you'll be primarily working within the Flash FDT Perspective. If you have purchased the Max version of FDT, which is highly recommended, you will also have access to the Debug Perspective.

To view all available Perspectives, go to Window>Open Perspective>Other... [2]. The Open Perspective window will appear and you'll see FDT in about the middle [3].

Another way to browse Perspectives is to click on the Open Perspective icon located at the top right of the window [4].

Right clicking on the perpective icon will provide a popup where you can customize the perspective as well as how the icons appear - e.g. showing the name of the perspective or not [5] - and clicking on the icon perspective itself will switch to the selected perspective [6].

Flash FDT

The Flash FDT Perspective Fdt perspective.gif is where you will spend most of your time. It's the default perspective and where you will be writing your code [7].


Open the Debug Perspective Debug icon.gif by selecting it within the Open Perspective window [8]. FDT will update the view with a new window layout, that you can change and save, as well as add the Debug icon to the list of perspectives on the top right [9]. Check out Using FDT's Debugger for more information on how to use FDT's debugger.


FDT now includes a Profiler. The Profiler Perspective Profiler icon.gif is where developers can get detailed information about a .SWF that is currently running [10]. Just like all other perspectives, windows can be dragged around and adjusted to your liking. Learn more about the profiler in the Intro To Profiling Applications tutorial.


Views in FDT are panels that display some type of information. In this example [11], the views that are open are:

Opening, Closing and Minimizing Views

If you need to open a particular View, just go to Window>Show View [12]. Views can also be closed [13] or minimized [14]. A view that has been minimized can be restored by clicking on the Restore button [15].

Organizing Views

Views can also be dragged and dropped. This allows you to customize the display of the currently active perspective. Grab the tab of a particular view and drag it around as you see fit. Here I'm dragging the FDT Welcome Screen [16] to make a new Editor appear [17].


The Editor is not really a view, it's more like a text editor that will activate when a file is opened. Opening up the file and it will appear within the Editor [18].

An important note with the Editor is, it will only give you ActionScript error checking and other Smart Editor features when the file it has open is located within a Source Folder. If you were to disable the src folder in this example [19], the Editor will no longer have features such as code hinting [20].

Navigating Code

There are numerous FDT features that make moving around your code much easier and intuitive. Let's look at a few of them.

Quick Outline

With a file is active within the Editor, hit Cmd+O (OSX) or Ctrl+O (Win) to call up FDT's Quick Outline [21]. The Quick Outline is a great way to navigate the currently active Class. When activated, begin typing the name of the method or property you'd like to jump to [22], and then use the arrow keys or mouse to select it [23], then hit enter to have FDT open it for you [24].

Open Type

Move the cursor over a variable [25] and hit F4 and FDT will open the Class that the variable is associated with [26].

Type Hierarchy

Similar to the Quick Outline, the Type Hierarchy, Cmd+T (OSX) or Ctrl+T (Win), allows you to browse and select superclasses associated with the Class that is active in the Editor [27]. Just like the Quick Outline, you can filter the results by typing with the text input at the top [28].

Show In Explorer

When you have a Class active in the Editor [29], hit F2 to have FDT locate and highlight the class for you within the Flash Explorer [30].

Type Dependency Outline

The Type Dependency Outline is works just like the Quick Outline and Type Hierarchy. Just hit Cmd+U (OSX) or Ctrl+U (Win) to bring it up [31].

Dependency Views

New with FDT 4 is the Type Dependencies view and Package Dependencies view. Access these views by going to the Show View window [32] and going to FDT>Package Dependencies [33] or FDT>Type Dependencies [34]

Type Dependency

This visualizer will display Classes (Objects) associated with the currently selected Class as well as their relationships. After opening the Type Dependencies view [35] either double click on a Class within the Flash Explorer or activate a Class within the Editor. After doing so, the Type Dependencies view will analyze the selected Class and build a visualization - showing the currently selected Class in yellow [36].

Some Classes will have many dependencies and this can mean that the view can be come very cluttered. To help with this, the Type Dependency view is also interactive, allowing you to click and drag the icons around the screen. Here the icons have been arranged to show superclasses on the left and Classes that are used or referenced are on the right [37].

This can be taken even further by selecting one of the icons [38] and then double clicking on it to jump to that Class [39].

Clicking on the Back button will return you to the Class you just came from [40].

Lastly, you can have an alternative view of dependencies by togging the Show ancestors option [41]. This will reorganize the view to include referenced .SWCs, packages and projects [42].

Package Dependency

Similar to the Type Dependency view, Package Dependencies will visualize referenced packages [43]. To active click on a package within the Flash Explorer.

In this example the demo.powerflasher package contains a reference to the objects.display package [44]. Contrast that to the demo.powerflasher package which does not have a reference to any other packages [45].

Get FDT5