Posts tagged "tip"

Burrito Feature: ActionScript Projects

Remember when setting up ActionScript-only AIR projects was a pain? Not anymore!

The updated File > New > ActionScript Project wizard now lets you choose between “Web” and “Desktop”. No more hack required.

Also, developers who’ve had to overlay the AIR 2.5 SDK in Flex 4 / Flash Builder 4, you’ll be glad to hear that there’s another new project wizard at File > New > ActionScript Mobile project. This project will setup an ActionScript-only mobile project that you can simulate on your desktop in AIR or push to a device just like a Flex Mobile project.

I’ll reiterate: The Burrito preview release ships with the Flex Hero SDK preview release which contains the public release of the AIR 2.5 SDK.

Share on Facebook

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

Accessing ActionScript and Flex SDK Reference Offline

You can cache content locally using Adobe Help. From Flash Builder, go to Help > Flash Builder Help.

  1. In Adobe Help
    (a.k.a, Adobe Community Help Client), go to Preferences
  2. Select
    Download Preferences, make sure Flex 4 is checked. Select Flex 4 and select the help package for “ActionScript 3.0 Language and Component Reference” and any additional packages you wish to download. The full set of Flex 4 help packages is currently around 70 MB. 
  3. Select Local
    Content, update all packages if an update is available.

With the content cached, you can access offline help.
Make sure you select “Flex 4″ in the search box, “Local Help” for your Search Location and
“ActionScript 3.0 Language and Component Reference” for your Filter Results. Despite the name, this will include both built-in Flash and Flex APIs in the search results.

If you only want reference information about Flash
Builder (not including Flex or Flash ASDoc), you can download this PDF http://help.adobe.com/en_US/flashbuilder/using/flashbuilder_4_help.pdf or simply follow the same steps to cache “Using Adobe Flash Builder 4″. 

It’s important to note that Flash Builder 4 no longer uses Eclipse’s help system to deliver help content.

Share on Facebook

Build SWCs with ASDoc for Flash Builder 4

You might already know that ASDoc support was added in Flash Builder 4. We show ASDoc content in code hints, hovers and in the new ASDoc view. We have built-in support for showing ASDoc content from:
  • Flex 4 SDK
  • playerglobal.swc and airglobal.swc
  • Referenced library projects in the current workspace
  • ASDoc content in your current project
However, what we don’t provide is a way to distribute SWCs that bundle ASDoc content without distributing your source code.
Gaurav wrote a great blog post going into detail on how the SDK uses Ant to include ASDoc using framework.swc as an example. You should be aware that te SDK bundles ASDoc a little differently in order to create local-specific resource bundles that contain local-specific ASDoc content. What that means for our users is that ASDoc content in Flash Builder is localized.
For most library developers that don’t require localizing their documentation, the process is a lot easier.

I’ve put together an example library project that you can download that contains a simple Ant script you can use for your own projects. Instead of creating a separate resource bundle, this script essentially runs the ASDoc tool, unzips your SWC, then bundles the ASDoc DITA files into the SWC.

Download: ExampleFatSWC.zip

In Flash Builder:
  1. File > Import, Flash Builder > Flash Builder Project
  2. Browse to the ZIP file
  3. Finish
  4. Right click on the build.xml file and choose Run As > Ant Build
  5. The “fat” SWC is in your /bin folder ready to be shared
When your users add the SWC to their project library path, they’ll see ASDoc content without any extra work.
Remember, to run Ant within Flash Builder, you’ll need to download the Eclipse Java Development Tools from the appropriate update site. For Eclipse 3.5 or Flash Builder Standalone users, use http://download.eclipse.org/releases/galileo and look for “Eclispe Java Development Tools”.
Share on Facebook

New and Updated Keyboard Shortcuts

Posts about Eclipse or Flex Builder 3 keyboard shortcuts are pretty easy to find. Here’s some inside info on keyboard shortcuts that are new and/or updated in Flash Builder 4. As usual, replace CTRL with CMD on Mac.

  • Updated CTRL + SHIFT + G, Find All References
    Find all references to the selected identifier. Works in ActionScript and MXML editors. In FB4, the shortcut now works from files in the Package Explorer.
  • Updated CTRL + SHIFT + T, Open Type
    Opens the Open Type dialog to quickly find classes and interfaces in the current project. In FB4, the shortcut now works when the Package Explorer is the active view.
  • Updated CTRL + SHIFT + O, Organize Imports
    Sorts imports and removes unused imports. In FB4, this shortcut now organizes imports in MXML Script blocks.
  • New CTRL + \ and CTRL + SHIFT + \, Next and Previous State
    Flex 4 states visualization in the MXML editor is new in FB4. These actions are also in the navigate menu. This allows you to gray-out code that isn’t in a particular state. See my article on the Flex Developer Center for more information.
  • New CTRL + I, Correct Indentation
    When writing code indentation is applied automatically after a newline. When pasting code, indentation is automatically corrected. However, there are some cases where indentation isn’t right (e.g. a downloaded file) and you want to fix it manually. You can press CTRL + I to correct indentation on the current line or if you have a text selection, indentation will be fixed for all the lines selected.
  • New CTRL + ALT + H, Call Hierarchy (exception, this is not CMD on Mac)
    Opens the Call Hierarchy view. Displays all functions that call and/or reference the selected identifier.
  • CTRL + 3, Quick Access
    Quick Access is by far the most useful Eclipse shortcut. It displays a pop-up dialog that allows you to search all available commands in the current context. If you don’t know if a command exists, or if it’s buried deep in a preference page, use Quick Access to find it. For example, if you type “sdk” you can jump to the Installed Flex SDKs preference page. If you type “asdoc”, you can quickly activate the ASDoc view.
