BaNg@taobao

Just Do It!

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  20 Posts :: -1 Stories :: 202 Comments :: 0 Trackbacks
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





posted on 2009-06-17 17:24 Always BaNg. 阅读(1537) 评论(3)  编辑  收藏 所属分类: Java

Feedback

# re: Hello, dreamweaver! (Part 1) 2009-06-17 23:31 王大力
期待进一步的讲解!  回复  更多评论
  

# re: Hello, dreamweaver! (Part 1) 2009-06-18 14:28 Chris.Cui
要是支持freemarker等那种DW不支持的语法高亮及可视化显示的extension将会大受欢迎,期待。。。  回复  更多评论
  

# re: Hello, dreamweaver! (Part 1) 2012-09-05 10:58 linkpark
请问如何在dreamweaver中实现js和c++的交互呢?谢谢!!!  回复  更多评论
  


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


网站导航: