Archive for September, 2010

Editor In-Depth Part 1: Code Hints and Auto-Import

With MAX coming up, I’ll be a bit more active than I have been lately. To kick things off, I’d like to go in-depth into the MXML and ActionScript editors in Flash Builder. I’ll break this up into a few parts, starting with my favorite and yours: Code Hints and Auto-Import.

Code hints, content assist, intelli-sense, whatever you call it, is an essential part of any IDE. Here’s an in-depth guide into how Flash Builder 4 implements code hinting.

Introduction

Here’s a quick rundown of what I’ll cover:

  • Activation – There are many different ways to implicitly and explicitly open the code hints pop-up in ActionScript and MXML. Since I’ve claimed to be an expert at this tips and tricks thing, I’ll go through all of them.
  • Auto-Importing – This applies to ActionScript import statements as well as MXML namespace prefix declarations.
  • Preferences – There are a few ways to tweak the code hints behavior.
  • Tips and Tricks – I’ve covered a few of these already, but this will be the comprehensive list.

Activation and Context

There are 2 ways to activate code hints: (1) explicitly via CTRL+Space (Mac and Win) or (2) implicitly based on the last character typed and/or the current context. In some cases, contextual code hints are displayed automatically based on the application of a previous hint. These rules apply to both MXML and ActionScript with very few exceptions.

Here are the many ways to implicitly activate code hints:

Tag Names (MXML)

In MXML, pressing “<” will show context-sensitive code hints. Here’s the list of contexts that Flash Builder hints for:

  • Components – When inside a container (mx.core.Container, mx.core.Repeater, spark.components.supportClasses.GroupBase), code hints shows all mx.core.IUIComponent and mx.core.IVisualElement classes in your project’s library path.
  • Default Property – If a component defines DefaultProperty metadata, the first tags shown will be tags that are type-compatible. For example, when inside <s:List> with the default property dataProvider:mx.collections.IList, code hints shows ArrayCollection, ArrayList, etc.
  • Property Tags – In MXML, properties can be specified as attributes (<s:Button label=”…”) or tags (<s:Button><s:label>…</s:label>).

Attributes (MXML)

In an MXML tag, pressing space inside the start tag will open property hints for the tag. In Flash Builder 4, we introduced proposal cycling which allows you to filter property code hints in 5 different ways: all, all properties, events, effects, styles. Pressing CTRL+Space will advance to the next filter.

When dropping in an attribute name with [Insepectable] metadata, the popup will automatically show the enumerated values. For Boolean properties, the popup will automatically show true and false.

Type declarations (ActionScript)

In a type declaration “<identifier>:<type name>”, pressing “:” will activate the code hints popup with class and interface names in scope, sorted alphabetically. Also, package names show up below the type name list for use with fully qualified references. This activation rule applies to all type declaration statements such as variables, function return type, and function arguments.

Vector type declarations go into this bucket too, e.g. “Vector.<type name>” (the brackets are part of the syntax in this case). When you type out “Vector.<“, code hints will open after pressing “<“.

Member access (ActionScript)

In a member access expression “<expression>.<identifier>”, code hints will show all declared and inherited properties and methods that are visible in the current scope. An expression can be a variable name, class name, function call, literal, etc.

A detailed discussion on ActionScript and MXML scope is beyond this post, but briefly, here are the factors that determine what is hinted for member access expressions:

  • Scope of the identifier
  • Scope of the current file
  • Opened namespaces in the current scope (e.g. “use namespace mx_internal”)

When using the “use” directive, code hints will show all namespace-scoped identifiers without the need to explicitly reference the namespace name. For example, if “use namespace mx_internal” is declared above a class, you can type “myUiComponent.” and see mx_internal scoped methods like “$addChild”. Without the “use” directive, you can explicitly see namespaced scoped members by typing “myUiComponent.mx_internal::”. When typing the second “:”, code hints will only show members that are in the specified namespace.

Flex 4 States

