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