Monday, July 24, 2006

Edit and Compile Flex Apps in Dreamweaver

In what I think is a brilliant move by Adobe, the Flex 2 SDK and Flex 2 Framework are available for FREE. This is nothing new, but it's worth restating (it seems that a lot of people don't know it yet). I intend to make take full advantage of that fact until such time as I can afford Flex Builder. That's not to say that Flex Builder is unaffordable: quite the contrary. However, I also have to have licenses for Flash, Dreamweaver, Photoshop, and Illustrator. So for me, an extra $500 is substantial.

I actually see not having access to Flex Builder as an opportunity to learn. Like many, I learned HTML by hand-coding in Notepad, and it made me REALLY learn HTML. I think that not using Flex Builder will force me to learn the behind-the-scenes stuff, and therefore will end up being a positive thing. When I do buy the Builder license, I'll have a strong understanding of what's going on under the hood, as well as the conveniences of the Design view and robust code hinting.

Configuring Dreamweaver

Since I already have Dreamweaver, I'll use that as my XML editor. It's really easy to associate MXML files with Dreamweaver, and with a little configuration, you can take advantage of Dreamweaver's XML syntax highlighting. Here's how to do it in Windows:




1) Download the Flex 2 SDK from http://www.adobe.com/products/flex (the link is at the bottom of the page). Install the SDK by unzipping it to the directory of your choice. I put mine in the root of my C drive.

2) Associate MXML files with Dreamweaver. To do so, right-click a file with a .mxml extension, and click Properties. In the Properties dialog, find where it says "Opens with:" and click the "Change" button. Select "Dreamweaver" from the resulting menu. If you don't have any .mxml files yet, you can find one in C:\flex_2_sdk\Samples.

3) Enable XML syntax highlighting for .mxml files. For this, you need to edit one of Dreamweaver's configuration files. The specific file is called MMDocumentTypes.xml, and is located at C:\Program Files\Macromedia\Dreamweaver 8\Configuration\DocumentTypes. You can edit this with Dreamweaver. Find the tag and add "mxml" to the list of extensions in the "winfileextension" parameter. Save the file, and restart Dreamweaver.


At this point, you should be able to double-click an MXML file and have it open in Dreamweaver, complete with syntax highlighting. Now that's all well and good, but how do we compile it? The command-line compiler that comes with the SDK is fine, but typing commands over and over again when I want to build is not my idea of a good time. Wouldn't it be swell if you could compile from Dreamweaver?

Creating a Command to Compile MXML

Yup! Thanks to Dreamweaver's robust extensibility API, it's pretty easy to write a command that will compile the active MXML document and launch the resulting SWF in the stand-alone player. Here's how it's done:

1) Create a new JS file and put the following code in it:

// Compile mxml file from Dreamweaver

function flexCompile(){

var currentDocURL = dreamweaver.getDocumentPath("document");
var i = currentDocURL.lastIndexOf("/");

var parentDirectoryURL = currentDocURL.substring(0,i+1);
var fileNameURL = currentDocURL.substring(0,currentDocURL.lastIndexOf("."));

var parentDirectory = MMNotes.localURLToFilePath(parentDirectoryURL);
var fileName = MMNotes.localURLToFilePath(fileNameURL);

var currentDocFile = MMNotes.localURLToFilePath(currentDocURL);
if(!currentDocFile){
alert("You must have an mxml document open to compile.");
}else{
MM.createProcess('', 'C:\\flex_sdk_2\\bin\\mxmlc.exe "'+currentDocFile+'" -output "'+fileName+'.swf"', -1, true, parentDirectory ,parentDirectory+'flex-compiler-output.txt');
dreamweaver.openWithApp(fileNameURL+'.swf','file:///C:/flex_sdk_2/player/debug/SAFlashPlayer.exe');
}
}

function canAcceptCommand(){
return dreamweaver.getDocumentPath("document").indexOf(".mxml") != -1;
}



2) Create a new HTML file, and put the following code in it:

<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//
dialog">
<HTML>
<HEAD>
<Title>Flex Compile</Title>
<SCRIPT SRC="Flex Compile.js"></SCRIPT>

