Hello, dreamweaver! (Part 1)

Hello, dreamweaver! (Part 1)

dreamweaver相信好多人都用过，但开发extension的估计不多。当初帮别人做一个cms的extension demo，在网上找资料，发现一个简单的例子都被买3.xx欧，内心极其的愤怒，怎么能这么没有共享精神呢？这促使我写个入门介绍，帮那些有深入dreamweaver想法的人开个头。万事开头难！

本篇文章就是来简单介绍一下dreamweaver extension，带你入门，至于精通，还依赖你的更多探索。

1 what is  dreamweaver extension? (dreamweaver以后简称dw)

dw extesion是dw提供的一种扩展机制，也就是给一个机会让你Hook到dw内部去，比如它的菜单，对话框，操作等。DW extension存在很多年了，但一直没什么人用，那是因为设计这个dw extension的人绝对没有经过深思熟虑，它是在大牌软件里我见过最垃圾的一种扩展机制，大家主要是喜欢他的html editor和render。

有心人如果打开过dw安装目录，就会发现很多的.js和.html文件，那些不是什么用户手册，他是dw构成的基础。整个Dreamweaver就是建立在这种extension基础上的，但因为它对外暴露的东西很少，所以dw内部的人用的滚瓜烂熟，你却摸不着头脑。狭义来说，extension = HTML+JS。

2 第一个extension: hello world

有些东西讲来讲去，不如一个动手来得实在。现假设你用的dw版本是mx2004--cs4。

在继续例子之前，首先要有一个触发点，也就是菜单。定位到dw安装目录，打开configuration/menus/menu.xml,在倒数第二个menubar元素的最后一个节点，如下图：

       

         < 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跟网页编程一样简单，对吧？但为什么可以这样？



3 extension的内部机制

extension由htm+js构成，但dreamweaver真真切切是一个windows native程序，所以这中间必定有一个东西来把这两者连接起来。在dw中，对应html和js的连接器分别是DW Render和Javascript Interpreter。 当你完成一个网页，使用DW预览的时候，DW Render就把HTML render成为了window，就如浏览器所做的那样，这种render没法定制，是DW的核心机密:)。但DW却使用了一个开源的Javascript interpreter： SpiderMonkey，它负责解析如hw.js所写的javascript。它对dw extension开发者来说，是公开的，我们通过编写spidermonkey扩展，可以完成 标准html和js干不了的事情。事实上，dw就是这么干的，比如调用jvm，访问网络，打开外部程序等，基本都放在dw安装目录下的configuration/jsextensions/*.dll里面

Part2 将会通过改造hw.js里面的sayHi，弹出的对话框将会告诉 当前系统内存的大小，如

function  sayHi()
{
     var  mem_size  =  localSystem.getMemorySize();
    window.alert( " Size is  " + mem_size);
}

localSystem与window不同的是一个是标准对象，一个是我们自己加进去的对象。

进入PART2