dreamweaver相信好多人都用過，但開發(fā)extension的估計不多。當(dāng)初幫別人做一個cms的extension demo，在網(wǎng)上找資料，發(fā)現(xiàn)一個簡單的例子都被買3.xx歐，內(nèi)心極其的憤怒，怎么能這么沒有共享精神呢？這促使我寫個入門介紹，幫那些有深入dreamweaver想法的人開個頭。萬事開頭難！
本篇文章就是來簡單介紹一下dreamweaver extension，帶你入門，至于精通，還依賴你的更多探索。
1 what is dreamweaver extension? (dreamweaver以后簡稱dw)
dw extesion是dw提供的一種擴(kuò)展機(jī)制，也就是給一個機(jī)會讓你Hook到dw內(nèi)部去，比如它的菜單，對話框，操作等。DW extension存在很多年了，但一直沒什么人用，那是因為設(shè)計這個dw extension的人絕對沒有經(jīng)過深思熟慮，它是在大牌軟件里我見過最垃圾的一種擴(kuò)展機(jī)制，大家主要是喜歡他的html editor和render。
有心人如果打開過dw安裝目錄，就會發(fā)現(xiàn)很多的.js和.html文件，那些不是什么用戶手冊，他是dw構(gòu)成的基礎(chǔ)。整個Dreamweaver就是建立在這種extension基礎(chǔ)上的，但因為它對外暴露的東西很少，所以dw內(nèi)部的人用的滾瓜爛熟，你卻摸不著頭腦。狹義來說，extension = HTML+JS。
2 第一個extension: hello world
有些東西講來講去，不如一個動手來得實在?，F(xiàn)假設(shè)你用的dw版本是mx2004--cs4。
在繼續(xù)例子之前，首先要有一個觸發(fā)點(diǎn)，也就是菜單。定位到dw安裝目錄，打開configuration/menus/menu.xml,在倒數(shù)第二個menubar元素的最后一個節(jié)點(diǎn)，如下圖：
<menuitem mmstring:name="menus/DWMenu_Help_About" command="dw.showAboutBox()" enabled="true" platform="win" id="DWMenu_Help_About" />
</menu>
<!-- 新加的菜單 -->
<menu name="Test" id="LIFESTING_TEST">
<menuitem name="Hello" file="Menus/Test/helloworld.htm" id="lifesting_hello_world"/>
</menu>
</menubar>
<!-- Repository view context menu. Shares strings with the VCS menu of the local file view. -->
<menubar id="DWRepositorySiteFilesContext">
<menu mmstring:name="menus/DWContext_RepositorySite" id="DWContext_RepositorySite">
....略
</menu>
</menubar>
</menus>
這個配置就是告訴dw在主菜單加一個菜單test，里面包含一個菜單項hello，它包含一個文件屬性helloworld.htm，這代表extension的界面。在menu.xml所在的目錄下建一個test目錄，里面放一個如下的helloworld.htm
<!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog">
<HTML>
<HEAD>
<Title>Hello World</Title>
<SCRIPT SRC="hw.js"></SCRIPT>
</HEAD>
<BODY>
<form name="fm1">
<input type="text" value="Say Hi" name="btn_hi">
</form>
</BODY>
</HTML>
第一行我們沒見過很正常，稍后會講到。往下包含一個script hw.js，在dw extension中，javascript就是定義extension的行為，在helloworld.htm所在目錄建一個如下的 hw.js
function canAcceptCommand()
{
return true;
}
function commandButtons(){
return new Array("Ok", "sayHi()", "Cancel", "window.close()");
}
function sayHi()
{
window.alert("Hi, "+document.fm1.btn_hi.value);
}
非常簡單的javascript，alert一個"hi,XXX".
重新啟動 dw，就會看到效果了。dw extension跟網(wǎng)頁編程一樣簡單，對吧？但為什么可以這樣？
3 extension的內(nèi)部機(jī)制
extension由htm+js構(gòu)成，但dreamweaver真真切切是一個windows native程序，所以這中間必定有一個東西來把這兩者連接起來。在dw中，對應(yīng)html和js的連接器分別是DW Render和Javascript Interpreter。 當(dāng)你完成一個網(wǎng)頁，使用DW預(yù)覽的時候，DW Render就把HTML render成為了window，就如瀏覽器所做的那樣，這種render沒法定制，是DW的核心機(jī)密:)。但DW卻使用了一個開源的Javascript interpreter：
SpiderMonkey，它負(fù)責(zé)解析如hw.js所寫的javascript。它對dw extension開發(fā)者來說，是公開的，我們通過編寫spidermonkey擴(kuò)展，可以完成 標(biāo)準(zhǔn)html和js干不了的事情。事實上，dw就是這么干的，比如調(diào)用jvm，訪問網(wǎng)絡(luò)，打開外部程序等，基本都放在dw安裝目錄下的configuration/jsextensions/*.dll里面
Part2 將會通過改造hw.js里面的sayHi，彈出的對話框?qū)嬖V 當(dāng)前系統(tǒng)內(nèi)存的大小，如
function sayHi()
{
var mem_size = localSystem.getMemorySize();
window.alert("Size is "+mem_size);
}
localSystem與window不同的是一個是標(biāo)準(zhǔn)對象，一個是我們自己加進(jìn)去的對象。
進(jìn)入PART2