Vixiom Axioms

August 25, 2006

Build Flex on OS X with TextMate

Filed under: Flex, Ruby on Rails Alastair @ 1:00 am

Since Adobe decided to ignore us Mac stiffs - not like I’ve ever done anything for ‘em, I’ve only been buying Photoshop since version 3 - I’ve made my own quasi Flex work-flow with “the missing editor for OS X” TextMate.

BTW Photoshop 3 introduced layers which was their greatest innovation until Flex 2.0 :P

Okay enough about my love/hate relationship with Adobe, here’s how I built the ‘Vixiom Flex Builder 3000′. First make sure you have Xcode installed (I can’t remember if this is 100% necessary before I was using TextMate I used Xcode to build from Josh Buhler’s instructions), if you use ruby Xcode is probably already installed, if not install it from the CD that came with your Mac. Put the Flex SDK in /Developer/SDKs/Flex.

TextMate is completely customizable through the bundle editor, you open it by going to Bundles>Bundle Editor>Show Bundles

To make a new bundle you click the + sign at the bottom left of the editor and select ‘New Bundle’ call it ‘Flex’.

With your Flex bundle selected click the + again and choose ‘New Command’ call it ‘Build Project’, I change the ‘Save:’ drop down to ‘Current File’ so it save your work when you build, also change Output to ‘Discard’ otherwise it will overwrite your file with output (what you would see in the terminal). At the bottom I made ‘Activation’ Apple-B (Command-B) which becomes the short cut to build the mxml file.

Now for some applescripting! I’m somewhat ashamed to say this is my first applescript, I’ve been told it can do all kinds of wonderful things but I’ve just never had the time to get into it before. In the ‘Command(s):’ section of the bundle editor enter the following script.

osascript <<EOF
    tell application “Terminal”
    activate
        do script “/Developer/SDKs/Flex/bin/mxmlc -output $TM_PROJECT_DIRECTORY/public/swf/$TM_FILENAME.swf -file-specs $TM_FILEPATH -services $TM_PROJECT_DIRECTORY/config/WEB-INF/flex/services-config.xml -context-root http://localhost:3000/weborb”
        delay 1
        repeat while the front window is busy
            delay 0.5
        end repeat
    end tell
    tell application “Firefox”
    activate
    end tell
EOF

It translates like this:

  1. open the Terminal;
  2. run script "/Developer/SDKs/Flex/bin/mxmlc -output $TM_PROJECT_DIRECTORY/public/swf/$TM_FILENAME.swf -file-specs $TM_FILEPATH -services $TM_PROJECT_DIRECTORY/config/WEB-INF/flex/services-config.xml -context-root http://localhost:3000/weborb" the last two options are um… optional, they’re used for comiling with WebORB for Rails which of course you’re using to load data into your flex app! There’s some Textmate dynamic variables in there $TM_PROJECT_DIRECTORY which is dynamic for your TextMate project’s directory, and $TM_FILENAME which is the name of your file because of this your output swf will be called ‘filename.mxml.swf’.
  3. pause while mxml compiles (repeat while the front window is busy)
  4. bring Firefox to the front, I had code in there before that opened a specific location in Firefox but it was a hassle to change, the first time I run it I browse to the URL I’m testing then refresh the page when Firefox pops to the front after a compile.

It’s still a bit rough around the edges, I want Firefox to auto-refresh when it pops to the front, also a new Terminal window is created every time I build. I had the window closing but then it closes even if you have an error and you miss the debug info.

One thing I’d love to know is if the compile times I’m getting with the command line compiler are normal, I’m averaging about 10-20 seconds per build which is alright unless you’re debugging then it’s an interminable amount of time. I have Flex Builder on my MacBook Pro with Parallels but haven’t set up Rails yet on there, plus all my files, and production apps are on the G5 so switching back and forth would be a headache (and who wants to work in Windows all day, ack!). However compile times with Flex Builder are almost instant, I think it’s because the command line has to load the config xml files each time while Flex Builder has them built in and cached.

If only I had Flex Builder for OS X *sigh*.

Digg! submit Build Flex on OS X with TextMate to stumbleupon.com submit Build Flex on OS X with TextMate to del.icio.us submit Build Flex on OS X with TextMate to reddit.com Like this post? subscribe to the feed.

12 Comments »

  1. nicely done. i can now work on my flex projects on my older (non-intel) powerbook. :) if only adobe will stop dragging their feet on the os x version of builder…. till then, thanks for this.

    Comment by anthony — September 9, 2006 @ 1:12 am

  2. Very nice. I took your script and ran with it a bit. Here are the results. I’ve skipped the AppleScript step entirely, and added a clickable link back to the file if there’s an error:

    # BEGIN
    MXMLC=/Developer/SDKs/Flex/bin/mxmlc
    OUTPUT=”${TM_FILEPATH%.*}.swf”
    FIREFOX=Firefox

    compileResult=$($MXMLC 2>&1 -use-network=false -file-specs $TM_FILEPATH)
    errorLine=`echo $compileResult | sed -n ’s/.*(\([0-9]*\)):.*/\1/p’`
    #echo $errorLine

    echo ”

    body {margin: 10px; font-family: Courier New; font-size: 14px;}
    a {color: #000000; text-decoration: none;}
    a:hover {color: #666666;}

    function closeWin() {
    self.close();
    }

    if test -n “$errorLine”
    then
    echo “$compileResult“;
    else
    echo “$compileResult”;
    open -a $FIREFOX $OUTPUT
    fi
    #END

    Comment by Mark — September 12, 2006 @ 1:17 pm

  3. […] Continuing on the TextMate scripting tip, here’s a quick and dirty compile command I whipped up for compiling AS3. This is based on a post at the Vixiom Axioms blog. […]

    Pingback by dirtystylus » Blog Archive » TextMate and AS3 — September 12, 2006 @ 1:24 pm

  4. Hm. Some of the HTML ouput tags got stripped, check this post for the unadulterated command. Thanks again for posting your original script.

    Comment by Mark — September 12, 2006 @ 1:27 pm

  5. Nice! Textmate is so flexible, no pun intended :P

    I think wordpress kills all javascript so that’s why the code was striped.

    Comment by KreeK — September 12, 2006 @ 1:50 pm

  6. I’m working on a wrapper server for fcsh. fcsh: the Flex Compiler Shell speeds up the build times of your Flex builds - primarily but keeping the process running continuously as an interactive shell. The wrapper/server I’ve been writing allows your shell script to connect to this fcsh server/wrapper. It’s almost ready to go - help me out if you have some time: philip tat philmaker duut com

    Comment by Philip Weaver — August 19, 2007 @ 5:36 am

  7. http://code.google.com/p/mac-applescript-devtool/downloads/list

    Comment by Philip Weaver — August 19, 2007 @ 5:37 am

  8. […] Build Flex on OS X with TextMate […]

    Pingback by Recent Links: December 05 to December 08 at Alex Jones — December 8, 2007 @ 1:03 am

  9. If you’re interested, I’ve published my TextMate Flex bundle on Google Code:
    FlexMate Bundle for TextMate

    Comment by Folletto Malefico — December 22, 2007 @ 7:35 am

  10. Very interesting page.

    Comment by estetik — February 8, 2008 @ 7:38 am

  11. Thank you very much for this information.

    Comment by kop — October 19, 2008 @ 10:08 am

  12. What about tag pages? I’m finding that alot of my traffic is coming from tag pages. I didn’t see any settings for true/false with regard to tag pages. Thx.

    Comment by Plastik cerrah — October 22, 2008 @ 4:36 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-Spam Image

Powered by WordPress