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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <design> <namespaces> <namespace prefix="myproject" uri="http://www.adobe.com/2009/myproject" /> </namespaces> <categories> <category id="myproject" label="myproject" defaultExpand="true" /> </categories> <components> <component name="MyImage" namespace="myproject" category="myproject" insertStyle="control" displayName="MyImage"> <defaultAttribute name="cellName" value=""/> <mxmlProperties use="mx:Image"> <textfield id="cellName" name="Cell Name:"/> <combo id="autoInvokeTargetURL" name="Auto Invoke Target URL:"/> </mxmlProperties> </component> </components> </design> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <target name="build"> <java jar="${flex.sdk.home}/lib/compc.jar" dir="." fork="true" failonerror="true"> <jvmarg value="-Xmx512m"/> <arg value="-load-config=${flex.sdk.home}/frameworks/flex-config.xml"/> <arg value="-compiler.fonts.local-fonts-snapshot=${flex.sdk.home}/frameworks/localFonts.ser"/> <arg value="-headless-server=true"/> <arg value="-include-file=design.xml,src/design.xml"/> <arg value="-source-path=src"/> <arg value="-compiler.namespaces.namespace=http://www.adobe.com/2009/myproject,src/manifest.xml"/> <arg value="-include-namespaces=http://www.adobe.com/2009/myproject"/> <arg value="-compiler.debug=${flex.debug}"/> <arg value="-compiler.external-library-path+=${flex.sdk.home}/frameworks/libs/framework.swc"/> <arg value="-o=bin/${swc}"/> </java> </target> |
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:
1 2 3 4 | <?xml version="1.0"?> <componentPackage> <component id="MyImage" class="org.stevex.myproject.MyImage"/> </componentPackage> |
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.
June 27th, 2011 at 7:24 am
Hello,
thanks for the post,
I have added a component where some events, all are working properly.
I could not add in the main palette.
I tried
The other properties, get and setters are ok.
PS: I’m referring to the Standard View, in the other tabs I see normally.
Thanks.