Share on Facebook

How to Get Help With Flash Builder

Here are a few different ways to get your Flash Builder questions answered. Vaguely in order from most to least helpful:

  1. Adobe Forums: Flex Forum – http://forums.adobe.com/community/flex/flex_general_discussion
    There are lots of helpful people here willing to direct you to an answer or even work with you to find one. There are community members, moderators and Flex and Flash Builder team members regularly answering questions.
  2. Bug Database – http://bugs.adobe.com/flex/ (a.k.a. JIRA)
    Filing, voting and commenting on bugs is one of the more direct ways to get noticed. It’s also really easy to find existing bugs and watch them for e-mail updates when there’s a status or comment change. If you have an issue that hasn’t been fixed yet, vote for the bug and add any new/relevant information that you have. Voting doesn’t always translate to a fix or a new feature, but it doesn’t hurt to make your voice heard for the record.
  3. Tech Notes – http://kb2.adobe.com/cps/832/cpsid_83246.html
  4. Release Notes – http://kb2.adobe.com/cps/530/cpsid_53079.html
  5. This blog
  6. Twitter
    We don’t all monitor Twitter during our workday but once in a while we do filter the noise and find some legitimate issues. I typically link to my blog from my Twitter account, jasonsj_adobe.
Share on Facebook

Time Saver: Auto Indent

indentation.png
Here’s how the new Auto Indent feature saves you time:

  • Indent on paste – Yes, copy and paste code from the web without having to fix indentation
  • Indent on newline – Based on the MXML tag or ActionScript block scope, indentation is inserted automatically
  • New language specific preferences – Under Flash Builder > Indentation: ActionScript and MXML
  • Tabs vs. Spaces – There’s been some confusion about this in the past. We don’t use the Eclipse general text editor preferences in Flash Builder 4. You can specify tabs, spaces and indentation width preferences in Flash Builder > Indentation

I know what you’re thinking, it’s not a full code formatter. I hear ya. I know that many users in the community have used the Flex Formatter plug-in http://flexformatter.sourceforge.net in Flex Builder 3. It’s worth taking a look at, though I haven’t exhaustively tested it with Flash Builder 4.

Share on Facebook

Open ASDoc Language Reference in Browser

If you prefer to see help content in the browser instead of the Adobe Community Help application, do the following:
  1. Open Adobe Community Help
  2. Edit > Preferences
  3. Select “General Settings”
  4. Select “Open Help in browser”
Beware that this will affect all Adobe applications, not just Flash Builder.
Users of prior versions of Flex Builder are accustomed to opening the language reference in a browser. I should point out that for the Flex 4 SDK, available ASDoc content appears in code hints, tooltips and in the ASDoc view that appears in the default Flash perspective.
Share on Facebook

Time Saver: Package Rename Refactoring

Feature: Package Rename Refactoring. In Package Explorer, use F2, “Rename…” in the Package Explorer context menu, or “Rename…” in the top-level File menu

Problem: In Flex Builder 3,
in order to refactor packages…well you couldn’t. You’d have to do this manually or use another tool. Ouch.

Solution: Implement package rename refactoring. Thanks, Scott!.

package rename.png

Share on Facebook

Installing Subclipse in Flash Builder 4

Subclipse is one of the most frequently used plug-ins with Flash Builder. Here are some simple instructions for installing Subclipse and importing an existing project.

  1. Help > Install New Software…
  2. Add…
  3. Name=Subclipse, Location=http://subclipse.tigris.org/update_1.6.x
  4. Select the plug-ins shown in the screenshot below. Note: I’ve deselected a few plug-ins here in order to minimize plug-in dependencies that sometimes have issues resolving.

    subclipse1.png

  5. Finish the wizard. When prompted, restart Eclipse.
  6. On Mac, since JavaHL is not available, be sure to select SVNKit for your SVN interface
    1. Window > Preferences
    2. Team > SVN
    3. Change SVN Interface to SVNKit
  7. To import your projects from SVN
    1. File > Import…
    2. SVN > Checkout Projects from SVN
    3. Create or select a repository location
    4. Select your project root folder
    5. Finish
Share on Facebook