States and state groups are hinted in MXML when using Flex 4 states syntax as follows:

  • State specific property value – label.myState=”…” or <label.myState>…</label.myState>
    Pressing period after a property name will automatically show state hints if states are defined for the current file.
  • State specific elements – <s:Button includeIn=”…” or excludeFrom=”…”
    Dropping in includeIn or excludeFrom will automatically show state hints if states are defined for the current file.

MXML Keywords and Extras

MXML has a number of special cases that are supported in FB, mxmlc, or both.

  • implements attribute
    Special syntax for implementing interfaces in MXML. Code hints will show interface names and drop in fully qualified references. These hints are automatically shown after dropping in “implements” from code hints.
  • Vector type
    Code hints will hint for all types inside the type attribute of the <fx:Vector> tag.
  • FlexGlobals.topLevelApplication
    Member access hints off of FlexGlobals.topLevelApplication will display identifiers from your main application as defined in your project settings. For example, if I define a public function foo in my main Spark Application MXML file, foo() will appear in code hints without an explicit cast of topLevelApplication.
  • Styles and Themes
    The [Style] metadata tag has an optional theme property that allows a style property to be specified for 1..N themes. If a style does not specify a theme, it is allowed in all themes. “themeColor” in UIComponent is an example of a halo-specific style that would result in a compiler error when using the Spark theme.

ActionScript Keywords

  • extends
    In a class or interface declaration, typing “extends<space>” will automatically open the list of classes and interfaces to extend.
  • implements
    In a class declaration, typing “implements<space>” will automatically open the list of interfaces to implement
  • new
    In a variable declaration “var foo:MyClass = new<space>”, typing space will trigger type hinting with the declared type at the top of the list.
  • override function
    In a class body, typing “override scope function<space>” will automatically propose a list of functions in the specified scope to override for the current class. For example, in a UIComponent, to generate a function stub for updateDisplayList, type “override protected function<space>” and code hints will list protected functions including updateDisplayList. Selecting a function will generate the correct function signature.
  • package
    If the current file is in a package, but doesn’t have a package declaration, typing “package<space>” will show the package name a code hint.

Import Statements

Automatic Importing via Code Hints

For any package-level definition (class, interface, namespace, function or variable), double-clicking or pressing <enter> on a code hint proposal will automatically insert an import in the correct sort order.

Automatic Importing Without Using Code Hints

Some folks are more productive typing a name rather than using code hints to select it from a list. If you’re one of those people, you can still get imports automatically added as long as the code hints popup was open when you finished typing the name. It’s easier to see this one for yourself.

In a new class, type “var foo:”, wait 100ms for the popup, then type “UIComponent;” without actually selecting anything in the popup. You’ll see that UIComponent was inserted automatically after typing “;”. Pressing <space> instead of “;” will have the same affect. If 100ms is too long to wait, you can specify your own duration in preferences (Flash Builder > Editors > Auto-activate after).

Again, this only works if the popup is open. If you dismiss the popup, you will not get an auto import.

Explicit Auto-Import

The typical use case for explicitly auto-importing is copying and pasting code. If you have a statement like “var foo:NotImportedYet<cursor>;”, pressing CTRL+Space at that <cursor> position will automatically import “NotImportedYet” as long as it is unique (i.e. there isn’t a type named “NotImportYet2″).

Stay Tuned

In Part 2, I’ll wrap up the code hints discussion covering the following: skinning, item renderers, MXML namespaces, CSS, preferences, what’s missing, known bugs and probably some tips and tricks. Send me a comment if you have a question or want to suggest a topic.

Coming Soon

We’ve been working hard at our next release, Flash Builder Burrito. While there’s been some general public discussions about upcoming features, only certain pre-release customers have had access to the early builds so far. One unofficial way to figure out what we’re working on is to search our public bug database at http://bugs.adobe.com/flex.

A slightly more official means is to go to the Flex Team Blog at http://blogs.adobe.com/flex where product manager Andrew Shorten has started posting video sneaks of upcoming Burrito features.

Share on Facebook