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:
- Let me select a package that components get created in.
- Export a swc with everything in it so we don’t have to go through most of this.
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.*">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.
<FCTest:Background verticalCenter="0" horizontalCenter="0" />
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