Set up the Feathers SDK in Adobe Flash Builder (Starling version)

Let's get your Flash Builder development environment setup to use the Feathers SDK.

These instructions apply to both Flash Builder 4.6 and Flash Builder 4.7. Older versions of Flash Builder are not supported.

Create a new workspace for Feathers SDK projects

First, we should to create a new workspace in Flash Builder. We're going to make some changes to the workspace settings so that Flash Builder works a little more smoothly with the Feathers SDK. We don't want to do that in a workspace that contains any Flex projects.

  1. Create a new workspace in Flash Builder by selecting File menu → Switch workspaceOther....

  2. Choose a directory for the new workspace.

  3. Click OK to create the new workspace.

Don't create a new project yet! We have a couple of things to tweak first.

Add the Feathers SDK to Flash Builder

  1. Install the Feathers SDK somewhere on your computer.

  2. Open the Flash Builder preferences on Mac OS X by going to the Flash Builder menu → Preferences. On Windows, select the Window menu → Preferences....

  3. Expand the Flash Builder node on the list to the left of the preferences window, and select Installed Flex SDKs.

  4. Click the Add... button, and in the new window, choose the directory where you installed the Feathers SDK. Click OK when finished.

  5. Click the checkbox next to the Feathers SDK in the Name column to make this SDK the default for the workspace.

  6. Click Finish.

Import the file templates for the Feathers SDK

Next, we're going to import custom templates for new MXML files. The default templates provided by Flash Builder don't work with Feathers components, so these custom templates will provide the right settings.

  1. Download the Feathers SDK file templates for Flash Builder 4.6 and 4.7.

  2. Open the Flash Builder preferences on Mac OS X by going to the Flash Builder menu → Preferences. On Windows, select the Window menu → Preferences....

  3. Expand the Flash Builder node on the list to the left of the preferences window, and select File Templates.

  4. Click the Import... button and choose the file templates that were downloaded in step 1.

How to create a project for a mobile application

Let's create a mobile application that uses Adobe AIR to target iOS or Android. If you need to create a web or desktop project, skip ahead to the next section.

  1. In Flash Builder, select the File menu → NewFlex Mobile Project. A new window will open to customize the project's settings.

  2. Enter your Project name. The default Project location is usually okay. Click Next.

  3. Under Application Template, choose Blank. Do not choose one of the other templates.

  4. Click Finish.

How to create a new project for a web or desktop application

Let's create a web or desktop application that can target Flash Player in a web browser or native desktop application. If you need to create a mobile project, take a look at the previous section.

  1. In Flash Builder, select the File menu → NewFlex Project. A new window will open to customize the project's settings.

  2. Enter your Project name. The default Project location is usually okay.

  3. Select either the Web or Desktop application type.

  4. Click Finish.

Conclusion

Flash Builder can now use the Feathers SDK, and your first project is ready. If you're unsure how to proceed, take a look at the Getting Started with Feathers and MXML tutorial.

Known Issues

  • Flash Builder code completion will always automatically insert the fully-qualified class name starling.events.Event in MXML <fx:Script> tags, even if flash.events.Event is not imported. Since there is no conflict, the starling.events package name may be manually removed, if desired.

  • Unless the custom file templates are imported, creating a new project will not automatically define the Feathers MXML namespace in the new project's main application class. In this situation, the application class generated by Flash Builder must be edited manually to compile without errors.

    Without the Feathers SDK file templates, a new application file generated by Flash Builder will look something like this:

    <?xml version="1.0" encoding="utf-8"?>
    <application xmlns:fx="http://ns.adobe.com/mxml/2009" layout="absolute">
    
    </application>
    

    This code will not compile. Import the custom file templates to avoid this issue. If you prefer not to use the custom file templates in your workspace, you may copy the following MXML:

    <?xml version="1.0" encoding="utf-8"?>
    <f:Application xmlns:f="library://ns.feathersui.com/mxml"
      xmlns:fx="http://ns.adobe.com/mxml/2009">
    
    </f:Application>
    
  • When creating a new MXML component, no Feathers components will be listed when clicking the Browse button next to the Based on field that allows you to choose a superclass. Instead, you must manually type in the fully-qualified class name of the component. For example, to create an MXML component based on LayoutGroup, you should type in feathers.controls.LayoutGroup.

  • In the Flex Theme section of a project's properties, do not change the selected theme or attempt to import a Feathers theme SWC. This may result in Eclipse error messages when opening the project properties. A Feathers theme may be set in your MXML application class using the theme property.

  • When creating a new Flex Mobile Project, the View-Based Application and Tabbed Application options in the Application Template section cannot be used with the Feathers SDK. These templates are too closely tied to the Flex framework, and Flash Builder offers no way to customize the templates. Always choose the Blank template when creating a new mobile project.