在上一单元中我们初步了解了如何在DreamWeaver中插入行为,如何设置各项动作。在这一讲中,我们将继续学习各动作、事件的用法,以及手工定制自己的行为的方法。由于我们的教程是针对高级用户的,所以在下面的课程中会出现大量的编程语言的知识,如果你觉得你的编程语言基本功不扎实,我还是建议你现在拿出JavaScript语法手册,一边读教程,一边复习JS的语法吧。
我们知道,DreamWeaver的最大特点就是让不懂编程的人能轻易应用行为并使得网页具有交互能力。经验丰富的网页设计师也可以自行设计制做自己的行为供别人或自己日后调用。对于前者,你会得到同别人分享工作成果的乐趣,而对于后者,通常是因为我们要插入一个经常要用到的一段公共代码,但这段代码的参数又需要经常改变,所以自行设计行为就成为必要了。
DreamWeaver支持至少两种SCRIPT语言,一种是JavaScript,一种是VBScript。但对于VBScript,不能直接加入到DreamWeaver中,需要通过DOM来完成。所以我们就以能直接应用于DreamWeaver的JavaScript为例来讲解扩展行为的方法。
正如我们以前所讲述的那样,一个完整的行为是由“事件”与“动作”两个部份组成的,比如一个转换图片的动作需要一个OnMouseOver事件来激活,由于事件属于浏览器所解析的范围,所以在我们进行行为的扩充的过程中,只需要利用现有的事件而没有必要再自行编写事件代码。
DreamWeaver的事件是以*.js文件形式存放于DW安装目录/configration/behaviors/actions/下,我们所写的代码也要以.js存盘于此,否则除非事先对DreamWeaver设置,否则无法在DW中直接应用。
为了扩展DreamWeaver的行为,需要先了解一下DreamWeaver的API。正如操作系统中的windows API一样,在应用环境中包含许多与应用环境直接有关的函数,这些函数称为API(Application Programming Interface,应用编程界面。)函数。DreamWeaver包含了八个这样的API函数。他们分别是:applyBehavior()、behaviorFunction()、canAcceptBehavior()、displayHelp()、 deleteBehavior()、identifyBehaviorArguments()、inspectBehavior()、 windowDimensions()。熟悉可视化编程的读者可能对Windows API的声明比较熟悉,但在Dreamweaver中声明这些函数显得很简单,不需要过多考虑数据类型等因素。
||||||applyBehavior()函数是一个必需的函数,每个行为都需要通过使用它来完成一定的任务。
通过它来插入用户页面一个由behaviorFunction()调用的事件柄(event handler)。本函数也可以单独完成一个任务,但必需依赖于页面中某个的物件,这个物件是用来激活事件的载体。
behaviorFunction()用来向页面的HTML头中插入以$#@60;Script language = javascript $#@62; $#@60; / script $#@62; 所包围的代码。
canAcceptBehavior()用来确定所引用的动作是否适合于选中的HTML代码域,并指定对于本动作的缺省事件值。本函数还可以确定当前页面中是否存在特定的文件(比如Shockwave动画)。
displayHelp() 如果引用了本函数,在参数对话框中将出现“帮助”按钮,当用户点击此按钮时函数执行。
deleteBehavior() 用来删除一个己经存在的行为。如想删除一个由applyBehavior()产生的行为。
identifyBehaviorArguments() 用此来改变包含于行为之中的参数值。比如你将本页另存为其它页面并保存于其它目录中时,此函数会保证行为中的参数值(比如URL)随之而改变。
inspectBehavior() 用来检测用户页面中己经存在的相同行为,并将其参数值赋给当前的参数设置对话框。如果页面中没有相同行为,那么将用缺省值赋给当前的参数设置对话框。
windowDimensions() 用来指定参数对话框的显示模式,如果不使用本函数,窗口将自动生成。因此除非你需要定义一个大于640 pixels * 480 pixels的对话框,否则不必使用本函数。
||||||为了让大家能够完整理解行为的编制方法,我们引用了一个DreamWeaver附带的例程来说明如何自行编写行为,以下是插入新行为后页面的完整代码:
$#@60;html$#@62;
$#@60;head$#@62;
$#@60;title$#@62;浏览器类型测定$#@60;/title$#@62;
$#@60;meta http-equiv="Content-Type" content="text/html"$#@62;
$#@60;script language="JavaScript"$#@62;
//所有的函数声明都会被插入到HTML页面的$#@60;head$#@62;$#@60;/head$#@62;之间
function WhichBrowserIs(netscapeURL,explorerURL) {
if (navigator.appName == "Netscape") {
if (netscapeURL) location.href = netscapeURL;
}else if (navigator.appName == "Microsoft Internet Explorer") {
if (explorerURL) location.href = explorerURL;
}
}
//定义一个新函数:WhichBrowserIs() ,函数可以检测IE与netscape两种浏览器名称。
//*****以下开始的是API调用部分*****
function canAcceptBehavior(){
return true;
}
// 函数返回值为即将插入到HTML头的函数名。
function behaviorFunction(){
return "WhichBrowserIs";
}
//建立一个函数处理事件柄。
function applyBehavior() {
var nsURL = escape(document.theForm.nsURL.value);
var ieURL = escape(document.theForm.ieURL.value);
if (nsURL && ieURL) {
return "WhichBrowserIs(\"" + nsURL + "\",\"" + ieURL + "\")";
}else{
return "Please enter URLs in both fields."
}
}
||||||//自事件柄所指函数中提取出变量并将其赋值给对象
function inspectBehavior(fnCall){
var argArray = getTokens(fnCall, "()",");
var nsURL = unescape(argArray[1]);
var ieURL = unescape(argArray[2]);
document.theForm.nsURL.value = nsURL;
document.theForm.ieURL.value = ieURL;
}
//*****下面开始的是自定义函数部分*****
// 使第一个文字框具有焦点性质,即光标定位于第一个文字框中。
function initializeUI(){
document.theForm.nsURL.focus();
document.theForm.nsURL.select();
}
// 使浏览器跳转到己定义的页面去。
function browseForURLs(whichButton){
var theURL = dreamweaver.browseForFileURL();
if (whichButton == "nsURL"){
document.theForm.nsURL.value = theURL;
}else{
document.theForm.ieURL.value = theURL;
}
}
//*****结束定义*****
$#@60;/script$#@62;
$#@60;/head$#@62;
$#@60;body$#@62;
$#@60;form method="post" action="" name="theForm"$#@62;
$#@60;table border="0" cellpadding="8"$#@62;
$#@60;tr$#@62;
$#@60;td nowrap="nowrap"$#@62; 如果浏览器为Netscape Navigator,则转入到地址:$#@60;br$#@62;
$#@60;input type="text" name="nsURL" size="50" value=""$#@62;
$#@60;input type="button" name="nsBrowse" value="Browse..."
onClick="browseForURLs("nsURL")"$#@62;$#@60;/td$#@62;
$#@60;/tr$#@62;
$#@60;tr$#@62;
$#@60;td nowrap="nowrap"$#@62; 如果浏览器为Internet Explorer,则转入地址:$#@60;br$#@62;
$#@60;input type="text" name="ieURL" size="50" value=""$#@62;
$#@60;input type="button" name="ieBrowse" value="Browse..."
onClick="browseForURLs("ieURL")"$#@62;$#@60;/td$#@62;
$#@60;/tr$#@62;
$#@60;/table$#@62;
$#@60;/form$#@62;
$#@60;/body$#@62;
$#@60;/html$#@62;
我们将其中的JavaScript语句存成*.js文件存放于Actions目录即可。如果你想在Behavior inspector的下拉菜单中看到你定义的行为的身影,还得需要修改DreamWeaver的界面文件。其文件存在于Configuration\menu目录下,为XML文件写成。如果你通过网上下载了第三方的行为代码,就可以方便地进行安装,在此我们不做更多的说明。