The ultimate IDE

I’ve been working at Macromedia for a month or two now, and I’ve learned to appreciate the coolness of Flash and ActionScript. People may whine and complain that its not open, that its proprietary, that it duplicates some web functionality, but when it comes down to it, its just damn fun. I’m hoping to put together some interacitve flash tutorials on Mozilla architecture, but that’s a subject for another day.

What I’ve been thinking about lately is the way that Macromedia has put together this slick authoring environment to allow people to develop for Flash. The latest version, “Flash MX 2004″ is an IDE that combines UI/animation design (similar to the old Visual Basic tool) with a programming environment. What’s especially interesting is that they’ve integrated the compiler, the editor, and the help system all into one space.

Given that this is a commercial product, its probably worth me explaining what the environment is like. I’ll say right now, that I know the ActionScript editor is too small, and weak in the editing department, but that doesn’t mean its without its merits!

The authoring environment consists of a stage, where you place objects, an editor, where you write ActionScript, and a bunch of helpful panels with color swatches, and UI components, debugging tools, and more.

But whats especially nice is the way the help system integrates into the editor. There are a few basic features that are really nice:

Autocomplete of methods/member variables   When I type the name of an object instance, and then type “.”, a popup menu appears that auto-completes the possible attributes on this object. You can still type whatever you want, but as it narrows down the possibilities, you can see the correct spelling of a method/member variable or actually just select it with the arrow key.

How does this work? Well in the old Flash MX world, they used code hinting to try to match instance names with types. For instance, if you were referring to a text field, it was best if you named it foo_txt, and the editor would match _txt to a text field and give you possible matches.

In the new world of ActionScript 2.0, the compiler can actually know what symbol you’re typing in basic on the syntax and type declarations preceding it. The editor is actually using the parsing engine to determine the context of what you’re typing. Very cool. I don’t think they do this yet, but this could allow even non-system classes to autocomplete methods and member variables, because the editor can figure out what variable you’re referring to.

Code hinting of parameters   When you type an open-parentheses as part of a function call, this type-parsing goes and looks up the signature of the function you’re starting to call. It then displays the list of parameters in a popup, and even some help to go along with it. The help is usually just a little sentence describing the particular parameter you’re typing in. It recognizes commas, so it can handle multiple parameters.

Smart hyper-linking to help   If the cursor is in a class name, method name, or variable name, the help system can use its special knowledge about the symbol to get an exact help entry for your code. For example, if I have 3 classes all with a .GetName() method, and I hit F1, it can look at the function I’m typing, and figure out exactly which GetName() to show me help on.

Targeting objects   This one is a little more complex, and a little more flash specific. Flash has its own sort of DOM for flash movies which in some ways is similar to Microsoft’s document.all. Basically when you have objects on the “Stage” (the visual screen where draw your movies) you can give them instance names, which correspond directly to variable names in a tree hierarchy. _root is the root of the entire document, and the _parent member variable is always a reference to the owner of the particular object.

In any case, this means that if I want to refer to a particular object on the stage, and I’m currently in an event handler for another object, I can just click the “Target” button to view a hierarchy of the DOM for the objects on the stage. I can choose an object, and the editor will insert the correct path given the current context. For instance, if I’m a button on the stage, and I want to set the text field that resides in a box that is a peer of the button, I can use the targeting feature to automatically insert “_parent.boxname.textname” into my code.

So this is all very neat. I’m actually working on the technical documentation and its interesting to see how this is all put together. I’m not revealing any real secrets here when I explain that most of this code hinting, etc, comes from a whole slew of XML files that contain these little help fragments and possible class members. The XML to connect syntax with help pages is generated off the help that I write in FrameMaker. All the other stuff (the method parameters, etc) must be hand-coded in some XML. (You can find all this stuff on a Windows box in C:\Documents and Settings\\Local Settings\Application Data\Macromedia\Flash MX 2004\en\Configuration)

So why don’t we have an open-source version of this? I think the reason is that there are lots of very smart people who only care about their one tool – i.e. the compiler, the editor, or the documentation for those systems. I’ve heard rumors that Eclipse does some of this and I need to explore it to find out its capabilities. I think it would inspire people to write more documentation if it were more closely connected to the code you were writing.

Update @ 5:25pm: It looks like Eclipse really does want to do some of what I’m talking about. See the Eclipse C/C++ Development Tools (CDT) page. It talks a little bit about code-completion using Control-Space.

  1. No comments yet.
(will not be published)