</HEAD>
<body onLoad="flexCompile()">
</body>
</HTML>

3) Save these to Dreamweaver's "Commands" folder (C:\Program Files\Macromedia\Dreamweaver 8\Configuration\Commands) as Flex Compile.js and Flex Compile.htm, respectively.


4) Restart Dreamweaver. You should now have a new item in the "Commands" menu called "Flex Compile" which will compile the active MXML document with the Flex 2 compiler, launch it in the standalone player, and save a text file of the compiler output.

How It Works

When you click the Flex Compile menu option, Flex Compile.htm is loaded, and its body.onload function is called, which is our flexCompile function. First, a few useful variables are set. We get the file path of the active document using dreamweaver.getDocumentPath("document"), which returns the location of the active document as a URL. Then we can get the URL of the parent directory by taking a substring of the currentDocURL - everything before and including the last "/" character. Now for these to be useful to us, we must convert them to file paths. To do this, we call MMNotes.localURLToFilePath(), which is part of the Design Notes API. This function changes the syntax of the file path from URL syntax ('file:///C:/directory/filename.xxx') to file path syntax ('C:\directory\filename.xxx') .

Next comes the real magic, an undocumented command called MM.createProcess(), which I found at http://www.communitymx.com/blog/index.cfm?newsid=179&blogger=35. This allows us to send a command to the compiler without opening it in a command-line window, and it can also be configured to make Dreamweaver wait while the compiling takes place. Note that in my command, I have hard-coded the path to the compiler. If you want to keep the Flex 2 SDK anywhere other than C:\flex_2_sdk, you will have to update the JS file. Also note that in MM.createProcess, the backslashes have to be escaped.

I have configured this command to put the SWF output in the same directory as the mxml file. MM.createProcess also optionally sends the output of the process to a text file, which I have opted for in this command. It will create a text file called 'flex-compiler-output.txt' in the same directory as your mxml file.

Next, I call dreamweaver.openWithApp to launch the SWF in the standalone player. Again, I have hard-coded the path to the Flex 2 SDK.

The function canAcceptCommand() simply ensures that the command is grayed out unless an MXML document is the active document in Dreamweaver.

Conclusion

I believe this setup has a great deal of potential as a basic Flex 2 workflow. One could easily imagine a more configurable version of the Flex Compile command where you could specify the path for the SWF output, or the path to the Flex 2 SDK. What I was going for with this command was to mimic the functionality of Preview in the Flash IDE, so that as I make edits to the MXML I can easily see the results of my changes. Ultimately, this makes up for the lack of a design view, which is one of the great benefits of Flex Builder.

Since I would prefer to work on my Mac, I am creating a Mac version of this command. It will probably have to rely on a shell script or AppleScript to achieve similar functionality since MM.createProcess (and its friends) do not work on the Mac. There is some promise with the undocumented dw.runAppleScript() command, but it does not appear to work on my MacTel.

On the XML-editing side of things, I will probably explore creating an MXML file template for Dreamweaver, as well as rudimentary code-completion. Thanks to Dreamweaver's robust extensibility, I will be able to efficiently create Flex applications without buying Builder, and learning a lot in the process.

Was this post helpful to you? If so, please consider making a small donation to keep this blog going.

29 Comments:

Anonymous Theo said...

Excellent! This is one of the natural results of what Adobe did by making the SDk and compiler free. I expect to see many efforts like yours being released within the next year. I'd love to see what you can do for Dreamweaver for the Mac. Is the Flash IDE extensible in the same way?

6:39 AM  
Blogger tom said...

Yes, it is! Just Google 'JSFL' or check out 'Extending Flash' in Flash Help. There have been some awesome extensions made for Flash - to give you an idea what is possible, check out gProject.

6:56 AM  
Anonymous Anonymous said...

Thanks for this great tip !
Your command saved me a 1000 bucks ;)

10:18 AM  
Blogger tom said...

Update: I have added a workable solution for the Mac! Check it out here.

12:08 PM  
Anonymous Jamie said...

