The other day, I blogged about an alternate workflow to Catalyst. It was somewhat confusing with a few steps involved. Towards the end of the post I had a couple wishes including:

1. Let me select a package that components get created in.
2. Export a swc with everything in it so we don’t have to go through most of this.

Last night I wrote a ruby script capable of doing exactly those two things.  I call it fxp2swc.rb.

Using the script is simple.  First open it up and set the two variables at the top.

@flexdir = "/Applications/Adobe\ Flash\ Builder\ Beta/sdks/4.0.0";
@defaultpackage = "com.roguedevelopment.catalyst";

The flexdir just tells the script where your Flex SDK is. The defaultpackage tells it what package you want your catalyst based components made in.

After you edit that, put the script in the same directory as your .fxp files. Run the script and you should see output like this:

$ ./fxp2swc.rb
=== FCTest.fxp
 Extracting to FCTest.fxp.tmp
 Creating directory FCTest.fxp.tmp/src/com
 Creating directory FCTest.fxp.tmp/src/com/roguedevelopment
 Creating directory FCTest.fxp.tmp/src/com/roguedevelopment/catalyst
 Creating directory FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest
 Copying Main.mxml
 Copying FCTest.fxp.tmp/src/components/Background.mxml -> FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest
 Copying FCTest.fxp.tmp/src/components/CustomComponent1.mxml -> FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest
 Copying FCTest.fxp.tmp/src/components/LoginButton.mxml -> FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest
 Copying FCTest.fxp.tmp/src/components/LoginForm.mxml -> FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest
 Copying FCTest.fxp.tmp/src/components/TextInput1.mxml -> FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest
 Removing old source locations
 Fixing package names in FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest/Background.mxml
 Fixing package names in FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest/CustomComponent1.mxml
 Fixing package names in FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest/LoginButton.mxml
 Fixing package names in FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest/LoginForm.mxml
 Fixing package names in FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest/Main.mxml
 Fixing package names in FCTest.fxp.tmp/src/com/roguedevelopment/catalyst/FCTest/TextInput1.mxml
 Creating swcconfig.xml
 Invoking compc -load-config+=swcconfig.xml
Loading configuration file /Applications/Adobe Flash Builder Beta/sdks/4.0.0/frameworks/flex-config.xml
Loading configuration file /Users/mhughes/Dropbox/fxg2swc/swcconfig.xml
/Users/mhughes/Dropbox/fxp2swc/FCTest.swc (1463574 bytes)
Deleting temp dir
Done!

You now have a one .swc for every .fxp file! As easy as that!

Take the swc, and plop it into the "libs" folder of you Flash Builder project, and you can start using the components from it. They'll be in a package that starts with your default_package variable and ends with the name of the .fxp you compiled. So for my example FCTest.fxp, the package is: com.roguedevelopment.catalyst.FCTest

Here's a quick example of what it looks like to use one of those components:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     minWidth="1024" minHeight="768"
     viewSourceURL="srcview/index.html"
     xmlns:FCTest="com.roguedevelopment.catalyst.FCTest.*">
   <FCTest:Background verticalCenter="0" horizontalCenter="0" />
</s:Application>

You can still use the composition or inheritance methods of using those components that I blogged about the other day. Here's an example showing that with view-source enabled.

I'm on OSX using Ruby v1.8.6 with this script. Your mileage may vary on other platforms. Two things that will likely need to change for Windows users:

• The compc call should use compc.exe
• It uses the unzip command line utility, not sure if that's a standard tool on Windows