Navigating Your Code and FDT's Workspace
From FDT Documentation
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 .
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 and Profiling Perspectives.
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 - and clicking on the icon perspective itself will switch to the selected perspective .
The Flash FDT Perspective is where you will spend most of your time. It's the default perspective and where you will be writing your code .
Open the Debug Perspective by selecting it within the Open Perspective window . 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 . Check out Using FDT's Debugger for more information on how to use FDT's debugger.
FDT now includes a Profiler. The Profiler Perspective is where developers can get detailed information about a .SWF that is currently running . 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.
Opening, Closing and Minimizing 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 to make a new Editor appear .
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 Main.as file and it will appear within the Editor .
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 , the Editor will no longer have features such as code hinting .
There are numerous FDT features that make moving around your code much easier and intuitive. Let's look at a few of them.
With a file is active within the Editor, hit Cmd+O (OSX) or Ctrl+O (Win) to call up FDT's Quick Outline . 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 , and then use the arrow keys or mouse to select it , then hit enter to have FDT open it for you .
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 . Just like the Quick Outline, you can filter the results by typing with the text input at the top .
Show In Explorer
Type Dependency Outline
This visualizer will display Classes (Objects) associated with the currently selected Class as well as their relationships. After opening the Type Dependencies view 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 .
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 .
In this example the demo.powerflasher package contains a reference to the objects.display package . Contrast that to the demo.powerflasher package which does not have a reference to any other packages .