I found your post searching "mxml dreamweaver 8" on Google. Thanks for figuring this out and sharing!

11:28 AM  
Anonymous Anonymous said...

Fantastic! Now all we need is for someone to generate code hinting for MXML in DW, and we're all set!

11:03 AM  
Anonymous Anonymous said...

This is nice. However, the MM.CreateProcess section of the Flex Compile.js file uses flex_sdk_2 vice flex_2_sdk so please be aware of this when deciding where to install your flex 2 sdk. When I worked through the instructions (which were well written) I got a compile error for the SAFlashPlayer.exe (file couldn't be found). Once I modified the Flex Compile.js file to point to the correct directory, the compiler worked perfectly. Now, if there was a way to use the flex components to visually design an application I'd be well on my way to taking advantage of Flex without the $750.00 price tag!!!

4:09 AM  
Blogger Andrew said...

Thanks for putting this together its a great! I have a problem though:
I tried using the MMDocumentTypes.xml but DeamWeaver pops up with a dialog saying the doc types "...will not be added because it uses a file extension that is already associated with a prior Document Type" (this is with alll of the doc types in this file I think). I even tried manually editing the file but its the same. It seems that even if you don't change anything within this file (Save as) it throws up the pop-ups.

2:44 AM  
Blogger arieljake said...

Thank you very much. I appreciate this blog entry.

11:56 PM  
Anonymous red01 said...

This is a kick ass solution...


Thanks

4:23 PM  
Anonymous annerose said...

These comments have been invaluable to me as is this whole site. I thank you for your comment.

11:51 AM  
Blogger Vijay said...

Hi,

This does not work, i tried all the steps, but I get an error saying Flex Compile is not defined....

5:41 AM  
Blogger tom said...

At what point do you get the error? When you click the Flex Compile menu item?

7:31 AM  
Blogger leblancmeneses said...

since adobe is creating plug-ins for eclipse will dreamweaver be discontinued in the near future?

9:36 PM  
Blogger Home Insurance said...

Finally found really useful information on the topic, thank you.

If interested, can visit Pennsylvania Home Owner Insurance - Interesting fact blog.

1:34 PM  
Anonymous Gareth said...

Hi. Sounds great in theory, but for some reason Flash Player just comes up with a blank page, though the mxml has been compiled and i can open the resulting swf manually - any ideas?

here's my modified Flex Compile.js:

// Compile mxml file from Dreamweaver

function flexCompile(){

var currentDocURL = dreamweaver.getDocumentPath("document");
var i = currentDocURL.lastIndexOf("/");

var parentDirectoryURL = currentDocURL.substring(0,i+1);
var fileNameURL = currentDocURL.substring(0,currentDocURL.lastIndexOf("."));

var parentDirectory = MMNotes.localURLToFilePath(parentDirectoryURL);
var fileName = MMNotes.localURLToFilePath(fileNameURL);

var currentDocFile = MMNotes.localURLToFilePath(currentDocURL);
if(!currentDocFile){
alert("You must have an mxml document open to compile.");
}else{
MM.createProcess('', 'C:\\Program Files\\Adobe\\Flex Builder 2\\Flex SDK 2\\bin\\mxmlc.exe "'+currentDocFile+'" -output "'+fileName+'.swf"', -1, true, parentDirectory ,parentDirectory+'flex-compiler-output.txt');
dreamweaver.openWithApp(fileNameURL+'.swf','file:///C:/Program Files/Adobe/Flex Builder 2/player/debug/SAFlashPlayer.exe');
}
}

function canAcceptCommand(){
return dreamweaver.getDocumentPath("document").indexOf(".mxml") != -1;
}

is there a problem here 'cos my Flash player isn't at the same path as the Flex SDK? i presume not as it launches the player but doesn't open the swf, hence my confusion

any help greatly appreciated

thanks,

Gareth

5:43 AM  
Blogger Vijay said...

Hi,

I use Dreamweaver MX 2004 and I have Flex 2.0 SDK installed. I followed your blog entry, If I double click, the MXML opens DM2004 but it doesn't open the file - I get a message saying "Failed to Open Document". But when I force it to open using File Open, it opens up with syntax highlighting.

What is the problem ?, also the Flex Complie option doesn't work, I believe it could be as you had hardcoded the Flex Complier ??

Please attend to this problem...many thanks for bringing up this excellent post.

2:09 AM  
Anonymous london builder said...

My question is, do you think Adobe will continue with Flex? I'm uncertain - so i'm worried about throwing myself any deeper into it.

11:53 AM  
Anonymous lipitor said...

companies marketing mineral makeups and also get the best bargains in mineral makeup you can imagine,
find aout how to consolidate your students loans or just how to lower your actual rates.,
looking for breast enlargements? in Rochester,
homeopathy for eczema learn about it.,
Allergies, information about lipitor,
save big with great bargains in mineral makeup,

change edition interviewing motivational people preparing second
,

interviewing motivational people preparing second time
,

interviewing people motivational preparing for a second time
,

black mold exposure
,

black mold exposure symptoms
,

black mold symptoms of exposure
,

free job interview questions
,

free job interview answers
,

interview answers to get a job
,

lookfor hair styles for fine thin hair
,

search hair styles for fine thin hair
,

hair styles for fine thin hair
,

beach resort in the philippines
,

great beach resort in the philippines
,

luxury beach resort in the philippines
,
iron garden gates, here,
iron garden gates,
wrought iron garden gates
, here
,
wrought iron garden gates
,
You: The Owner's Manual: An Insider's Guide to the Body That Will Make You Healthier and Younger
,
eat eating mindless more than think we we why
,


texturizer,
texturizers here,
black hair texturizer,
find aout how care curly hair,
find about how to care curly hair,
care curly hair,
lipitor rash,
lipitor reactions,
new house ventura california,
the house new houston tx,
new house washington dc,
new house pa philadelphia,
san antonio tx house new,
house new pa philadelphia,
new house washington dc,
new house ventura california,
the house new houston tx,
house new san antonio tx,
the house new houston tx, that you are looking for,
new house ventura california, you need to buy,
new house washington dc,
house new pa philadelphia,
new house san antonio tx,

hair surgery transplant
,

air filter allergy
,

refurbished dell laptop computers
,

hair surgery transplant
,

air filter allergy
,

refurbished dell laptop computers
,

hair surgery transplant
,

air filter allergy
,

refurbished dell laptop computers
,

chocolate esophagus heartburn study
,

chocolate esophagus heartburn study
be informed,

digestion healing healthy heartburn natural preventing way
,

digestion healing healthy heartburn natural preventing way
,
sew skirts, 16simple styles you can make!,
sew what skirts 16 simple styles you,
rebates and discounts on sunsetter awnings,
sunsetter awnings discounts and rebates,
discount on sunsetter awnings


truck and bus tires 12r 22.5, get the best price,
tires truck and bus 12r 22.5 best price,
tires truck bus tires12r 22.5 best price,
plush car seat strap covers,
car seat strap covers,plush,
car seat strap, plush covers,
oscoda voip phone systems, the best!,
oscoda voip the phone system,
oscoda voip phone systems,
exterior iron gates,
oriental wrought iron gates,
powder coated iron garden fencing,

3:40 AM  
Anonymous iron garden gates said...

wrought iron garden gates,
your nest iron garden gates, here,

2:53 PM  
Blogger Nadhilah said...

Hi,

I use Dreamweaver MX 2004 and I have Flex 2.0 SDK installed. I followed your blog entry, If I double click, the MXML doesn't open the file. I must using the open with but - I get a message saying "Failed to Open Document". But when I force it to open using File Open, it opens up with syntax highlighting.

What is the problem ? also the flex compile cannot compile it.

3:41 AM  
Blogger thanh99 said...

システムキッチン
東京競馬場
アンドロペニス
まつげエクステンション
夫浮気
妻 浮気
ストーカー
体験入店 銀座
結婚式 二次会
大人のおもちゃ
エステ 表参道
英会話 教材
税理士 東京
電報
結婚式
まつげエクステ
カップリングパーティー
浮気調査
興信所
興信所
高収入 アルバイト
高収入 アルバイト
競馬
電話占い
カップリングパーティー
ウェルカムボード
株式情報

8:08 AM  
Blogger thanh99 said...

This comment has been removed by the author.

8:09 AM  
Blogger Vu said...

This comment has been removed by the author.

9:17 AM  
Blogger bollywood girls said...

i like your blog ....

10:18 PM  
Anonymous web design company,web designer,web design India,website design,web design said...

Thanks u r information

10:18 PM  
Blogger hjkl said...

This momentousdecree warcraft leveling came as a great beacon light wow lvl of hope to millions of negroslaves wow power level who had been seared power leveling in the flames of power leveling withering wrath of the lich king power leveling injustice.wrath of the lich king power leveling it came as a WOTLK Power Leveling joyous daybreak to end the long WOTLK Power Leveling night ofcaptivity.WOTLK Power Leveling but one hundred years wlk power leveling later, we must face aoc gold the tragic fact thatthe age of conan power leveling negro is still not free. aoc power leveling one hundred years later,age of conan power leveling the lifeof the negro ffxi gil is still sadly crippled by the final fantasy xi gil manacles ofsegregation guild wars gold and the chains of discrimination. one hundred yearslater, maplestory mesos the negro lives on a lonely island of poverty in themidst of a vast ocean of material prosperity.dog clothes one hundred yearslater, the negro is still languishing in the corners of americansociety and finds himself an exile in his own land.

12:49 AM  
Blogger Benetton said...

牙醫,植牙,假牙|矯正|牙周病,牙醫診所植牙,紋身,刺青,TATTOO,皮膚科,痘痘,雷射脈衝光除斑,洗包包|洗鞋子|清洗包包,中醫,糖尿病,飛梭雷射,肉毒桿菌,玻尿酸,痘痘,脈衝光,醫美,醫學美容,seo,關鍵字行銷,關鍵字自然排序,網路行銷,關鍵字自然排序,關鍵字行銷seo,關鍵字廣告,網路行銷,seo,關鍵字行銷,關鍵字廣告,關鍵字,自然排序,部落格行銷,網路行銷,網路爆紅

5:39 AM  
Blogger as said...

I like your blog. Thank you. They are really great . Ermunterung ++ .
Some new style Puma Speed is in fashion this year.
chaussure puma is Puma shoes in french . Many Franzose like seach “chaussure sport” by the internet when they need buy the Puma Shoes Or nike max shoes. The information age is really convenient .




By the way ,the nike max ltd is really good NIKE air shoes ,don’t forget buy the puma mens shoes and nike air max ltd by the internet when you need them . Do you know Nike Air Shoes is a best Air Shoes . another kinds of Nike shoes is better . For example , Nike Air Rift is good and Cheap Nike Shoes .the nike shox shoes is fitting to running.



Spring is coming, Do you think this season is not for Ugg Boots? maybe yes .but this season is best time that can buy the cheap ugg boots. Many sellers are selling discounted. Do not miss . Please view my fc2 blog and hair straighteners blog.
.thank you .


I like orange converse shoes ,I like to buy the cheap converse shoes by the internet shop . the puma shoes and the adidas shoes (or addidas shoes) are more on internet shop .i can buy the cheap nike shoes and cheap puma shoes online. It’s really convenient.
Many persons more like Puma basket shoes than nike air rift shoes . the Puma Cat shoes is a kind of Cheap Puma Shoes .
If you want to buy the Cheap Nike Air shoes ,you can buy them online. They are same as the Nike Air shoes authorized shop. Very high-caliber Air shoes and puma cat shoes . the cheap puma shoes as same as other.




polo shirts

ralph lauren polo shirts
chaussure puma

chaussure sport



chaussures puma

puma CAT

ed hardy clothing

ed hardy clothes



ed hardy womens

ed hardy sunglasses

ugg boots

cheap ugg boots

12:51 AM  

Post a Comment

Links to this post:

Create a Link

<< Home