Mac FlexWeaver: Edit & Compile Flex Apps in Dreamweaver

Last Monday, I wrote about how you can configure Dreamweaver to edit and compile MXML. However, that method only works in Windows, since it uses some Windows-only (and undocumented) methods of the Dreamweaver Extensibility API.

It is a week later, and I have been busy brewing up a solution for us Mac users. One caveat at the outset: I'm on an Intel-based Mac, and so I haven't tested any of this on the Power PC architecture. This procedure requires Dreamweaver 8, and assumes that you have installed the Flex 2 SDK.

For your convenience, I have packaged the necessary files into a handy zip archive. You can download them here: http://labs.tom-lee.com/FlexWeaver/FlexWeaver.zip.

Installation

Opening the package, you'll see several folders. This section will tell you what they are, and where to put them.

1. Commands - Contains the necessary files for two new Dreamweaver command extensions. Place the contents of this folder in Dreamweaver's "Commands" directory. (Dreamweaver 8:Configuration:Commands)


2. DocumentTypes - This contains a copy of the file MMDocumentTypes.xml, which has been modified to allow Dreamweaver to treat MXML files like XML files instead of plain text. Place this in Dreamweaver 8:Configuration:DocumentTypes. Note: if you have already modified your MMDocumentTypes file for another purpose, don't overwrite it - instead, manually edit line 150 like so: <documenttype id="XML" writebyteordermark="false" file="Default.xml" macfileextension="xml,xsd,rss,rdf,dtd,vtm,vtml,csn,config,mxi,mxml" winfileextension="xml,xsd,rss,rdf,dtd,vtm,vtml,csn,config,mxi,mxml" internaltype="XML">
   


3. Helper - Contains an AppleScript application called FlexCompileHelper.app. This bridges the gap between Dreamweaver and the Flex compiler, as I'll explain later. You can put this file anywhere you like.


4. mxmlc - Contains a copy of the mxmlc shell script from the Flex 2 SDK which has been modified to allow support for spaces in filenames. Place this in flex_sdk_2:bin. Feel free to name this file something else if you don't wish to overwrite the one in the SDK.

Configuration

After you have copied the files to their proper locations, launch Dreamweaver. In the "Commands" menu, you should now see two new commands: Flex Compile, and Flex Preferences. Flex Preferences allows you to specify the location of the Flex compiler, the FlexCompileHelper app, and the output path for your SWF file, as well as any command line options you wish to use.

As you can (hopefully) see from the screen-shot, I have left the SWF Output Directory field blank. Since it is blank, SWFs will be placed in the same directory as their corresponding MXML files. Also, I have typed "-incremental=true" in the Additional Compiler Options field, to enable incremental compiling. When you click the "Save" button, a file called "FlexCompilerPreferences.txt" is created in your Dreamweaver configuration folder. This file merely stores all the values you enter into the Flex Compiler Preferences dialog.

Before we continue on, it would be a good idea to set MXML files to open in Dreamweaver. To do so, select an mxml file (you can find one in flex_sdk_2:samples) and go to File > Get Info in the Finder. Find where it says "Open With", select "Other" from the drop-down menu, and then browse to your Dreamweaver installation. Once you have Dreamweaver selected, you can click the "Change All" button to make all MXML files open in Dreamweaver.

Now it's time to compile something. Just open an MXML file in Dreamweaver, and select Commands > Flex Compile. This does a number of things:

1. The Flex Compile command reads the Flex Compiler Preferences and creates a file on your hard drive called "FlexCompileJob.txt" in the same directory as the Flex Compile Helper application. This file contains 4 items: the path to the mxmlc shell script in the Flex 2 SDK, the path to the MXML file being compiled, the output path for the SWF, and any additional command-line options. Then, it launches the Flex Compile Helper application.


2. The Flex Compile Helper application reads FlexCompileJob.txt, creates a command-line for the job, and passes it to the mxmlc shell script.


3. When the mxmlc script returns its output, the Flex Compile Helper writes that output to a text file (FlexCompileOutput.txt) and instructs Dreamweaver to open that file.


4. Flex Compile Helper instructs the Standalone Flash Player (located in the Flex 2 SDK) to open the SWF, and makes that window topmost.

This gives us the basic functionality to edit and preview a Flex 2 application from within Dreamweaver.

Error Checking

If the Flex Compile Preferences have not been set correctly, or an MXML file is not the active file in Dreamweaver, the Flex Compile command will not be available. Here is a list of the conditions under which Flex Compile will be grayed out:

1. FlexCompilerPreferences.txt does not exist or is empty


2. No compiler is specified, or the specified compiler does not exist


3. No Flex Compile Helper app is specified, or the specified one does not exist


4. No document is open


5. The active document is not an MXML document

Further Explanation

This may seem like a lot of moving parts to achieve what should be a simple task. It was easier on Windows, thanks to the MM.createProcess command, which allowed me to call mxmlc directly from Dreamweaver and also catch its output. Unfortunately, this command does not work on the Mac. So, I had to create the AppleScript application which I could call with the more standard dreamweaver.openWithApp command. Since that command does not facilitate passing data to the application it's launching, I had to first write the necessary parameters into a text file which the application could then read.

I also spent a fair amount of time fighting with the mxmlc shell script, which choked on spaces in filenames. By default, it treats a space as an argument separator. If you open mxmlc in a text editor, and look at the last line, you will see this:

java $VMARGS -jar $FLEX_HOME/lib/mxmlc.jar $*

To fix it, I changed it to this:

java $VMARGS -jar $FLEX_HOME/lib/mxmlc.jar "$@"

For the exact reasons why, check out this page on bash scripting. I don't want to get into it right now, it kind of gives me a headache. With that line of code in there, you can escape any spaces in your filename by surrounding the filename in single quotes. FlexCompileHelper takes care of that for you, but if you put any file paths in the Additional Compiler Options field, you'll need to take that into account.

By the way, if you want to see what's in FlexCompileHelper.app, feel free to open it up. I have not protected the contents from being decompiled, so you should be able to see it in Script Editor.

Conclusion

Well, that's it for now. Can this be improved upon? You betcha. This meets my needs for now though, so I probably won't spend too much more time on it. If you have a suggestion on how to streamline this puppy, I'm all ears. I'm kind of intrigued by the fact that even Dreamweaver's code hinting is extensible. I may take on the challenge of adding code hinting to FlexWeaver, but if I do, it won't be for a while. Enjoy, and let me know if you have questions or comments.