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

Flash Builder Burrito Quick Tips

Wow, Adobe MAX 2010 is just wrapping up and it has been quite a blur. I gave my tips and tricks talk yesterday and it was well received. Thanks to everyone who came.

Don’t forget to give the brand new Flash Builder Burrito Preview Release a try. Download it here http://labs.adobe.com/technologies/flashbuilder_burrito. Don’t forget to read all the intro articles too. There’s lots of coverage of the new developer productivity features as well as the mobile features in Flex Hero.

Once I catch a breath, I’ll go in-depth on the new features in Burrito. For now, here are some quick tips for you early adopters.

  • Override/Implement Methods (Source > Override/Implement Methods)
    Quickly generate stub functions
  • Quick Fixes (CTRL+1 windows or CMD+1 mac)
    • Create a local variable or field
      • “doesNotExist = <expression>” creates “var doesNotExist:<return type of expression> = <expression>”
      • “new SomeClass()” creates “var SomeClass2:SomeClass = new SomeClass()”
    • Create a method
      • “(<setter> =)? doesNotExist(<expr1>, …, <exprN>)” creates “function doesNotExist(var1:<return type of expr1>, …, varN:<return type of exprN>):<return type of setter or void>”
    • Covert a local variable to a field
      • “var foo:String” creates “private var foo:String” and removes the local declaration
  • Metadata code hints
    • Add a metadata.xml to your own SWCs for custom metadata hinting. Look at the SDK version of this file in your FB install: <install location>/sdks/4.5.0/frameworks/metadata.xml
  • Code templates (Preferences > Flash Builder > Editors > Code Templates)
    • Take a look at the existing templates as examples for creating your own. Experiment with linked positions (tabbing through parameterized parts of the template).

In my day-to-day workflow working on the Flex Hero mobile components and mobile theme, quick fixes and override/implement methods have made a huge improvement in my productivity. You really have to try it out for yourself.

At my session, I found that there are still a lot of people that don’t know about “CMD+3/CTRL+3″. It’s like a search engine for commands in Flash Builder and Eclipse. It’s a great way to keep your hands on the keyboard instead of reaching for your mouse.

I also found that the audience didn’t know about camel case code hinting. For example, with the code hints popup open, you can type “ADGHHS” instead of “AdvancedDataGridHeaderHorizontalSeparator”. That’s a lot less typing! Keep in mind that camel case support is in code hints and in the open type dialog and is supported in Flash Builder 4.0 and Burrito.

Those are the very quick highlights of the new developer productivity features in Flash Builder Burrito. Remember that FB is installed side-by-side with your existing FB 4 or 4.0.1 installation. Also, keep in mind that Burrito is a preview release and is not feature complete. Don’t forget to file bugs at http://bugs.adobe.com/flex. And lastly, don’t reuse workspaces between installations of Flash Builder.

Share on Facebook

MAX 2010 Flash Builder Advanced Tips and Techniques

Slides: MAX 2010 Flash Builder Advanced Tips and Techniques

Sample project with Ant build.xml for ASDoc and metadata.xml: CyborgArms.fxpl

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

BAADAUG Slides

BAADAUG July 2010 slides. Thanks everyone!

Share on Facebook

Updates: MAX 2010, Flash Builder and Flex SDK Hero

I’ve been away from my blog and Twitter account for a few months now. It’s been a busy ride since Flash Builder 4.0 was released. Here’s a few news updates in case you haven’t seen them already:

I apologize for the lack of updates recently. I’d love to dig in to the changes and bug fixes in FB 4.0.1, but most of my time is dedicated to Flex SDK Hero at the moment. However, I’ll be working on tons of new content for my MAX 2010 presentation: Flash Builder: Advanced Tips and Techniques. I’ll build on Scott Evans’ 2009 presentation and more. Stay tuned for details as we get closer to MAX.

Share on Facebook

Java Development in Flash Builder 4 Standalone

Question: How can I edit Java code inside Flash Builder?

I’ve seen this question a quite few times on the forums. For users new to Eclipse and/or Flash Builder, it’s not immediately obvious. The short story is that since Flash Builder is based on Eclipse, users get the benefit of the Eclipse plug-in ecosystem. The classic Eclipse distribution is widely known for it’s Java IDE.

Here’s the step-by-step guide to installing the Java Development Tools (JDT) provided by Eclipse:

1) Open Flash Builder
2) Help > Install New Software…
3) At the top of the dialog, click “Add…” to add an update site URL
4) Specify any name and this URL http://download.eclipse.org/releases/galileo/. Press OK.
5) In the table of features, expand “Programming Languages” and select “Eclipse Java Development Tools”
6) Finish the wizard

You’ll be prompted to restart Flash Builder when installation is complete. From here, if you want to jump right into Java development, I recommend you switch perspectives (Window > Perspective > Other > Java). This configures the workbench window so that Java-related actions are the primary focus.

Click here for more information about Java development in Eclipse.

Share on Facebook

Debug Tricks: Remote Debug with Conditional Breakpoints

At some point, you’ve probably hit a bug that you can only reproduce on a remote machine (perhaps a testing/staging or production server). Here are some simple instructions on how to debug your SWF remotely:

  1. Open the Debug Configurations dialog. In the toolbar, click the Debug button and choose Other…. From the menu, choose Run > Debug > Other…
  2. Create a new Debug Configuration for your project. Click the new icon in the top left. Choose your project and the application MXML or ActionScript file.
  3. Specify the URL of your SWF or HTML file. Uncheck “Use Default” under “URL or path to launch”. Enter your URL.
  4. Debug

You can still use all the debug features you would normally use locally. A great trick to demo here is using conditional breakpoints to modify your application at runtime:

  1. Create a breakpoint
  2. Right click on the breakpoint, select Breakpoint Properties
  3. Check enable condition
  4. Enter a valid expression, e.g. this.mySprite.rotationZ += 10
  5. End the expression with: “, false”

Normally you would use conditional breakpoints to suspend when a condition is true. The trick here is that evaluating an expression can have intended/unintended side effects. In this case, we can string together a comma-separated list of expressions and never suspend the application since the expression will always return false.

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