廉颇老矣,尚能饭否

java:从技术到管理

常用链接

统计

最新评论

Hello, dreamweaver! (Part 1) [转载,使用dreamweaver8测试(改动了一处后成功,用红色显示)]

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里面


柳德才
13691193654
18942949207
QQ:422157370
liudecai_zan@126.com
湖北-武汉-江夏-庙山

posted on 2009-06-18 15:47 liudecai_zan@126.com 阅读(312) 评论(0)  编辑  收藏 所属分类: 软件开发工程师


只有注册用户登录后才能发表评论。


网站导航: