Flex Component Showing in Flex Builder

I ran into a problem a few days ago with a Flex component that I was building not showing up in Flash Builder when built using our command-line build, but showing up fine when built by the IDE (Flex Builder).

It took me a bit of searching to figure out what the problem was, which means it’s worth posting the solution here.

Flex Builder’s design view is extensible. New components that you build can show up in the Components panel, and users can drag them onto the design surface. You need to do a few things for this to work.

First, you need a design.xml file in your SWC. This file tells Flex Builder about your component. Here’s an example:

[cc lang=”xml”]

















[/cc]

I had that right in my SWC, but I was missing two things. The ant script that I was using for my command-line build wasn’t including the design.xml file. After adding that, here’s what the ant target for the SWC compile looks like:

[cc lang=”xml”]















[/cc]

Note the include-file line, which gives the name of the file and then the source path to it.

And the other thing that was missing was the namespace mapping. The compiler.namespaces.namespace argument identifies the namespace for the component (which has to match the namespace from the design.xml) and the manifest to use for the classes in that namespace.

The last piece is the manifest file. Here’s what that looks like:

[cc lang=”xml”]




[/cc]

With all this set up, dropping the SWC into a Flex project’s libs folder will immediately show the MyImage component in the Components panel ready to drag onto the design surface.